CROSS-PLATFORM
MOBILE
DEVELOPMENT
LOOKING BEYOND THE HTML5
HYPE

OVERVIEW
• Why cross-platform?
• HTML5 – the hype!
• Framework selection
• PropertyCross
• Conclusions
– In easily digested bullet point form

WHY CROSS-
PLATFORM?

• iPhone – Objective-C
• BlackBerry – Java + BlackBerry APIs
• Android – Java + Android APIs
• Windows Phone – C# / Silverlight

SMARTPHONE SALES
Million
units
shipped

THE HYPE
“HTML5 takes the internet by
storm”
BBC News (Technology), 8 May 2012
“New York Times and Burberry join the
HTML5 brigade”
The Guardian Technology Blog, 3 Oct 2012

… AND SOME ‘ANTI’-
HYPE
“Why HTML5 Is Still Not Ready For
Prime Time”
Business Insider, 7 Nov 2012
“The biggest mistake we made as a
company was betting too much on
HTML5 as opposed to native”
Mark Zuckerberg
“Why LinkedIn dumped HTML5 & went
native for its mobile app”
Kiran Prasad

GARTNER HYPE CYCLE
Gartner's 2012 Hype Cycle for Emerging Technologies

WHAT IS HTML5?

HTML5
• Canvas and video tags
• Local storage
• Web Workers – background tasks
• Web Sockets
• CSS3 – layout, opacity, gradient fill …
• And more ...

HTML5 FOR MOBILE
Smartphone sales exceed those of PCs for first time, Feb 2012

NATIVE vs. HTML5 vs.
HYBRID
• Native
• HTML5
– Accessed via the browser
– Some phone features not accessible
– App-like experience is possible (but not via app-store)
• Hybrid
– HTML5 content rendered within a browser control
– Distributed through app-stores / marketplaces
– Best of both worlds

HTML /
JavaScript
Application
Phone
APIs
Phone
APIs
Android
iPhone
HYBRID APPS

HTML5 IS MANY THINGS

WHY LIMIT YOURSELF TO
JUST HTML5?

SELECTING A
FRAMEWORK
• Usual principles apply
– Cost
– Maturity
– Support / community
• What is the end-user experience?
• What is the developer experience like?
• How much code is shared?
• Which platforms do I care about?
… now go and start testing

Helping you select a cross-platform mobile framework
… inspired by TodoMVC

• A realistic application
• Create apps that are ready for app-store
distribution
• Matches the native look and feel for each
platform
• Well designed / structured

demo time …

NATIVE APPLICATION
http://www.youtube.com/watch?v=RJXtfk43SCM

JQUERY MOBILE
• Popular framework for creating mobile
websites
• Added Knockout, RequireJS, jquery-metro-
theme
• PhoneGap for ‘wrapping’

JQUERY MOBILE
http://www.youtube.com/watch?v=h0TVvKPLBR4

NATIVE TRANSITIONS
http://www.youtube.com/watch?v=rrkG4swoNAE

JQUERYMOBILE
TRANSITIONS
http://www.youtube.com/watch?v=lSKLtyZ2vfc

JQUERY MOBILE –
THOUGHTS
• Some UX compromises
• Android uses iOS theme
– Android and iOS share the same code
• Windows Phone experience was very
was poor
• Some friction between frameworks
• Tooling was ‘standard’ web approach

SENCHA TOUCH
• Popular commercial framework
• Built using Ext JS
• An end-to-end solution
• Creators of Fastbook

SENCHA TOUCH
http://www.youtube.com/watch?v=w2sJ84-qtl4

SENCHA TOUCH -
THOUGHTS
• ‘Thick’ UI abstraction – no HTML
• Android and iOS use the same theme
• Almost declarative feel to the
application code
• Impressive user experience
• Steep learning curve
• No Windows Phone support

• Commercial framework from Appcelerator
• Creates a native UI
• Written in JavaScript that runs in an interpreter
• Titanium Studio IDE
• Relies on native build tools
• Abstraction layer hides Android / iOS differences
TITANIUM

TITANIUM
http://www.youtube.com/watch?v=aZTCEapQZj4

TITANIUM - THOUGHTS
• Native UI gives the best UX
• Why JavaScript?
• Friction due to the ‘thick stack’
• Leaky abstraction
• Application was developed quickly
• No Windows Phone support

XAMARIN
• C# and the .NET framework
• Very thin abstraction layer
• MonoTouch and MonoDevelop
• Native UI

XAMARIN
http://www.youtube.com/watch?v=MRhAQVWS7FY

XAMARIN - THOUGHTS
• Matches the native experience exactly
• More code – yet strongly typed
• Lacks a UI abstraction layer
• Planning is required to optimise code
sharing
– You could easily end up with zero code
shared

AND THE REST …
• Adobe Air
• jQTouch
• RhoMobile
• KendoUI
• mgwt
• Intel App Framework
• DXTREME
• Enyo
• Emy

CONCLUSIONS
• HTML5 is a viable technology
• HTML5 is a route of compromise
• HTML5 is not the only cross-platform
technology

CHOOSING A
FRAMEWORK
• Determine what is important for your
application
– Cost? UX? Which platforms?
• Use PropertyCross to narrow the selection
• Prototype your application
• Evaluate
– Code sharing
– Developer experience
– User experience

CROSS-PLATFORM
MOBILE
DEVELOPMENT
LOOKING BEYOND THE HTML5
HYPE
Colin Eberhardt - @ColinEberhardt
Scott Logic, ShinobiControls