Build Amazing Apps with Web Standards

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

2. Aditya BansodVP, Product Marketing @adityabansodaditya@sencha.com

3. Mobile appdevelopment is hard

5. The Native Route

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

7. Top US Smartphone PlatformsAugust 2011, comScore MobiLens

8. Native programming languages you’ll needUS Smartphones, August 2011

9. Browser platforms to targetUS Smartphones, August 2011

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

11. One Stack

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

14. Stay on top of diversity • Can I Use?http://caniuse.com • Modernizrhttp://modernizr.com • DeviceAtlashttp://deviceatlas.com

15. 100% Support Browsers Capabilities & specifications

16. Frameworks 100% Support Browsers Polyfills Capabilities & specifications

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

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

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

21. HTTP/HTTPS HTML JavaScript Sencha.io WebSocket CSS MY APPLICATION • Mobile framework • Native packagingModern mobile UI • Desktop framework • Cross-BrowserModern desktop UI Sencha TouchMobile Ext JS Desktop BROWSER ENGINES SERVERS & SERVICES

22. HTTP/HTTPS HTML JavaScript Sencha.io WebSocket CSS MY APPLICATION UI: Controls + Containers Data: Models + Stores + Connectors Foundation: OOP + MVC + Library Sencha TouchMobile Ext JS Desktop BROWSER ENGINES SERVERS & SERVICES

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

24. www.sencha.com/apps

26. Sencha Basics

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

28. Class System Ext.define( ‘class_name’, { } ); Ext.create( ‘class_name’, { } );

29. Classes

30. Classes

31. Classes

32. MVC

33. xtype

34. xtemplate

35. UI

36. Touch Components

37. 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

38. I want to go fast... “ ”

39. DEVELOPMENT WORKFLOW Ext Designer 1.2 Design Develop Deploy

40. Ext JS interface builderSupport for Ext JS ChartsCode generation for complex UI layoutsJSON/XML data connectivity • Export projects and code Ext Designer

41. Sencha Architect 2 Design Develop Deploy

42. Everything from Ext Designer 1.2 + • Sencha Touch 2Code Editing • MVCNative Deployment Sencha Architect 2

43. Let’s take a closer look

44. Architect’s workspace

45. Application Toolbar

46. Project Inspector

47. Design Canvas

48. Toolbox

49. Configuration

50. Code Editor