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 [email protected]
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 CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL 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 rich 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 ” Design Ext DesignerDevelop 1.2 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 DesignSenchaDevelop Architect 2Deploy
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 [email protected]
Thursday, November 8, 12