building cross platform mobile web apps

James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

Building Cross-Platform Mobile Web Apps

with

CSSHTML JS

building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );

building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );

2008

We must have aniPhone App!

2009

We must have anAndroid App!

2010

We must have aniPad App!

2011

We must have a...

omfg

PalmMicrosoft

Apple

RIM

AndroidAndroidRIMAppleMicrosoftPalm

Top U.S. Smartphone Platforms,3 Month Average Ending Mar 2011comScore MobiLens 2011

Java

J2ME

Air

C++

C#

Obj-C

JS

RIM

Microsoft

Android

Apple

Nokia

NokiaAppleAndroidMicrosoftRIM

Top EU5 Smartphone Platforms,3 Month Average Ending December 2010comScore MobiLens 2010

Lua

C

Python

C++

C#

Obj-C

J2ME

http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/

...

Java

building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );

Cross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies

The Mobile Web

Documents

Applications

Declarative HTML

Programmatic JS

Thin client

Thick client

One PC

Multiple devices

Sedentary usage

Mobile usage

building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );

A New Mobile App Stack

Javascript

Semantic HTML

CSS Styling & Layout

WebFonts Video Audio Graphics

Worker Parallel

Processing

File SystemsDBs

App Cache

x-AppMessaging

Device Access

Camera

Location

Contacts

SMS

Orientation

Gyro

Server & Services

HTTP

AJAX

Events

Sockets

SSL

More...

Rich Media & StylingFull Resource Access

Parallel ProcessingInter-App Communication

Full O!ine Capability COMPLETE MODERN APP PLATFORM

building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );

building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );

WebKit FOEs

HTML5 SupportIE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb

@font-faceCanvasHTML5 Audio & Videorgba(), hsla()border-image:border-radius:box-shadow:text-shadow:opacity:Multiple backgroundsFlexible Box ModelCSS AnimationsCSS ColumnsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS TransitionsGeolocation APIlocal/sessionStorageSVG/SVG ClippingSMILInline SVGDrag and DrophashchangeX-window MessagingHistory ManagementapplicationCacheWeb SocketsWeb WorkersWeb SQL DatabaseWebGLIndexedDB

Stay on top of diversityCan I Use?http://caniuse.com

Modernizrhttp://modernizr.com

DeviceAtlashttp://deviceatlas.com

ApplicationsDocuments

Programmatic DOMDeclarative HTML

APIsThemes

ArgumentsURLs

SynchronizationRequest/Response

Thick clientThin client

jQTouch

UI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-based browsers

http://jQTouch.com

jQTouch

Scripts & stylesheets

CSS classes for semantics & config

jQuery Mobile (alpha)

UI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPad) Android BlackBerry v5+ Symbian v5, MeeGo, webOS

http://jquerymobile.com

jQuery Mobile

data-* for semantics& config

Scripts & stylesheet

Sencha Touch

Self-contained libraryProgrammatic JavascriptStandalone MVC applicationsBrowsers: iOS (iPhone/iPad) Android BlackBerry v6 & QNX Bada, MeeGo & other WebKit Windows Phone 7*

http://sencha.com/touch

* with IE9

Sencha Touch

Data model& records

Programmatically createtoolbar & list

Progressive Enhancement?

Layouts & components Theming & icons Orientation & animationTouch events & scrollerData packageMVC framework

What’s in a good framework?

Lists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation

Components

Use CSS3 & SASS - Flexible themes - Highly optimized

Theming

Forms

ScrollingMomentum/bounce physics

Hardware accelerated

Throughout all components: - Lists - Carousel - Pickers

Touch EventsBuilt on native events

Abstracted for performance

Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop

Data PackageModels, Stores, and Proxies - Associations - Validation - Local & server storage

Easily consume web services - JSON/P - XML - YQL

“The Kitchen Sink”

http://sencha.com/x/5e

building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );

Evolving the web for mobile

HTML, CSS...

Models

Controllers

Views

Models

Controllers

Mobile

DesktopSw

itch

er HTML, CSS...

Evolving the web for mobile

JSON

Models

Controllers

Mobile

DesktopSw

itch

ers

RESTonce

Evolving the web for mobile

The classic web stack

Storage

Business logic

User interfacereq/res

Rendering

The next web stack?

Storage

Security Business logic

User interfacesync

Storage

Write once,run anywhere?

Er, no.

The Mobile Webis not a

320px Web“

”

But you can re-usea lot of code

Proxies

Models

Controllers

Stores

Views Views

json

Thick client, thin server

The shortfall in the cloud

Location Services

Image Serving

AnalyticsAdaptation

Video Serving

Data SyncWeb Fonts

Ad Serving

Commerce$

Network APIs

http://mysite.com/myimage.png

http://src.sencha.io/http://mysite.com/myimage.png

Do we have time forsome code?

Listvar list = new Ext.List({ store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true});

Nested Listvar list = new Ext.NestedList({ store: store, displayField: 'name', title: 'My List', updateTitleText: true, getDetailCard: function(record, parent) {..}});

Carouselvar car = new Ext.Carousel({ direction: 'horizontal', indicator: true, items: [ .. ]});

Sheetsvar sheet = new Ext.ActionSheet({ items: [ { text: 'Delete draft', ui: 'decline' }, { text: 'Save draft' }, { text: 'Cancel', } ]});sheet.show();

http://senchalearn.github.com/seattlebars/

The cloud at work...

Location API to get lat/long

MongoLabs to get city name

Yelp to get businesses

https://github.com/senchalearn/seattlebars

Going o!ine

A platform that allows you to author native applicationswith web technologies and get access to device APIs

PhoneGap

UIWebView WebView

HTMLCSS

JSStores

Device Access

FileGeolocationMediaNetworkNotificationStorage

AccelerometerCameraCompassContactsDeviceEvents

http://docs.phonegap.com

http://pmuellr.github.com/weinre/

Weinre

building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );

Apps vs Web technologybuilt with

James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com