Creative Commons Attribution-Share Alike 3.0 United States License
1. HTML5the Apps, the Frameworks,the ControversyAmir Nathoo@amirnathooTim Anglade Apigee@timanglade @apigee
5. @apigee @triggercorp@timanglade @amirnathooTim Anglade Amir Nathoo
6. We’re here to talk Mobile!
7. The Number of Mobile Users is on the rise
8. The Number of Mobile Devices is exploding too
9. … And Revenue seems to be following
10. Innovative new business models– check out Lyft!
11. New platformsWindows Phone Tizen … and of course the web…
12. Source: kinvey.com/blog
13. Source: https://blog.trigger.io“Making sense of mobile development platforms”
14. Explaining the terminology of Client-side Platforms:HTML5, Mobile Web, Native, Hybrid?
16. Complex topic, but lots of good resources Source: http://diveintohtml5.info
17. 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
18. Reuse code and styles with Responsive Design Source: http://www.treatdigital.com/
19. What is a ‘Native’ mobile app?Written using platform-specific languages and SDKs Objective-C for iPhone / iPad Java for Android C# for Windows PhoneDistributed in native app stores such as Apple’s App Store (the original one) Google Play (& others for Android) Windows Phone StoreUses advanced device features not available in HTML5 e.g. Contacts, Camera, Filesystem, Payments Push notifications, SMS Native UI elements
20. What is a ‘Hybrid’ mobile app?An app that uses advanced device featuresand can be distributed in native App StoresBut is built using a combination of native(platform-specific) and HTML5 languagesMost people use a framework to createtheseConsiderations:- Input languages- How much of the UI is native vs HTML5- Build / test cycle
21. Stack Showdown! HTML, JS, CSS Code HTML Frameworks? HTML, JS, CSS Code Browser Plugins Native Code Browser RuntimeNative Frameworks Native Frameworks Native Frameworks OS OS OSCPU … Sensors CPU … CPU … Sensors Native Mobile Web Hybrid
22. What are the apps?
23. Instagram is a native mobile app
24. 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. An hybrid app in practice: HojokiSame HTML5 codebase for web, mobile web, native (built on http://trigger.io)
27. Financial Times’ mobile site is HTML5
29. What are some of the frameworks for HTML5?
30. Runtimes vs. FrameworksRuntimes- Phonegap / Apache Cordova, Titanium, Trigger.ioStrict-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.
31. Framework approaches: Pure UI Source: http://jquerymobile.com
34. So what’s all the controversy about with HTML5?
35. Which one should I start with?
36. ConsiderationsHTML5 and Hybrid are young and evolving App Store was launched in 2008 Chrome 5 / FF 3.6 released in 2010 Mobile browsers rapidly improvingWhat 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?
37. Questions from audience?
38. http://trigger.io Amir Nathoo email@example.com
39. THANK YOUSubscribe to API webcasts at:youtube.com/apigee
40. THANK YOUQuestions and ideas to:groups.google.com/group/api-craftContact us:@amirnathoo @triggercorp@timanglade @apigee