Implementation Spotlight: Xero http://www.sencha.com/blog/implementation-spotlight-xero Xero is both a company and a product. The company was founded in Wellington, New Zealand in 2006 and is listed on the New Zealand Stock Exchange. Xero has offices in New Zealand, Australia and the UK but it’s sold globally, with over 17,000 customers in over 50 countries. en-us jay@sencha.com Copyright 2010 2010-04-08T21:57:28+00:00 Comment by Mark Bakker Interesting approach. Kashoo is similar to this but I’m not sure what JS they use. I think it might be a security risk to use frameworks like these in an app that deals with finance. Need to look into that more. Interesting approach. Kashoo is similar to this but I’m not sure what JS they use. I think it might be a security risk to use frameworks like these in an app that deals with finance. Need to look into that more.

]]> Tue, 14 Dec 2010 20:58 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15405#date:20:58 Comment by Tim Farland Making business apps look great is a real challenge, but those screenshots look fantastic. If ExtJS components can be styled so extensively, I will definitely look into it. Go kiwi! Making business apps look great is a real challenge, but those screenshots look fantastic. If ExtJS components can be styled so extensively, I will definitely look into it. Go kiwi!

]]> Mon, 19 Jul 2010 09:00 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15404#date:09:00 Comment by Egor @Jean: No, you’re wrong. The only copyright notices required are those in the JavaScript source files. You don’t need a page on your site with that info. @Jean: No, you’re wrong. The only copyright notices required are those in the JavaScript source files. You don’t need a page on your site with that info.

]]> Tue, 15 Jun 2010 00:50 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15403#date:00:50 Comment by bi9foot178 These products requiered a page with their copyright notes. These products requiered a page with their copyright notes.

]]> Thu, 06 May 2010 05:43 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15402#date:05:43 Comment by 150cc gas scooters That was a quality post,Maybe I will sign up to your rss. That was a quality post,Maybe I will sign up to your rss.

]]> Sun, 02 May 2010 15:37 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15401#date:15:37 Comment by ajaxguru Source code say that they prefer jquery to work Source code say that they prefer jquery to work

]]> Sat, 01 May 2010 16:33 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15400#date:16:33 Comment by Jean Some lawers could write to xero to apply the licence terms about the open source softwares that they have stolen to build their projects ? Some lawers could write to xero to apply the licence terms about the open source softwares that they have stolen to build their projects ?

]]> Wed, 21 Apr 2010 18:26 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15399#date:18:26 Comment by Jean To build your project, you use several open source projects with gnu licenses or other. (jquery, jquery plugins, prototype, licenced ExtJs, others). These products requiered a page with their copyright notes. Where it is ? You thank Microsoft to have a fashion icon but forgave completly the open source community that you have used. To build your project, you use several open source projects with gnu licenses or other. (jquery, jquery plugins, prototype, licenced ExtJs, others). These products requiered a page with their copyright notes.
Where it is ?

You thank Microsoft to have a fashion icon but forgave completly the open source community that you have used.

]]> Tue, 20 Apr 2010 20:33 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15398#date:20:33 Comment by Jean public website : 100% jquery service website : 90% prototype help area : 90% ExtJs (from demos without big diffs) If you think than ExtJs is better for your use, then use it everywhere and not only to build an help file. You are here to promote your soft, not your help center. Else create an article about your help pages, not about your software. public website : 100% jquery
service website : 90% prototype
help area : 90% ExtJs (from demos without big diffs)
If you think than ExtJs is better for your use, then use it everywhere and not only to build an help file.
You are here to promote your soft, not your help center.
Else create an article about your help pages, not about your software.

]]> Tue, 20 Apr 2010 20:23 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15397#date:20:23 Comment by George K So I decided to login for myself and poke around the source.  I found prototype and extjs 3.0.3. I didn’t see jquery in use in Xero Personal.  Even if they do use jQuery, Ext was built to enable these base libs not replace them.  For those that are new to Ext, it has an adapter layer that allows Ext to sit on top of these hugely popular libraries.  I look at Ext as jQuery Pro or Prototype Pro.  So for those that think its an all or nothing technology, you are missing out on having your cake and eating it too. Proud jQuery + Ext JS developer. So I decided to login for myself and poke around the source.  I found prototype and extjs 3.0.3. I didn’t see jquery in use in Xero Personal.  Even if they do use jQuery, Ext was built to enable these base libs not replace them.  For those that are new to Ext, it has an adapter layer that allows Ext to sit on top of these hugely popular libraries.  I look at Ext as jQuery Pro or Prototype Pro.  So for those that think its an all or nothing technology, you are missing out on having your cake and eating it too.

