Mobile HTML5 Applications In Hours, Not Days. Build Amazing Apps - PowerPoint PPT Presentation

Mobile HTML5 Applications In Hours, Not Days. Build Amazing Apps with Web Standards QCon SF @adityabansod Thursday, November 8, 12

Aditya Bansod VP, Product Marketing @adityabansod aditya@sencha.com Thursday, November 8, 12

Mobile app development is hard Thursday, November 8, 12

Thursday, November 8, 12

The Native Route Thursday, November 8, 12

A badge for all these ways the web is changing Thursday, November 8, 12

MS RIM Google Apple Top US Smartphone Platforms August 2011, comScore MobiLens Thursday, November 8, 12

C# J2ME/Air Java/C++ Obj-C Native programming languages you’ll need US Smartphones, August 2011 Thursday, November 8, 12

IE WebKit WebKit WebKit Browser platforms to target US Smartphones, August 2011 Thursday, November 8, 12

But at least we are using one language, one markup, one style system Thursday, November 8, 12

One Stack Thursday, November 8, 12

Camera WebFont Video Audio Graphics HTTP Location AJAX CSS Styling & Layout Contacts Events JavaScript SMS Sockets Orientation SSL Semantic HTML Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing (all the elements of a modern application platform) Thursday, November 8, 12

IE Chrome Safari Firefox iOS BB10 Android @font-face Canvas HTML5 Audio & Video rgba(), hsla() border-image: border-radius: box-shadow: text-shadow: opacity: Multiple backgrounds Flexible Box Model CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchange X-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB Thursday, November 8, 12

Stay on top of diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com Thursday, November 8, 12

100% Support Browsers Capabilities & specifications Thursday, November 8, 12

100% Support Browsers Polyfills Frameworks Capabilities & specifications Thursday, November 8, 12

Thursday, November 8, 12

pages interactive apps Thursday, November 8, 12

Build Amazing Apps with Web Standards pages interactive apps Thursday, November 8, 12

MY APPLICATION Sencha Touch Ext JS Mobile Desktop BROWSER ENGINES HTML JavaScript CSS SERVERS & SERVICES HTTP/HTTPS Sencha.io WebSocket Thursday, November 8, 12

MY APPLICATION • Mobile framework • Desktop framework • Native packaging • Cross-Browser • Modern mobile UI • Modern desktop UI Sencha Touch Ext JS Mobile Desktop BROWSER ENGINES HTML JavaScript CSS SERVERS & SERVICES HTTP/HTTPS Sencha.io WebSocket Thursday, November 8, 12

MY APPLICATION UI: Controls + Containers Data: Models + Stores + Connectors Foundation: OOP + MVC + Library Sencha Touch Ext JS Mobile Desktop BROWSER ENGINES HTML JavaScript CSS SERVERS & SERVICES HTTP/HTTPS Sencha.io WebSocket Thursday, November 8, 12

Sencha Touch 2 A JavaScript framework for building r ich mobile apps with web standards Thursday, November 8, 12

www.sencha.com/apps Thursday, November 8, 12

Thursday, November 8, 12

Sencha Basics Thursday, November 8, 12

Class System Packages Inheritance Scope Management Class Loading Mix-ins Thursday, November 8, 12

Class System Ext.define( ‘class_name’, { } ); Ext.create( ‘class_name’, { } ); Thursday, November 8, 12

Classes Thursday, November 8, 12

Classes Thursday, November 8, 12

Classes Thursday, November 8, 12

MVC Thursday, November 8, 12

xtype Thursday, November 8, 12

xtemplate Thursday, November 8, 12

UI Thursday, November 8, 12

Touch Components Thursday, November 8, 12

Ext JS Components Thursday, November 8, 12

“ I want to go fast... ” Thursday, November 8, 12

Ext Designer 1.2 Develop Design Deploy DEVELOPMENT WORKFLOW Thursday, November 8, 12

Ext JS interface builder • Support for Ext JS Charts • Code generation for complex UI • layouts JSON/XML data connectivity • Export projects and code • Ext Designer Thursday, November 8, 12

Sencha Architect 2 Develop Design Deploy Thursday, November 8, 12

Everything from Ext Designer 1.2 • + Sencha Touch 2 • Code Editing • MVC • Native Deployment • Sencha Architect 2 Thursday, November 8, 12

Let’s take a closer look Thursday, November 8, 12

Architect’s workspace Thursday, November 8, 12

Application Toolbar Thursday, November 8, 12

Project Inspector Thursday, November 8, 12

Design Canvas Thursday, November 8, 12

Toolbox Thursday, November 8, 12

Configuration Thursday, November 8, 12

Code Editor Thursday, November 8, 12

Wear your helmets for the live demo! Thursday, November 8, 12

Thanks Qcon NYC! Thursday, November 8, 12

Aditya Bansod VP, Product Marketing @ adityabansod aditya@sencha.com Thursday, November 8, 12