james pearce - meetupfiles.meetup.com/437842/sencha touch.pdf · what’s in sencha touch? lists -...
TRANSCRIPT
James Pearce Director, Developer Relations @ jamespearce [email protected]
Sencha Touch
Sencha Touch is......a JavaScript framework for building rich mobile apps with web standards
Why should I be building rich mobile apps with with
web standards?Q1
Q2
MobileNew users
New relationshipsNew contexts
New business modelsNew channels
“The future of human communication”
Q1:
Cross-platform*Existing skills & toolsNo approval required
Native APIs*Easy updates
“The next era of the web as we know it”
* YMMV!
Mobile WebQ2:
ApplicationsDocuments
Programmatic DOMDeclarative HTML
APIsTemplates
ArgumentsURLs
SynchronizationRequest/Response
The Web is Evolving...
“HTML5”
Introducing Sencha Touch
Let’s start with some demos...
Coming Soon: BlackBerry 6 & Meego
2%2%3%
7%
39%
47%
iOSAndroidRIMWebOSWinmoOther
http://metrics.admob.comJanuary 2010
US Mobile Smartphone Traffic
WebKit Rocks!HTML5 + CSS3Transforms, Transitions, & AnimationsCanvasSQLiteCache ManifestGeo-Location
Layouts & components Touch events & scrollerData packageMVC frameworkOrientation & animationTheming & icons
...and more
What’s in Sencha Touch?
Lists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation
Components
Forms
Touch EventsBuilt on native events
Abstracted for performance
Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop
ScrollingMomentum/bounce physics
Hardware accelerated
Throughout all components: - Lists - Carousel - Pickers
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
CSS3, SASS & Compass - Flexible themes - Highly optimized
300+ Pre-included icons
Robust Animations
Resolution Independent
Theming
Applification
Working with the Web
Evolving sites for mobile
HTML, CSS...
Models
Controllers
Views
Evolving sites for mobile
Models
Controllers
Mobile
DesktopSw
itch
er HTML, CSS...
Mobile Fu
class ApplicationController < ActionController::Base has_mobile_fuend
*.mobile.erb
is_mobile_device?in_mobile_view?
https://github.com/brendanlim/mobile-fu
An application approach
JSON
Models
Controllers
Mobile
DesktopSw
itch
ers
REST
The stack of the present
Storage
Business logic
User interfacereq/res
Rendering
The stack of the future
Storage
Security Business logic
User interfacesync
Storage
Let’s build an app
A few other considerations
Thematic consistency
w3c-speak
http://mysite.com/posts/123
http://mysite.com/#!/posts/123
Smart detection& user choice
“Switch to our desktop site”
http://mobiforge.com/
Brand consistency
Mobile devicesare di!erent
Telephony
Geolocation
Camera
Messaging
And mobile usersare different too!
Good luck!http://sencha.com/products/touch/
James Pearce Director, Developer Relations @ jamespearce [email protected]