Caridy PatiñoBartender at Yahoo! Mojito TeamPrincipal Engineer at Yahoo! Search

caridy@yahoo-inc.com@caridy#feecbr

The challenges ofbuilding mobile HTML5 applications

Goal

“to see the big picture”

The Web and the mobile revolution

“The Web is the most hostile software development environment imaginable”

- Douglas Crockford

5 years ago

But the future was looking bright:

- Javascript libraries getting popular- ECMAScript 5 on the making- Chrome Browser on the making

But then few things happened:

and somehow, we ended up here:

@davglass’s lab

“The Mobile Web is even worse today and it is not going to get any better anytime soon.”

today

What path to choose?

Web Applications

Text“A web application is any application that uses a web

browser as a client.”

Text“A web application is any application that uses a web

browser runtime as a client.”

TextA mobile web application is any web application

that implement a highly interactive UIspecifically optimized for mobile devices.

3 types of mobile web applicationsthat you can build today

+

Native Web

WebViews + Local Web App

native wrapper

- Part of hybrid apps- Based on WebViews*- HTML, JS and CSS are bundled with app- Can work offline- Mimic native behavior

+

Native Web

WebViews + Remote Web App

native wrapper

- Part of hybrid apps- Based on WebViews*- HTML, JS and CSS are downloaded over HTTP- Requires network activity- Mimic native behavior

Expect network craziness

Network failures need to be controlled

CSS can also fail when loading web-based apps

http://blog.mobtest.com/2012/05/heres-why-the-facebook-ios-app-is-so-bad-uiwebviews-and-no-nitro/

Initialization needs to be controlled

Browser based apps

pure web

- Pure web apps- Require a browser- HTML, JS and CSS are downloaded over HTTP- Inherit the freedom of the Web- Discoverability is inherited as well

The total mess of mobile web

form factors

RIP

Touch screen saves us fromthose crazy form-factors

The synergy across form factors

http://www.adobe.com/devnet/devices/articles/design_tips_mobile_ria.html

3 years ago

Fragmentation

http://netmarketshare.com/

Fragmentation

Android 4 is set to solvebrowser fragmentationwe will see

Desktop + Mobile form factors

Runtimes

A runtime is a web engine container that can run a web application in a form of HTML, JS and CSS

A mobile browser, a webview and phonegap areexamples of runtimes

Windows 8 has 4 runtimes:

- IE Start Screen Mode (Formerly known as Metro)- IE Desktop Mode- WebView (within Native Windows 8 App)- Native Windows Runtime (Windows Store apps)

https://github.com/yui/yui3/wiki/Windows-8-JavaScript-Runtimes

Runtimes allow us to run the same web appin different contexts

Every runtime has its own characteristics, features and security models

Developing for a single runtime is notlonger an option for most products

Applications will tent to grow organically by adding complexity and new logical pieces

Reusing UI elements and logical piecescould be paramount

Design specs distribution per device

Reusing is the biggest problem of allin a mobile web application

Optimization & Adaptation

Optimization vs Adaptation

Optimization vs Adaptation

Snow Chains to adapt your vehicle

Optimization vs Adaptation

Optimization

Optimization is about customizing the way your app behaves per runtime

It is about producing the right HTML, JS and CSS per runtime

Adaptation

Adaptation is about customizing the UI per screen size, per connection speed, per feature detection, etc.

- Screen size- Orientation- Connection Speed- Memory- etc.

Adapt per:

The Twitter Tale

2010

Twitter launched a new version of the web application that explicitly required javascript

2010

http://twitter.com/?_twitter_noscript=1

Runtime FE Layer CDN API Layer

HTML

Javascript

Content

The problem?The app was sloooowwwww for

a lot of users, specially mobile users.

Less than a year after, Twitter re-architected the infrastructure to get content upfront

Runtime FE Layer CDN API Layer

HTML

Javascript

Content

More Content

How can we create web applications that are flexible enough?

Use the same language everywhere!and that language is JavaScript.

Javascript everywhere:

Final notes...

Build mobile applications on top of platforms designed primarily for

mobile products

The web it’s all about control,your control

write once, run everywhere, no so easy!

Customize per runtime & context,adapt per form factor & feature detection

Build for the future,don't get locked into a platform.

Obrigado @caridy