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 softwaredev...
But the future was looking bright:- Javascript libraries getting popular- ECMAScript 5 on the making- Chrome Browser on th...
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 any...
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   specifically optimized for mobi...
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 offline- 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 nat...
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-a...
Browser based appspure       web
- Pure web apps- Require a browser- HTML, JS and CSS are downloaded over HTTP- Inherit the freedom of the Web- Discoverabi...
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...
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
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
201                                                  0 Twitter launched a new version of the webapplication that explicitl...
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 flexible 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
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
Upcoming SlideShare
Loading in …5
×

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

2,045 views

Published on

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,045
On SlideShare
0
From Embeds
0
Number of Embeds
941
Actions
Shares
0
Downloads
10
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Caridy PatiñoBartender at Yahoo! Mojito TeamPrincipal Engineer at Yahoo! Searchcaridy@yahoo-inc.com@caridy#feecbr
  2. 2. The challenges ofbuilding mobile HTML5 applications
  3. 3. Goal“to see the big picture”
  4. 4. The Web and the mobile revolution
  5. 5. 5 ye ars a go“The Web is the most hostile softwaredevelopment environment imaginable” - Douglas Crockford
  6. 6. But the future was looking bright:- Javascript libraries getting popular- ECMAScript 5 on the making- Chrome Browser on the making
  7. 7. But then few things happened:
  8. 8. and somehow, we ended up here:
  9. 9. @davglass’s lab
  10. 10. toda y “The Mobile Web is even worse today andit is not going to get any better anytime soon.”
  11. 11. What path to choose?
  12. 12. Web Applications
  13. 13. “A web application is any application that uses a web browser as a client.”
  14. 14. “A web application is any application that uses a web browser runtime as a client.”
  15. 15. A mobile web application is any web application that implement a highly interactive UI specifically optimized for mobile devices.
  16. 16. 3 types of mobile web applications that you can build today
  17. 17. WebViews + Local Web App +nativ Native Web e wr appe r
  18. 18. - Part of hybrid apps- Based on WebViews*- HTML, JS and CSS are bundled with app- Can work offline- Mimic native behavior
  19. 19. WebViews + Remote Web App +nativ Native Web e wr appe r
  20. 20. - Part of hybrid apps- Based on WebViews*- HTML, JS and CSS are downloaded over HTTP- Requires network activity- Mimic native behavior
  21. 21. Expect network craziness
  22. 22. Network failures need to be controlled
  23. 23. CSS can also fail when loading web-based apps
  24. 24. Initialization needs to be controlledhttp://blog.mobtest.com/2012/05/heres-why-the-facebook-ios-app-is-so-bad-uiwebviews-and-no-nitro/
  25. 25. Browser based appspure web
  26. 26. - 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
  27. 27. The total mess of mobile web
  28. 28. RIPform factors
  29. 29. Touch screen saves us from those crazy form-factors
  30. 30. The synergy across form factors
  31. 31. Fragmentation3 ye ars a go http://www.adobe.com/devnet/devices/articles/design_tips_mobile_ria.html
  32. 32. Fragmentation http://netmarketshare.com/
  33. 33. Android 4 is set to solve browser fragmentationwe w i ll se e
  34. 34. Desktop + Mobile form factors
  35. 35. Runtimes
  36. 36. A runtime is a web engine container that can run a web application in a form of HTML, JS and CSS
  37. 37. A mobile browser, a webview and phonegap are examples of runtimes
  38. 38. 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
  39. 39. Runtimes allow us to run the same web app in different contexts
  40. 40. Every runtime has its own characteristics, features and security models
  41. 41. Developing for a single runtime is notlonger an option for most products
  42. 42. Applications will tent to grow organicallyby adding complexity and new logical pieces
  43. 43. Reusing UI elements and logical pieces could be paramount
  44. 44. Design specs distribution per device
  45. 45. Reusing is the biggest problem of all in a mobile web application
  46. 46. Optimization & Adaptation
  47. 47. Optimization vs Adaptation
  48. 48. Optimization vs Adaptation
  49. 49. Snow Chains to adapt your vehicle
  50. 50. Optimization vs Adaptation
  51. 51. Optimization
  52. 52. Optimization is about customizing the way your app behaves per runtime
  53. 53. It is about producing the right HTML, JS and CSS per runtime
  54. 54. Adaptation
  55. 55. Adaptation is about customizing theUI per screen size, per connection speed, per feature detection, etc.
  56. 56. Adapt per:- Screen size- Orientation- Connection Speed- Memory- etc.
  57. 57. The Twitter Tale
  58. 58. 201 0
  59. 59. 201 0 Twitter launched a new version of the webapplication that explicitly required javascript
  60. 60. http://twitter.com/?_twitter_noscript=1
  61. 61. HTMLJavascriptContent Runtime FE Layer CDN API Layer
  62. 62. The problem? The app was sloooowwwww fora lot of users, specially mobile users.
  63. 63. Less than a year after, Twitter re-architected the infrastructure to get content upfront
  64. 64. HTML Content JavascriptMore Content Runtime FE Layer CDN API Layer
  65. 65. How can we create web applications that are flexible enough?
  66. 66. Use the same language everywhere! and that language is JavaScript.
  67. 67. Javascript everywhere:
  68. 68. Final notes...
  69. 69. Build mobile applications on topof platforms designed primarily for mobile products
  70. 70. The web it’s all about control, your control
  71. 71. write once, run everywhere, no so easy!
  72. 72. Customize per runtime & context,adapt per form factor & feature detection
  73. 73. Build for the future,dont get locked into a platform.
  74. 74. Obrigado @caridy

×