Building Cross Platform Mobile Web Apps

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

Building Cross-Platform Mobile Web Apps with HTML CSS JS

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

2008We must have an iPhone App!

2009We must have an Android App!

2010We must have an iPad App!

2011We must have a...

JS C# Palm Microsoft Java Android Android RIM AppleApple C++ MicrosoftObj-C Palm J2ME RIM Top U.S. Smartphone Platforms, 3 Month Average Ending Mar 2011 Air comScore MobiLens 2011

J2ME C# RIM C Microsoft Nokia Python Apple Java Android Android Nokia Microsoft C++ RIM Lua Obj-C Apple ... Top EU5 Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/

The Mobile WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies

DocumentsApplications

Declarative HTMLProgrammatic JS

Thin clientThick client

One PCMultiple devices

Sedentary usage Mobile usage

A New Mobile App Stack WebFonts Video Audio GraphicsDevice Access Server & Services Camera CSS Styling & Layout HTTP Location AJAX Javascript Contacts Events SMS Semantic HTML Sockets Orientation SSL File Systems Worker x-App Gyro DBs Parallel More... Messaging App Cache Processing

Rich Media & StylingO RM TF LA Full Resource PP PAccess A RN ParallelDProcessing E O M CommunicationInter-AppTE LE P O ine Capability C Full OM

WebKit FOEs

HTML5 Support IE 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.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com

Documents ApplicationsDeclarative HTML Programmatic DOM Thin client Thick client Themes APIs URLs ArgumentsRequest/Response Synchronization

jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-based browsershttp://jQTouch.com

jQTouch Scripts & stylesheets CSS classes for semantics & conﬁg

jQuery Mobile (alpha)UI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPad) Android BlackBerry v5+ Symbian v5, MeeGo, webOShttp://jquerymobile.com

jQuery Mobile Scripts & stylesheet data-* for semantics & conﬁg

Sencha TouchSelf-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 create toolbar & list

Progressive Enhancement?

What’s in a good framework?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework

ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & ﬁeldsToolbars & buttonsHTML5- Audio- Video- GeoLocation

ThemingUse CSS3 & SASS- Flexible themes- Highly optimized

ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers

Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop

Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON/P- XML- YQL

“The Kitchen Sink” http://sencha.com/x/5e

Evolving the web for mobile Views HTML, CSS... Controllers Models

Evolving the web for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models

Evolving the web for mobile Desktop Switchers Mobile REST JSO on Controllers N ce Models

The classic web stack req/resUser interface RenderingBusiness logic Storage

The next web stack? User interface syncSecurity Business logicStorage Storage

Write once,run anywhere?

Er, no.

“ The Mobile Web is not a ” 320px Web

But you can re-use a lot of code

Views Views Controllers Models Stores Proxies n jso

Thick client, thin serverThe shortfall in the cloud

Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs

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

Do we have time for some 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/longMongoLabs to get city nameYelp to get businesses

https://github.com/ senchalearn/ seattlebars

Going o ine

PhoneGapA platform that allows you to author native applications with web technologies and get access to device APIs UIWebView WebViewHTML CSS Stores JS

Device AccessAccelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotiﬁcationEvents Storagehttp://docs.phonegap.com

Weinrehttp://pmuellr.github.com/weinre/

built withApps vs Web technology

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

http://developerthinktank.com	93
http://www.jsday.it	42
http://developerthinktank.squarespace.com	26
http://50.57.150.126	24
http://paper.li	2
http://twitter.com	2
https://twitter.com	2
url_unknown	2
http://www.techgig.com	1
http://us-w1.rockmelt.com	1

Building Cross Platform Mobile Web Apps

by James Pearce

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 195

Statistics