Building cross platform mobile web apps

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

Sencha

Create amazing apps built on web standards

Web Frameworks Tools Labs 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/ M IT

Tools Ext Designer Sencha Animator

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

Sencha Animatorhttp://www.sencha.com/products/animator/demos/

Labs jQTouch InfoVis Raphaël PhiloGL Connect Android tools http://www.sencha.com/company/

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 J2ME Microsoft RIM RIM Android AppleApple Air Microsoft PalmObj-C Java C++ Android Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010

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

The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Thin client Thick client Themes APIs URLs Arguments Request/Response Synchronization

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 P Access A RN ParallelDProcessing E O EMInter-App Communication ET PL Offline Capability Full C 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

Sencha Touch support

What’s in Sencha Touch?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework

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

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

ThemingUse CSS3 & SASS- Flexible themes- Highly optimized

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

Evolving a site for mobile Views HTML, CSS... Controllers Models

Evolving a site for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models

A dedicated mobile app DesktopSwitchers Mobile REST JSO on Controllers N ce Models

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

The stack of the present req/resUser interface RenderingBusiness logic Storage

A stack of the future User interface syncSecurity Business logicStorage Storage

Thick client, thin serverThe shortfall in the cloud

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

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

Do we have time for some code?

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

PhoneGapA platform that allows you to author native applications with web technologies and get access to device APIs http://phonegap.com

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

built withApps vs Web technology

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

Building cross platform mobile web apps

by James Pearce on Apr 27, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Building cross platform mobile web apps — Presentation Transcript