This document discusses building rich mobile apps with web standards using Sencha Touch. It summarizes the key benefits of Sencha Touch, including being cross-platform, using existing skills and tools, and not requiring app approval. It then provides an overview of Sencha Touch's features like layouts, components, touch events, data handling, theming and more. The document concludes by encouraging building a demo app to experience Sencha Touch.

2. James Pearce
Director, Developer Relations
@ jamespearce
jamesp@sencha.com

3. Sencha Touch

4. Sencha Touch is...
...a JavaScript framework for building
rich mobile apps with web standards

5. Why should I be building
rich mobile apps with with
Q1
web standards?
Q2

6. Q1: Mobile
New users
New relationships
New contexts
New business models
New channels
“The future of human communication”

7. Q2: Mobile Web
Cross-platform*
Existing skills & tools
No approval required
Native APIs*
Easy updates
“The next era of the web as we know it”
* YMMV!

8. “HTML5”
The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
URLs Arguments
Request/Response Synchronization

9. Introducing Sencha Touch
Let’s start with some demos...

13. Coming Soon: BlackBerry 6 & Meego

14. US Mobile Smartphone Traffic
39%
iOS
Android
RIM
47% WebOS
Winmo
Other
7%
3%
2%2%
http://metrics.admob.com
January 2010

15. WebKit Rocks!
HTML5 + CSS3
Transforms, Transitions, & Animations
Canvas
SQLite
Cache Manifest
Geo-Location

16. What’s in Sencha Touch?
Layouts & components
Touch events & scroller
Data package
MVC framework
Orientation & animation
Theming & icons
...and more

17. Components
Lists
- Nested, Grouped, Sortable
Carousel
Picker
Overlay
Slider
Forms & fields
Toolbars & buttons
HTML5
- Audio
- Video
- GeoLocation

18. Forms

19. Touch Events
Built on native events
Abstracted for performance
Additional events
- Tap
- Double tap
- Tap and hold
- Swipe
- Rotate
- Drag & drop

20. Scrolling
Momentum/bounce physics
Hardware accelerated
Throughout all components:
- Lists
- Carousel
- Pickers

21. Data Package
Models, Stores, and Proxies
- Associations
- Validation
- Local & server storage
Easily consume web services
- JSON/P
- XML
- YQL

22. “The Kitchen Sink”
http://sencha.com/x/5e

23. Theming
CSS3, SASS & Compass
- Flexible themes
- Highly optimized
300+ Pre-included icons
Robust Animations
Resolution Independent

24. Applification

25. Working with the Web

26. Evolving sites for mobile
Views
HTML, CSS...
Controllers
Models

27. Evolving sites for mobile
Desktop
Switcher
HTML, CSS...
Mobile
Controllers
Models

28. Mobile Fu
class ApplicationController < ActionController::Base
has_mobile_fu
end
*.mobile.erb
is_mobile_device?
in_mobile_view?
https://github.com/brendanlim/mobile-fu

29. An application approach
Desktop
Switchers
Mobile
REST
Controllers JSO
N
Models

30. The stack of the present
req/res
User interface Rendering
Business logic
Storage

31. The stack of the future
User interface
sync
Security Business logic
Storage Storage

32. Let’s build an app

33. A few other considerations

34. Thematic consistency
w3c-speak
http://mysite.com/posts/123
http://mysite.com/#!/posts/123

35. Smart detection
& user choice
“Switch to our desktop site”
http://mobiforge.com/

36. Brand consistency

37. Mobile devices
are di erent
Geolocation
Telephony
Camera
Messaging
And mobile users
are different too!

38. Good luck!
http://sencha.com/products/touch/

39. James Pearce
Director, Developer Relations
@ jamespearce
jamesp@sencha.com