HTML5: The Apps, the Frameworks, the Controversy
Download as PPTX, PDF1 like2,939 views
This document discusses HTML5, mobile web, native, and hybrid mobile app development platforms. It provides an overview of each approach and compares them. Key frameworks for HTML5 development are also reviewed, including jQuery Mobile, Sencha Touch, and Trigger.io. Considerations for choosing a platform like supporting multiple devices and iteration speed are examined. The document aims to help make sense of the different mobile development options.
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to HTML5: The Apps, the Frameworks, the Controversy (20)
Ad
More from Apigee | Google Cloud (20)
Recently uploaded (20)
HTML5: The Apps, the Frameworks, the Controversy
- 1. HTML5 the Apps, the Frameworks, the Controversy Amir Nathoo @amirnathoo Tim Anglade Apigee @timanglade @apigee
- 5. @apigee @triggercorp @timanglade @amirnathoo Tim Anglade Amir Nathoo
- 7. We’re here to talk Mobile!
- 8. The Number of Mobile Users is on the rise
- 9. The Number of Mobile Devices is exploding too
- 10. … And Revenue seems to be following
- 11. Innovative new business models – check out Lyft!
- 12. New platforms Windows Phone Tizen … and of course the web…
- 14. Source: https://blog.trigger.io “Making sense of mobile development platforms”
- 15. Explaining the terminology of Client-side Platforms: HTML5, Mobile Web, Native, Hybrid?
- 16. What is HTML5? It’s the latest version of the HTML standard Still under development – ‘working draft’ HTML5 adds new features such as: <video>, <audio>, <canvas>, SVG sessionStorage, localStorage, geolocation Most people just mean HTML, CSS and JavaScript when they they say ‘HTML5’ Not necessarily the new features
- 17. Complex topic, but lots of good resources Source: http://diveintohtml5.info
- 18. What is the ‘Mobile Web’? Refers to the mobile-optimized version of the web => so you use HTML4 / HTML5 just like a normal website united.com vs. mobile.united.com
- 19. Reuse code and styles with Responsive Design Source: http://www.treatdigital.com/
- 20. What is a ‘Native’ mobile app? Written using platform-specific languages and SDKs Objective-C for iPhone / iPad Java for Android C# for Windows Phone Distributed in native app stores such as Apple’s App Store (the original one) Google Play (& others for Android) Windows Phone Store Uses advanced device features not available in HTML5 e.g. Contacts, Camera, Filesystem, Payments Push notifications, SMS Native UI elements
- 21. What is a ‘Hybrid’ mobile app? An app that uses advanced device features and can be distributed in native App Stores But is built using a combination of native (platform-specific) and HTML5 languages Most people use a framework to create these Considerations: - Input languages - How much of the UI is native vs HTML5 - Build / test cycle
- 22. Stack Showdown! HTML, JS, CSS Code HTML Frameworks? HTML, JS, CSS Code Browser Plugins Native Code Browser Runtime Native Frameworks Native Frameworks Native Frameworks OS OS OS CPU … Sensors CPU … CPU … Sensors Native Mobile Web Hybrid
- 23. What are the apps?
- 24. Instagram is a native mobile app
- 25. LinkedIn is hybrid…. so is Facebook (yes, still!) Facebook: “For areas within the app where we anticipate making changes more often, we will continue to utilize HTML5 code” Source: http://engineering.linkedin.com/mobile/linkedin-ipad-using-local-storage-snappy-mobile-apps https://www.facebook.com/notes/facebook-engineering/under-the-hood-rebuilding-facebook- for-ios/10151036091753920
- 26. Tumblr is hybrid, but mostly HTML5… Leverages open-source JavaScript libraries mustache.js, spin.js, zepto.js Lots of best practices and new approaches e.g. targeting retina devices in CSS @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* Retina CSS */ } Source: http://zachwill.com/tumblr-ios/
- 27. An hybrid app in practice: Hojoki Same HTML5 codebase for web, mobile web, native (built on http://trigger.io)
- 28. Financial Times’ mobile site is HTML5
- 29. Cut The Rope is Native… But also HTML5! “Surprisingly, we encountered a few areas where the Canvas provides more functionality than does the version of OpenGL ES” “Today, however, JavaScript engines have been highly optimized. With features like just-in-time compilation, JavaScript now can execute at near native speeds.” Source: http://www.cuttherope.ie/dev/
- 30. What are some of the frameworks for HTML5?
- 31. Runtimes vs. Frameworks Runtimes - Phonegap / Apache Cordova, Titanium, Trigger.io Strict-sense frameworks - Help you define the UI (buttons, interactions) - Provide prepared logic to handle clicks, transitions, theming - Provide utility features that ECMAScript doesn’t have (date converters, pretty printing) - Handle cross-device access (to some extent) - Provide a layer of plugins of their own - Frameworks have every different approaches! - Many of them also offer integrated cloud services for data sync, user management, etc.
- 32. Framework approaches: Pure UI Source: http://jquerymobile.com
- 33. Framework approaches: Vertically Integrated Source: http://sencha.com
- 34. Framework approaches: IDE-centric Source: http://tiggzi.com
- 35. So what’s all the controversy about with HTML5?
- 36. Which one should I start with?
- 37. Considerations HTML5 and Hybrid are young and evolving App Store was launched in 2008 Chrome 5 / FF 3.6 released in 2010 Mobile browsers rapidly improving What are the most important characteristics of your app? Are you going to support one or many platforms and in what order? How are you going to iterate your apps after the initial release? What skills does your team have? Can you leverage existing code, libraries and communities?
- 39. http://trigger.io Amir Nathoo [email protected]
- 40. THANK YOU Subscribe to API webcasts at: youtube.com/apigee
- 41. THANK YOU Questions and ideas to: groups.google.com/group/api-craft Contact us: @amirnathoo @triggercorp @timanglade @apigee
Editor's Notes
- #2: Creative Commons Attribution-Share Alike 3.0 United States License