Craig Walker, Chief Technology Officer www.xero.com

Sencha @ Xero

Craig Walker, Chief Technology Officer www.xero.com

ExtJS @ Xero

Craig Walker, Chief Technology Officer www.xero.com

@storminwalker

Who is Xero?

• Started in 2006 by Rod Drury and Hamish Edwards

• IPO in June 2007

• 100 staff in 7 locations (HQ in Wellington) and over 27,000 customers in over 50 countries

• A New Zealand business with global aspirations

What is Xero?

• Software-as-a-Service small business platform starting as an online accounting system

• Revolutionising the way small businesses are managed

• Staff and advisors all connected and unconstrained by legacy process or technology

Xero Business

Multi-tenanted data model

The Xero Framework

Object relational model

Multi-dimensional general ledger

Business event (transaction) engine

ASP.NET

XSLT

HTML, JavaScript

• Pure end-to-end web development framework designed from the ground up to be the platform for Xero

ASP.NET 4.0/XSLT/ExtJS

C#/WCF

LLBLGen Pro

SQL Server 2008

XSLT & ASP.NET• MVC pattern using

ASP.NET as a platform and XSLT as the view engine

• Combined with integrated conventions XSLT is a robust and fast view engine

• Allows our designers to incorporate their designs into the application without needing to be programmers

• It’s all about painting screens

Prototype

Script.aculo.us

The Invoice Grid

What we liked

• The grid!

• Pretty out-of-the-box

• Ability to theme using pure CSS

• Impressive component library

• Object-oriented

• Event subsystem

• Performance

What we didn’t

• Wicked learning curve

• HTML is fugly (heavy DOM)

• Theming was harder than expected

• Lack of a distribution builder

• Maintainability – very easy to write very bad code

• Performance

UI

ExtJS

Server

JSON

Server Server Server

UI

ExtJS

JSON

JSON

JSON

Progressive Enhancement

UI

ExtJS

ASP.NET

HTML

HTTPHandler

JSON

HTML

Evolution

Static classes

Ext.ns(“XERO”, “XERO.yada”);

XERO.yada.MyClass = {

init: function() {

new Ext.Panel({ renderTo: “divId”, cls: “xero-panel”, items: [ new Ext.grid.GridPanel({ … }) ] });

}}

console.log(XERO.yada.MyClass.init());

Componentised

Ext.ns(“XERO”, “XERO.yada”);

XERO.yada.MyPanel = Ext.extend(Ext.Panel, { cls: “xero-panel”, renderTo: “divId”,

initComponent: function() { this.grid = new Ext.grid.GridPanel({ … }); this.items = [ this.grid ];

XERO.yada.MyPanel.superclass.initComponent.call(this); }});

Ext.reg(“xero-panels-mypanel”, XERO.yada.MyPanel);

var myPanel = Ext.create({ xtype: “xero-panels-mypanel”, renderTo: “anotherDivId” });

Xero Help

ASP.NET MVC

UI

ExtJS

JSON

Xero Personal

UI

ExtJS

ASP.NET MVC

HTML

JSON

HTML

Xero Touch

ASP.NET MVC

UI

Sencha Touch

JSON

Why Sencha Touch?

• Cross-platform

• Looks native, feels native

• Faster, cheaper, easier to build with

• Highly customisable

• Flexible deployment

• HTML5/CSS3 goodness

Sencha Touch ≈ ExtJS 4.0

ModelView

Controller

Ext.regController

Ext.regModelExt.regStore

Ext.extend(Ext.Panel { ...}

Theming• SASS & Compass (compass-style.org)

• CSS3 is awesome – SCSS is awesomer@import “compass/css3/gradient”;

$width: 100px;.button { width: $width; .linear { @include linear-gradient( color-stops(white, #c39 30%, #b7f 70%, #aaa) ); }}

.button { width: 100px;}.button .linear { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color- stop(0%, #ffffff), color-stop(30%, #cc3399), color-stop(70%, #bb77ff), color-stop(100%, #aaaaaa)); background-image: -moz-linear-gradient(top, #ffffff 0%, #cc3399 30%, #bb77ff 70%, #aaaaaa 100%); background-image: linear-gradient(top, #ffffff 0%, #cc3399 30%, #bb77ff 70%, #aaaaaa 100%);}

Tips & Tricks

Tools

• Browsers – obviously

• Firebug (getfirebug.com)

• Illumination (illumination-for-developers.com)

• Web Inspector

• YSlow (developer.yahoo.com/yslow)

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 an event manager

• Use event delegation

Ext.get('header').on('click', function(e,target){ if (Ext.get(target).is('.item')){

}}, this, { delegate: 'a.menu’})

Override appropriately

• Do not edit the library files

• DO NOT EDIT THE LIBRARY FILES!

• Use an overrides file if you need to override the framework

• Do the same with CSS (but you should be using cls properties)

Define a directory structure

• Break your code into small files

• Use build tools to compile for performance

• Use extjs-debug-all.js & extjs-debug-base.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

• concatenate, minify, compress!

Theming

• Use CSS

• Understand XTemplate

Sencha.com

• Read the forums

• Read the docs

• Read the source!

Any questions?

www.xero.com

We’re always hiring!www.xero.com/careers/