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

2.
An Introduction
to
Sencha Touch

3.
“ Create amazing apps
built
on web standards
”

4.
Documents
Applications

5.
Thin client
Thick client

6.
One PC
Multiple devices

7.
Sedentary usage
Mobile usage

8.
But everyone loves apps

9.
The native challenge
JS
C# Palm J2ME
Microsoft
RIM RIM
Android
Apple
Apple Air Microsoft
Palm
Obj-C
Java
C++ Android
Top U.S. Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010

10.
A return to the web
Cross-platform
Familiar skills & tools
Decentralized
Easily updated
Indexed
Well-understood technologies

11.
A New Mobile App Stack
WebFonts Video Audio Graphics
Device Access Server & Services
Camera CSS Styling & Layout HTTP
Location AJAX
Javascript
Contacts Events
SMS Semantic HTML Sockets
Orientation SSL
File Systems Worker
x-App
Gyro DBs Parallel More...
Messaging
App Cache Processing

12.
?

13.
Introducing
Sencha Touch

14.
The first JavaScript framework for building
rich mobile apps with web standards

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

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

17.
Forms

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

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

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

21.
Theming
Use CSS3 & SASS
- Flexible themes
- Highly optimized
e.g.
$base-color: #ff6699

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

23.
Architectural
Considerations

24.
The classic web stack
req/res
User interface Rendering
Business logic
Storage

25.
The next web stack
User interface
sync
Security Business logic
Storage Storage

26.
Write once,
run anywhere?

27.
Not quite.

28.
“ The Mobile Web
is not a
”
320px Web

29.
But you can re-use
a lot of code

30.
Views Views
Controllers
Models
Stores
Proxies
json

31.
Ext JS Sencha Touch
buttongroup actionsheet
colorpalette button audio
cycle component carousel
editor container list
editorgrid dataview map
grid datepicker nestedlist
multislider panel picker
progress slider pickerslot
splitbutton spacer segbutton
treepanel toolbar sheet
viewport tabpanel tabbar
window video

32.
User Interface
Components

33.
List
var list = new Ext.List({
store: store,
itemTpl:
'{firstName} {lastName}',
grouped: true,
indexBar: true
});

34.
Nested List
var list = new Ext.NestedList({
store: store,
displayField: 'name',
title: 'My List',
updateTitleText: true,
getDetailCard:
function(record, parent) {..}
});

35.
Carousel
var car = new Ext.Carousel({
direction: 'horizontal',
indicator: true,
items: [
..
]
});

36.
Sheets
var sheet = new Ext.ActionSheet({
items: [
{
text: 'Delete draft',
ui: 'decline'
}, {
text: 'Save draft'
}, {
text: 'Cancel',
}
]
});
sheet.show();

37.
A Typical
Application

38.
http://senchalearn.github.com/seattlebars/

39.
APIs at work...
Location API to get lat/long
MongoLabs to get city name
Yelp to get businesses

40.
https://github.com/
senchalearn/
seattlebars

41.
Final Thoughts

42.
Thick client, thin server
The shortfall in the cloud

43.
Location Services
Adaptation Analytics
Web Fonts Data Sync
Video Serving Ad Serving
$
Image Serving Commerce
Network APIs

44.
http://mysite.com/myimage.png
http://src.sencha.io/http://mysite.com/myimage.png

45.
PhoneGap
A platform that allows you to package web applications
and get access to device APIs
http://phonegap.com

46.
+

47.
built with
Apps vs Web technology

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