Build Amazing Apps with Web Standards Mobile HTML5 Applications In Hours, Not Days

Download Build Amazing Apps with Web Standards Mobile HTML5 Applications In Hours, Not Days

Post on 26-Mar-2015

213 views

Category:

Documents

1 download

Embed Size (px)

TRANSCRIPT

<ul><li>Slide 1</li></ul> <p>Build Amazing Apps with Web Standards Mobile HTML5 Applications In Hours, Not Days. Slide 2 Aditya Bansod VP, Product Marketing @adityabansod aditya@sencha.com aditya@sencha.com Slide 3 Mobile app development is hard Slide 4 Slide 5 The Native Route Slide 6 A badge for all these ways the web is changing Slide 7 Top US Smartphone Platforms August 2011, comScore MobiLens Slide 8 Native programming languages youll need US Smartphones, August 2011 Slide 9 Browser platforms to target US Smartphones, August 2011 Slide 10 But at least we are using one language, one markup, one style system Slide 11 One Stack Slide 12 Workers &amp; Parallel Processing File Systems Databases App Caches JavaScript Semantic HTML CSS Styling &amp; Layout WebFontVideoAudioGraphics Cross-App Messaging Camera Location Contacts SMS Orientation Gyro HTTP AJAX Events Sockets SSL (all the elements of a modern application platform) Slide 13 IEChromeSafariFirefoxiOSBB10Android @font-face Canvas HTML5 Audio &amp; 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 Slide 14 Stay on top of diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com Slide 15 Capabilities &amp; specifications Support 100% Browsers Slide 16 Capabilities &amp; specifications 100% Polyfills Support Framework s Browsers Slide 17 Slide 18 Gradient from pages to apps (lightest at pages) pages interactive apps Slide 19 Gradient from pages to apps (lightest at pages) Build Amazing Apps with Web Standards pages interactive apps Slide 20 SERVERS &amp; SERVICES MY APPLICATION Sencha Touch Mobile Ext JS Desktop Ext JS Desktop BROWSER ENGINES Sencha.io HTTP/HTTP S WebSocket JavaScript HTML CSS Slide 21 SERVERS &amp; SERVICES MY APPLICATION Sencha Touch Mobile Ext JS Desktop Ext JS Desktop BROWSER ENGINES Desktop framework Desktop framework Cross- BrowserModern desktop UI Cross- BrowserModern desktop UI Mobile framework Mobile framework Native packagingModern mobile UI Native packagingModern mobile UI Sencha.io HTTP/HTTP S WebSocket JavaScript HTML CSS Slide 22 SERVERS &amp; SERVICES Sencha.io HTTP/HTTP S WebSocket MY APPLICATION Sencha Touch Mobile Ext JS Desktop Ext JS Desktop BROWSER ENGINES UI: Controls + Containers Foundation: OOP + MVC + Library Data: Models + Stores + Connectors JavaScript HTML CSS Slide 23 Sencha Touch 2 A JavaScript framework for building rich mobile apps with web standards Slide 24 www.sencha.com/apps Slide 25 Slide 26 http://sencha.com/touch Slide 27 Sencha Basics Slide 28 Class System Packages Inheritance Scope Management Class Loading Mix-ins Slide 29 Ext.create( class_name, { } ); Ext.define( class_name, { } ); Class System Slide 30 Classes Slide 31 Classes Slide 32 Classes Slide 33 MVC Slide 34 xtype Slide 35 xtemplate Slide 36 UI Slide 37 Touch Components Slide 38 Ext JS Components help with desktop UI component examples? put separately: mobile UI then next slide desktop UI (scattering of individual controls, breakdown of components and containers - the theme viewer examples, and web desktop (?) example) Use Neptune examples, Kitchen Sink in Ext JS 4.1 help with desktop UI component examples? put separately: mobile UI then next slide desktop UI (scattering of individual controls, breakdown of components and containers - the theme viewer examples, and web desktop (?) example) Use Neptune examples, Kitchen Sink in Ext JS 4.1 Slide 39 I want to go fast... Slide 40 Design Develo p Deploy DEVELOPMENT WORKFLOW Ext Designer 1.2 Slide 41 Ext Designer Ext JS interface builderSupport for Ext JS ChartsCode generation for complex UI layoutsJSON/XML data connectivity Ext JS interface builderSupport for Ext JS ChartsCode generation for complex UI layoutsJSON/XML data connectivity Export projects and code Export projects and code Slide 42 Design Develo p Deploy Sencha Architect 2 Slide 43 Everything from Ext Designer 1.2 Everything from Ext Designer 1.2 + Sencha Touch 2Code Editing Sencha Touch 2Code Editing MVCNative Deployment MVCNative Deployment Slide 44 Lets take a closer look Slide 45 Architects workspace Slide 46 Application Toolbar Slide 47 Project Inspector Slide 48 Design Canvas Slide 49 Toolbox Slide 50 Configuration Slide 51 Code Editor Slide 52 Wear your helmets for the live demo! Slide 53 Thanks Qcon NYC! Slide 54 Aditya Bansod VP, Product Marketing @ adityabansod aditya@sencha.com aditya@sencha.com </p>