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

MobileNew users

New relationshipsNew contexts

New business modelsNew channels

“The future of human communication”

Q1:

Cross-platform*Existing skills & toolsNo approval required

Native APIs*Easy updates

“The next era of the web as we know it”

* YMMV!

Mobile WebQ2:

ApplicationsDocuments

Programmatic DOMDeclarative HTML

APIsTemplates

ArgumentsURLs

SynchronizationRequest/Response

The Web is Evolving...

“HTML5”

Introducing Sencha Touch

Let’s start with some demos...

Coming Soon: BlackBerry 6 & Meego

2%2%3%

7%

39%

47%

iOSAndroidRIMWebOSWinmoOther

http://metrics.admob.comJanuary 2010

US Mobile Smartphone Traffic

WebKit Rocks!HTML5 + CSS3Transforms, Transitions, & AnimationsCanvasSQLiteCache ManifestGeo-Location

Layouts & components Touch events & scrollerData packageMVC frameworkOrientation & animationTheming & icons

...and more

What’s in Sencha Touch?

Lists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation

Components

Forms

Touch EventsBuilt on native events

Abstracted for performance

Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop

ScrollingMomentum/bounce physics

Hardware accelerated

Throughout all components: - Lists - Carousel - Pickers

Data PackageModels, Stores, and Proxies - Associations - Validation - Local & server storage

Easily consume web services - JSON/P - XML - YQL

“The Kitchen Sink”

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

CSS3, SASS & Compass - Flexible themes - Highly optimized

300+ Pre-included icons

Robust Animations

Resolution Independent

Theming

Applification

Working with the Web

Evolving sites for mobile

HTML, CSS...

Models

Controllers

Views

Evolving sites for mobile

Models

Controllers

Mobile

DesktopSw

itch

er HTML, CSS...

Mobile Fu

class ApplicationController < ActionController::Base has_mobile_fuend

*.mobile.erb

is_mobile_device?in_mobile_view?

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

An application approach

JSON

Models

Controllers

Mobile

DesktopSw

itch

ers

REST

The stack of the present

Storage

Business logic

User interfacereq/res

Rendering

The stack of the future

Storage

Security Business logic

User interfacesync

Storage

Let’s 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 devicesare di!erent

Telephony

Geolocation

Camera

Messaging

And mobile usersare different too!

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

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