Proud jQuery + Ext JS developer.

]]> Sun, 18 Apr 2010 16:22 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15396#date:16:22 Comment by Phil I think those making the disparaging remarks along the lines of “Where’s the Ext JS?” are missing an important development point. Given what Xero has stated, they’ve ended up using a number of different Javascript technologies. Obviously jQuery is one of them, just looking at the publicly accessible pages. Much more interesting than these snipes at Ext JS would be an article somewhere which discusses why, and how, to integrated Javascript libraries from multiple sources, including practical tips on the gotchas of doing so. The unfortunate fact is that no single library really does it all currently. And I’m saying this even as somebody who’s only so far just *looked* at Ext JS. I haven’t used it or purchased a dev license yet, though I probably will. I think those making the disparaging remarks along the lines of “Where’s the Ext JS?” are missing an important development point. Given what Xero has stated, they’ve ended up using a number of different Javascript technologies. Obviously jQuery is one of them, just looking at the publicly accessible pages.

Much more interesting than these snipes at Ext JS would be an article somewhere which discusses why, and how, to integrated Javascript libraries from multiple sources, including practical tips on the gotchas of doing so. The unfortunate fact is that no single library really does it all currently.

And I’m saying this even as somebody who’s only so far just *looked* at Ext JS. I haven’t used it or purchased a dev license yet, though I probably will.

]]> Sun, 18 Apr 2010 04:20 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15395#date:04:20 Comment by David Source code say that they prefer jquery to work ... Source code say that they prefer jquery to work ... wink

]]> Thu, 15 Apr 2010 05:44 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15394#date:05:44 Comment by David Oh, they just changed this article. Because the project had no ExtJS component, they display us now the help center did from the ExtJS demo files and a customized theme. Oh yeah, now we can see the big ExtJS use. If ExtJS team could change the project presentation by only this help file with a small menu and some tabs, we will be happy. Community don’t like a lot hidden pubs in fake project. Thanks Oh, they just changed this article.
Because the project had no ExtJS component, they display us now the help center did from the ExtJS demo files and a customized theme.
Oh yeah, now we can see the big ExtJS use.
If ExtJS team could change the project presentation by only this help file with a small menu and some tabs, we will be happy. Community don’t like a lot hidden pubs in fake project.
Thanks

]]> Thu, 15 Apr 2010 05:09 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15393#date:05:09 Comment by Dawesi Xero’s use of ExtJS is amazing. I sometimes feel sorry for developers that ‘dont get it’ when it comes to design. Why does everything have to look like extjs when it’s the functionality that ultimately wins at the end of the day. I have started to use xero and I think it’s a very sweet implementation. Can’t wait to integrate it into my new suite of apps and by billing system… api here we come! Xero’s use of ExtJS is amazing. I sometimes feel sorry for developers that ‘dont get it’ when it comes to design. Why does everything have to look like extjs when it’s the functionality that ultimately wins at the end of the day.

