sencha at xero
DESCRIPTION
Presentation given to the Auckland Sencha Meetup on 2 Dec 2010. Highlights how we use Sencha products (ExtJS & Sencha Touch) in our development at Xero.TRANSCRIPT
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/