html5: the apps, the frameworks, the controversy
TRANSCRIPT
HTML5the Apps, the Frameworks,the Controversy
Tim Anglade@timanglade
Apigee@apigee
Amir Nathoo@amirnathoo
groups.google.com/group/api-craft
youtube.com/apigee
slideshare.net/apigee
@timangladeTim Anglade
@apigee
@amirnathooAmir Nathoo
@triggercorp
We’re here to talk Mobile!
The Number of Mobile Users is on the rise
The Number of Mobile Devices is exploding too
… And Revenue seems to be following
Innovative new business models– check out Lyft!
New platforms
… and of course the web…
Windows PhoneTizen
Source: kinvey.com/blog
Source: https://blog.trigger.io “Making sense of mobile development platforms”
Explaining the terminology of Client-side Platforms:HTML5, Mobile Web, Native, Hybrid?
What is HTML5?
It’s the latest version of the HTML standardStill under development – ‘working draft’
HTML5 adds new features such as:<video>, <audio>, <canvas>, SVGsessionStorage, localStorage, geolocation
Most people just mean HTML, CSS and JavaScript when they they say ‘HTML5’
Not necessarily the new features
Source: http://diveintohtml5.info
Complex topic, but lots of good resources
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 mobile.united.comvs.
Reuse code and styles with Responsive Design
Source: http://www.treatdigital.com/
What is a ‘Native’ mobile app?
Written using platform-specific languages and SDKsObjective-C for iPhone / iPadJava for AndroidC# for Windows Phone
Distributed in native app stores such asApple’s App Store (the original one)Google Play (& others for Android)Windows Phone Store
Uses advanced device features not available in HTML5e.g. Contacts, Camera, Filesystem, PaymentsPush notifications, SMSNative UI elements
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
CPU … Sensors
Stack Showdown!
OS
Native Frameworks
Native Code
CPU …
OS
Native Frameworks
Browser
CPU … Sensors
OS
Native Frameworks
Runtime
HTML, JS, CSS Code Browser Plugins
HTML Frameworks?
HTML, JS, CSS Code
Native Mobile Web Hybrid
What are the apps?
Instagram is a native mobile app
LinkedIn is hybrid…. so is Facebook (yes, still!)
Source: http://engineering.linkedin.com/mobile/linkedin-ipad-using-local-storage-snappy-mobile-appshttps://www.facebook.com/notes/facebook-engineering/under-the-hood-rebuilding-facebook-for-ios/10151036091753920
Facebook:
“For areas within the app where we anticipate making changes more often, we will continue to utilize HTML5 code”
Tumblr is hybrid, but mostly HTML5…
Source: http://zachwill.com/tumblr-ios/
Leverages open-source JavaScript librariesmustache.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 */}
An hybrid app in practice: Hojoki
Same HTML5 codebase for web, mobile web, native (built on http://trigger.io)
Financial Times’ mobile site is HTML5
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/
What are some of the frameworks for HTML5?
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.
Framework approaches: Vertically Integrated
Source: http://sencha.com
So what’s all the controversy about with HTML5?
Which one should I start with?
Considerations
HTML5 and Hybrid are young and evolvingApp Store was launched in 2008Chrome 5 / FF 3.6 released in 2010Mobile 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?
Questions from audience?
THANK YOUSubscribe to API webcasts at:
youtube.com/apigee
THANK YOUQuestions and ideas to:
groups.google.com/group/api-craft
Contact us:
@amirnathoo @triggercorp
@timanglade @apigee