Recommandé
Contenu connexe
En vedette
En vedette (11)
Similaire à Intro to sencha touch 2
Similaire à Intro to sencha touch 2 (20)
Plus de Patrick Sheridan
Plus de Patrick Sheridan (15)
Dernier
Dernier (20)
Intro to sencha touch 2
- 2. About us
- 3. #WIN -Danny Winokur, Adobe’s vice president and general manager of interactive development http://bits.blogs.nytimes.com/2011/11/09/adobe-to-kill-mobile-flash-focus-on-html5/
- 4. What is Sencha Touch • Thefirst and best mobile- centric HTML 5 framework • Providesthe foundation to develop kick ass cross platform mobile Web apps • Built on the best Web Standards • 2.0 is killing it!
- 5. New to Sencha Touch 2.0 • Improved Class system (from Ext JS 4.0) • Faster layouts • Faster startup speed • Smoother scrolling • Updated rendering process
- 6. New to Sencha Touch 2.0 • DataView can render components • Way better documentation • High quality examples • Updated MVC
- 7. A peek under the hood • Full Component lifecycle • Well designed class inheritance model • Observable event model • Components and elements • Elaborate Container model • Configureable layout managers
- 8. Robust class system • Simple class registration Ext.Base • Automatic Name Spacing Mixin Mixin • Class dependency system • Dynamic class loading MyClass
- 9. The SenchaCon app team Development Design
- 10. The SenchaCon app team Development Design
- 11. The SenchaCon app team Development Design
- 12. The SenchaCon app team Development Design
- 13. The SenchaCon app team Development Design
- 14. The SenchaCon app supporters Web API Sencha Engineers
- 15. The SenchaCon app supporters Web API Sencha Engineers
- 16. The SenchaCon app supporters Web API Sencha Engineers
- 17. The SenchaCon app supporters Web API Sencha Engineers
- 18. The SenchaCon app supporters Web API Sencha Engineers
- 19. The SenchaCon app supporters Web API Sencha Engineers
- 20. The SenchaCon app • Uses Sencha Touch 2 • 35 classes • Takes advantage of Ext Loader (debug) • Implements MVC (extensively!)
- 21. The SenchaCon app • Uses Sencha Touch 2 • 35 classes • Takes advantage of Ext Loader (debug) • Implements MVC (extensively!)
- 22. The SenchaCon app • Leverages Local Storage • Uses app cache (offline storage) • Implements ComponentQuery • Not a single component with a static id!
- 24. The SenchaCon app • Highly optimized custom components • Reusability kept in mind throughout code base • Code developed with minification in mind • Minified with Sencha SDK Tools 2.0
- 25. Breaking the ice • Develop individual views & models in their own sandbox • Views should work independently • One HTML file per view for testing • Test fired events via Webkit console • Allowed for us to divide and conquer
- 26. Pass #1 • Initial development done in Sencha touch 1.0 • Used MVC • Router • History • Best practices for extending components • Paved the way for the Sencha Touch 2.0 migration
- 32. Enter Sencha Touch 2!
- 33. Migrate to the new class system
- 34. Migrate to the new class system
- 35. Sencha Touch 2.0 migration • Change the namespace to match the new MVC pattern • Views • Models • Controllers • Utilities
- 36. Quick MVC thoughts • Controller is at the center Controller • Controllersubscribes to events from the view • Controller updates the model View Model • Model drives the view
- 37. Quick MVC thoughts App Controller • Application extends Controller! • Controllers can talk to the application via events or direct Controller methods calls View Model
- 38. Multi-controller application App Controller Controller Controller View Model View Model
- 39. The class architecture Data Util Manager App Schedule Sessions Session Speakers Speaker Viewport NavBar Panel List Detail List Detail Schedule Sessions Session Speakers Speaker Viewport NavBar Session Speaker Panel List Detail List Detail
- 43. Building the Viewport App Viewport Viewport History store
- 48. Building navigation App Viewport NavBar Viewport History NavBar store
- 51. Adding the schedule panel App Schedule Viewport NavBar Panel History Schedule Viewport NavBar store Panel
- 55. Adding the sessions list App Schedule Sessions Viewport NavBar Panel List Schedule Sessions Viewport NavBar Session Panel List
- 59. Adding the schedule panel App Schedule Sessions Session Viewport NavBar Panel List Detail Schedule Sessions Session Viewport NavBar Session Panel List Detail
- 60. A highly optimized view!
- 65. Adding session speaker details App Schedule Sessions Session Speaker Viewport NavBar Panel List Detail Detail Schedule Sessions Session Speaker Viewport NavBar Session Speaker Panel List Detail Detail
- 66. Adding session speaker details
- 69. Adding session speaker details App Schedule Sessions Session Speakers Speaker Viewport NavBar Panel List Detail List Detail Schedule Sessions Session Speakers Speaker Viewport NavBar Session Speaker Panel List Detail List Detail
- 70. Questions? • Contact info: • twitter: • @moduscreate Thank you! • @_jdg • jay@moduscreate.com