An Introduction to Sencha Touch

James Pearce Sr Director, Developer Relations @ jamespearce [email protected]

An Introductionto

Sencha Touch

Create amazing appsbuilt

on web standards“

”

Documents

Applications

Thin client

Thick client

One PC

Multiple devices

Sedentary usage

Mobile usage

But everyone loves apps

PalmMicrosoft

Apple

Android

RIM RIMAndroidAppleMicrosoftPalm

Top U.S. Smartphone Platforms,3 Month Average Ending December 2010

comScore MobiLens 2010

Java

J2ME

Air

C++

C#

Obj-C

JS

The native challenge

Cross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies

A return to the web

A New Mobile App Stack

Javascript

Semantic HTML

CSS Styling & Layout

WebFonts Video Audio Graphics

Worker Parallel

Processing

File SystemsDBs

App Cache

x-AppMessaging

Device Access

Camera

Location

Contacts

SMS

Orientation

Gyro

Server & Services

HTTP

AJAX

Events

Sockets

SSL

More...

?

IntroducingSencha Touch

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

Layouts & components Theming & icons Orientation & animationTouch events & scrollerData packageMVC framework

What’s in Sencha Touch?

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

Components

Forms

ScrollingMomentum/bounce physics

Hardware accelerated

Throughout all components: - Lists - Carousel - Pickers

Touch EventsBuilt on native events

Abstracted for performance

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

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

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

Use CSS3 & SASS - Flexible themes - Highly optimized

e.g.

Theming

$base-color: #ff6699

“The Kitchen Sink”

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

ArchitecturalConsiderations

The classic web stack

Storage

Business logic

User interfacereq/res

Rendering

The next web stack

Storage

Security Business logic

User interfacesync

Storage

Write once,run anywhere?

Not quite.

The Mobile Webis not a

320px Web“

”

But you can re-usea lot of code

Proxies

Models

Controllers

Stores

Views Views

json

buttoncomponentcontainerdataviewdatepickerpanelsliderspacertoolbartabpanel

actionsheetaudiocarousellistmapnestedlistpickerpickerslotsegbuttonsheettabbarvideo

buttongroupcolorpalette

cycleeditor

editorgridgrid

multisliderprogresssplitbuttontreepanelviewportwindow

Ext JS Sencha Touch

User InterfaceComponents

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

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

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

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

A TypicalApplication

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

APIs at work...

Location API to get lat/long

MongoLabs to get city name

Yelp to get businesses

https://github.com/senchalearn/seattlebars

Final Thoughts

Thick client, thin server

The shortfall in the cloud

Location Services

Image Serving

AnalyticsAdaptation

Video Serving

Data SyncWeb Fonts

Ad Serving

Commerce$

Network APIs

http://mysite.com/myimage.png

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

A platform that allows you to package web applicationsand get access to device APIs

http://phonegap.com

PhoneGap

+

Apps vs Web technologybuilt with

James Pearce Sr Director, Developer Relations @ jamespearce [email protected]