Community Code: The SenchaCon App

Wednesday, November 2, 11

About us


The SenchaCon app team

Development Design


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

• 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


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


App

History store

Viewport





Adding the sessions list


Viewport

SessionSessionsList

SessionsList

NavBar


App





Adding the schedule panel


Viewport

SessionsList

SessionsList

NavBar


App

SessionDetail

SessionDetail

Session


A highly optimized view!






Adding session speaker details


Viewport

SessionsList

SessionsList

NavBar


App

SessionDetailSession

SpeakerDetail

SpeakerDetail

SessionDetail

Speaker








Viewport

SessionsList

SessionsList

NavBar


App

SessionDetail

SessionDetail

SessionSpeakers

List

SpeakersList

SpeakerSpeakerDetail

SpeakerDetail


Questions?

• Contact info:

• twitter :

• @moduscreate

• @_jdg

• [email protected]

Thank you!


mailto:[email protected]

mailto:[email protected]

Technology

Community Code: The SenchaCon App