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

We had literally hit a roadblock. That’s when we decided to rewrite the complete stack from ground-up, from the server to client, all in JavaScript. Yes, you read that correct. Our current stack that serves Vizury Central is written completely in JavaScript with node.js on the server side & angular+d3 on the client’s end.

Architecture of Vizury Central
ui architecture_vizury central

With browsers becoming faster by the day, we decided to move the entire rendering on the clients’ side. Our servers remain responsible for:

  1. Exposing easy to use REST HTTP API
  2. Enforcing access controls based on session
  3. 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.

Best user interface_vizury central

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!

Looking for an all in one 360 solution to grow marketing ROI?

Leverage Engage360 to drive meaningful relationships with your customers.