Over the period of time, UI has grabbed more and more attention of Business Users irrespective of their sophistication level. As a software provider company you cannot move away from this fact, rather embracing this change quickly is a key to success in current market.
Currently there are so many UI Frameworks are available in market. Some of them are paid and some are totally free (open source). Surprisingly, the free ones are more feature rich and provide more flexibility in terms of implementation and maintenance. Here we are going to talk about our experience with three such widely used frameworks: Angular.js, Knockout.js and Backbone.js.
We developed a full-fledged Crafting design studio using Angular. This studio was the part of product package and it consists of multiple logical modules for different functionalities. Further there was huge scope of enhancement and maintenance activities around the whole eco system. Considering these facts we found Angular to be best choice of available options.
Most of the frameworks force you to split your application into MVC modules defined by framework itself and then you have to write code to put everything together. This is where Angular takes lead on others. With Angular you have to split your application code into MVC modules but you need not to write any code to bind them up again. This is automatically taken care by Angular. It reduces a lot of code and possible bugs.
Two way data binding proved to be pretty handy in our case as it again saved a lot of coding effort of developers. The application design consists of a lot of popups which we easily implemented using bootstrap which is inbuilt in Angular. We extensively used Angular directives which increased code reusability. In our case it was crucial to write maintainable code and ensure that any new maintenance change doesn't break any existing functionality. Angular's emphasis on 'separation of concern' automatically takes care of this problem. On top of this we used Karma framework to write automated unit test cases. It helped us ensuring code quality all the time.
It gives a little insight that the entities in the application have a complex structure and complex DOM interactions and from the harder surface, it might be concluded that to support this functionality, Backbone.js is a better candidate than Knockout and Angular.
The philosophy of Backbone.js is very simple and it doesn't enforce you to do things in its own way. It doesn't provide any high level functionality either but it lays down the foundation, a solid foundation, on which large scale applications can be developed. But there is one downside of Backbone and that is the boilerplate code that may clutter the actual functionality implementation. Backbone provides Models, Views, Routes but it doesn't provide Controllers, Composite views, Layouts, Modules etc. That is where, Marionette.js comes in handy. Marionette is another JS library based on Backbone to keep you off the hook from boilerplate code and focus on the actual implementation. It hides house-keeping tasks within itself and provides various application level objects to better organize your code, to keep the concerns separate and hence let you write code which requires low maintenance.
Backbone + Marionette combo proved to be a solid base for our application. Backbone comes with underscore.js, a low level utility library. We decided to move to lodash.js, a fork of underscore.js, just because of the performance and compatibility gain provided by lodash over underscore. We also decided to move to Handlerbar templates instead of using the default underscore/lodash templates to enforce logic-less templating.
This was a Single page application containing a number of views and each view shows good amount of data which can be edited at run time. Knockout proved to be very handy in this case as it provides two way data binding out of the box. It saved a lot of developer effort.