html5 and sencha touch

Wednesday, December 7, 11

About us


What is HTML5

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


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


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/




HTML5 brings• Better HTML semantics

• Offline storage

• Device access

• Better connectivity

• Multimedia

• Native graphics access

• Better performance

• CSS3


Better HTML Semantics

• Richer set of HTML tags

• Microdata

• Microformats


Offline Storage

• App cache

• Local storage

• Session storage

• Web database


Device Access

• Geo Location

• Accelerometer

• Audio input/Camera

• Compass (iOS 5)


Better connectivity

• Native web sockets


Multimedia

• Audio

• Video

• h.264 / WebM


Native Graphics access

• SVG, Canvas, VML

• CSS3 3D animations

• WebGL


Better performance

• WebWorkers

• Threaded JavaScript

• XHR2

• Blob

• Chunked data

• Cross domain requests


CSS3

• Better and faster layouts

• Native transitions

• hardware accelerated 3D

• Gradients

• Web Open Font Format


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)


Available technologies


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


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


Robust class system

• Simple class registration

• Automatic Name Spacing

• Class dependency system

• Dynamic class loading

Ext.Base

MyClass

Mixin Mixin


Lots of widgets

Checkbox

DatePicker

Select Toggle field

Text field

Slider

URL field

Email field

Textarea

Password

SpinnerNumber field

Radio field


Date Picker & Select field


Sheets


Message Box


List View

Grouping bar

Index bar

Disclosure icon


Maps


Sencha Touch is highly customizable


Bloomberg Business week


BlueCross BlueShield


Modus Othello


The SenchaCon app

• Uses Sencha Touch 2

• 35 classes

• Takes advantage of Loader (debug)

• Implements MVC (extensively!)


The SenchaCon app team

Development Design


The SenchaCon app

• Leverages Local Storage

• Uses app cache (offline storage)

• Custom UI classes

• Custom design


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


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


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 MVC class architecture

SchedulePanelViewport

Viewport

SessionsList

SessionsList

NavBar

NavBar SchedulePanel

App

SessionDetail

SessionDetail

SessionSpeakers

List

SpeakersList

SpeakerSpeakerDetail

SpeakerDetail

DataManager Util


My Books

manning.com/garcia3manning.com/garcia2


Questions?

• Contact info:

• twitter :

• @moduscreate

• @_jdg

• [email protected]

Thank you!


mailto:[email protected]

mailto:[email protected]

html5 and sencha touch

Technology

app cache

developingan app

sencha touch mvc

sencha touch therst

application development

senchacon appwednesday

limited resources application

best mobilecentric html