the challenges of building mobile html5 applications - feec brazil 2012 - recife
DESCRIPTION
TRANSCRIPT
![Page 1: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/1.jpg)
![Page 2: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/2.jpg)
Caridy PatiñoBartender at Yahoo! Mojito TeamPrincipal Engineer at Yahoo! Search
[email protected]@caridy#feecbr
![Page 3: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/3.jpg)
![Page 4: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/4.jpg)
The challenges ofbuilding mobile HTML5 applications
![Page 5: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/5.jpg)
Goal
“to see the big picture”
![Page 6: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/6.jpg)
The Web and the mobile revolution
![Page 7: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/7.jpg)
“The Web is the most hostile software development environment imaginable”
- Douglas Crockford
5 years ago
![Page 8: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/8.jpg)
But the future was looking bright:
- Javascript libraries getting popular- ECMAScript 5 on the making- Chrome Browser on the making
![Page 9: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/9.jpg)
But then few things happened:
![Page 10: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/10.jpg)
![Page 11: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/11.jpg)
![Page 12: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/12.jpg)
and somehow, we ended up here:
![Page 13: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/13.jpg)
@davglass’s lab
![Page 14: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/14.jpg)
“The Mobile Web is even worse today and it is not going to get any better anytime soon.”
today
![Page 15: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/15.jpg)
What path to choose?
![Page 16: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/16.jpg)
Web Applications
![Page 17: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/17.jpg)
Text“A web application is any application that uses a web
browser as a client.”
![Page 18: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/18.jpg)
Text“A web application is any application that uses a web
browser runtime as a client.”
![Page 19: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/19.jpg)
TextA mobile web application is any web application
that implement a highly interactive UIspecifically optimized for mobile devices.
![Page 20: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/20.jpg)
3 types of mobile web applicationsthat you can build today
![Page 21: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/21.jpg)
+
Native Web
WebViews + Local Web App
native wrapper
![Page 22: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/22.jpg)
- Part of hybrid apps- Based on WebViews*- HTML, JS and CSS are bundled with app- Can work offline- Mimic native behavior
![Page 23: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/23.jpg)
+
Native Web
WebViews + Remote Web App
native wrapper
![Page 24: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/24.jpg)
- Part of hybrid apps- Based on WebViews*- HTML, JS and CSS are downloaded over HTTP- Requires network activity- Mimic native behavior
![Page 25: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/25.jpg)
Expect network craziness
![Page 26: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/26.jpg)
Network failures need to be controlled
![Page 27: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/27.jpg)
CSS can also fail when loading web-based apps
![Page 28: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/28.jpg)
http://blog.mobtest.com/2012/05/heres-why-the-facebook-ios-app-is-so-bad-uiwebviews-and-no-nitro/
Initialization needs to be controlled
![Page 29: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/29.jpg)
Browser based apps
pure web
![Page 30: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/30.jpg)
- 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
![Page 31: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/31.jpg)
The total mess of mobile web
![Page 32: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/32.jpg)
form factors
RIP
![Page 33: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/33.jpg)
Touch screen saves us fromthose crazy form-factors
![Page 34: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/34.jpg)
The synergy across form factors
![Page 35: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/35.jpg)
http://www.adobe.com/devnet/devices/articles/design_tips_mobile_ria.html
3 years ago
Fragmentation
![Page 37: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/37.jpg)
Android 4 is set to solvebrowser fragmentationwe will see
![Page 38: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/38.jpg)
Desktop + Mobile form factors
![Page 39: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/39.jpg)
Runtimes
![Page 40: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/40.jpg)
A runtime is a web engine container that can run a web application in a form of HTML, JS and CSS
![Page 41: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/41.jpg)
A mobile browser, a webview and phonegap areexamples of runtimes
![Page 42: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/42.jpg)
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
![Page 43: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/43.jpg)
Runtimes allow us to run the same web appin different contexts
![Page 44: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/44.jpg)
Every runtime has its own characteristics, features and security models
![Page 45: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/45.jpg)
Developing for a single runtime is notlonger an option for most products
![Page 46: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/46.jpg)
Applications will tent to grow organically by adding complexity and new logical pieces
![Page 47: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/47.jpg)
![Page 48: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/48.jpg)
Reusing UI elements and logical piecescould be paramount
![Page 49: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/49.jpg)
![Page 50: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/50.jpg)
Design specs distribution per device
![Page 51: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/51.jpg)
Reusing is the biggest problem of allin a mobile web application
![Page 52: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/52.jpg)
![Page 53: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/53.jpg)
Optimization & Adaptation
![Page 54: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/54.jpg)
Optimization vs Adaptation
![Page 55: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/55.jpg)
Optimization vs Adaptation
![Page 56: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/56.jpg)
Snow Chains to adapt your vehicle
![Page 57: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/57.jpg)
Optimization vs Adaptation
![Page 58: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/58.jpg)
Optimization
![Page 59: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/59.jpg)
Optimization is about customizing the way your app behaves per runtime
![Page 60: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/60.jpg)
It is about producing the right HTML, JS and CSS per runtime
![Page 61: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/61.jpg)
Adaptation
![Page 62: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/62.jpg)
Adaptation is about customizing the UI per screen size, per connection speed, per feature detection, etc.
![Page 63: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/63.jpg)
- Screen size- Orientation- Connection Speed- Memory- etc.
Adapt per:
![Page 64: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/64.jpg)
The Twitter Tale
![Page 65: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/65.jpg)
2010
![Page 66: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/66.jpg)
Twitter launched a new version of the web application that explicitly required javascript
2010
![Page 67: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/67.jpg)
http://twitter.com/?_twitter_noscript=1
![Page 68: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/68.jpg)
Runtime FE Layer CDN API Layer
HTML
Javascript
Content
![Page 69: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/69.jpg)
The problem?The app was sloooowwwww for
a lot of users, specially mobile users.
![Page 70: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/70.jpg)
Less than a year after, Twitter re-architected the infrastructure to get content upfront
![Page 71: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/71.jpg)
Runtime FE Layer CDN API Layer
HTML
Javascript
Content
More Content
![Page 72: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/72.jpg)
How can we create web applications that are flexible enough?
![Page 73: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/73.jpg)
Use the same language everywhere!and that language is JavaScript.
![Page 74: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/74.jpg)
Javascript everywhere:
![Page 75: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/75.jpg)
![Page 76: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/76.jpg)
Final notes...
![Page 77: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/77.jpg)
Build mobile applications on top of platforms designed primarily for
mobile products
![Page 78: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/78.jpg)
The web it’s all about control,your control
![Page 79: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/79.jpg)
write once, run everywhere, no so easy!
![Page 80: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/80.jpg)
Customize per runtime & context,adapt per form factor & feature detection
![Page 81: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/81.jpg)
Build for the future,don't get locked into a platform.
![Page 82: The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife](https://reader033.vdocuments.net/reader033/viewer/2022051609/5478e8bbb4795983098b4637/html5/thumbnails/82.jpg)
Obrigado @caridy