Technology show case part 1

By | March 30, 2014
Jquery,Backbone,Bootstrap,requirejs

Jquery,Backbone,Bootstrap,requirejs

========= Client side =========

When we started our though process around the revolutionary idea called Adalbdal responsibility assigned to me to build the world class yet simple UI. Though I had not done extensive client side development but was quite up for the challenge. Somewhere I knew I wanted to do but wanted a free hand and thankfully I got the opportunity.

Now the challenge was how to start, what technology we should select.In short how to take care how,what and why. As per our requirement it was quite simple :). Simple as like building a rocket. Here are few basic requirements that we tried to take care.

1) action on one widget should update other.

2) lazy loading but same time sever side rendering. Don’t ask why 🙂

. 3) responsive UI as never wanted to code for multiple resolution.

4)easy transition from one page to other.

5) minimise load time.

6) proper display of images maintaining their aspect ratio.

7)update URL from client side.

8) Ajax support.

9) Swipe support.

So obvious choice was using jquery for dom operation but how to build those complex widgets was the main pain point. Also how to decouple client side from server side completely so that both party work independently and integrate at the end with minimal effort.

I started with jqury UI considering huge widget collection and large community support. But due to its heavy in nature and also may be due to performance I was still in search of a better combination of UI technologies. And I realized during the process that out requirements can’t be taken care by single set of technology or framework. After doing some more research I came up with combination of frameworks which I though would very much take care of our requirements.

1. Bootstrap to provide widgets and responsiveness with high performance and multi browser support.

2. Backbone to provide MVC on client side for updating UI and also it takes away most of the effort of Ajax if not all. Specially model part is quite amazing.

3. Requirejs for providing support for AMD. Has helped in building and lazy loading of JavaScript to increase page speed and minimise load size for user.Specially useful for mobile user. And also helped us to get rid of namespaces on client side.

4. Last but not the least jquery for basic dom operations.

I still have one version of product based on jquery UI. Now above mentioned technologies never tells you how to achieve all the above listed requirements if it’s sever side 🙂 . Thus I came up with middle path. Using jsp/spring rendered the UI and converted them to various backbone views and construct models for the views which helped us in various ways like syncing with server without loading the whole page :).Updating page on event trigger. Modularizing the client side code for better management. There are more but would stop here. How did we make it agonist to server ? Well I create static Json for all client side modal and use to feed those jsons to models on request based on uri mentioned in backbone models.

It was quite interesting to see how things come up with the blend and mixture of technologies and frameworks around, utilizing/customizing them as per need and creating some creative stuff. Still I see there is a large scope of improvement in various area which I will pick step by step on the journey of Adalbdal. I think it’s quite common, when you revisit your code, you always feel you can still do better 🙂 at least in my case and that’s what I call progression.

Leave a Reply

Your email address will not be published. Required fields are marked *