Newgen Software Technologies Ltd.

NEWGEN – CASE STUDY- UI & JAVASCRIPT TECHNOLOGIES

U I F R A M E W O R K C A S E - L E T

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.

How do you manage all your server side code in an enterprise level business application? The answer is simple: you break it into its individual modules which can be developed and tested independent of one another and then you put all pieces back together to get back to the bigger picture. A lot of design patterns and frameworks are available for managing your server side code to support this concept. But wait a second, what about the front end. When it comes to the front end, we do not always pay much attention to the modular development and starts putting the things together without concerning about the design and many a times; the result is horrible code spaghettis whose maintenance becomes a nightmare. It may work for small scale applications but not for large scale enterprise application which might have 100000 LOC of Javascript.

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.

On other hand Backbone is there. It doesn’t really give you a data binding facility but it provides everything at a little lower level in a way that it doesn’t limit you to accomplish what you want to do. So it is quite nice if you want to build some complex interactions or some complex models.

Newgen Confidential Proposal - NEWGEN-PIA-ProjId1 Page 2 of 3

The application which we have developed using Backbone is a kind of Authoring system in which data can be imported from other systems, can be modified, new data can be entered and final authored data can be released to a variety of other systems. The data consist of products like Vehicle Models, Series, Accessories, and Parts. Each Product might have different attributes, media, pricing, effective dates, effective visibility dates, features, groups, descriptions and many more different properties that can be associated and de-associated at any time. Each Product has a Manage screen which enlists all the current Products in the system along with filter criteria. The product can be created from its create screen and can be edited as well.

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.

In another critical project we developed a resource management application using Knockout.js. Knockout is a standalone JavaScript library which is based on MVVM architecture unlike Angular and Backbone. It provides quite a flexible structure which allows developers to use a number of supporting JavaScript libraries.

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.

Along with Knockout we used a number of different JavaScript libraries for different purposes. For communication between flash components and HTML components we developed a separate module using Amplify.js. For automatic routing of views and browser handling we used Sammy.js. Bootstrap was used extensively for popups, pallets and other controls. Require.js was used for module loading while execution in browser. Bunch of other Javascript libraries like Bunddle.js etc. were also used for different purposes.

Newgen Confidential Proposal - NEWGEN-PIA-ProjId1 Page 3 of 3