building cross platform mobile web apps

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

Sencha

Create amazing apps built on web standards

Web FrameworksToolsLabs

Services

Frameworks

Sencha Touch

Ext JS

Ext GWT

Ext Core

Ext JS

http://www.sencha.com/products/extjs/examples/

Ext JS 4

http://dev.sencha.com/deploy/ChartsDemo/

Ext GWT

http://www.sencha.com/products/extgwt/examples/

+

Ext Core

http://www.sencha.com/products/extcore/MIT

Tools

Ext Designer

Sencha Animator

Ext Designer

http://www.sencha.com/products/designer/

Sencha Animator

http://www.sencha.com/products/animator/demos/

Labs

jQTouch

Raphaël

Connect

InfoVis

PhiloGL

Android tools

http://www.sencha.com/company/

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

Android

RIM RIMAndroidAppleMicrosoftPalm

Top U.S. Smartphone Platforms,3 Month Average Ending December 2010comScore MobiLens 2010

Java

J2ME

Air

C++

C#

Obj-C

JS

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

Cross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies

The Mobile Web

ApplicationsDocuments

Programmatic DOMDeclarative HTML

APIsThemes

ArgumentsURLs

SynchronizationRequest/Response

Thick clientThin client

The Web is Evolving...

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 Offline 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

Sencha Touch support

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

What’s in Sencha Touch?

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

Components

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

Use CSS3 & SASS - Flexible themes - Highly optimized

Theming

“The Kitchen Sink”

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

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

Evolving a site for mobile

HTML, CSS...

Models

Controllers

Views

Evolving a site for mobile

Models

Controllers

Mobile

DesktopSw

itch

er HTML, CSS...

A dedicated mobile app

JSON

Models

Controllers

Mobile

DesktopSw

itch

ers

RESTonce

Thematic consistency

http://mysite.com/posts/123

http://mysite.com/#!/posts/123

The stack of the present

Storage

Business logic

User interfacereq/res

Rendering

A stack of the future

Storage

Security Business logic

User interfacesync

Storage

Thick client, thin server

The shortfall in the cloud

http://mysite.com/myimage.png

http://i.tinysrc.mobi/http://mysite.com/myimage.png

Location Services

Image Serving

AnalyticsAdaptation

Video Serving

Data SyncWeb Fonts

Ad Serving

Commerce$

Network APIs

Do we have time forsome code?

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

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

http://phonegap.com

PhoneGap

Device Access

FileGeolocationMediaNetworkNotificationStorage

AccelerometerCameraCompassContactsDeviceEvents

http://docs.phonegap.com

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

Apps vs Web technologybuilt with

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