Build Amazing Apps with Web StandardsBuild Amazing Apps with Web Standards

Mobile HTML5 Mobile HTML5 Applications Applications In Hours, Not Days.In Hours, Not Days.

Aditya BansodAditya BansodVP, Product MarketingVP, Product Marketing

@adityabansod @adityabansod

aditya@sencha.com

Mobile appMobile appdevelopment is harddevelopment is hard

The Native RouteThe Native Route

A badge for all these waysthe web is changing

Top US Smartphone PlatformsAugust 2011, comScore MobiLens

Native programming languages you’ll need

US Smartphones, August 2011

Browser platforms to targetUS Smartphones, August 2011

But at least we are using

one language,one markup,

one style system

One Stack

Workers & Parallel

Processing

File Systems

DatabasesApp Caches

JavaScript

Semantic HTML

CSS Styling & Layout

WebFont

Video Audio Graphics

Cross-AppMessaging

Camera

Location

Contacts

SMS

Orientation

Gyro

HTTP

AJAX

Events

Sockets

SSL

(all the elements of a modern application platform)

IE Chrome Safari Firefox iOS BB10 Android@font-face

CanvasHTML5 Audio & Video

rgba(), hsla()border-image:border-radius:

box-shadow:text-shadow:

opacity:Multiple backgrounds

Flexible Box ModelCSS Animations

CSS ColumnsCSS Gradients

CSS ReflectionsCSS 2D TransformsCSS 3D Transforms

CSS TransitionsGeolocation API

local/sessionStorageSVG/SVG Clipping

SMILInline SVG

Drag and Drophashchange

X-window MessagingHistory Management

applicationCacheWeb SocketsWeb Workers

Web SQL DatabaseWebGL

IndexedDB

Stay on top of diversity

Can I Use?http://caniuse.com

Modernizrhttp://modernizr.com

DeviceAtlashttp://deviceatlas.com

Capabilities & specifications

Support 100%

Browsers

Capabilities & specifications

100%

Polyfills Support

Frameworks

Browsers

pages interactive pages interactive apps apps

Build Amazing Apps with Web Build Amazing Apps with Web StandardsStandards

pages interactive pages interactive apps apps

SERVERS & SERVICESSERVERS & SERVICES

MY APPLICATIONMY APPLICATION

Sencha TouchMobile

Sencha TouchMobile

Ext JSDesktopExt JSDesktop

BROWSER ENGINESBROWSER ENGINES

Sencha.ioSencha.ioHTTP/HTTPSHTTP/HTTPS

WebSocket

WebSocket

JavaScriptJavaScriptHTMLHTML CSSCSS

SERVERS & SERVICESSERVERS & SERVICES

MY APPLICATIONMY APPLICATION

Sencha TouchMobile

Sencha TouchMobile

Ext JSDesktopExt JSDesktop

BROWSER ENGINESBROWSER ENGINES

• Desktop Desktop frameworkframework

• Cross-Cross-BrowserModern BrowserModern desktop UIdesktop UI

• Mobile Mobile frameworkframework

• Native Native packagingModerpackagingModern mobile UIn mobile UI

Sencha.ioSencha.ioHTTP/HTTPSHTTP/HTTPS

WebSocket

WebSocket

JavaScriptJavaScriptHTMLHTML CSSCSS

SERVERS & SERVICESSERVERS & SERVICES

Sencha.ioSencha.ioHTTP/HTTPSHTTP/HTTPS

WebSocket

WebSocket

MY APPLICATIONMY APPLICATION

Sencha TouchMobile

Sencha TouchMobile

Ext JSDesktopExt JSDesktop

BROWSER ENGINESBROWSER ENGINES

UI: Controls + ContainersUI: Controls + Containers

Foundation: OOP + MVC + LibraryFoundation: OOP + MVC + Library

Data: Models + Stores + ConnectorsData: Models + Stores + Connectors

JavaScriptJavaScriptHTMLHTML CSSCSS

Sencha Touch 2Sencha Touch 2

A JavaScript framework for building rich mobile apps with web standardsA JavaScript framework for building rich mobile apps with web standards

www.sencha.com/apps

QuickTime™ and aH.264 decompressor

are needed to see this picture.

Sencha BasicsSencha Basics

Class SystemClass System

PackagesInheritanceScope ManagementClass LoadingMix-ins

Ext.create( ‘class_name’, { } );

Ext.define( ‘class_name’, { } );

Class SystemClass System

ClassesClasses

ClassesClasses

ClassesClasses

MVC

xtypextype

xtemplatextemplate

UIUI

Touch Components

Ext JS Components

““ ””I want to go I want to go

fast...fast...

DesignDesign DeveloDevelopp

DeployDeploy

DEVELOPMENT WORKFLOW

Ext Designer 1.2Ext Designer 1.2

Ext DesignerExt Designer

• Ext JS interface Ext JS interface builderSupport for Ext JS builderSupport for Ext JS ChartsCode generation for ChartsCode generation for complex UI layoutsJSON/XML complex UI layoutsJSON/XML data connectivitydata connectivity

• Export projects and codeExport projects and code

DesignDesign DeveloDevelopp

DeployDeploySencha Architect 2Sencha Architect 2

Sencha Architect 2Sencha Architect 2

• Everything from Ext Everything from Ext Designer 1.2Designer 1.2++

• Sencha Touch 2Code Sencha Touch 2Code EditingEditing

• MVCNative DeploymentMVCNative Deployment

Let’s take a closer Let’s take a closer looklook

Architect’s workspace

Application ToolbarApplication Toolbar

Project InspectorProject Inspector

Design CanvasDesign Canvas

ToolboxToolbox

ConfigurationConfiguration

Code EditorCode Editor

Wear your helmets for the live Wear your helmets for the live demo!demo!

ThanksQcon NYC!Qcon NYC!

Aditya BansodAditya BansodVP, Product MarketingVP, Product Marketing @ @adityabansodadityabansodaditya@sencha.com