Sencha Inc. | HTML5 Apps

Blog

Implementation Spotlight: Xero

April 08, 2010 | Jay Robinson

What is Xero?

Xero logo - The world's easiest accounting system 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.

The product is an online accounting system designed for small to medium businesses, that provides financial confidence and clarity to business owners and their advisors in real-time?—?anytime you need it, anywhere in the world.

Ext JS won out on all counts… [Ext JS] builds beautiful yet powerful user interfaces quickly and easily.

Xero has all the functionality you would expect from a modern accounting system, including daily automated bank feeds, invoicing, debtors, creditors, sales tax, expense claims, fixed assets and multi-currency. Xero also provides comprehensive reporting, which includes sales tax reporting, aged reporting, management reports, reconciliations and annual reports with full drill-through capability.

Xero has also just morphed into personal finance with the release of Xero Personal. One of the reasons Xero looked at doing a personal edition was because many small business owners blur their personal and business expenses. Xero Personal will work great on its own but it will also complement the business product.


Why did you choose Ext JS?

Xero has always prided itself on its usability and user interface design, hiding a myriad of complex accounting processes under a user interface that is both easy to use, but also powerful enough to cater for the most experienced users. Even though there are a lot of JavaScript libraries out there today that are all individually great, as a company that puts user experience first, Xero needed a library that took interface design seriously and was completely able to be styled, extended and integrated exactly to Xero’s specific requirements.

Ext JS won out on all counts and it quickly became a key part of Xero’s technology strategy and its ability to build beautiful yet powerful user interfaces quickly and easily. Over the last few years Ext JS has grown into one of the best standalone JavaScript libraries available, combining one of the best widget and interface libraries available on the market today, with a fast and robust core library.

Ext JS is quite beautifully built, using a best-of-breed object hierarchy and event subsystem that works wonders at speeding up the development of even the most complex user interface. As a team that runs a full Microsoft stack at the backend, the observable/event-based model was very natural to us. The richness of the library really works well over .NET. Even though there is still some legacy Prototype objects in Xero’s main application, both Xero’s Help Center and the soon to be released Xero Personal are built using Ext JS sitting over ASP.NET MVC. In fact the entire user interface of Help Center is completely built using JavaScript with Ext JS at its heart and is a great advertisement for the power of Ext JS to build functional cross-browser user interfaces.


Do you have advice for developers starting out with Ext JS for the first time?


As with any library Ext JS does have some quirks?—?the same object hierarchy that makes it powerful also requires a high learning curve to get your head around. Actually, the size of the library in general is partly the reason for this. It’s likely that if you want it, Ext JS does it, but you’ll just have to find it.

It’s very important to get an understanding of the breadth of the API and the best place to start is with the documentation and examples that come with Ext JS. A lot of newcomers to Ext JS complain about the lack of documentation, but it’s actually pretty thorough and gets better with every point release. You’re also provided with the complete source and having access to the source means that if it’s not documented you can use a combination of Firebug and the raw source files to figure out exactly what’s going on. The code is both very well written (and pretty much self-documenting) and the work done on improving the unit test coverage across the library has made it even easier to pick up all the nuances of such a massive library.


Xero Help Center

At Xero we found the easiest approach to picking up Ext JS was to choose a fairly complex page and build it from scratch using Ext JS. That required us to actually think about what components we would need, how those components would interact and the kind of data those components would operate over. Once we built that one page we were able to take those learnings and apply them to the next page, reusing code, objects and understanding.

What features could we add to Ext to make building a rich application easier in the future?

As with any library there is always going to be a bucket list of features every developer wants, however due to the object oriented and componentized nature of the library it’s fairly easy to create those yourself. Because of this, it would be great if some of the code was broken down it smaller units with tight encapsulation. You can get into traps of overriding functionality that requires you to copy quite a bit of code that has since been deprecated in newer versions of Ext JS.

And obviously any and every performance improvement that’s possible is very welcome to an application that is as heavily oriented toward the user experience as ours is.

Final thoughts?

Ext JS has built a JavaScript and user interface library that is elegant, intuitive and high performance. At a company like Xero that lives and dies by its user experience, Ext JS was an easy decision and one that is helping Xero to create award winning software loved by small business owners around the world.

There are 27 responses. Add yours.

Martin

4 years ago

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 ?

Michael

4 years ago

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

Mitchell Simoens

4 years ago

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

dorgan

4 years ago

From what I can tell they are using google charts.

Martin

4 years ago

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.

Richard

4 years ago

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

tub3

4 years ago

It also shows the extendability of Ext. If you look close

Martin

4 years ago

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

Honza Kucha?

4 years ago

Incredibly nice and simple!

Javier

4 years ago

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.

Craig Walker

4 years ago

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

David Kaneda

4 years ago

Thanks for chiming in Craig — I’ll update the post to show the Help Center as well, which is a great Ext implementation.

Francis

4 years ago

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/

Dawesi

4 years ago

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!

David

4 years ago

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

David

4 years ago

Source code say that they prefer jquery to work ... wink

Phil

4 years ago

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.

George K

4 years ago

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.

Jean

4 years ago

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.

Jean

4 years ago

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.

Jean

4 years ago

Some lawers could write to xero to apply the licence terms about the open source softwares that they have stolen to build their projects ?

ajaxguru

4 years ago

Source code say that they prefer jquery to work

150cc gas scooters

4 years ago

That was a quality post,Maybe I will sign up to your rss.

bi9foot178

4 years ago

These products requiered a page with their copyright notes.

Egor

4 years ago

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

Tim Farland

4 years ago

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!

Mark Bakker

4 years ago

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.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.