Sencha Touch

Craig Walker, Chief Technology Officer www.xero.com

What is Xero?

http://www.xero.com/signup/

Lots of frameworks…
• Zepto.js
• DynamicX
• SproutCore
• XUI
• Appcelerator
• iUI
• iWebKit
• jQuery Mobile
• jQTouch
• And lots more…

What is Sencha Touch?
A JavaScript framework for
building rich mobile applications

Why Sencha Touch?
• Cross-platform
• Looks native, feels native
• Faster, cheaper, easier to build with
• Highly customisable
• Flexible deployment
• HTML5/CSS3 goodness

Touch Event Manager
• Built on native events
• Abstracted for performance
• Multi-touch & gesture support

Touch Event Manager

Ext.fly("el").on({
tap: function() {
alert("You tapped me");
},
pinch: function() {
alert("You pinched me");
},
swipe: function() {
alert("Stop touching me...")
}
});
28

Scroll Event Manager
• Scrolling with momentum &
bounce physics
• Native & natural
• Hardware accelerated

Layouts
• Container layout speciﬁes how its children
components are rendered

MVC
Routes

Controllers

Models
Views
Stores

Theming
• SASS & Compass
– sass-lang.com
– compass-style.org

• CSS3 is awesome – SCSS is awesomer

SCSS CSS
$blue: #3bbfce; /* line 5, variables.scss */
$margin: 16px; .example1 {
$padding: 4px; border-color: #3bbfce;
}
.example1 {
border-color: $blue; /* line 9, variables.scss */
} .example2 {
margin: 16px;
.example2 { color: #3bbfce;
margin: $margin; }
color: $blue;
} /* line 14, variables.scss */
.example3 {
.example3 { margin: 32px;
margin: ($margin / 2px) * $padding; }
}

