Here, Jay Garcia describes

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!

23. The SenchaCon app

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