Community Code: Xero

Sencha @ Xero

Wednesday, November 2, 2011

@storminwalker


Who is Xero?•Started in 2006, IPO in June 2007•Over 150 staff in 7 locations•Over 50,000 customers in 100 countries

•A global business run from New Zealand


Beautiful accounting software


Xero Business


Mul$-‐tenanted data model

The Xero Framework

Object rela$onal model

Mul$-‐dimensional general ledger

Business event (transac$on) engine

ASP.NET

XSLT

HTML, JavaScript

•Pure end-to-end SaaS 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-like pattern using ASP.NET as a platform and XSLT as the view engine

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

• It’s all about painting screens


So where’s the ExtJS?


Quick ExtJS architecture revision…


Server

The single page app…

ExtJS

JSON


Progressive Enhancement



HTML ExtJS

ASP.NET

HTTPHandler

JSON

HTML

HTTPModule (authentication)


Why ExtJS?


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•Generated HTML was pretty ugly (heavy DOM)

•Theming was harder than expected•Lack of a distribution builder•Maintainability – very easy to write very bad code

•Performance


Why not a single page app?•Hybrid approach has performance benefits

•Minimizes that learning curve•Server side rendering for heavy pages (such as reporting)

•Worked better across our large team•Unconstrained by the layout engine


Code!


Code management•Namespaces following a folder structure

•Coding for reusability: extend, componentize, encapsulate

•Code broken into as small files as possible (both JS and CSS)


Performance

•Sonic (concatenate, minify, compress)

•Preloading


Theming


Take ext-css & override the shit

out of it


Xero Touch


JSON

Sencha Touch

ASP.NET MVCHTTPModule (authentication)


Why Sencha Touch?•Cross-platform•Looks native, feels native•Faster, cheaper, easier to build with•CSS3 awesomeness using SASS & Compass

•Ability to go native


Focus on performance

•Destroy often – keep the DOM light

•Raw HTML to the rescue

•ALWAYS test on a real device!


going native


•Native Xero Touch for iOS & Android (coming soon)

•18,000 app installs•All Sencha Touch source disconnected from PhoneGap project

•Access to native APIs: camera &


The move to ExtJS 4.0 & Sencha Touch

2?


Any questions?

www.xero.com


We’re hiring!


Technology

Community Code: Xero