I have started to use xero and I think it’s a very sweet implementation. Can’t wait to integrate it into my new suite of apps and by billing system… api here we come!

]]> Wed, 14 Apr 2010 08:36 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15392#date:08:36 Comment by Francis Zero is such an amazing application, that at first glance, its hard to identify where Ext JS was used.  Craig, you and your team have done an amazing job.  Hats off to you.  I’ve gone back to my team and shared with them your work.  We are all inspired.  This is a fantastic showcase for Ext.  The true power of a great framework is when you can’t even tell it was used. This jaw dropping reaction reminds me of another Ext implementation - Zipwhip: http://www.extjs.com/blog/2009/05/27/implementation-spotlight-zipwhip-and-ext-js/ Zero is such an amazing application, that at first glance, its hard to identify where Ext JS was used.  Craig, you and your team have done an amazing job.  Hats off to you.  I’ve gone back to my team and shared with them your work.  We are all inspired.  This is a fantastic showcase for Ext.  The true power of a great framework is when you can’t even tell it was used.

This jaw dropping reaction reminds me of another Ext implementation - Zipwhip: http://www.extjs.com/blog/2009/05/27/implementation-spotlight-zipwhip-and-ext-js/

]]> Mon, 12 Apr 2010 23:41 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15391#date:23:41 Comment by David Kaneda Thanks for chiming in Craig — I’ll update the post to show the Help Center as well, which is a great Ext implementation. Thanks for chiming in Craig — I’ll update the post to show the Help Center as well, which is a great Ext implementation.

]]> Mon, 12 Apr 2010 17:41 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15390#date:17:41 Comment by Craig Walker Hi all Just thought I would address some of the comments regarding our use of Ext within Xero, Xero Personal & Help Center. One of the reasons we chose Ext was because of it’s ability to be extensively styled - while we do use a mix of pure HTML & Ext components, a lot of what you see is Ext (or Ext behind the scenes) but styled heavily to fit with our brand & our user experience requirements. The important thing to note is that even though Ext comes with some great out-of-the-box themes, you can also take the fantastic functionality provided & customize it to your requirments (for some projects such as ours, brand & design aesthetic is extremely important). So we use Ext Grid extensively, Ext Window, Ext Tree, Ext Panels, Ext Menus, Ext Buttons, Ext DataView etc etc. It’s not as tightly coupled to Ext as some projects may be (except for our Help Center which is a completely Ext driven app), but it shows the power of Ext to integrate & be a great interface library. Thanks for the comments - we love the feedback. Craig Walker CTO, Xero Hi all

Just thought I would address some of the comments regarding our use of Ext within Xero, Xero Personal & Help Center.

One of the reasons we chose Ext was because of it’s ability to be extensively styled - while we do use a mix of pure HTML & Ext components, a lot of what you see is Ext (or Ext behind the scenes) but styled heavily to fit with our brand & our user experience requirements.

The important thing to note is that even though Ext comes with some great out-of-the-box themes, you can also take the fantastic functionality provided & customize it to your requirments (for some projects such as ours, brand & design aesthetic is extremely important).

So we use Ext Grid extensively, Ext Window, Ext Tree, Ext Panels, Ext Menus, Ext Buttons, Ext DataView etc etc. It’s not as tightly coupled to Ext as some projects may be (except for our Help Center which is a completely Ext driven app), but it shows the power of Ext to integrate & be a great interface library.

Thanks for the comments - we love the feedback.

