introduction to sencha touch
DESCRIPTION
Slides for the tech talk I gave at Pivotal Labs on September 8, 2010 - see the recording at http://pivotallabs.com/talks/109-sencha-touchTRANSCRIPT
![Page 1: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/1.jpg)
![Page 2: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/2.jpg)
Ed Spencer / @EdSpencerSencha Inc / @SenchaInc
Hola
![Page 3: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/3.jpg)
Sencha Touch betaBuild mobile apps with HTML5, CSS3, and JavaScript
![Page 4: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/4.jpg)
230,000 iOS Activations 60,000 Android Shipments
Every Day
![Page 5: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/5.jpg)
2%2%3%
7%
39%
47%
iOS AndroidRIM webOSWinMo Other
http://metrics.admob.comJanuary 2010
US Mobile Web Traffic
![Page 6: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/6.jpg)
WebKit Rocks!• HTML5 + CSS3• Transforms, Transitions, and
Animations• Canvas• SQLite• Cache Manifest• Geo-Location
![Page 7: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/7.jpg)
WebKit Rocks!• HTML5 + CSS3• Transforms, Transitions, and
Animations• Canvas• SQLite• Cache Manifest• Geo-Location
![Page 8: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/8.jpg)
Sencha Touch beta
![Page 9: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/9.jpg)
Coming Soon: BlackBerry 6 & WebOS
![Page 10: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/10.jpg)
• WebKit-optimized• Touch events• Scroller• Orientation events• Data• Layouts• Animations• Theming & icons• Components
Features
![Page 11: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/11.jpg)
Touch Events• Built on native events • Abstracted for performance• Additional events
Tap
Double tap
Tap and hold
Swipe
Rotate
Drag & drop
![Page 12: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/12.jpg)
Scrolling
• Momentum/bounce physics• Hardware accelerated • Throughout components
![Page 13: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/13.jpg)
• ListsNested
Grouped
Sortable
• Carousel• Picker• Overlay• Toolbars & buttons• HTML5
Audio
Video
GeoLocation
Components
![Page 14: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/14.jpg)
<75kminified & gzipped
![Page 15: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/15.jpg)
Demos
![Page 16: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/16.jpg)
Let’s Get Started
![Page 17: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/17.jpg)
![Page 18: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/18.jpg)
Building UI
![Page 19: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/19.jpg)
![Page 20: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/20.jpg)
Binding Data
![Page 21: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/21.jpg)
![Page 22: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/22.jpg)
![Page 23: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/23.jpg)
Styling
![Page 24: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/24.jpg)
![Page 25: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/25.jpg)
Docs
![Page 26: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/26.jpg)
![Page 27: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/27.jpg)
• App Architecture• JSBuilder Release• Compass framework• Docs and guides• Better error reporting• PhoneGap integration
Sneak Preview
![Page 28: Introduction to Sencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022042606/545aeb85af79592b448b6024/html5/thumbnails/28.jpg)
Thanks!Websitehttp://sencha.com/
Twitter@SenchaInc
My Sitehttp://edspencer.net/
Twitter@EdSpencer