Community Code: The SenchaCon App

transcript

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

• 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

Controller

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

NavBar

NavBar SchedulePanel

SessionDetail

SessionSpeakers

SpeakersList

SpeakerSpeakerDetail

SpeakerDetail

DataManager Util

Building the Viewport

Viewport

History store

Viewport

Building navigation

Viewport NavBar

NavBar

History store

Viewport

Adding the schedule panel

SchedulePanelViewport NavBar

History store

Viewport

Adding the sessions list

Viewport

SessionSessionsList

SessionsList

NavBar

Adding the schedule panel

Viewport

SessionsList

NavBar

SessionDetail

Session

A highly optimized view!

Adding session speaker details

Viewport

SessionsList

NavBar

SessionDetailSession

SpeakerDetail

SessionDetail

Speaker

Viewport

SessionsList

NavBar

SessionDetail

SessionSpeakers

SpeakersList

SpeakerSpeakerDetail

SpeakerDetail

Questions?

• Contact info:

• twitter :

• @moduscreate

• @_jdg

• jay@moduscreate.com

Thank you!

Community Code: The SenchaCon App

Technology