html5 mobile app developmentfiles.meetup.com/1285270/mobile_html5.pdf · mobile app market august...

HTML5 Mobile App Development

Carl StehleAppception, Inc.carl@appception.com650.938.8046

April, 2013

Market

Mobile App MarketAugust 2010:Research2guidance: 1.7B (2009), 2.2B (1st 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 2013MarketResearch.com: 12B (2012), 20B (2013 est.), 63B (2017 est)

Note: Apple Revenue: 43B (2009), 157B (2012); App Store / iPhone 3G (7/08)

Mobile Devices: What are they?PhonesTabletsNetbooksVehiclesWristwatches...Internet-of-Things

Others with apps...TVs

aren't

Apps

Mobile App Types

Platform*: iOS (Objective-C), Android (Java, C/C++), WP (C#, VB), BB (Java, C/C++)Restricted*: sandboxed; server CORS for cross-domain

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

Why HTML5 (Web / Hybrid)?

HTML is the lingua franca of the webothers have tried: Flash/ActionScript, Java

Software frameworks & librariesjQuery, AngularJS, SproutCore, Ember, Backbone.js, dojo, Foundation, Bootstrap

Multi-platformnatives have relatively steep learning curvemaintenance X #platformscost

...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 testableFast and easyTools (CDT, WebKit inspector, Firebug)

Device access / Offline operation / App store distribution (hybrid apps)

Multi-vendor technology pushHTML5 (many), WebKit (Google/Apple), Android emulator (Google, Intel)

Issues

Top Issues for HTML5 Mobile Apps

UI

Native API access

Networking

Audio / Video

Graphics

Tools

Top Issues for HTML5 Mobile Apps

UI

Range of primitives vs. native (layouts, widgets)

Look-and-feel vs. nativeGeneral appearance (incl. platform-specifics)Gestures control

ResponsivenessReactivityRendering (DOM rendering model may not be optimal for dynamic behaviour)

Top Issues for HTML5 Mobile Apps

Native API access

SensorsW3C slow to standardize

Offline accesslocalstorage management (volatile)Information stores (e.g. contacts)

OtherPush Notifications...

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)

Top Issues for HTML5 Mobile Apps

Audio / Video

Generic cross-platform support

Multiple streams

Capture

Top Issues for HTML5 Mobile Apps

Graphics

No OpenGL

Performance

Top Issues for HTML5 Mobile Apps

Tools

Native: mostly vendor-driven, matureiOS / Xcode / AppleAndroid / Eclipse / Eclipse FoundationWindows Phone / Visual Studio / MicrosoftBlackberry 10 / BB 10 SDK / BlackBerry

Web: variety for desktop, fewer for mobile

Hybrid: fragmented, immature

Progress

Status of Issues for HTML5 Mobile Apps

UI

UI primitivesStandards (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-feelAdapted and tuned for each platform (generally by libraries)

ResponsivenessMulti-core CPU, larger RAM, GPUSingle-page rendering modelLocal HTML5 (hybrid apps)Design techniques (“tips-and-tricks”)Event libraries (e.g. QuoJS)

Status of Issues for HTML5 Mobile Apps

Native API access

Platform-specificWinRT, TIZEN: JavaScript is first-class citizenBB10: WebWorks API

StandardsW3C Device Orientation API (orientation, motion)W3C Media Capture and Streams (audio, video)

JavaScript-Native bridges (for hybrid)CordovaAppcelerator TitaniumMoSync

Service vendor-specific (for hybrid)Urban Airship (Push Notification)

Status of Issues for HTML5 Mobile Apps

Networking

Data size: HTTP(s) data compression

Ports 80/443 firewall-friendly

AccessCORS (web)no single-origin sandbox (hybrid)

WebSocketsConnection-oriented (low overhead)Full-duplex (no longpolls)Streaming (low latency)

Status of Issues for HTML5 Mobile Apps

Audio / Video

audio element (not bgsound or embed)

video elementstandard codecs: mp4, webm, ogg

Media API (hybrid / Cordova)

WebRTCmulti-media streamingvideoconferencingpeer-to-peer

Status of Issues for HTML5 Mobile Apps

Graphics

GPU

canvas element

Software libraries Processing.js, Box2D, Impact, famo.us (not all use canvas)

Status of Issues for HTML5 Mobile Apps

Tools

UI designcodiqa.com, proto.io, Adobe Edge, Maqetta, Sencha Architect

PackagersAdobe Phonegap Build, cisimple

Testingappurify, uTest, TestFlight

IDEsAppception IDE, MobileNation, Mosync, Tiggzi, Titanium, Worklight

Apps

Nature of App

1. Easy

2. Moderate

3. Difficult

Nature of App1. Easy

ExamplesSocial gamesNetwork information access or sharingProductivity tools

App FeaturesMildly interactive UI (forms, data entry, simple widgets)Text, static 2D graphics, small imagesNo device / native accessTransactional networking

NeedAny UI libraryNo JavaScript-Native bridge (web)JavaScript framework optionalAny device (0-5 yrs., GPU optional)

App TypeHTML5 mobile web app or HTML5 hybrid app

Nature of App2. Moderate

ExamplesOlder arcade-style gamesPhoto sharingSound/video recording

App FeaturesHighly interactive UI (dynamic display, complex widgets)Interactive 2D graphicsSome device / native accessReal-time networking

NeedFast UI libraryJavaScript-Native bridge (e.g. Cordova)JavaScript frameworkGraphics libraryGesture library (?)Moderate device (0-3 yrs., GPU)

App TypeHTML5 hybrid app

Nature of App3. Difficult

ExamplesAction gamesVideo editingServer application

App FeaturesInteractive 3D graphicsHigh device / native accessIntensive computation, rendering

NeedLightweight UI library (optimized or custom)JavaScript-Native bridge (e.g. Cordova) + Native pluginsPhysics enginePlatform-specific optimizationsModern device (<2 yrs, multi-core CPU, high RAM, GPU)

App TypeHTML5 hybrid app

Other Considerations

Development EnvironmentDesktopCloud-based

CapabilitiesCookie-cutterFully programmable (graphic design, software)

CollaborationIndividualTeam

InteroperabilityProprietary software librariesOpenSource

Summary

Mobile consumer app market large and growing

Mobile enterprise app market nascentFebruary 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

Further Topics

Other issuesBrowser vs. WebViewServer back-ends

Limits to HTML5Legacy support

Future trendsDART?Firefox OS?

AlternativesCode translatorsOther: LiveCode, Corona

Questions / Comments?