html5 and sencha touch

Wednesday, December 7, 11

About us

Wednesday, December 7, 11

What is HTML5

A collection of technologies sparking a revolution of innovation and application development across the web!

Wednesday, December 7, 11

Why HTML5?

• Power behind the best next generation applications!

• Mobile and desktop web

• Is slowly killing Adobe Flash & Silverlight

• Biggest Leap in web technologies

• Latest versions of all major browsers support Most HTML5 features

Wednesday, December 7, 11

Latest news

-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/

Wednesday, December 7, 11

HTML5 brings• Better HTML semantics

• Offline storage

• Device access

• Better connectivity

• Multimedia

• Native graphics access

• Better performance

• CSS3

Wednesday, December 7, 11

Better HTML Semantics

• Richer set of HTML tags

• Microdata

• Microformats

Wednesday, December 7, 11

Offline Storage

• App cache

• Local storage

• Session storage

• Web database

Wednesday, December 7, 11

Device Access

• Geo Location

• Accelerometer

• Audio input/Camera

• Compass (iOS 5)

Wednesday, December 7, 11

Better connectivity

• Native web sockets

Wednesday, December 7, 11

Multimedia

• Audio

• Video

• h.264 / WebM

Wednesday, December 7, 11

Native Graphics access

• SVG, Canvas, VML

• CSS3 3D animations

• WebGL

Wednesday, December 7, 11

Better performance

• WebWorkers

• Threaded JavaScript

• XHR2

• Blob

• Chunked data

• Cross domain requests

Wednesday, December 7, 11

CSS3

• Better and faster layouts

• Native transitions

• hardware accelerated 3D

• Gradients

• Web Open Font Format

Wednesday, December 7, 11

Why HTML5?

?Wednesday, December 7, 11

Choose HTML5 if:

• Developing an app with limited resources

• Application is to live on mobile devices

• Deploy an application without the limitations of app stores

• Application must be accessible anywhere

• Want to leverage existing skill sets (HTML5, CSS, JavaScript)

Wednesday, December 7, 11

Available technologies

Wednesday, December 7, 11

Available technologies

Wednesday, December 7, 11

Available technologies

Wednesday, December 7, 11

Available technologies

Wednesday, December 7, 11

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

Wednesday, December 7, 11

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

Initialization

Render Destruction

AbstractComponent

Component

panel.AbstractPanel

Panel

container.AbstractContainer

Container

Wednesday, December 7, 11

Robust class system

• Simple class registration

• Automatic Name Spacing

• Class dependency system

• Dynamic class loading

Ext.Base

MyClass

Mixin Mixin

Wednesday, December 7, 11

Lots of widgets

Checkbox

DatePicker

Select Toggle field

Text field

Slider

URL field

Email field

Textarea

Password

SpinnerNumber field

Radio field

Wednesday, December 7, 11

Date Picker & Select field

Wednesday, December 7, 11

Sheets

Wednesday, December 7, 11

Message Box

Wednesday, December 7, 11

List View

Grouping bar

Index bar

Disclosure icon

Wednesday, December 7, 11

Maps

Wednesday, December 7, 11

Sencha Touch is highly customizable

Wednesday, December 7, 11

Bloomberg Business week

Wednesday, December 7, 11

BlueCross BlueShield

Wednesday, December 7, 11

Modus Othello

Wednesday, December 7, 11

The SenchaCon app

• Uses Sencha Touch 2

• 35 classes

• Takes advantage of Loader (debug)

• Implements MVC (extensively!)

Wednesday, December 7, 11

The SenchaCon app

• Uses Sencha Touch 2

• 35 classes

• Takes advantage of Loader (debug)

• Implements MVC (extensively!)

Wednesday, December 7, 11

The SenchaCon app team

Development Design

Wednesday, December 7, 11

The SenchaCon app

• Leverages Local Storage

• Uses app cache (offline storage)

• Custom UI classes

• Custom design

Wednesday, December 7, 11

The SenchaCon app

Wednesday, December 7, 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, December 7, 11

Sencha Touch MVC at a glance

• Controller is at the center

• Controller subscribes to events from the view

• Controller updates the model

• Model drives the view

Model

Controller

View

Wednesday, December 7, 11

Quick MVC thoughts

• Application extends Controller!

• Controllers can talk to the application via events or direct methods calls

ModelView

Controller

AppController

Wednesday, December 7, 11

Multi-controller application

ModelView ModelView

Controller Controller

AppController

Wednesday, December 7, 11

The MVC class architecture

SchedulePanelViewport

Viewport

SessionsList

SessionsList

NavBar

NavBar SchedulePanel

App

SessionDetail

SessionDetail

SessionSpeakers

List

SpeakersList

SpeakerSpeakerDetail

SpeakerDetail

DataManager Util

Wednesday, December 7, 11

My Books

manning.com/garcia3manning.com/garcia2

Wednesday, December 7, 11

Questions?

• Contact info:

• twitter :

• @moduscreate

• @_jdg

• jay@moduscreate.com

Thank you!

Wednesday, December 7, 11