In introduction to mobile web applications and the Sencha Touch framework

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

3. An Introduction
to
Sencha Touch

4. “ Create amazing apps
built
on web standards
”

5. Documents
Applications

6. Thin client
Thick client

7. One PC
Multiple devices

8. Sedentary usage
Mobile usage

9. But everyone loves apps

13. 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

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

18. 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

24. ?

25. Introducing
Sencha Touch

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

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

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

32. Forms

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

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

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

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

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

38. Architectural
Considerations

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

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

41. Write once,
run anywhere?

42. Not quite.

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

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

46. Views Views
Controllers
Models
Stores
Proxies
json

47. 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

48. User Interface
Components

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

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

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

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

54. A Typical
Application

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

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

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

59. Final Thoughts

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

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

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

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

64. +

65. built with
Apps vs Web technology

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