HTML5 vs Native Apps on mobile devices. Stijn Dekeyser

Transcription

1 HTML5 vs Native Apps on mobile devices Stijn Dekeyser Head of Department Mathematics & Computing Vice Chair QSITE Toowoomba

2 Content of presentation Two parts: HTML5 on mobile devices Beware: technical stuff here! CSC8420 Mobile Systems course

3 Economic Importance [ ] the ranks of computer software engineers, including app writers, increased nearly 8 percent in 2010 to more than a million [ ] software engineers now outnumber farmers and have almost caught up with lawyers [ ] there is debate about how real, and lasting, the rise in app employment might be The ieconomy, David Streitfield, New York Times (17 November 2012) Technology is always destroying jobs and always creating jobs, but in recent years the destruction has been happening faster than the creation, Erik Brynjolfsson, economist and director of the M.I.T. Center for Digital Business (November 2012)

4 What have the pundits been saying lately? Several think HTML5 is a dead duck

5 HTML5 is not the future of apps. While developers dream of write once run everywhere the fragmented support for and limited APIs within HTML5 make this impossible -- Josh Martin (Strategy Analytics), 7/2012

6 Some predict HTML5 will win in the end

7 Development cost Adding ipad compatibility when building an iphone app can add up to 50% to the development costs Ryan Matzner, Mashable (9/2012) Versions Much to the chagrin of developers [ ] the user base for a particular native app is spread across multiple versions. Having an out-of-date web app is virtually impossible. Ryan Matzner (9/2012)

8 Some are sitting on the fence

9 Advanced Fence Sitters choose both For technical as well as other reasons

10 A very business-oriented opinion: Existing business models are protected, differentiation among and within ecosystems remains intact, and consumption continues unabated. The end result is the continued dominance of ios, Android, and increasingly Windows Phone. -- Josh Martin (Strategy Analytics), 7/2012

11 HTML5 on mobile devices HTML5 means: HTML markup language + CSS styling Javascript API Multimedia codecs etc On mobile devices: Most important = offline caching & data storage Browser engine, and JS engine Problems: speed & features

12 What do Native Apps offer that HTML5 apps don t? Performance (won t last forever) Consistent, native UI (can be overcome) Security and reliability Access to (more) hardware, notifications and resources (contacts, calendar ) Great business models for Apple, Google, and Microsoft at the expense of the rest of us: Consumers: limiting choice Developers: painful duplication, commission, arbitrary acceptance process, Native apps are a throwback to the past In the end the most open ecosystem usually wins (crosses fingers!)

13 And the reverse? Code once, run anywhere Don t forget traditional websites! Resolution-independence No need for recompilation, redistribution Build on readily-available skill set

14

15 Native vs whatever What does native mean? Technical definition Compilation vs interpretation bytecode Commercial definition Pragmatic stance

16 Virtual machines and native code Native A native application is comprised of machine code instructions executed directly by the CPU The CPU can be considered as a (real) machine Native apps are created by compiling source code written in a high level language. Non-native A virtual machine executes high level instructions (e.g. JVM executes Java bytecode) A virtual machine is simply another (possibly native) application An interpreter can be considered as a VM that executes source language statements.

17 Engines Rendering Engines (on mobile) Fully dominated by WebKit Open source, originally Linux-based project WebCore + JavascriptCore Javascript Engines JavascriptCore SquirrelFish Nitro Rhino (FF, Java) V8 (Google) Chakra (MS IE) JIT to bytecode, or to machine code (Nitro, V8) Nitro only accessible by Safari, and signed Web Apps

18 Frameworks HTML5 frameworks Sencha, jqtouch, jquerymobile, DHTMLX Touch, Sencha uses JS to create DOM elements Hybrid frameworks Packaging WebView apps PhoneGap, AppMobi Performace issues, limited functionality Specialized API-approach Appcelerator Limited platforms support

19 Pros and Cons of Hybrid Apps Pros Code reuse Javascript (vs Objective-C or Java, or ) Can be developed / debugged in (desktop) browser Cons Performace Limited functionality Added complexity (more layers) Recompilation and re-distribution necessary (as with Native apps)

20 Half-Time Summary HTML5 (for mobile apps) is (still) not there yet Performance, security, hardware In the end (21 December?) HTML5 will almost certainly (and hopefully) win over native apps In the meantime, consider Hybrid apps for anything except high-framerate animation

21 Part II: CSC8420 Mobile Systems Developing Apps for Mobile devices can be done in a number of ways: programming in the device's native language creating a web app using an intermediate approach (hybrid app) In the CSC8420 course we have chosen for the third option.

22 Hybrid App development There are roughly two approaches, both represented by significant open source projects: PhoneGap. This allows developers to program in Javascript resulting in hybrid apps that are neither fully native, nor fully web-based. Appcelerator. Also allows programming in Javascript but resulting in almost-native apps with access to the device API.

23 Appcelerator vs PhoneGap Advantages More programming-oriented (closer to native app development) No DOM etc Better performance More mobile features supported Disadvantages Fewer target OS s supported Parts of the API are separate for ios vs Android Supporting multiple resolutions is just as difficult as with native apps Buggy. Incomplete documentation. Development tools. Adds another layer of complexity

24 Native vs -- Revisited Java source code javascript app.js HTML + javascript HTML5 incl js Objective C source code Compiler Titanium IDE PhoneGap Javascript JIT compiler Compiler Java bytecode Bytecode incl Rhino + app.js code Bytecode using WebView javascript bytecode Machine code JVM executable JVM executable JVM executable Javascript VM OS OS OS OS OS ios Android Titanium on Android PhoneGap on Android MISSING!(?)

25 Not really HTML5: need to use WinJS API Good for some, Bad for others

26 Course development environment Linux Virtual Machine (debian): Appcelerator Titanium Mobile Custom scripts Android development environment FlairBuilder (dynamic GUI mock-ups) Documentation Versions are frozen Android emulator extremely slow

27 Course content theory : GUIs (esp. mobile) Hardware OSs (esp. mobile) App development Choice between Appcelerator and native (for Android)

28 Assessment A1: simple app (early hurdle) A2: hardware and OS research (public) A3: app proposal (public) A4: GUI (public + peer review) A5: full app + docs (closed) + video (open)

29 Enrolment 2011 (experimental) Capped at 10. One external. All completed : 5 ONC, 9 EXT 4 withdrew (Assignment 1 hurdle) 12 completed

30 Outcomes Video recordings of two apps developed this past semester

31 Student Feedback On development environment I am doing this course for the first time and I found the current CSC840 development environment absolutely perfect. the Titanium mobile version installed still has a lot of issues, it might get better in the future. As the Linux virtual machine and Titanium inside it uses a lot of memory, it takes a long time to start the Android emulator every time. A very powerful computer is necessary.

32 Student Feedback Overall This course is beyond my expectations. I am totally satisfied from the course. I really appreciated the choice to code with the android SDK instead of the titanium environment. Fantastic course, I've really enjoyed it, and all the guidance and information provided has been top-notch.

33 Student Feedback I think this is the first time since starting this course several years ago that I have had contact/discussion over subject content. This subject was a big change. It was hard at first, and really hard reviewing other's work, but the interchange has been very rewarding. Being able to see and be involved in others work is something that is really missing in the Distant Ed area. Although it was a very time consuming course I liked it and wish there were more 'mobile' courses it s been a very exiting course, new stuff. Great course on how to develop your first app. The break up of the assignment greatly assisted in learning and developing the content for the final assignment.