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 @ Xero Craig Walker, Chief Technology Officer www.xero.com

2. ExtJS @ Xero Craig Walker, Chief Technology Officer www.xero.com

3. @storminwalker Craig Walker, Chief Technology Officer www.xero.com

4. 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

5. 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

6. Xero Business

7. The Xero Framework Pure end-to-end web development framework designed from the ground up to be the platform for Xero HTML, JavaScript ASP.NET 4.0/XSLT/ExtJS XSLT ASP.NET Business event (transaction) engine C#/WCF Multi-dimensional general ledger Object relational model LLBLGen Pro Multi-tenanted data model SQL Server 2008

8. 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

9. PrototypeScript.aculo.us

10. The Invoice Grid

11. What we liked The grid! Pretty out-of-the-box Ability to theme using pure CSS Impressive component library Object-oriented Event subsystem Performance

12. 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

13. UI ExtJS J S O N Server

14. UI ExtJS J S O N J S O N J S O N Server Server Server

15. Progressive Enhancement

17. UI ExtJS HTML J S O N H T M L HTTPHandler ASP.NET

18. Evolution

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

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

21. Xero Help

22. UI ExtJS J S O N ASP.NET MVC

23. Xero Personal

24. UI ExtJS HTML J S O N H T M L ASP.NET MVC

25. Xero Touch

26. UI Sencha Touch J S O N ASP.NET MVC

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

28. Sencha Touch ≈ ExtJS 4.0

29. Ext.regController Controller Model View Ext.regModel Ext.regStore Ext.extend(Ext.Panel { ... }

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

31. Tips & Tricks

32. Tools Browsers – obviously Firebug (getfirebug.com) Illumination (illumination-for-developers.com) Web Inspector YSlow (developer.yahoo.com/yslow)

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

34. 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’ })

35. 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)

36. 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

37. Worry about performance Understand client-side performance rules & use them concatenate, minify, compress!

38. Theming Use CSS Understand XTemplate

39. Sencha.com Read the forums Read the docs Read the source!

40. Any questions? www.xero.com

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