HTML5 Mobile App Development

Size: px

Start display at page:

Download "HTML5 Mobile App Development"

Vernon Jefferson
6 years ago
Views:

1 HTML5 Mobile App Development Carl Stehle Appception, Inc April, 2013

3 Market

4 Mobile App Market August 2010: Research2guidance: 1.7B (2009), 2.2B (1 st half 2010) April 2011: Forrester: 54B (2015 est.) of which 17B for mobile device services Feb 2012: Juniper: 52B (2016 est.) July 2012: Flurry: 5.4B (2011), 8.7B (2012 est). Feb 2013: Gartner: more than 50% mobile apps will be hybrid by 2016 March 2013 MarketResearch.com: 12B (2012), 20B (2013 est.), 63B (2017 est) Note: Apple Revenue: 43B (2009), 157B (2012); App Store / iphone 3G (7/08)

5 aren't Mobile Devices: What are they? Phones Tablets Netbooks Vehicles Wristwatches... Internet-of-Things Others with apps... TVs

6 Apps

7 Mobile App Types Native Web Hybrid Language Platform-specific* HTML5 HTML5 Device access Yes No Yes Offline operation Yes No Yes Network: HTTP[S] Full Restricted* Full Distribution App stores Web App stores Tools Vendor (mostly) Any Any Cost to build High Low Low Platform*: ios (Objective-C), Android (Java, C/C++), WP (C#, VB), BB (Java, C/C++) Restricted*: sandboxed; server CORS for cross-domain

8 Why HTML5 (Web / Hybrid)? HTML is the lingua franca of the web others have tried: Flash/ActionScript, Java Software frameworks & libraries jquery, AngularJS, SproutCore, Ember, Backbone.js, dojo, Foundation, Bootstrap Multi-platform natives have relatively steep learning curve maintenance X #platforms cost

9 ...and Mobile first...but may still need to support desktop / laptop web access Large investment in web apps (client-side) Platform success uncertainty (e.g. BB10, TIZEN) HTML5 skillset availability Web / mobile web network and data integration: HTTP[S], JSON, XML Commonality with Node.js back-end Web browser testable Fast and easy Tools (CDT, WebKit inspector, Firebug) Device access / Offline operation / App store distribution (hybrid apps) Multi-vendor technology push HTML5 (many), WebKit (Google/Apple), Android emulator (Google, Intel)

10 Issues

11 Top Issues for HTML5 Mobile Apps UI Native API access Networking Audio / Video Graphics Tools

12 Top Issues for HTML5 Mobile Apps UI Range of primitives vs. native (layouts, widgets) Look-and-feel vs. native General appearance (incl. platform-specifics) Gestures control Responsiveness Reactivity Rendering (DOM rendering model may not be optimal for dynamic behaviour)

13 Top Issues for HTML5 Mobile Apps Native API access Sensors W3C slow to standardize Offline access localstorage management (volatile) Information stores (e.g. contacts) Other Push Notifications...

14 Top Issues for HTML5 Mobile Apps Networking Limited to HTTP[S] Transaction-based: data overhead, latency, client-initiated Restricted to ports 80/443 Single origin security model (web)

15 Top Issues for HTML5 Mobile Apps Audio / Video Generic cross-platform support Multiple streams Capture

16 Top Issues for HTML5 Mobile Apps Graphics No OpenGL Performance

17 Top Issues for HTML5 Mobile Apps Tools Native: mostly vendor-driven, mature ios / Xcode / Apple Android / Eclipse / Eclipse Foundation Windows Phone / Visual Studio / Microsoft Blackberry 10 / BB 10 SDK / BlackBerry Web: variety for desktop, fewer for mobile Hybrid: fragmented, immature

18 Progress

19 Status of Issues for HTML5 Mobile Apps UI UI primitives Standards (CSS3 flexbox, CSS exclusions and shapes) Technologies (e.g. Adobe CSS regions, custom filters, etc.) Libraries: Bootstrap, jquery Mobile, Sencha Touch, Enyo, Kendo UI, dojox/mobile Native look-and-feel Adapted and tuned for each platform (generally by libraries) Responsiveness Multi-core CPU, larger RAM, GPU Single-page rendering model Local HTML5 (hybrid apps) Design techniques ( tips-and-tricks ) Event libraries (e.g. QuoJS)

20 Status of Issues for HTML5 Mobile Apps Native API access Platform-specific WinRT, TIZEN: JavaScript is first-class citizen BB10: WebWorks API Standards W3C Device Orientation API (orientation, motion) W3C Media Capture and Streams (audio, video) JavaScript-Native bridges (for hybrid) Cordova Appcelerator Titanium MoSync Service vendor-specific (for hybrid) Urban Airship (Push Notification)

21 Status of Issues for HTML5 Mobile Apps Networking Data size: HTTP(s) data compression Ports 80/443 firewall-friendly Access CORS (web) no single-origin sandbox (hybrid) WebSockets Connection-oriented (low overhead) Full-duplex (no longpolls) Streaming (low latency)

22 Status of Issues for HTML5 Mobile Apps Audio / Video audio element (not bgsound or embed) video element standard codecs: mp4, webm, ogg Media API (hybrid / Cordova) WebRTC multi-media streaming videoconferencing peer-to-peer

23 Status of Issues for HTML5 Mobile Apps Graphics GPU canvas element Software libraries Processing.js, Box2D, Impact, famo.us (not all use canvas)

24 Status of Issues for HTML5 Mobile Apps Tools UI design codiqa.com, proto.io, Adobe Edge, Maqetta, Sencha Architect Packagers Adobe Phonegap Build, cisimple Testing appurify, utest, TestFlight IDEs Appception IDE, MobileNation, Mosync, Tiggzi, Titanium, Worklight

25 Apps

26 Nature of App 1. Easy 2. Moderate 3. Difficult

27 Nature of App 1. Easy Examples Social games Network information access or sharing Productivity tools App Features Mildly interactive UI (forms, data entry, simple widgets) Text, static 2D graphics, small images No device / native access Transactional networking Need Any UI library No JavaScript-Native bridge (web) JavaScript framework optional Any device (0-5 yrs., GPU optional) App Type HTML5 mobile web app or HTML5 hybrid app

28 Nature of App 2. Moderate Examples Older arcade-style games Photo sharing Sound/video recording App Features Highly interactive UI (dynamic display, complex widgets) Interactive 2D graphics Some device / native access Real-time networking Need Fast UI library JavaScript-Native bridge (e.g. Cordova) JavaScript framework Graphics library Gesture library (?) Moderate device (0-3 yrs., GPU) App Type HTML5 hybrid app

29 Nature of App 3. Difficult Examples Action games Video editing Server application App Features Interactive 3D graphics High device / native access Intensive computation, rendering Need Lightweight UI library (optimized or custom) JavaScript-Native bridge (e.g. Cordova) + Native plugins Physics engine Platform-specific optimizations Modern device (<2 yrs, multi-core CPU, high RAM, GPU) App Type HTML5 hybrid app

30 Other Considerations Development Environment Desktop Cloud-based Capabilities Cookie-cutter Fully programmable (graphic design, software) Collaboration Individual Team Interoperability Proprietary software libraries OpenSource

31 Summary Mobile consumer app market large and growing Mobile enterprise app market nascent February 2013: IBM doubles investment in mobile technology Device innovation continuing HTML5: issues and some solutions Nature of app drives approach: native, web, hybrid Distribution: app stores (native, hybrid), internet (web) Goals / costs / benefits

32 Further Topics Other issues Browser vs. WebView Server back-ends Limits to HTML5 Legacy support Future trends DART? Firefox OS? Alternatives Code translators Other: LiveCode, Corona

33 Questions / Comments?

Mobile Development June 2015, TEIATH, Greece

Mobile Development June 2015, TEIATH, Greece Presentation Overview 1. Introduction 2. Mobile Application Development 3. Cordova / Phonegap 4. Development Framework 5. Examples 1. INTRODUCTION Introduction