HTML5 and the dawn of rich mobile web applications

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

Everything I know about HTML5 I learned from

How Mobile Rolls

We must have an iPhone App!

We must have an Android App!

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 & 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* 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 & ﬁ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

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 NotiﬁcationEvents 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

http://www.scoop.it	178
http://blog.amt.in	140
http://fasoulas.posterous.com	15
url_unknown	13
http://paper.li	9
http://twitter.com	5
http://www.web2asia.com	1
http://www.onlydoo.com	1
http://pr-evaluation.blogspot.com	1
http://www.mongodb.org	1
http://www.istikbal.gr	1
http://webcache.googleusercontent.com	1
http://blog.fasoulas.com	1

HTML5 and the dawn of rich mobile web applications

by James Pearce

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 367

Statistics

HTML5 and the dawn of rich mobile web applications Presentation Transcript