Craig Walker
CTO, Xero

]]> Mon, 12 Apr 2010 17:35 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15389#date:17:35 Comment by Javier Well, i just opened a demo account and i see it has not too much of ext in it, everything is divs, the tab panel is not a tab panel, the panels are not panels (only divs), the forms are not ext forms, the charts are not extcharts. The only thing i see in there was a window when i click on add bank account, and the window only have a form inside (manual form not extjs forms) so sure i don’t see any good use of extjs on this app (using firebug to check everything). (i checked because in our company we are making an app, like this one, but we are making everything using extjs + extensions when needed) Regards to the ext team, excelent work. Well, i just opened a demo account and i see it has not too much of ext in it, everything is divs, the tab panel is not a tab panel, the panels are not panels (only divs), the forms are not ext forms, the charts are not extcharts. The only thing i see in there was a window when i click on add bank account, and the window only have a form inside (manual form not extjs forms) so sure i don’t see any good use of extjs on this app (using firebug to check everything).
(i checked because in our company we are making an app, like this one, but we are making everything using extjs + extensions when needed)
Regards to the ext team, excelent work.

]]> Sat, 10 Apr 2010 23:07 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15388#date:23:07 Comment by Honza Kucha? Incredibly nice and simple! Incredibly nice and simple!

]]> Sat, 10 Apr 2010 11:05 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15387#date:11:05 Comment by Martin @Richard it don’t look an application but a flash or some rich css. ExtJS is extendable but if you touch it too much, it begin a jail without possibility of update, support and easy bug fixes. @Richard
it don’t look an application but a flash or some rich css.
ExtJS is extendable but if you touch it too much, it begin a jail without possibility of update, support and easy bug fixes.

]]> Fri, 09 Apr 2010 20:08 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15386#date:20:08 Comment by tub3 It also shows the extendability of Ext. If you look close It also shows the extendability of Ext. If you look close

]]> Fri, 09 Apr 2010 18:08 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15385#date:18:08 Comment by Richard @Martin - If they didn’t take the time to customize everything it wouldn’t be as amazing of an application. It also shows the extendability of Ext. If you look close, you can see a ton of Ext in their application. @Martin - If they didn’t take the time to customize everything it wouldn’t be as amazing of an application. It also shows the extendability of Ext. If you look close, you can see a ton of Ext in their application.

]]> Fri, 09 Apr 2010 17:48 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15384#date:17:48 Comment by Martin if they need to rewrite all themes, tools and reject all use of components to use only the ajax engine, there is no reason to say that it’s an ExtJs project. if they need to rewrite all themes, tools and reject all use of components to use only the ajax engine, there is no reason to say that it’s an ExtJs project.

]]> Fri, 09 Apr 2010 17:05 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15383#date:17:05 Comment by dorgan From what I can tell they are using google charts. From what I can tell they are using google charts.

]]> Fri, 09 Apr 2010 15:26 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15382#date:15:26 Comment by Mitchell Simoens @Martin, it looks like (from the screenshots) that there may be a themed Ext.TabPanel, maybe Ext.charts, Ext.Slider, could be Ext.form.ComboBox inside a Ext.DataView or Ext.grid.GridPanel. If anything, it shows that you don’t need to stick with the “Ext Blue” default theme or the others but can create nice, clean looking components. This may loose the tie between your app and Ext but that’s all up to the developer. @Martin, it looks like (from the screenshots) that there may be a themed Ext.TabPanel, maybe Ext.charts, Ext.Slider, could be Ext.form.ComboBox inside a Ext.DataView or Ext.grid.GridPanel.

If anything, it shows that you don’t need to stick with the “Ext Blue” default theme or the others but can create nice, clean looking components. This may loose the tie between your app and Ext but that’s all up to the developer.

]]> Fri, 09 Apr 2010 02:15 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15381#date:02:15 Comment by Michael @Martin: They are using Ext.Graph, as well as a highly restyled set of core Ext components (like TabPanel, ComboBox, Button, etc.) Very nice to see what a little CSS can do to an already excellent product. @Martin: They are using Ext.Graph, as well as a highly restyled set of core Ext components (like TabPanel, ComboBox, Button, etc.)

Very nice to see what a little CSS can do to an already excellent product.

]]> Fri, 09 Apr 2010 02:14 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15380#date:02:14 Comment by Martin Where is the ExtJs use in this project ? This article look more a pub for a project than talking about the extJs use. If they use only Ajax and css, why do you use this project as spotlight ? Where is the ExtJs use in this project ? This article look more a pub for a project than talking about the extJs use.
If they use only Ajax and css, why do you use this project as spotlight ?

]]> Thu, 08 Apr 2010 22:34 GMT http://www.sencha.com/blog//implementation-spotlight-xero#id:15379#date:22:34