Xero is a New Zealand software company that provides online accounting software and services for small businesses. It was founded in 2006 and now has over 100 employees across 7 locations and over 27,000 customers in over 50 countries. Xero uses the Sencha ExtJS and Sencha Touch frameworks to build its web and mobile applications, which allow small businesses to manage their finances online. Craig Walker, the CTO of Xero, discussed how they have used and evolved these frameworks over time to develop Xero's core products and services.

1. Sencha @ XeroCraig Walker, Chief Technology Officerwww.xero.com

2. ExtJS @ XeroCraig Walker, Chief Technology Officerwww.xero.com

3. @storminwalkerCraig Walker, Chief Technology Officerwww.xero.com

4. Who is Xero?Started in 2006 by Rod Drury and Hamish EdwardsIPO in June 2007100 staff in 7 locations (HQ in Wellington) and over 27,000 customers in over 50 countriesA New Zealand business with global aspirations

5. What is Xero?Software-as-a-Service small business platform starting as an online accounting systemRevolutionising the way small businesses are managedStaff and advisors all connected and unconstrained by legacy process or technology

6. Xero Business

7. The Xero FrameworkPure end-to-end web development framework designed from the ground up to be the platform for XeroHTML, JavaScriptASP.NET 4.0/XSLT/ExtJSXSLTASP.NETBusiness event (transaction) engineC#/WCFMulti-dimensional general ledgerObject relational modelLLBLGen ProMulti-tenanted data modelSQL Server 2008

8. XSLT & ASP.NETMVC pattern using ASP.NET as a platform and XSLT as the view engineCombined with integrated conventions XSLT is a robust and fast view engineAllows our designers to incorporate their designs into the application without needing to be programmersIt’s all about painting screens

9. PrototypeScript.aculo.us

10. The Invoice Grid

11. What we likedThe grid!Pretty out-of-the-boxAbility to theme using pure CSSImpressive component libraryObject-orientedEvent subsystemPerformance

12. What we didn’tWicked learning curveHTML is fugly (heavy DOM)Theming was harder than expectedLack of a distribution builderMaintainability – very easy to write very bad codePerformance

13. UIExtJSJSONServer

14. UIExtJSJSONJSONJSONServerServerServer

15. Progressive Enhancement

17. UIExtJSHTMLJSONHTMLHTTPHandlerASP.NET

18. Evolution

19. Static classesExt.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());

20. ComponentisedExt.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);varmyPanel = Ext.create({ xtype: “xero-panels-mypanel”, renderTo: “anotherDivId” });

21. Xero Help

22. UIExtJSJSONASP.NET MVC

23. Xero Personal

24. UIExtJSHTMLJSONHTMLASP.NET MVC

25. Xero Touch

26. UISencha TouchJSONASP.NET MVC

27. Why Sencha Touch?Cross-platformLooks native, feels nativeFaster, cheaper, easier to build withHighly customisableFlexible deploymentHTML5/CSS3 goodness

28. Sencha Touch ≈ ExtJS 4.0

29. Ext.regControllerControllerModelViewExt.regModelExt.regStoreExt.extend(Ext.Panel { ...}

30. ThemingSASS & 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%);}

31. Tips & Tricks

32. ToolsBrowsers – obviouslyFirebug (getfirebug.com)Illumination (illumination-for-developers.com)Web InspectorYSlow (developer.yahoo.com/yslow)

33. Object-orientedUse namespaces to define your libraryDefine components – code for reusabilityExtend first, write plugins second (not at all if possible)

34. Events rock!Use events to communicate between componentsUse an event managerUse event delegationExt.get('header').on('click', function(e,target){ if (Ext.get(target).is('.item')){ }}, this, { delegate: 'a.menu’})

35. Override appropriatelyDo not edit the library filesDO NOT EDIT THE LIBRARY FILES!Use an overrides file if you need to override the frameworkDo the same with CSS (but you should be using cls properties)

36. Define a directory structureBreak your code into small filesUse build tools to compile for performanceUse 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

37. Worry about performanceUnderstand client-side performance rules & use themconcatenate, minify, compress!

38. ThemingUse CSSUnderstand XTemplate

39. Sencha.comRead the forumsRead the docsRead the source!

40. Any questions?www.xero.com

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