Your SlideShare is downloading. ×

Cross Platform Mobile Development - Looking beyond the HTML5 Hype

2,318
views

Published on

The fragmented smartphone market is a very real challenge for mobile application developers. In order to reach end users you have to create applications that will run on a range of platforms. Creating …

The fragmented smartphone market is a very real challenge for mobile application developers. In order to reach end users you have to create applications that will run on a range of platforms. Creating a native version of your application for each platform is often not an option, due to cost constraints. As a result, developers are looking towards cross-platform solutions, such as HTML5, in order to increase the reach of their applications. However, many have genuine concerns about HTML5, which has been much-hyped. With the biggest concern being around visuals - can it really deliver a first-class user experience?

Backed by practical examples and demonstrations on a range of devices, this talk will take a practical look at the options available for cross-platform development, which includes not just HTML5 but also technologies such as Titanium, Xamarin and Adobe AIR.

This talk will take a critical look at the developer tooling, code sharing, and most importantly end-user experience that can be achieved by a number of popular frameworks, allowing you to make a more informed choice.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,318
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • + Corporate issues
  • App-cache / offline storage
  • … now go away and test all these frameworks!
  • + Highlight differences compared to a native UI+ Android is a second class citizen+ WP version is terrible!
  • + Titanium IDE+ (leaky) abstraction layer for UI code
  • + JavaScript compiled into native code+ Titanium IDE+ (leaky) abstraction layer for UI code
  • + Highlight differences compared to a native UI+ Android is a second class citizen+ WP version is terrible!
  • + Highlight differences compared to a native UI+ Android is a second class citizen+ WP version is terrible!
  • Transcript

    • 1. CROSS-PLATFORMMOBILE DEVELOPMENT LOOKING BEYOND THE HTML5 HYPE Colin Eberhardt - @ColinEberhardt Scott Logic, ShinobiControls
    • 2. OVERVIEW• Why cross-platform?• HTML5 – the hype!• What is HTML5? – and how can it be used for mobile apps?• Framework selection• PropertyCross• Conclusions – In easily digested bullet point form
    • 3. WHY CROSS-PLATFORM?
    • 4. Mosaic Chrome Windows Flash Firefox WWW Win8 IE Silverlight 1980 1990 2000 2010Desktop Windows iPhone Phone Laptop BlackBerry iPad Netbook Android
    • 5. • iPhone – Objective-C• BlackBerry – Java + BlackBerry APIs• Android – Java + Android APIs• Windows Phone – C# / Silverlight
    • 6. SMARTPHONE SALES
    • 7. 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
    • 8. … AND MORE HYPE“Finally HTML5 matches and beats Native” Steve Newcomb, DeveloperWeek, 2 hours ago!
    • 9. … 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
    • 10. GARTNER HYPE CYCLE Gartners 2012 Hype Cycle for Emerging Technologies
    • 11. WHAT IS HTML5?
    • 12. HTML5• Canvas and video tags• Local storage• Web Workers – background tasks• Web Sockets• CSS3 – layout, opacity, gradient fill …• And more ...
    • 13. HTML51. A universal acceptance that browsers will host apps2. A standard process to ensure that those apps a. Will be easier to write b. Will have access to more functionality “That’s an awful lot of wills – is there nothing now?”
    • 14. HTML5 FOR MOBILESmartphone sales exceed those of PCs for first time, Feb 2012
    • 15. 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 (or worst) of both worlds
    • 16. HYBRID APPS Android Phone APIs HTML /JavaScriptApplication iPhone Phone APIs
    • 17. HTML5 IS MANY THINGS
    • 18. WHY LIMIT YOURSELF TO JUST HTML5?
    • 19. 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
    • 20. PropertyCrossHelping you select a cross-platform mobile framework … inspired by TodoMVC
    • 21. PropertyCross• A realistic application• Creates apps that are ready for app-store distribution• Matches the native look and feel for each platform• Well designed / structured
    • 22. demo time …
    • 23. NATIVE APPLICATION Framework example contributed by Colin Eberhardt
    • 24. JQUERY MOBILE• Popular framework for creating mobile websites• Added Knockout, RequireJS, jquery-metro- theme• PhoneGap for ‘wrapping’
    • 25. JQUERY MOBILE Framework example contributed by Chris Price Colin Eberhardt
    • 26. NATIVE TRANSITIONS
    • 27. JQUERYMOBILE TRANSITIONS
    • 28. JQUERY MOBILE – THOUGHTS• Some UX compromises• Android uses iOS theme• Windows Phone experience was very was poor• Some friction between frameworks• Tooling was ‘standard’ web approach
    • 29. SENCHA TOUCH• Popular commercial framework• Built using Ext JS• An end-to-end solution• Creators of Fastbook
    • 30. SENCHA TOUCH Framework example contributed by Joel Smith Mark Rhodes
    • 31. 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
    • 32. TITANIUM• 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
    • 33. TITANIUM Framework example contributed by Chris Price
    • 34. 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
    • 35. XAMARIN• C# and the .NET framework• Very thin abstraction layer• MonoTouch and MonoDevelop• Native UI
    • 36. XAMARIN Framework example contributed by Sam Hogarth Colin Eberhardt
    • 37. 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
    • 38. AND THE REST …• Adobe Air• jQTouch• RhoMobile• DXTREME• trigger.io• MGWT• Qt• KendoUI
    • 39. CONCLUSIONS• HTML5 is a viable technology• HTML5 is a route of compromise• HTML5 is not the only cross-platform technology
    • 40. 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, UX
    • 41. CROSS-PLATFORMMOBILE DEVELOPMENT LOOKING BEYOND THE HTML5 HYPE Colin Eberhardt - @ColinEberhardt Scott Logic, ShinobiControls