About us
#WIN                 -Danny Winokur, Adobe’s vice president and general manager of interactive developmenthttp://bits.blog...
What is Sencha Touch• Thefirst and best mobile- centric HTML 5 framework• Providesthe foundation to develop kick ass cross ...
New to Sencha Touch 2.0• Improved    Class system (from Ext JS 4.0)• Faster   layouts• Faster   startup speed• Smoother   ...
New to Sencha Touch 2.0• DataView    can render components• Way    better documentation• High   quality examples• Updated ...
A peek under the hood• Full   Component lifecycle• Well    designed class inheritance model• Observable    event model  • ...
Robust class system• Simple   class registration                                        Ext.Base• Automatic    Name Spacin...
The SenchaCon app teamDevelopment      Design
The SenchaCon app teamDevelopment      Design
The SenchaCon app teamDevelopment      Design
The SenchaCon app teamDevelopment      Design
The SenchaCon app teamDevelopment      Design
The SenchaCon app supportersWeb API   Sencha Engineers
The SenchaCon app supportersWeb API   Sencha Engineers
The SenchaCon app supportersWeb API   Sencha Engineers
The SenchaCon app supportersWeb API   Sencha Engineers
The SenchaCon app supportersWeb API   Sencha Engineers
The SenchaCon app supportersWeb API   Sencha Engineers
The SenchaCon app• Uses   Sencha Touch 2 • 35    classes • Takes    advantage of Ext Loader (debug) • Implements      MVC ...
The SenchaCon app• Uses   Sencha Touch 2 • 35    classes • Takes    advantage of Ext Loader (debug) • Implements      MVC ...
The SenchaCon app• Leverages   Local Storage• Uses   app cache (offline storage)• Implements   ComponentQuery • Not    a si...
The SenchaCon app
The SenchaCon app• Highly       optimized custom components• Reusability           kept in mind throughout code base• Code...
Breaking the ice• Develop   individual views & models in their own sandbox • Views    should work independently • One    H...
Pass #1• Initial   development done in Sencha touch 1.0• Used      MVC  • Router  • History  • Best     practices for exte...
Enter Sencha Touch 2!
Migrate to the new class system
Migrate to the new class system
Sencha Touch 2.0 migration• Change   the namespace to match the new MVC pattern • Views • Models • Controllers • Utilities
Quick MVC thoughts• Controller   is at the center                                          Controller• Controllersubscribe...
Quick MVC thoughts                                               App                                             Controlle...
Multi-controller application                          App                        Controller       Controller              ...
The class architecture      Data                  Util     Manager                                              App       ...
Building the Viewport           App      ViewportViewport         History                  store
Building navigation                  App      Viewport          NavBarViewport     History    NavBar              store
Adding the schedule panel                          App                                    Schedule     Viewport           ...
Adding the sessions list                    App                    Schedule        SessionsViewport   NavBar              ...
Adding the schedule panel                         App                    Schedule         Sessions             SessionView...
A highly optimized view!
Adding session speaker details                                      App                    Schedule         Sessions      ...
Adding session speaker details
Adding session speaker details                                                    App                    Schedule         ...
Questions?• Contact   info: • twitter: • @moduscreate                         Thank you! • @_jdg • jay@moduscreate.com
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Intro to sencha touch 2
Upcoming SlideShare
Loading in …5
×

Intro to sencha touch 2

3,614 views

Published on

Here, Jay Garcia describes

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,614
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
120
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Intro to sencha touch 2

  1. 1. About us
  2. 2. #WIN -Danny Winokur, Adobe’s vice president and general manager of interactive developmenthttp://bits.blogs.nytimes.com/2011/11/09/adobe-to-kill-mobile-flash-focus-on-html5/
  3. 3. 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!
  4. 4. New to Sencha Touch 2.0• Improved Class system (from Ext JS 4.0)• Faster layouts• Faster startup speed• Smoother scrolling• Updated rendering process
  5. 5. New to Sencha Touch 2.0• DataView can render components• Way better documentation• High quality examples• Updated MVC
  6. 6. 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
  7. 7. Robust class system• Simple class registration Ext.Base• Automatic Name Spacing Mixin Mixin• Class dependency system• Dynamic class loading MyClass
  8. 8. The SenchaCon app teamDevelopment Design
  9. 9. The SenchaCon app teamDevelopment Design
  10. 10. The SenchaCon app teamDevelopment Design
  11. 11. The SenchaCon app teamDevelopment Design
  12. 12. The SenchaCon app teamDevelopment Design
  13. 13. The SenchaCon app supportersWeb API Sencha Engineers
  14. 14. The SenchaCon app supportersWeb API Sencha Engineers
  15. 15. The SenchaCon app supportersWeb API Sencha Engineers
  16. 16. The SenchaCon app supportersWeb API Sencha Engineers
  17. 17. The SenchaCon app supportersWeb API Sencha Engineers
  18. 18. The SenchaCon app supportersWeb API Sencha Engineers
  19. 19. The SenchaCon app• Uses Sencha Touch 2 • 35 classes • Takes advantage of Ext Loader (debug) • Implements MVC (extensively!)
  20. 20. The SenchaCon app• Uses Sencha Touch 2 • 35 classes • Takes advantage of Ext Loader (debug) • Implements MVC (extensively!)
  21. 21. The SenchaCon app• Leverages Local Storage• Uses app cache (offline storage)• Implements ComponentQuery • Not a single component with a static id!
  22. 22. The SenchaCon app
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. Enter Sencha Touch 2!
  27. 27. Migrate to the new class system
  28. 28. Migrate to the new class system
  29. 29. Sencha Touch 2.0 migration• Change the namespace to match the new MVC pattern • Views • Models • Controllers • Utilities
  30. 30. 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
  31. 31. Quick MVC thoughts App Controller• Application extends Controller!• Controllers can talk to the application via events or direct Controller methods calls View Model
  32. 32. Multi-controller application App Controller Controller ControllerView Model View Model
  33. 33. The class architecture Data Util Manager App Schedule Sessions Session Speakers SpeakerViewport NavBar Panel List Detail List Detail Schedule Sessions Session Speakers SpeakerViewport NavBar Session Speaker Panel List Detail List Detail
  34. 34. Building the Viewport App ViewportViewport History store
  35. 35. Building navigation App Viewport NavBarViewport History NavBar store
  36. 36. Adding the schedule panel App Schedule Viewport NavBar Panel History ScheduleViewport NavBar store Panel
  37. 37. Adding the sessions list App Schedule SessionsViewport NavBar Panel List Schedule SessionsViewport NavBar Session Panel List
  38. 38. Adding the schedule panel App Schedule Sessions SessionViewport NavBar Panel List Detail Schedule Sessions SessionViewport NavBar Session Panel List Detail
  39. 39. A highly optimized view!
  40. 40. Adding session speaker details App Schedule Sessions Session SpeakerViewport NavBar Panel List Detail Detail Schedule Sessions Session SpeakerViewport NavBar Session Speaker Panel List Detail Detail
  41. 41. Adding session speaker details
  42. 42. Adding session speaker details App Schedule Sessions Session Speakers SpeakerViewport NavBar Panel List Detail List Detail Schedule Sessions Session Speakers SpeakerViewport NavBar Session Speaker Panel List Detail List Detail
  43. 43. Questions?• Contact info: • twitter: • @moduscreate Thank you! • @_jdg • jay@moduscreate.com

×