SCSS CSS
@mixin add-child($color) { /* line 18, mixins.scss */
color: $color; .example {
background-color: lighten($color, 50); color: red;
background-color: white;
.child { }
padding: 5px; /* line 5, mixins.scss */
.example .child {
&:first { padding: 5px;
background-color: darken($color, 10) }
}; /* line 8, mixins.scss */
.example .child:first {
span { background-color: #cc0000;
color: mix($color, blue); }
} /* line 12, mixins.scss */
} .example .child span {
} color: #7f007f;
}
.example {
@include add-child(#F00);
}

SCSS CSS
@import "compass"; /* line 5, gradients.scss */
.button {
$width: 100px; width: 100px;
}
.button { /* line 8, gradients.scss */
width: $width; .button .round {
-moz-border-radius: 5px;
.round { -webkit-border-radius: 5px;
@include border-radius(5px); -o-border-radius: 5px;
} -ms-border-radius: 5px;
-khtml-border-radius: 5px;
.linear { border-radius: 5px;
@include linear-gradient( }
color-stops(white, #c39 30%, /* line 12, gradients.scss */
#b7f 70%, #aaa) .button .linear {
); background-image: -webkit-gradient(
} linear, 0% 0%, 0% 100%,
} color-stop(0%, #ffffff),
color-stop(50%, #cc3399),
color-stop(100%, #bb77ff));
background-image: -moz-linear-gradient(top,
#ffffff 0%, #cc3399 50%, #bb77ff 100%);
background-image: linear-gradient(top,
#ffffff 0%, #cc3399 50%, #bb77ff 100%);
}

index.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Xero Help</title>

<link rel="stylesheet" href="resources/css/xerohelp.css" type="text/css">
</head>
<body>
<script type="text/javascript" src="lib/sencha-touch-debug.js"></script>
<script type="text/javascript" src="app/xerohelp.js"></script>
</body>
</html>

app/xerohelp.js
// utils
document.write('<script type="text/javascript" src="app/utils/string.js"></script>');

// application
document.write('<script type="text/javascript" src="app/routes.js"></script>');
document.write('<script type="text/javascript" src="app/app.js"></script>');

// models
document.write('<script type="text/javascript" src="app/models/TOC.js"></script>');
document.write('<script type="text/javascript" src="app/models/HelpFile.js"></script>');

// views
document.write('<script type="text/javascript" src="app/views/Viewport.js"></script>');
document.write('<script type="text/javascript" src="app/views/TOCPanel.js"></script>');
document.write('<script type="text/javascript" src="app/views/HelpCarousel.js"></script>');
document.write('<script type="text/javascript" src="app/views/HelpPanel.js"></script>');

// controllers
document.write('<script type="text/javascript" src="app/controllers/help.js"></script>');

app/routes.js

Ext.Router.draw(function(map) {
map.connect("/help/home", {controller: 'help', action: 'home'});
map.connect("/help/:id", {controller: 'help', action: 'show'});
});

app/app.js

Ext.regApplication({
name: "XERO",

defaultUrl: '/help/home',
defaultTarget: "viewport",

icon: 'resources/images/icon.png',
glossOnIcon: false,

region: "NZ",
apiUrl: "http://help.stage.xero.com/api",

launch: function() {
this.viewport = new XERO.Viewport({
application: this
});
}
});

XERO.Viewport = Ext.extend(Ext.Panel, {

id: 'viewport', app/views/viewport.js
layout: 'card',
fullscreen: true,

initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
dock : "top",
title: "Help Center",
itemId: "help-toolbar"
},{
xtype: "toolbar",
dock: "bottom",
items: [{
xtype: "button",
text: "Index",
handler: this.onTOCButtonTap,
scope: this
},{ xtype: "spacer" }, {
xtype: "button",
text: "Switch Region",
handler: this.onSwitchRegionTap,
scope: this
}]
}]
});
XERO.Viewport.superclass.initComponent.apply(this, arguments);
}, ...

setTitle: function(title) {
this.down("#help-toolbar").setTitle(title);
}, app/views/viewport.js
onTOCButtonTap: function() {
if(! this.tocPanel) {
this.tocPanel = Ext.create({
xtype: "tocpanel"
});
}
this.tocPanel.show();
},

onSwitchRegionTap: function() {
if(! this.regionPicker) {
this.regionPicker = new Ext.Picker({
slots: [{
name : 'region',
title: 'Switch Region',
data : [
{text: 'New Zealand', value: "NZ"},
{text: 'Australia', value: "AUS"},
{text: 'United Kingdom', value: "UK"},
{text: 'Global', value: "INT"}
]
}]
});
}
this.regionPicker.show();
}
});

app/controllers/help.js

Ext.regController("help", {

home: function(request) {
this.show(Ext.apply(request, {
id: "home"
}));
},

show: function(request) {
if(! this.helpCarousel) {
this.helpCarousel = this.render({
xtype: 'helpcarousel'
});
}

XERO.viewport.setActiveItem(this.helpCarousel);
XERO.viewport.setTitle("Loading...");

this.helpCarousel.loadHelpPage(request.id, request.historyUrl);
}
});

app/models/helpﬁle.js

Ext.regModel("HelpFile", {
fields: [
{ name: "id", type: "int" },
"abstractText",
"body",
"heading",
"helpPage",
{ name: "createdDateUTC", type: "date", format: "M$" },
{ name: "success", type: "boolean" }
]
/*,
validations: [
{ type: "presence", field: "helpPage" }
],

hasMany: [
{ model: "Region", name: "regions" }
]
*/
});

app/models/toc.js
Ext.regModel("TOC", {
fields: [
"id",
"helpPage",
"href",
"text"
],

proxy: {
type: 'scripttag',
url: String.format("{0}/toc/", XERO.apiUrl),
reader: {
type: "tree",
root: "items"
}
}
});

(function() {
new Ext.data.TreeStore({
storeId: "TOCStore",
model: "TOC",
autoLoad: true
});
}());

XERO.views.HelpCarousel = Ext.extend(Ext.Carousel, {

cls: "cards",
app/views/helpcarousel.js
layout: "fit",

XERO.views.HelpCarousel.superclass.initComponent.apply(this, arguments);
},

onRender: function() {
XERO.views.HelpCarousel.superclass.onRender.apply(this, arguments);

if(this.el) {
this.mon(this.el, {
tap: this.onTap,
click: Ext.emptyFn,
delegate: "a",
stopEvent: true,
scope: this
});

this.mon(this, {
cardswitch: function() {
this.onHelpSwitch(this.getActiveItem().helpPage);
},
scope: this
});
}
},

loadHelpPage: function(id, href) {
var bookmark; app/views/helpcarousel.js
if(href.indexOf("$") != -1) {
bookmark = href.right(href.length - href.indexOf("$") - 1);
}

var item = this.getComponent(id);
if(item) {
this.setActiveItem(item);
if(bookmark){
item.scrollToBookmark(bookmark);
}
} else {
var panel = this.add({
xtype: "helppanel",
id: id,
goToBookmark: bookmark,
listeners: {
helploaded: this.onHelpSwitch,
single: true,
scope: this
}
});
this.doComponentLayout();
this.setActiveItem(panel);
}
},

onTap: function(e, target) {
var id = target.getAttribute('xero:id'), app/views/helpcarousel.js
type = target.getAttribute('xero:type'),
bookmark = target.getAttribute('xero:bookmark'),
url = target.getAttribute('xero:path');

if(type && type.toLowerCase() == "help") {
if(bookmark) {
this.getActiveItem().scrollToBookmark(bookmark);
} else {
Ext.dispatch({
controller: "help",
action: "show",
id: id,
historyUrl: target.href
});
}
} else {
if(target.href.toLowerCase().startsWith("mailto:")) {
location.href = target.href;
} else {
window.open(target.href);
}
}
}
});

Ext.reg('helpcarousel', XERO.views.HelpCarousel);

app/views/helppanel.js

XERO.views.HelpPanel = Ext.extend(Ext.Panel, {

cls: "help-panel",
layout: "fit",
scroll: "vertical",
styleHtmlContent: true,
goToBookmark: null,
html: '<div class="loading-indicator"> </div>',

this.addEvents("helploaded");
XERO.views.HelpPanel.superclass.initComponent.apply(this, arguments);
},

onRender: function() {
XERO.views.HelpPanel.superclass.onRender.apply(this, arguments);
this.loadHelpPage();
},...

loadHelpPage: function() {
Ext.util.JSONP.request({
url: String.format("{0}/help/", XERO.apiUrl), app/views/helppanel.js
callbackKey: "callback",
params: {
helpPage: this.id
},
callback: function(doc) {
this.helpPage = doc;
this.title = doc.heading;
this.update(this.helpPage.body);

if(this.goToBookmark) {
this.scrollToBookmark(this.goToBookmark);
}

this.fireEvent("helploaded", this.helpPage);
},
scope: this
});
},

scrollToBookmark: function(bookmark) {
var el = this.getEl().down(String.format('a[name="{0}"]', bookmark));
if (el) {
this.scrollIntoView(el);
}
},
});

