Your SlideShare is downloading. ×
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,710
views

Published on

Published in: Technology

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,710
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×