UI or not to UI

UI or not to UI
Initial idea

4 months ago we had a discussion on how to continue with admin UI development. The problems we face is that our admin is mostly written in PHP with old school design talking over hessian with Java backend. So you already see a lot of problems just in that sentence. Also we have a specific team that develops and maintains most of the admin parts so often they are pressured to fix bugs and deliver business critical features, which leaves us, development teams, waiting for months until our new admin requests are prioritised and finally developed. Until we have the admin we have to insert configuration from business for new apps manually which is time consuming and involves a lot of departments. This is just a tip of the iceberg... Imagine how it is to refactor Java code that is used from PHP?!

So what we figured out was that we want is to take the responsibility of developing admin apps ourselves for the products that we are in charge of and slowly start replacing existing admins and move them to the products that they belong to. This was just a first big step that we took, since most of us don't know how to develop UIs in general. The bottom line was that we wanted something that is easy to learn and use, since we don't want to innovate in this area and we want to keep focus on our area of expertise. The next question what we faced was: which technologies to use? This was also not an easy task ... We already knew that we want to go fully REST and only concentrate on admin UIs (intranet) so that pretty much ruled out a lot of stuff. We also decided that we want to go SPA (Single-page application). We didn't strictly say that we need to go SPA but this is was the direction we wanted to go. Naturally the answer to our questions was AngularJS, but I also suggested that we should take a look at ExtJS because it is probably simpler and better suits our needs. We also had few other candidates but they are not important for this story. And here the discussion started... I won't go into the details of the discussion but mainly everybody had their stand about the technology that they liked and everybody pushed strongly for their favorite without taking into consideration what we really needed or wanted. It was a personal taste war and everybody had their strong pros and a lot of cons for every other technology.

So what did we do?

We decided to build a prototype inside our team with the 2 most promising candidates: AngularJS and ExtJS. We said that we will decide once we have a hands-on experience with both and not just listen to empty words, blogs or quick Google searches. So we started building the first admin prototype for one of our products with AngularJS. We picked a team member that had no previous experience with Angular and we began! After few days we quickly got something that was working but required a lot of work to make it look nice and user friendly so we started to search for plugins to make it all nice and shiny. We chose Bootstrap for our CSS (and theme in general) and picked a few plugins for tables, datepickers, form validation etc. We quickly figured out that it is not so easy to pick the plugins... Why? Well, a lot of reasons. Soon, we had to include jQuery, because all the nice (mature) plugins need jQuery to operate. Some plugins have custom CSS, so we had to tweak them to have the same look and feel as other bootstrap parts have. This now required a deeper knowledge on how to code Javascript, use CSS etc. We didn't want that to happen! On top of everything, our way of organizing code was bad. We had to learn how to organize our code, which means we need a lot more experience than we had. At the end, we managed to build the admin, but not as fancy as we thought... We said that it is enough for a prototype and now the time came to try ExtJS to see if we can do it better and faster. We picked another team member that had no previous experience with ExtJS and let him find his way through and build the same thing, using the same REST services. A week passed without results, comparing to AngularJS where we got results fast... But after a week and a half we got our first results and everything look much more amazing, simpler from the code point of view and looked very nice and shiny. We had far less leftover things to do + we got few out of the box things that we didn't think of or wanted in the beginning. And at this point it was pretty much clear for which technology we wanted to go... So we decided to fully finish ExtJS admin with all the features and more. This "and more" part cost us quite some days because ExtJS offers a lot of out of the box things so we wanted to tweak (better say over-tweak) all the tiny details, even nobody will ever notice them... But in our defence, we developers like to explore and there are a lot of things ExtJS has to offer which you never think of, but when it is offered to you, you have to play with it. :)

Who won?

So we had a winner and it was ExtJS! Don't get me wrong, ExtJS is not that perfect at all, nor is AngularJS the wrong tool for the same job! There are already available admin templates using AngularJS so you can start there with a lot of available components... But from my point of view, using AngularJS starts simple at first. Then you realize that you need a lot more components to make it all work together which is outside AngularJS domain so you have to learn a lot about HTML, CSS, Javascript, UI development. AngularJS on its own is not nearly enough to make enterprise admin UI and it was not built for it! When you develop public web sites, this is the place to use it, where ExtJS wouldn't even be on the list of technologies. We just chose the right tool for the problem we had. In the end this is how it looks from the architecture point of view.

But, not everything is perfect with ExtJS. First of all, it requires some more time to get to know it. This means a longer learning curve at the beginning! But luckily it is very well documented and there are a lot of examples. The other negative thing, for individuals and small companies, is the high licensing price! Yes, ExtJS is not free, unless you are using it in an opensource project. The strangest thing is that you have to buy at least 5 developer licenses... So individual developers are discriminated and ExtJS heavily relied on that people in the past so this is a big shame on Sencha for this decision, no matter what they say. Other downside that we faced is Sencha CMD which is not that good and pollutes your repository with unnecessary files. The whole project structure that you have to have, including extjs, sencha directory, etc. is just wrong. For every project we have 50Mb+ overhead in every repository because of this and what we only want is our app code! They should definitely work in this area and go more maven like and build the whole project locally and not requiring the whole structure.


In the end we are quite happy with our choice, it helped us keep focused on what is important for us and on the other hand we now control our own UIs and are able to deliver functionality to business much faster and with better quality! The UI technology evaluation and time to adopt it was a bit longer than we expected, but it was worth going into this direction. Now we have the whole product development, from top to bottom, inside our team and we are able to control, maintain and change it more easily and with much lower risk.