Your SlideShare is downloading. ×
0
Sencha @ Xero<br />Craig Walker, Chief Technology Officer<br />www.xero.com<br />
ExtJS @ Xero<br />Craig Walker, Chief Technology Officer<br />www.xero.com<br />
@storminwalker<br />Craig Walker, Chief Technology Officer<br />www.xero.com<br />
Who is Xero?<br />Started in 2006 by Rod Drury and Hamish Edwards<br />IPO in June 2007<br />100 staff in 7 locations (HQ ...
What is Xero?<br />Software-as-a-Service small business platform starting as an online accounting system<br />Revolutionis...
Xero Business<br />
The Xero Framework<br />Pure end-to-end web development framework designed from the ground up to be the platform for Xero<...
XSLT & ASP.NET<br />MVC pattern using ASP.NET as a platform and XSLT as the view engine<br />Combined with integrated conv...
PrototypeScript.aculo.us<br />
The Invoice Grid<br />
What we liked<br />The grid!<br />Pretty out-of-the-box<br />Ability to theme using pure CSS<br />Impressive component lib...
What we didn’t<br />Wicked learning curve<br />HTML is fugly (heavy DOM)<br />Theming was harder than expected<br />Lack o...
UI<br />ExtJS<br />J<br />S<br />O<br />N<br />Server<br />
UI<br />ExtJS<br />J<br />S<br />O<br />N<br />J<br />S<br />O<br />N<br />J<br />S<br />O<br />N<br />Server<br />Server<...
Progressive Enhancement<br />
UI<br />ExtJS<br />HTML<br />J<br />S<br />O<br />N<br />H<br />T<br />M<br />L<br />HTTPHandler<br />ASP.NET<br />
Evolution<br />
Static classes<br />Ext.ns(“XERO”, “XERO.yada”);<br />XERO.yada.MyClass = {<br />init: function() {<br />    new Ext.Panel...
Componentised<br />Ext.ns(“XERO”, “XERO.yada”);<br />XERO.yada.MyPanel = Ext.extend(Ext.Panel, {<br />cls: “xero-panel”,<b...
Xero Help<br />
UI<br />ExtJS<br />J<br />S<br />O<br />N<br />ASP.NET MVC<br />
Xero Personal<br />
UI<br />ExtJS<br />HTML<br />J<br />S<br />O<br />N<br />H<br />T<br />M<br />L<br />ASP.NET MVC<br />
Xero Touch<br />
UI<br />Sencha Touch<br />J<br />S<br />O<br />N<br />ASP.NET MVC<br />
Why Sencha Touch?<br />Cross-platform<br />Looks native, feels native<br />Faster, cheaper, easier to build with<br />High...
Sencha Touch ≈ ExtJS 4.0<br />
Ext.regController<br />Controller<br />Model<br />View<br />Ext.regModel<br />Ext.regStore<br />Ext.extend(Ext.Panel {<br ...
Theming<br />SASS & Compass (compass-style.org)<br />CSS3 is awesome – SCSS is awesomer<br />@import “compass/css3/gradien...
Tips & Tricks<br />
Tools<br />Browsers – obviously<br />Firebug (getfirebug.com)<br />Illumination (illumination-for-developers.com)<br />Web...
Object-oriented<br />Use namespaces to define your library<br />Define components – code for reusability<br />Extend first...
Events rock!<br />Use events to communicate between components<br />Use an event manager<br />Use event delegation<br />Ex...
Override appropriately<br />Do not edit the library files<br />DO NOT EDIT THE LIBRARY FILES!<br />Use an overrides file i...
Define a directory structure<br />Break your code into small files<br />Use build tools to compile for performance<br />Us...
Worry about performance<br />Understand client-side performance rules & use them<br />concatenate, minify, compress!<br />
Theming<br />Use CSS<br />Understand XTemplate<br />
Sencha.com<br />Read the forums<br />Read the docs<br />Read the source!<br />
Any questions?<br />www.xero.com<br />
We’re always hiring!www.xero.com/careers/<br />
Upcoming SlideShare
Loading in...5
×

Sencha At Xero

3,208

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,208
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Sencha At Xero"

  1. 1. Sencha @ Xero<br />Craig Walker, Chief Technology Officer<br />www.xero.com<br />
  2. 2. ExtJS @ Xero<br />Craig Walker, Chief Technology Officer<br />www.xero.com<br />
  3. 3. @storminwalker<br />Craig Walker, Chief Technology Officer<br />www.xero.com<br />
  4. 4. Who is Xero?<br />Started in 2006 by Rod Drury and Hamish Edwards<br />IPO in June 2007<br />100 staff in 7 locations (HQ in Wellington) and over 27,000 customers in over 50 countries<br />A New Zealand business with global aspirations<br />
  5. 5. What is Xero?<br />Software-as-a-Service small business platform starting as an online accounting system<br />Revolutionising the way small businesses are managed<br />Staff and advisors all connected and unconstrained by legacy process or technology<br />
  6. 6. Xero Business<br />
  7. 7. The Xero Framework<br />Pure end-to-end web development framework designed from the ground up to be the platform for Xero<br />HTML, JavaScript<br />ASP.NET 4.0/XSLT/ExtJS<br />XSLT<br />ASP.NET<br />Business event (transaction) engine<br />C#/WCF<br />Multi-dimensional general ledger<br />Object relational model<br />LLBLGen Pro<br />Multi-tenanted data model<br />SQL Server 2008<br />
  8. 8. XSLT & ASP.NET<br />MVC pattern using ASP.NET as a platform and XSLT as the view engine<br />Combined with integrated conventions XSLT is a robust and fast view engine<br />Allows our designers to incorporate their designs into the application without needing to be programmers<br />It’s all about painting screens<br />
  9. 9. PrototypeScript.aculo.us<br />
  10. 10. The Invoice Grid<br />
  11. 11. What we liked<br />The grid!<br />Pretty out-of-the-box<br />Ability to theme using pure CSS<br />Impressive component library<br />Object-oriented<br />Event subsystem<br />Performance<br />
  12. 12. What we didn’t<br />Wicked learning curve<br />HTML is fugly (heavy DOM)<br />Theming was harder than expected<br />Lack of a distribution builder<br />Maintainability – very easy to write very bad code<br />Performance<br />
  13. 13. UI<br />ExtJS<br />J<br />S<br />O<br />N<br />Server<br />
  14. 14. UI<br />ExtJS<br />J<br />S<br />O<br />N<br />J<br />S<br />O<br />N<br />J<br />S<br />O<br />N<br />Server<br />Server<br />Server<br />
  15. 15. Progressive Enhancement<br />
  16. 16.
  17. 17. UI<br />ExtJS<br />HTML<br />J<br />S<br />O<br />N<br />H<br />T<br />M<br />L<br />HTTPHandler<br />ASP.NET<br />
  18. 18. Evolution<br />
  19. 19. Static classes<br />Ext.ns(“XERO”, “XERO.yada”);<br />XERO.yada.MyClass = {<br />init: function() {<br /> new Ext.Panel({<br />renderTo: “divId”,<br />cls: “xero-panel”,<br /> items: [<br /> new Ext.grid.GridPanel({ … })<br /> ]<br /> });<br /> }<br />} <br />console.log(XERO.yada.MyClass.init());<br />
  20. 20. Componentised<br />Ext.ns(“XERO”, “XERO.yada”);<br />XERO.yada.MyPanel = Ext.extend(Ext.Panel, {<br />cls: “xero-panel”,<br />renderTo: “divId”,<br />initComponent: function() {<br />this.grid = new Ext.grid.GridPanel({ … });<br />this.items = [ this.grid ];<br />XERO.yada.MyPanel.superclass.initComponent.call(this);<br /> }<br />});<br />Ext.reg(“xero-panels-mypanel”, XERO.yada.MyPanel);<br />varmyPanel = Ext.create({ <br />xtype: “xero-panels-mypanel”, <br />renderTo: “anotherDivId” <br />});<br />
  21. 21. Xero Help<br />
  22. 22. UI<br />ExtJS<br />J<br />S<br />O<br />N<br />ASP.NET MVC<br />
  23. 23. Xero Personal<br />
  24. 24. UI<br />ExtJS<br />HTML<br />J<br />S<br />O<br />N<br />H<br />T<br />M<br />L<br />ASP.NET MVC<br />
  25. 25. Xero Touch<br />
  26. 26. UI<br />Sencha Touch<br />J<br />S<br />O<br />N<br />ASP.NET MVC<br />
  27. 27. Why Sencha Touch?<br />Cross-platform<br />Looks native, feels native<br />Faster, cheaper, easier to build with<br />Highly customisable<br />Flexible deployment<br />HTML5/CSS3 goodness<br />
  28. 28. Sencha Touch ≈ ExtJS 4.0<br />
  29. 29. Ext.regController<br />Controller<br />Model<br />View<br />Ext.regModel<br />Ext.regStore<br />Ext.extend(Ext.Panel {<br /> ...<br />}<br />
  30. 30. Theming<br />SASS & Compass (compass-style.org)<br />CSS3 is awesome – SCSS is awesomer<br />@import “compass/css3/gradient”;<br />$width: 100px;<br />.button {<br /> width: $width;<br /> .linear {<br />@include linear-gradient(<br />color-stops(white, #c39 30%, #b7f 70%, #aaa)<br /> );<br /> }<br />}<br />.button {<br /> width: 100px;<br />}<br />.button .linear {<br />background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-<br /> stop(0%, #ffffff), color-stop(30%, #cc3399), color-stop(70%, <br /> #bb77ff), color-stop(100%, #aaaaaa)); <br />background-image: -moz-linear-gradient(top, #ffffff 0%, #cc3399 <br /> 30%, #bb77ff 70%, #aaaaaa 100%);<br />background-image: linear-gradient(top, #ffffff 0%, #cc3399 30%, <br /> #bb77ff 70%, #aaaaaa 100%);<br />}<br />
  31. 31. Tips & Tricks<br />
  32. 32. Tools<br />Browsers – obviously<br />Firebug (getfirebug.com)<br />Illumination (illumination-for-developers.com)<br />Web Inspector<br />YSlow (developer.yahoo.com/yslow)<br />
  33. 33. Object-oriented<br />Use namespaces to define your library<br />Define components – code for reusability<br />Extend first, write plugins second (not at all if possible)<br />
  34. 34. Events rock!<br />Use events to communicate between components<br />Use an event manager<br />Use event delegation<br />Ext.get('header').on('click', function(e,target){<br /> if (Ext.get(target).is('.item')){<br /> }<br />}, this, {<br /> delegate: 'a.menu’<br />})<br />
  35. 35. Override appropriately<br />Do not edit the library files<br />DO NOT EDIT THE LIBRARY FILES!<br />Use an overrides file if you need to override the framework<br />Do the same with CSS (but you should be using cls properties)<br />
  36. 36. Define a directory structure<br />Break your code into small files<br />Use build tools to compile for performance<br />Use extjs-debug-all.js& extjs-debug-base.js during dev(but never prod!)<br />Keep the framework up-to-date – upgrade as often as you can<br />
  37. 37. Worry about performance<br />Understand client-side performance rules & use them<br />concatenate, minify, compress!<br />
  38. 38. Theming<br />Use CSS<br />Understand XTemplate<br />
  39. 39. Sencha.com<br />Read the forums<br />Read the docs<br />Read the source!<br />
  40. 40. Any questions?<br />www.xero.com<br />
  41. 41. We’re always hiring!www.xero.com/careers/<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×