Ext.reg('helppanel', XERO.views.HelpPanel);

XERO.views.TOCPanel = Ext.extend(Ext.NestedList, {
title: "Index",
showAnimation: { app/views/helppanel.js
type: "slide",
direction: "up"
},
floating: true,

this.store = Ext.getStore("TOCStore");
this.toolbar = {...};

XERO.views.TOCPanel.superclass.initComponent.apply(this, arguments);

this.mon(this, {
selectionchange: function(list, selection) {
var record = selection[0];
if(record.get("leaf") === true) {
Ext.dispatch({
controller: "help",
action: "show",
id: record.get("helpPage"),
historyUrl: String.format("/help/{0}", record.get("helpPage"))
});
this.hide();
}
},
scope: this
});
}
});

• Cross-platform
• Open source
• Extensible
• Instantiates chromeless
web view
• Adds JavaScript access
to native APIs

Native APIs
• Device identiﬁcation
• Network access
• Sensors
• Camera/image sources
• Contacts
• File access

Everything else?
• HTML for layout
• JavaScript for accessing device APIs
• CSS for look & feel
• Oﬄine storage for standalone clients
• Ajax, JSONP for syncing to the cloud
– Runs on ﬁle:// protocol which is exempt from same-origin
policy
• Just use Sencha Touch!

Tools
• Browsers – Safari the best (unfortunately)
• Web Inspector
• RemoteJS (Android debugging)
• Souders’ bookmarklets
– stevesouders.com/mobileperf

• Jdrop
– jdrop.org

Object-oriented
• Use namespaces to define your library
• Define components – code for reusability
• Extend first, write plugins second (not at all
if possible)

Events rock!
• Use events to communicate between
components
• Use event delegation

Override appropriately
• Do not edit the library ﬁles
• DO NOT EDIT THE LIBRARY FILES!
• Use an overrides ﬁle if you need to override
the framework
• Do the same with CSS (but you should be
using cls, ui properties)

Deﬁne a directory structure
• Break your code into small ﬁles
• Use build tools to compile for performance
• Use sencha-touch-debug.js during dev (but
never prod!)
• Keep the framework up-to-date – upgrade as
often as you can

Worry about performance
• Understand client-side performance rules &
use them
• Latency bad
• JIT compilers – compilation time relates to
size of ﬁle the method exists in
• Keep DOM light
• Destroy components that aren’t visible
• concatenate, minify, compress!

Theming/Layouts
• Use SCSS
• Remove unnecessary CSS by only
including required SCSS mixins
• Understand XTemplate
• Understand doComponentLayout

Sencha.com

Read the forums

Read the docs

Read the source!

Any questions?

www.xero.com

Sencha Touch

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (20)

Similar to Sencha Touch

Similar to Sencha Touch (20)

More from Craig Walker

More from Craig Walker (6)

Recently uploaded

Recently uploaded (20)

Sencha Touch