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

2. Aditya Bansod VP, Product Marketing @adityabansod aditya@sencha.com aditya@sencha.com

3. Mobile app development is hard

5. The Native Route

6. A badge for all these ways the web is changing

7. Top US Smartphone Platforms August 2011, comScore MobiLens

8. Native programming languages youll need US Smartphones, August 2011

9. Browser platforms to target US Smartphones, August 2011

10. But at least we are using one language, one markup, one style system

11. One Stack

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

13. IEChromeSafariFirefoxiOSBB10Android @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

14. Stay on top of diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com

15. Capabilities & specifications Support 100% Browsers

16. Capabilities & specifications 100% Polyfills Support Framework s Browsers

18. Gradient from pages to apps (lightest at pages) pages interactive apps

19. Gradient from pages to apps (lightest at pages) Build Amazing Apps with Web Standards pages interactive apps

20. SERVERS & SERVICES MY APPLICATION Sencha Touch Mobile Ext JS Desktop Ext JS Desktop BROWSER ENGINES Sencha.io HTTP/HTTP S WebSocket JavaScript HTML CSS

21. SERVERS & 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

22. SERVERS & 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

23. Sencha Touch 2 A JavaScript framework for building rich mobile apps with web standards

24. www.sencha.com/apps

26. http://sencha.com/touch

27. Sencha Basics

28. Class System Packages Inheritance Scope Management Class Loading Mix-ins

29. Ext.create( class_name, { } ); Ext.define( class_name, { } ); Class System

30. Classes

31. Classes

32. Classes

33. MVC

34. xtype

35. xtemplate

36. UI

37. Touch Components

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

39. I want to go fast...

40. Design Develo p Deploy DEVELOPMENT WORKFLOW Ext Designer 1.2

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

42. Design Develo p Deploy Sencha Architect 2

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

44. Lets take a closer look

45. Architects workspace

46. Application Toolbar

47. Project Inspector

48. Design Canvas

49. Toolbox

50. Configuration

51. Code Editor

52. Wear your helmets for the live demo!

53. Thanks Qcon NYC!

54. Aditya Bansod VP, Product Marketing @ adityabansod aditya@sencha.com aditya@sencha.com