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

• jay@moduscreate.com

Thank you!