Jay Garcia will discuss how Modus Create constructed the SenchaCon mobile application using Sencha Touch 2. Through this presentation, take you through deep dives into the SenchaCon app codebase, as well as discuss many of the decisions they made along the way. Many technical details about Sencha Touch itself will be peppered through this walkthrough.
4. The SenchaCon app supporters
Web API Sencha Engineers
Wednesday, November 2, 11
5. The SenchaCon app
• Uses Sencha Touch 2
• 35 classes
• Takes advantage of Ext Loader (debug)
• Implements MVC (extensively!)
Wednesday, November 2, 11
6. The SenchaCon app
• Leverages Local Storage
• Uses app cache (offline storage)
• Implements ComponentQuery
• Not a single component with a static id!
Wednesday, November 2, 11
8. 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
Wednesday, November 2, 11
9. 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
Wednesday, November 2, 11
10. 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
Wednesday, November 2, 11
13. Migrate to the new class system
Wednesday, November 2, 11
14. Sencha Touch 2.0 migration
• Change the namespace to match the new MVC pattern
• Views
• Models
• Controllers
• Utilities
Wednesday, November 2, 11
15. Quick MVC thoughts
• Controller is at the center
Controller
• Controller subscribes to events
from the view
• Controller updates the model
View Model
• Model drives the view
Wednesday, November 2, 11
16. Quick MVC thoughts
App
Controller
• Application extends Controller!
• Controllers can talk to the
application via events or direct Controller
methods calls
View Model
Wednesday, November 2, 11
17. Multi-controller application
App
Controller
Controller Controller
View Model View Model
Wednesday, November 2, 11
18. 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
Wednesday, November 2, 11
34. Adding the sessions list
App
Schedule Sessions
Viewport NavBar
Panel List
Schedule Sessions
Viewport NavBar Session
Panel List
Wednesday, November 2, 11