Embed Size (px)
DESCRIPTION
As presented at http://www.meetup.com/MobileCloud/events/17159747/The web is always evolving, but we're witnessing a significant architectural shift as services migrate to the cloud, business logic moves to ever-thicker clients, and the web escapes the desktop to become a beautifully mobile medium.In this environment, web application frameworks like Sencha Touch offer a new way of building mobile services using HTML5, CSS3, and JavaScript. We'll explore the possibilities that this rich, standards-based approach can bring, how to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices, and how to leverage the power of cloud-based services to provide scalable and compelling applications in this new world.
Citation preview
James Pearce Director, Developer Relations @ jamespearce [email protected]
Building Cloud-based Cross-Platform Mobile
Web Appswith
CSSHTML JS
building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
building( cloudBased( 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
Android
RIM RIMAndroidAppleMicrosoftPalm
Top U.S. Smartphone Platforms,3 Month Average Ending December 2010comScore MobiLens 2010
Java
J2ME
Air
C++
C#
Obj-C
JS
building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
Cross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
The Mobile Web
ApplicationsDocuments
Programmatic DOMDeclarative HTML
APIsThemes
ArgumentsURLs
SynchronizationRequest/Response
Thick clientThin client
The Web is Evolving...
building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
localStorage
WebSQL
gradient
-webkit
CSS Text
GeoLocation
canvastype=camera
@page
@mediamanifest
accelerometer
keyframe
transform<video>
A New Mobile App Stack
Worker Parallel
Processing
File SystemsDBs
App Cache
Javascript
Semantic HTML
CSS Styling & Layout
WebFonts Video Audio Graphics
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( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
building( cloudBased( 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
Layouts & components Theming & icons Orientation & animationTouch events & scrollerData packageMVC framework
What’s in Sencha Touch?
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
“The Kitchen Sink”
http://sencha.com/x/5e
building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
Data PackageModels, Stores, and Proxies - Associations - Validation - Local & server storage
Easily consume web services - JSON/P - XML - YQL
Evolving a site for mobile
HTML, CSS...
Models
Controllers
Views
Evolving a site for mobile
Models
Controllers
Mobile
DesktopSw
itch
er HTML, CSS...
A dedicated mobile app
JSON
Models
Controllers
Mobile
DesktopSw
itch
ers
RESTonce
Thematic consistency
http://mysite.com/posts/123
http://mysite.com/#!/posts/123
The stack of the present
Storage
Business logic
User interfacereq/res
Rendering
A stack of the future
Storage
Security Business logic
User interfacesync
Storage
<aside>
</aside>
JSON JavaScript Object Notation
JSON-‐P JSON with Padding
CORS Cross-‐Origin Resource Sharing
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://i.tinysrc.mobi/http://mysite.com/myimage.png
building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
Do we have time forsome code?
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
A platform that allows you to author native applicationswith web technologies and get access to device APIs
http://phonegap.com
PhoneGap
+
PhoneGap Build
Device Access
FileGeolocationMediaNetworkNotificationStorage
AccelerometerCameraCompassContactsDeviceEvents
http://docs.phonegap.com
building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
Apps vs Web technologybuilt with
James Pearce Director, Developer Relations @ jamespearce [email protected]
