Oct 30, 2014
James Pearce Director, Developer Relations @ jamespearce [email protected]
Building Cross-Platform Mobile Web Apps
with
CSSHTML JS
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
2008
We must have aniPhone App!
2009
We must have anAndroid App!
2010
We must have aniPad App!
2011
We must have a...
omfg
PalmMicrosoft
Apple
RIM
AndroidAndroidRIMAppleMicrosoftPalm
Top U.S. Smartphone Platforms,3 Month Average Ending Mar 2011comScore MobiLens 2011
Java
J2ME
Air
C++
C#
Obj-C
JS
RIM
Microsoft
Android
Apple
Nokia
NokiaAppleAndroidMicrosoftRIM
Top EU5 Smartphone Platforms,3 Month Average Ending December 2010comScore MobiLens 2010
Lua
C
Python
C++
C#
Obj-C
J2ME
http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/
...
Java
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
Cross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
The Mobile Web
Documents
Applications
Declarative HTML
Programmatic JS
Thin client
Thick client
One PC
Multiple devices
Sedentary usage
Mobile usage
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
A New Mobile App Stack
Javascript
Semantic HTML
CSS Styling & Layout
WebFonts Video Audio Graphics
Worker Parallel
Processing
File SystemsDBs
App Cache
x-AppMessaging
Device Access
Camera
Location
Contacts
SMS
Orientation
Gyro
Server & Services
HTTP
AJAX
Events
Sockets
SSL
More...
Rich Media & StylingFull Resource Access
Parallel ProcessingInter-App Communication
Full O!ine Capability COMPLETE MODERN APP PLATFORM
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
WebKit FOEs
HTML5 SupportIE 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.com
Modernizrhttp://modernizr.com
DeviceAtlashttp://deviceatlas.com
ApplicationsDocuments
Programmatic DOMDeclarative HTML
APIsThemes
ArgumentsURLs
SynchronizationRequest/Response
Thick clientThin client
jQTouch
UI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-based browsers
http://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, webOS
http://jquerymobile.com
jQuery Mobile
data-* for semantics& config
Scripts & stylesheet
Sencha Touch
Self-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 createtoolbar & list
Progressive Enhancement?
Layouts & components Theming & icons Orientation & animationTouch events & scrollerData packageMVC framework
What’s in a good framework?
Lists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation
Components
Use CSS3 & SASS - Flexible themes - Highly optimized
Theming
Forms
ScrollingMomentum/bounce physics
Hardware accelerated
Throughout all components: - Lists - Carousel - Pickers
Touch EventsBuilt on native events
Abstracted for performance
Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop
Data PackageModels, Stores, and Proxies - Associations - Validation - Local & server storage
Easily consume web services - JSON/P - XML - YQL
“The Kitchen Sink”
http://sencha.com/x/5e
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
Evolving the web for mobile
HTML, CSS...
Models
Controllers
Views
Models
Controllers
Mobile
DesktopSw
itch
er HTML, CSS...
Evolving the web for mobile
JSON
Models
Controllers
Mobile
DesktopSw
itch
ers
RESTonce
Evolving the web for mobile
The classic web stack
Storage
Business logic
User interfacereq/res
Rendering
The next web stack?
Storage
Security Business logic
User interfacesync
Storage
Write once,run anywhere?
Er, no.
The Mobile Webis not a
320px Web“
”
But you can re-usea lot of code
Proxies
Models
Controllers
Stores
Views Views
json
Thick client, thin server
The shortfall in the cloud
Location Services
Image Serving
AnalyticsAdaptation
Video Serving
Data SyncWeb Fonts
Ad Serving
Commerce$
Network APIs
http://mysite.com/myimage.png
http://src.sencha.io/http://mysite.com/myimage.png
Do we have time forsome 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/long
MongoLabs to get city name
Yelp to get businesses
https://github.com/senchalearn/seattlebars
Going o!ine
A platform that allows you to author native applicationswith web technologies and get access to device APIs
PhoneGap
UIWebView WebView
HTMLCSS
JSStores
Device Access
FileGeolocationMediaNetworkNotificationStorage
AccelerometerCameraCompassContactsDeviceEvents
http://docs.phonegap.com
http://pmuellr.github.com/weinre/
Weinre
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
Apps vs Web technologybuilt with
James Pearce Director, Developer Relations @ jamespearce [email protected]