Building HTML5mobile apps

with Sencha Touch

10 min Talking10 min Coding

@steffenhiller

Steffen HillerWeb Developer for Life

• ’98: Dreamweaver

• ’99: HTML, CSS, JS, PHP

• ’07: Ruby on Rails & Ext JS

• ’10: Sencha Touch

Quick audience poll

• Who knows Sencha Touch?

• Who knows Ext JS?

• Who knows jQuery?

• Who has built HTML5 mobile apps?

jQuery

<div data-role="page" id="page1">

<div data-theme="a" data-role="header">

<a data-role="button" href="#page1" class="ui-btn-right">

Done

</a>

<h3>

Header

</h3>

</div>

<div data-role="content">

</div>

</div>

Sencha Touch

vs.

items: [

{

xtype: 'toolbar',

title: 'Header',

docked: 'top',

items: [

{

xtype: 'spacer'

},

{

xtype: 'button',

text: 'Done'

}

]

},

{

html: 'Content'

}

]

What’s Sencha Touch?

A JavaScript UI Framework for Mobile

MVC

Class System

Layout System

RoutingTheming

Single Page App

Build Tools

Widgets

When should I use Sencha Touch?

NO: Content-heavy & Static Websites

YES: App-like look & feel

YES: Data heavy business applications

Native vs. HTML5

• Fastbook:

http://fb.html5isready.com/

• Firefox OS:

Native == HTML5

How to start?

• http://docs.sencha.com/

(API, Examples, Guides, Videos)

• http://www.sencha.com/forum/

• * look into the framework’s code *

• Sencha Architect

Let’s build an app

• “sencha generate app bcnjs ~/Sites/bcnjs”

• Adding a list and detail sheet with carousel

• Styling

• Compiling

The Now and the Future ...

• Current Stable Version: 2.1

• Only support for WebKit-Browsers

iOS, Android, Blackberry

• Latest Public Version: 2.2 Alpha

• Support for Windows Mobile (IE10)

• Future:

• Maybe Firefox Mobile for Firefox OS?

Thank you

@steffenhiller

s.hiller@360releases.com

http://www.360releases.com

Icon: http://dribbble.com/shots/42720-Sencha