James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists -...
Transcript of James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists -...
![Page 1: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/1.jpg)
![Page 2: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/2.jpg)
James Pearce Director, Developer Relations @ jamespearce [email protected]
![Page 3: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/3.jpg)
Sencha Touch
![Page 4: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/4.jpg)
Sencha Touch is......a JavaScript framework for building rich mobile apps with web standards
![Page 5: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/5.jpg)
Why should I be building rich mobile apps with with
web standards?Q1
Q2
![Page 6: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/6.jpg)
MobileNew users
New relationshipsNew contexts
New business modelsNew channels
“The future of human communication”
Q1:
![Page 7: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/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: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/8.jpg)
ApplicationsDocuments
Programmatic DOMDeclarative HTML
APIsTemplates
ArgumentsURLs
SynchronizationRequest/Response
The Web is Evolving...
“HTML5”
![Page 9: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/9.jpg)
Introducing Sencha Touch
Let’s start with some demos...
![Page 10: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/10.jpg)
![Page 11: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/11.jpg)
![Page 12: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/12.jpg)
![Page 13: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/13.jpg)
Coming Soon: BlackBerry 6 & Meego
![Page 14: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/14.jpg)
2%2%3%
7%
39%
47%
iOSAndroidRIMWebOSWinmoOther
http://metrics.admob.comJanuary 2010
US Mobile Smartphone Traffic
![Page 15: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/15.jpg)
WebKit Rocks!HTML5 + CSS3Transforms, Transitions, & AnimationsCanvasSQLiteCache ManifestGeo-Location
![Page 16: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/16.jpg)
Layouts & components Touch events & scrollerData packageMVC frameworkOrientation & animationTheming & icons
...and more
What’s in Sencha Touch?
![Page 17: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/17.jpg)
Lists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation
Components
![Page 18: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/18.jpg)
Forms
![Page 19: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/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: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/20.jpg)
ScrollingMomentum/bounce physics
Hardware accelerated
Throughout all components: - Lists - Carousel - Pickers
![Page 21: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/21.jpg)
Data PackageModels, Stores, and Proxies - Associations - Validation - Local & server storage
Easily consume web services - JSON/P - XML - YQL
![Page 22: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/22.jpg)
“The Kitchen Sink”
http://sencha.com/x/5e
![Page 23: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/23.jpg)
CSS3, SASS & Compass - Flexible themes - Highly optimized
300+ Pre-included icons
Robust Animations
Resolution Independent
Theming
![Page 24: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/24.jpg)
Applification
![Page 25: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/25.jpg)
Working with the Web
![Page 26: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/26.jpg)
Evolving sites for mobile
HTML, CSS...
Models
Controllers
Views
![Page 27: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/27.jpg)
Evolving sites for mobile
Models
Controllers
Mobile
DesktopSw
itch
er HTML, CSS...
![Page 28: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/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: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/29.jpg)
An application approach
JSON
Models
Controllers
Mobile
DesktopSw
itch
ers
REST
![Page 30: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/30.jpg)
The stack of the present
Storage
Business logic
User interfacereq/res
Rendering
![Page 31: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/31.jpg)
The stack of the future
Storage
Security Business logic
User interfacesync
Storage
![Page 32: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/32.jpg)
Let’s build an app
![Page 33: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/33.jpg)
A few other considerations
![Page 34: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/34.jpg)
Thematic consistency
w3c-speak
http://mysite.com/posts/123
http://mysite.com/#!/posts/123
![Page 35: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/35.jpg)
Smart detection& user choice
“Switch to our desktop site”
http://mobiforge.com/
![Page 36: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/36.jpg)
Brand consistency
![Page 37: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/37.jpg)
Mobile devicesare di!erent
Telephony
Geolocation
Camera
Messaging
And mobile usersare different too!
![Page 38: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/38.jpg)
Good luck!http://sencha.com/products/touch/
![Page 39: James Pearce - Meetupfiles.meetup.com/437842/Sencha Touch.pdf · What’s in Sencha Touch? Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars](https://reader034.fdocuments.in/reader034/viewer/2022042207/5ea94f6937367706d11e40d0/html5/thumbnails/39.jpg)
James Pearce Director, Developer Relations @ jamespearce [email protected]