Is Ext JS right for your business?

This is the first in a series of developer-focused articles exploring Xero’s architecture.

I want to start out by focusing on Xero’s front end. The majority of our front end is built using the Sencha Ext JS framework – Version 4 if you want to be specific, although we have several areas now utilizing V5.

Ext JS wasn’t a framework that I had used previously so I wanted to share some of my experiences working with it because, well, Ext is a bit different.

A brief history of Ext JS

Ext JS originally began as an extension (yui-ext) to the Yahoo UI Libraries way back in 2006, but wasn’t actually released as a standalone framework until 2007.

The last few years has seen a massive surge of JavaScript frameworks that tend to focus on a specific issue or area. In fact, Yahoo decommissioned Yui in 2014 noting,  “Many developers today look at large JavaScript libraries as walled gardens they don’t want to be locked into.”

This brings us to one of Ext’s most distinguishing features, for better or worse, Ext aims to be an all-encompassing solution for ALL your front end development needs.

There can be only one!

Ext JS at Xero

I spoke to our CTO Craig Walker, who has been with Xero since the beginning, as I was curious as to why Ext JS was originally chosen. I was somewhat surprised to find out that one of the major motivations at the time was that Ext JS’s had an excellent grid component!

Craig discussed how we used Ext JS’s component set to augment our own custom developed components. As Ext JS matured and Xero grew, the advantages of Ext JS became more apparent and central to Xero’s front end architecture.

Craig wrote a post about Xero & Ext JS’s history in 2009.

Commercial framework

Ext JS is a commercial framework produced by Sencha that, at the time of writing, costs the not insubstantial sum of $3,250 for a 5 developer license. This includes a years’ premium maintenance and support.

I suspect this price tag will probably immediately price out a few organizations (and I suspect these aren’t the market Sencha are aiming at), but don’t be too hasty. Ext JS has a lot to offer that would cost an enormous amount to develop yourself – let’s take a look at what you get for that money.

Functionality

Ext JS wants to be your front end world, and as such, contains functionality covering pretty much everything you will want and need to do except maybe make you tacos.

Ext contains the following (and a lot more I haven’t even discovered yet):

• A module loader, inheritance/class implementation and MVC/MVVM functionality.
• Literally hundreds of controls covering the majority of UI scenarios you are likely to encounter from date pickers, sliders to menus and tabs Ext JS has you covered. It is also possible to inherit and adapt these components to your specific needs.
• The ability to easily plug Ext into a variety of backend data sources such as JSON, XML etc.
• Layout functionality and themes make it easy for anyone to create a reasonable looking application. Also, by utilizing Ext’s layout functionality it’s reasonably easy to produce a responsive design that will work on the majority of devices.
• Charting components.
• Extensive documentation.
• V5 contains command line scaffolding tools to facilitate speedy development.
• A Chrome plugin to assist you with debugging.
• There’s also a ton of other stuff I haven’t even used yet.

Strengths

I see the following as Ext JS’s main strengths:

• Ext JS’s module loader, class system, MVC model encourages the division of code into small maintainable components. This keeps code (particularly in JavaScipt which most people don’t understand) from turning into a plate of spaghetti.
• It can create a consistent look and feel for end users, keep everything as tidy as possible and allow you to reuse code where you can. In a large system like Xero, this is particularly essential.
• Ext JS has a component for pretty much every scenario you will encounter.
• It is relatively easy to put together some very complex UI scenarios and workflows.
• Developers with limited CSS/HTML skills can put together a reasonable looking application.
• The AJAX/Model and store functionality makes it trivial to populate and send data back and forth between client and server.
• The online documentation is excellent and there are support forums available.

Weaknesses

Well this all sounds pretty good, so what’s the catch?

First of all, I’ll say that I have been using Ext JS for around 2-3 months, so I should certainly not be considered an expert. I have, however, done a considerable amount of front end development with other frameworks such as AngularJS, Knockout and jQuery based solutions.

For me I have the following issues with Ext JS:

• Steep learning curve. Ext has a steep learning curve and a lot of things just don’t seem to work intuitively. Ext will magically create methods for properties which can be confusing to new developers. APIs are often weirdly named and private methods are exposed which could be hidden. I suspect some of this is due to historical reasons, but there should be a tidy up of some of this.
• Less collaboration outside of your discipline. The learning curve makes it harder for other developers who aren’t familiar with Ext to contribute to projects and jump in to fix small issues.
• Harder recruitment.It could be harder to recruit developers with Ext skills given the relative rarity of this framework over other solutions and they would need time to ramp up.
• Difficulty with clean code. While Ext JS keeps code files organized quite well, it is very hard (but not impossible) to produce clean HTML when using components and layout. Ext JS controls tend to be wrapped up in multiple layers of nested divs and Ext often adds inline styles which are hard to override/remove.  This can lead to some infuriating style wars as you battle Ext’s and cannot be good for page performance. I also had some strange issues where I dynamically added and manipulated components and they didn’t render properly.
• UI created programmatically. All the UI is constructed programmatically, and I’m not sure how I feel about this. With previous solutions, I was used to modifying ASP.net MVC cshtml views, which made it easier to picture what was being changed. It is worth noting that you can certainly hand code HTML, and Ext contains a templating engine, but you are working against Ext to some extent and won’t benefit from some other features.
• Problems for CSS/HTML developers. The programmatic page construction model could make it hard for pure CSS/HTML developers to contribute to your application.
• Difficult to replace. Given Ext’s monolithic nature it would be difficult to replace elements of Ext. This could stop you taking advantage of future advancements and approaches and upcoming APIs.

In summary Ext JS demands that you fully commit to its (often) unintuitive approach. In return, it offers a great platform to create maintainable and reusuable code for large applications.

Further reading

The Ext JS site itself offers a number of Hello World tutorials and downloadable examples among their other excellent online documentation.

However, I suspect without assistance it would be tricky to get up to speed with Ext. I would highly recommend two excellent courses Peter Kellner has produced for Pluralsight:

•       http://ift.tt/1LciOlf
•       http://ift.tt/1uHE3r6

The post Is Ext JS right for your business? appeared first on Xero Blog.

from Small Business Accounts http://ift.tt/1FxxGea via accounts software for small business
from Tumblr http://ift.tt/1EYNO3y