Technology behind Vizury Central (Part – 1)
This is the first of 3 blog posts that talks about how we built a scalable, feature-rich, front-end app at Vizury with an emphasis on site speed & performance, we call it Vizury Central.
Over the years we have accumulated terabytes of data through various collaborations in the advertising industry. One of the larger goals for us is to give meaningful insights to our clients that empower them to make critical business decisions.
We effectively wanted to build a platform, where both our advertisers & publishers can interact more intuitively with their data by slicing & dicing various aspects. We started working towards that goal a few months back.
Last December, on our 5th anniversary, we released the first version of Vizury Central, with a Dashboard for our customers. The Dashboard provided campaign overview in one glance. Over the last few months, we’ve been hard at work in incrementally adding features around our prime offerings Vizury WebConvert & Vizury MobiConvert.
Where we started
Our very first version of Vizury Central was built around the Spring Framework on the back end, the server end rendered templates & JQuery with Google Charts on the front end for presentations & visualization. While it solved the problem, the overall development cycle was getting really long with the additional overhead of interacting with an external agent for UI design. Also, the visualization generated using Google Charts were more of static content where data needs to be re-fetched whenever the date-range changes.
Enter all-JS stack
With browsers becoming faster by the day, we decided to move the entire rendering on the clients’ side. Our servers remain responsible for:
- Exposing easy to use REST HTTP API
- Enforcing access controls based on session
- Querying & transforming data from various Databases
Once a client visits Vizury Central login for the first time, the server sends the static HTML page with compressed JS & CSS bundles with far Expires Headers. All the view definitions for the application are bundled into a single compressed JS file.
Further communication uses the concept of ‘data-on-the-wire’, where only the JSON data is exchanged between the client & server enabling the transition between the different states of the application. I leave you with the awesome Vizury Central Dashboard.
In the next part, we will talk about: how angular JS integrates with D3 & Cross Filter to provide an amazing, interactive drill down to slice & dice over 70,000 rows of raw data on the client’s side! Phew!