The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife

Caridy PatiñoBartender at Yahoo! Mojito TeamPrincipal Engineer at Yahoo! Searchcaridy@yahoo-inc.com@caridy#feecbr

The challenges ofbuilding mobile HTML5 applications

Goal“to see the big picture”

The Web and the mobile revolution

5 ye ars a go“The Web is the most hostile softwaredevelopment environment imaginable” - Douglas Crockford

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

toda y “The Mobile Web is even worse today andit is not going to get any better anytime soon.”

What path to choose?

Web Applications

“A web application is any application that uses a web browser as a client.”

“A web application is any application that uses a web browser runtime as a client.”

A mobile web application is any web application that implement a highly interactive UI speciﬁcally optimized for mobile devices.

3 types of mobile web applications that you can build today

WebViews + Local Web App +nativ Native Web e wr appe r

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

WebViews + Remote Web App +nativ Native Web e wr appe r

- 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

Initialization needs to be controlledhttp://blog.mobtest.com/2012/05/heres-why-the-facebook-ios-app-is-so-bad-uiwebviews-and-no-nitro/

Browser based appspure 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

RIPform factors

Touch screen saves us from those crazy form-factors

The synergy across form factors

Fragmentation3 ye ars a go http://www.adobe.com/devnet/devices/articles/design_tips_mobile_ria.html

Fragmentation http://netmarketshare.com/

Android 4 is set to solve browser fragmentationwe w i ll se e

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 are examples 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 app in 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 organicallyby adding complexity and new logical pieces

Reusing UI elements and logical pieces could be paramount

Design specs distribution per device

Reusing is the biggest problem of all in a mobile web application

Optimization & 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 theUI per screen size, per connection speed, per feature detection, etc.

Adapt per:- Screen size- Orientation- Connection Speed- Memory- etc.

The Twitter Tale

201 0 Twitter launched a new version of the webapplication that explicitly required javascript

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

HTMLJavascriptContent Runtime FE Layer CDN API Layer

The problem? The app was sloooowwwww fora lot of users, specially mobile users.

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

HTML Content JavascriptMore Content Runtime FE Layer CDN API Layer

How can we create web applications that are ﬂexible enough?

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

Javascript everywhere:

Final notes...

Build mobile applications on topof 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,dont get locked into a platform.

Obrigado @caridy

http://www.fellyph.com.br	744
http://hsmaker.com	5
http://feeds.feedburner.com	2
https://si0.twimg.com	1

The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife

by Caridy Patino on Dec 07, 2012

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 752

Statistics

The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife Presentation Transcript