Download - Community Code: The SenchaCon App
Wednesday, November 2, 11
About us
Wednesday, November 2, 11
The SenchaCon app team
Development Design
Wednesday, November 2, 11
The SenchaCon app supporters
Web API Sencha Engineers
Wednesday, November 2, 11
The SenchaCon app
• Uses Sencha Touch 2
• 35 classes
• Takes advantage of Ext Loader (debug)
• Implements MVC (extensively!)
Wednesday, November 2, 11
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
The SenchaCon app
Wednesday, November 2, 11
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
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
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
Wednesday, November 2, 11
Enter Sencha Touch 2!
Wednesday, November 2, 11
Migrate to the new class system
Wednesday, November 2, 11
Sencha Touch 2.0 migration
• Change the namespace to match the new MVC pattern
• Views
• Models
• Controllers
• Utilities
Wednesday, November 2, 11
Quick MVC thoughts
• Controller is at the center
• Controller subscribes to events from the view
• Controller updates the model
• Model drives the view
Model
Controller
View
Wednesday, November 2, 11
Quick MVC thoughts
• Application extends Controller!
• Controllers can talk to the application via events or direct methods calls
ModelView
Controller
AppController
Wednesday, November 2, 11
Multi-controller application
ModelView ModelView
Controller Controller
AppController
Wednesday, November 2, 11
The class architecture
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetail
SessionDetail
SessionSpeakers
List
SpeakersList
SpeakerSpeakerDetail
SpeakerDetail
DataManager Util
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Building the Viewport
Viewport
App
History store
Viewport
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Building navigation
Viewport NavBar
App
NavBar
History store
Viewport
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Adding the schedule panel
SchedulePanelViewport NavBar
NavBar SchedulePanel
App
History store
Viewport
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Adding the sessions list
SchedulePanelViewport
Viewport
SessionSessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Adding the schedule panel
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetail
SessionDetail
Session
Wednesday, November 2, 11
A highly optimized view!
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Adding session speaker details
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetailSession
SpeakerDetail
SpeakerDetail
SessionDetail
Speaker
Wednesday, November 2, 11
Adding session speaker details
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Adding session speaker details
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetail
SessionDetail
SessionSpeakers
List
SpeakersList
SpeakerSpeakerDetail
SpeakerDetail
Wednesday, November 2, 11
Questions?
• Contact info:
• twitter :
• @moduscreate
• @_jdg
Thank you!
Wednesday, November 2, 11