About us
#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/
What is Sencha Touch
• The first and best mobile-centric HTML 5 framework
• Provides the foundation to develop kick ass cross platform mobile Web apps
• Built on the best Web Standards
• 2.0 is killing it!
New to Sencha Touch 2.0
• Improved Class system (from Ext JS 4.0)
• Faster layouts
• Faster startup speed
• Smoother scrolling
• Updated rendering process
New to Sencha Touch 2.0
• DataView can render components
• Way better documentation
• High quality examples
• Updated MVC
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
Robust class system
• Simple class registration
• Automatic Name Spacing
• Class dependency system
• Dynamic class loading
Ext.Base
MyClass
Mixin Mixin
The SenchaCon app team
Development Design
The SenchaCon app team
Development Design
The SenchaCon app team
Development Design
The SenchaCon app team
Development Design
The SenchaCon app team
Development Design
The SenchaCon app supporters
Web API Sencha Engineers
The SenchaCon app supporters
Web API Sencha Engineers
The SenchaCon app supporters
Web API Sencha Engineers
The SenchaCon app supporters
Web API Sencha Engineers
The SenchaCon app supporters
Web API Sencha Engineers
The SenchaCon app supporters
Web API Sencha Engineers
The SenchaCon app
• Uses Sencha Touch 2
• 35 classes
• Takes advantage of Ext Loader (debug)
• Implements MVC (extensively!)
The SenchaCon app
• Uses Sencha Touch 2
• 35 classes
• Takes advantage of Ext Loader (debug)
• Implements MVC (extensively!)
The SenchaCon app
• Leverages Local Storage
• Uses app cache (offline storage)
• Implements ComponentQuery
• Not a single component with a static id!
The SenchaCon app
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
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
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
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 subscribes to events from the view
• Controller updates the model
• Model drives the view
Model
Controller
View
Quick MVC thoughts
• Application extends Controller!
• Controllers can talk to the application via events or direct methods calls
ModelView
Controller
AppController
Multi-controller application
ModelView ModelView
Controller Controller
AppController
The class architecture
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetail
SessionDetail
SessionSpeakers
List
SpeakersList
SpeakerSpeakerDetail
SpeakerDetail
DataManager Util
Building the Viewport
Viewport
App
History store
Viewport
Building navigation
Viewport NavBar
App
NavBar
History store
Viewport
Adding the schedule panel
SchedulePanelViewport NavBar
NavBar SchedulePanel
App
History store
Viewport
Adding the sessions list
SchedulePanelViewport
Viewport
SessionSessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
Adding the schedule panel
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetail
SessionDetail
Session
A highly optimized view!
Adding session speaker details
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetailSession
SpeakerDetail
SpeakerDetail
SessionDetail
Speaker
Adding session speaker details
Adding session speaker details
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetail
SessionDetail
SessionSpeakers
List
SpeakersList
SpeakerSpeakerDetail
SpeakerDetail
Questions?
• Contact info:
• twitter :
• @moduscreate
• @_jdg
Thank you!