an introduction to sencha touch
DESCRIPTION
In introduction to mobile web applications and the Sencha Touch frameworkTRANSCRIPT
James Pearce Sr Director, Developer Relations @ jamespearce [email protected]
An Introductionto
Sencha Touch
Create amazing appsbuilt
on web standards“
”
Documents
Applications
Thin client
Thick client
One PC
Multiple devices
Sedentary usage
Mobile usage
But everyone loves apps
PalmMicrosoft
Apple
Android
RIM RIMAndroidAppleMicrosoftPalm
Top U.S. Smartphone Platforms,3 Month Average Ending December 2010
comScore MobiLens 2010
Java
J2ME
Air
C++
C#
Obj-C
JS
The native challenge
Cross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
A return to the web
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...
?
IntroducingSencha Touch
The first JavaScript framework for building rich mobile apps with web standards
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
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
Use CSS3 & SASS - Flexible themes - Highly optimized
e.g.
Theming
$base-color: #ff6699
“The Kitchen Sink”
http://sencha.com/x/5e
ArchitecturalConsiderations
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?
Not quite.
The Mobile Webis not a
320px Web“
”
But you can re-usea lot of code
Proxies
Models
Controllers
Stores
Views Views
json
buttoncomponentcontainerdataviewdatepickerpanelsliderspacertoolbartabpanel
actionsheetaudiocarousellistmapnestedlistpickerpickerslotsegbuttonsheettabbarvideo
buttongroupcolorpalette
cycleeditor
editorgridgrid
multisliderprogresssplitbuttontreepanelviewportwindow
Ext JS Sencha Touch
User InterfaceComponents
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();
A TypicalApplication
http://senchalearn.github.com/seattlebars/
APIs at work...
Location API to get lat/long
MongoLabs to get city name
Yelp to get businesses
https://github.com/senchalearn/seattlebars
Final Thoughts
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
A platform that allows you to package web applicationsand get access to device APIs
http://phonegap.com
PhoneGap
+
Apps vs Web technologybuilt with
James Pearce Sr Director, Developer Relations @ jamespearce [email protected]