James Pearce

Director, Developer Relations @ jamespearce jamesp@sencha.com

Sencha Touch

Sencha Touch is...

...a JavaScript framework for building rich mobile apps with web standards

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

Q1:

Mobile

New users New relationships New contexts New business models New channels The future of human communication

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!

HTML5

The Web is Evolving...

Documents Declarative HTML Templates URLs Request/Response Applications Programmatic DOM APIs Arguments Synchronization

Introducing Sencha Touch

Lets start with some demos...

Coming Soon: BlackBerry 6 & Meego

US Mobile Smartphone Traffic

39%

47%

iOS Android RIM WebOS Winmo Other

7% 2%2% 3%

http://metrics.admob.com
January 2010

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

Whats in Sencha Touch?

Layouts & components Touch events & scroller Data package MVC framework Orientation & animation Theming & icons ...and more

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

Forms

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

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

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

The Kitchen Sink

http://sencha.com/x/5e

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

Application

Working with the Web

Evolving sites for mobile

Views
HTML, CSS...

Controllers Models

Evolving sites for mobile

Switcher

Desktop Mobile
HTML, CSS...

Controllers Models

Mobile Fu
class ApplicationController < ActionController::Base has_mobile_fu end

*.mobile.erb is_mobile_device? in_mobile_view?

https://github.com/brendanlim/mobile-fu

An application approach
Switchers

Desktop Mobile REST

JSO N

Controllers Models

The stack of the present

User interface Business logic Storage

req/res

Rendering

The stack of the future

User interface Security Storage

sync

Business logic Storage

Lets build an app

A few other considerations

Thematic consistency
w3c-speak

http://mysite.com/posts/123

http://mysite.com/#!/posts/123

Smart detection & user choice

Switch to our desktop site

http://mobiforge.com/

Brand consistency

Mobile devices are di erent

Geolocation Telephony Camera Messaging
And mobile users are different too!

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

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