Sencha At Xero
Download as PPTX, PDF1 like1,643 views
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.
![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());](https://image.slidesharecdn.com/extjsatxero-101207122405-phpapp02/85/Sencha-At-Xero-19-320.jpg)
![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” });](https://image.slidesharecdn.com/extjsatxero-101207122405-phpapp02/85/Sencha-At-Xero-20-320.jpg)
Sencha At Xero
- 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
- 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
- 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
- 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
- 23. Xero Personal
- 25. Xero Touch
- 27. Why Sencha Touch?Cross-platformLooks native, feels nativeFaster, cheaper, easier to build withHighly customisableFlexible deploymentHTML5/CSS3 goodness
- 28. Sencha Touch ≈ ExtJS 4.0
- 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!
- 39. Sencha.comRead the forumsRead the docsRead the source!