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

HTML5 and the dawn of
rich mobile web applications

or

Everything I know about HTML5
I learned from

How Mobile Rolls

2008

We must have an iPhone
App!

2010

We must have an Android
App!

2011

omfg

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

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/

Device diversity

App Stores Updates

The Promise ofWeb Technologies

The WebCross-platformFamiliar skills & toolsDecentralizedEasily
updatedIndexedWell-understood... Mobile: the next era of the web as we know it

http://www.victoriassecret.com

http://mobile.victoriassecret.com

Themobile web is not a320px
web

(“responsive web design”)

The WebCross-platformFamiliar skills & toolsDecentralizedEasily
updatedIndexedWell-understood... But wait! Weren’t we talking about apps?

Hypothesis: Web technologies are a
viable alternativeto native development

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

-webkit accelerometer @page localStorage CSS
Text @media manifesttransform <video> WebSQL GeoLocation type=camera canvas keyframe gradient

this is uncanny

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 M CommunicationInter-AppTE LE P O ine Capability C Full OM

Web technologies are a viable
alternativeto native development

Caveats?PerformanceBrowser supportDevice access All less
of a issue than you might thinkDiscoverabilityMonetizationApp ‘experience’

Progressive enhancement

assumption HTML JS CSS progressive
enhancement app doc vs assumptionHTML JS CSS app

State of the Art: Mobile
HTML5

Environments ?

Browsers WebKit FOEs

HTML5 support IE 9 PR
Chrome 7 Safari 5 Firefox 4b iPhone 4 BB Torch Android 2.2@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

Enter The Framework

Why use a framework?Provide user
interface componentsSmooth browser inconsistenciesMimic native or server paradigmsCreate consistent application architectures...and more

Strokes for folks Sites &
Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client

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 & config

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 & config

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* to come

Sencha Touch Data model &
records Programmatically create toolbar & list

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

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

ThemingUse CSS3 & SASS- Flexible
themes- Highly optimized

Forms

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

Implementing Mobile Web Sites|Apps

Evolving sites for mobile Views
HTML, CSS... Controllers Models

Evolving sites for mobile DesktopSwitcher
HTML, CSS... Mobile Controllers Models

Mobile detectionclass ApplicationController < ActionController::Base
has_mobile_fuend*.mobile.erbis_mobile_device?in_mobile_view? https://github.com/brendanlim/mobile-fu

Smart detection & user choice“Switch
to our desktop site”

Thematic consistencyw3c-speak http://mysite.com/posts/123 http://mysite.mobi/posts/123

Mobile switchinghttp://tinyurl.com/mobswi1 http://tinyurl.com/mobswi2

Then to an app... DesktopSwitchers
Mobile REST Controllers JSO N Models

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

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

The stack of the future
User interface syncSecurity Business logicStorage Storage The return of the thick client!

Do we have time for
some code?

Brand consistency

Getting help from the cloudhttp://i.tinysrc.mobi/http://mysite.com/myimage.png
http://tinysrc.net/

Mobile devices are di erent
Geolocation Telephony Camera MessagingAnd mobile usersare different too!

Going Hybrid

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

+

Full API list:Accelerometer FileCamera GeolocationCompass
MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com http://www.sencha.com/learn/ Tutorial:Sencha_Touch_PhoneGap

PhoneGap Build

A word about app stores
(pssst: they’re an admission of defeat)

Doing mobile right Everyone loves
apps - but native development sucks This is the year of the mobile web - but caveats applyWeb technologies are a viable alternative to native apps

built withApps vs Web technology

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