1. HTML5
the Apps, the Frameworks,
the Controversy
Amir Nathoo
@amirnathoo
Tim Anglade Apigee
@timanglade @apigee

2. groups.google.com/group/api-craft

3. youtube.com/apigee

4. slideshare.net/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…

13. Source: kinvey.com/blog

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?

38. Questions from audience?

39. http://trigger.io
Amir Nathoo
amir@trigger.io

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