sencha touch for rubyists
DESCRIPTION
An overview of Sencha Touch, presented to the Silicon Valley Ruby Meetup Group, January 2011TRANSCRIPT
![Page 1: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/1.jpg)
![Page 2: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/2.jpg)
James Pearce Director, Developer Relations @ jamespearce [email protected]
![Page 3: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/3.jpg)
Sencha Touch
![Page 4: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/4.jpg)
Sencha Touch is......a JavaScript framework for building rich mobile apps with web standards
![Page 5: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/5.jpg)
Why should I be building rich mobile apps with with
web standards?Q1
Q2
![Page 6: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/6.jpg)
MobileNew users
New relationshipsNew contexts
New business modelsNew channels
“The future of human communication”
Q1:
![Page 7: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/7.jpg)
Cross-platform*Existing skills & toolsNo approval required
Native APIs*Easy updates
“The next era of the web as we know it”
* YMMV!
Mobile WebQ2:
![Page 8: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/8.jpg)
ApplicationsDocuments
Programmatic DOMDeclarative HTML
APIsTemplates
ArgumentsURLs
SynchronizationRequest/Response
The Web is Evolving...
“HTML5”
![Page 9: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/9.jpg)
Introducing Sencha Touch
Let’s start with some demos...
![Page 10: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/10.jpg)
![Page 11: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/11.jpg)
![Page 12: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/12.jpg)
![Page 13: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/13.jpg)
Coming Soon: BlackBerry 6 & Meego
![Page 14: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/14.jpg)
2%2%3%
7%
39%
47%
iOSAndroidRIMWebOSWinmoOther
http://metrics.admob.comJanuary 2010
US Mobile Smartphone Traffic
![Page 15: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/15.jpg)
WebKit Rocks!HTML5 + CSS3Transforms, Transitions, & AnimationsCanvasSQLiteCache ManifestGeo-Location
![Page 16: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/16.jpg)
Layouts & components Touch events & scrollerData packageMVC frameworkOrientation & animationTheming & icons
...and more
What’s in Sencha Touch?
![Page 17: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/17.jpg)
Lists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation
Components
![Page 18: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/18.jpg)
Forms
![Page 19: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/19.jpg)
Touch EventsBuilt on native events
Abstracted for performance
Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop
![Page 20: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/20.jpg)
ScrollingMomentum/bounce physics
Hardware accelerated
Throughout all components: - Lists - Carousel - Pickers
![Page 21: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/21.jpg)
Data PackageModels, Stores, and Proxies - Associations - Validation - Local & server storage
Easily consume web services - JSON/P - XML - YQL
![Page 22: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/22.jpg)
“The Kitchen Sink”
http://sencha.com/x/5e
![Page 23: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/23.jpg)
CSS3, SASS & Compass - Flexible themes - Highly optimized
300+ Pre-included icons
Robust Animations
Resolution Independent
Theming
![Page 24: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/24.jpg)
Applification
![Page 25: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/25.jpg)
Working with the Web
![Page 26: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/26.jpg)
Evolving sites for mobile
HTML, CSS...
Models
Controllers
Views
![Page 27: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/27.jpg)
Evolving sites for mobile
Models
Controllers
Mobile
DesktopSw
itch
er HTML, CSS...
![Page 28: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/28.jpg)
Mobile Fu
class ApplicationController < ActionController::Base has_mobile_fuend
*.mobile.erb
is_mobile_device?in_mobile_view?
https://github.com/brendanlim/mobile-fu
![Page 29: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/29.jpg)
An application approach
JSON
Models
Controllers
Mobile
DesktopSw
itch
ers
REST
![Page 30: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/30.jpg)
The stack of the present
Storage
Business logic
User interfacereq/res
Rendering
![Page 31: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/31.jpg)
The stack of the future
Storage
Security Business logic
User interfacesync
Storage
![Page 32: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/32.jpg)
Let’s build an app
![Page 33: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/33.jpg)
A few other considerations
![Page 34: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/34.jpg)
Thematic consistency
w3c-speak
http://mysite.com/posts/123
http://mysite.com/#!/posts/123
![Page 35: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/35.jpg)
Smart detection& user choice
“Switch to our desktop site”
http://mobiforge.com/
![Page 36: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/36.jpg)
Brand consistency
![Page 37: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/37.jpg)
Mobile devicesare di!erent
Telephony
Geolocation
Camera
Messaging
And mobile usersare different too!
![Page 38: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/38.jpg)
Good luck!http://sencha.com/products/touch/
![Page 39: Sencha Touch for Rubyists](https://reader034.vdocuments.mx/reader034/viewer/2022042613/547b7e59b4795977098b4d2f/html5/thumbnails/39.jpg)
James Pearce Director, Developer Relations @ jamespearce [email protected]