Building Rich Mobile Apps with HTML5, CSS3 and JavaScript

HTML5 and the dawn of rich mobile web applicationsSENCHA: HTML5 SVUG April 2011

We must have an iPhone App!

We must have an Android App!

Palm Microsoft RIM RIM Android AppleApple Microsoft Palm Android Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010

JS C# Palm J2ME Microsoft RIM RIM Android Apple Apple Air Microsoft PalmObj-C Java Android C++ Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010

J2ME C# RIM C/C++ Microsoft Nokia Python AppleJava AndroidAndroid Nokia MicrosoftC++ RIM Lua Obj-C Apple ... Top EU5 Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010

J2ME C# RIM C/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

The Promise ofWeb Technologies

The WebCross-platformStandards-processFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood...

The WebCross-platformStandards-processFamiliar skills & toolsDecentralizedEasily updatedIndexed Mobile: the next era ofWell-understood the web as we know it...

http://www.victoriassecret.com

http://mobile.victoriassecret.com

Themobile web is not a320px web

(“responsive web design”)

Hypothesis: Web technologies are a viable alternativeto native development

The Web is Evolving...

The Web is Evolving... Documents Applications

The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM

The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs

The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments

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

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

"If you write Web-based applications, Iwould be interested in hearing about whatyour needs are. Please let me know"Ian Hickson 2004WhatWG “Founding Post”

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

A New Mobile App Stack CSS Styling & Layout Javascript Semantic HTML

A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML

A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems DBs App Cache

A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems Worker DBs Parallel App Cache Processing

A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems Worker x-App DBs Parallel Messaging App Cache Processing

A New Mobile App Stack WebFont Video Audio GraphicsDevice Access Camera CSS Styling & Layout Location Javascript Contacts SMS Semantic HTML Orientation File Systems Worker x-App Gyro DBs Parallel Messaging App Cache Processing

A New Mobile App Stack WebFont 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 & StylingFull Resource Access Parallel Processing Inter-AppCommunication Full Offline Capability

Rich Media & Styling R M F O A T Full Resource Access P L A PP Parallel ProcessingRN D E Inter-App M O T E Communication Full P LE M O Offline CapabilityC

Demo 1http://jag.gr/tm

Demo 1Ihttp://www.e-resistible.co.uk/

Demo 1I1http://vimeo.com/awards/m

Web technologies are a viable alternativeto native development

Caveats?PerformanceBrowser supportDevice accessDiscoverabilityMonetizationApp ‘experience’

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

Progressive enhancement

assumptionHTML doc

assumptionHTML JS CSS progressive enhancement app doc

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

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

State of the Art: Mobile HTML5

Environments ?

Browsers WebKit Others

HTML5 Support: Edge 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.comWikipediaComparison of LayoutEngines

Enter The Abstractions...

Why use a framework?Provide user interface componentsSmooth browser inconsistenciesMimic native or server paradigmsCreate consistent applicationarchitectures...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 progressivelyenhancesBrowsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-basedbrowsershttp://jQTouch.com

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

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

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

Sencha TouchSelf-contained libraryProgrammatic JavascriptUI Declared via JSONStandalone MVC applicationsBrowsers: iOS (iPhone/iPad) Android BlackBerry v6 & QNX Bada, MeeGo & otherWebKit Windows Phone 7** to come

Sencha Touch Data model & records Programmatically create toolbar & list

What’s in a goodLayouts & 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...Controlle Models

Evolving sites for mobile Deskto HTML,Switcher CSS... Mobile Controlle 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”

www.xkcd.com

Thematic consistency

Thematic consistencyw3c-speak

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

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... DesktoSwitchers Mobile REST JSO Controlle N Models

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

The stack of the present req/res User RenderingBusinessStorage

The stack of the future User syncSecurity BusinessStorage Storage

The stack of the future User syncSecurity BusinessStorage Storage The return of the thick client!

Brand consistency

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

Mobile devices are different Geolocation Telephon y CameraMessaging

Mobile devices are different Geolocation Telephon y Camera MessagingAnd mobile usersare different too!

Going Hybrid

PhoneGap, Nimblekit, Libraries that allows you to author native applicationswith web technologies and get access to device APIs

Full API list:Accelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com

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

Doing mobile right

Doing mobile rightEveryone loves apps - but native diversity sucks

Doing mobile rightEveryone loves apps - but native diversity sucksThis is the year of the mobile web - but caveats apply

Doing mobile right Everyone loves apps - but native diversity sucks This is the year of the mobile web - but caveats applyHTML5 makes web tech a viable alternative to native apps

http://nundefined.tistory.com	408
http://maxstudiotech.com	203
http://blog.nundefined.com	157
http://autobodyshopg2.gnbo.com.ng	117
http://thetechnicalweb.blogspot.in	40
http://abdisusanto.blogspot.com	24
http://paper.li	9
http://abdisusanto.blogspot.in	8
http://thetechnicalweb.blogspot.com	7
http://thetechnicalweb.blogspot.de	4
http://www.petrobras.com.br	3
http://abdisusanto.blogspot.co.uk	3
http://www.hanrss.com	2
http://localhost	2
http://www.onlydoo.com	2
http://abdisusanto.blogspot.com.au	1
http://webcache.googleusercontent.com	1
http://abdisusanto.blogspot.se	1
http://www.verious.com	1
http://abdisusanto.blogspot.sg	1
http://www.blogger.com	1
http://www.mongodb.org	1
http://aprendersociales.blogspot.com	1
http://www.ensinogeo.com	1
http://www.massey.ac.nz	1
http://www.istikbal.gr	1
http://blogs.alaquas.net	1
https://twitter.com	1
http://www.appsgeyser.com	1
http://news.taaza.com	1
http://us-w1.rockmelt.com	1
http://maxstudiotech.wordpress.com	1
http://www.thetechnicalweb.blogspot.in	1

Building Rich Mobile Apps with HTML5, CSS3 and JavaScript

by Sencha

Accessibility

Categories

Upload Details

Usage Rights

33 Embeds 1,007

Statistics