Angular JS Technology, and what it means for AdTech

4773

angularjs-code-ui-front-end

1.  DATA DEMANDS OF AN ADTECH USER INTERFACE

“90% of marketing software is not doing a good job on UI,” said Jason Keath, CEO of Social Fresh, during The BeanCast Marketing Podcast, clearly indicating the room for improvement in regards to intuitive UI to properly adapt to users’ needs for increased data at their fingertips. Successful platforms are able to both scale form a back-end standpoint, as data volumes increase, and successfully demonstrate generated insights to users. The two most important considerations when building a successful platform are:

1.1 Intuitive and clear presentation of data

The important decisions in optimising media campaigns are made based on the data, therefore it is a must for any AdTech software to be able to present its users with the right amount of data that is relevant for them to measure, analyze, and optimize their campaigns.

Such software requires data to be shown in charts and tables that are both varied and innovative in order to maximize efficiency of media buyers in campaign optimization. An intuitive UI encompasses this need, and translates data from extensive spreadsheets to concise visual demonstrations, providing actionable insights in real-time. Digital product managers ensure UI design displays information users needs at their fingertips, see our post here for more detailed information on how to incorporate these needs into UI design.

1.2 Speed and Performance

For better understanding of the data before them, Users need to able to navigate back and forth between various pages/views of the application with ease.

However, as the amount of data and its representation grows to scale, the software becomes more prone to performance issues, increasing overall time taken to switch between various sections of the application. Latency does not provide for a positive UX, and it is simplest in the long-term to build code and infrastructure that anticipates for increased data volumes as platforms scale with their users.

 

2.  SOME SOLUTIONS FOR AN ADTECH UI INTERFACE

2.1 Data presentation

In order to present data to users in an insightful manner, it must be relevant, coherent, easily accessible, and most importantly, actionable. To do this, we draw on the toolkit of data presentations, combining a mix of the following elements for optimal UI design (with a handy easy-to-remember acronym):

Charts – Using charting libraries like Highcharts.js, d3.js

Animations for change from one section to another and general aesthetics of UI

Report tables – with pagination and ability to filter and sort the data in real time

Dashboards – where users are able to customise; modularize and prioritize based on their needs, and add tabs and views

 

2.2 Speed and performance

In order to compensate for added data and avoid long loading time, we can look to the following solutions:

Implementing Single Page Architecture (SPA)

Efficient modelling of data using MV* framework

Efficient loading and caching of data from server

2.3 SPA in a nutshell

In a “traditional” web application, each page you visit is a full page reload. The browser makes an HTTP request to the server and the server returns a full HTML document.

However, in a Single-Page Application (SPA), you only ever load a single page. The browser still makes HTTP requests to the server, but it does so via Ajax requests and the server returns only the data.

Advantages of SPA  include:

  • No “flash” in between page navigations
  • No browser refreshes
  • Reduced bandwidth of HTTP protocol overhead
  • Better performance as so we only need to update the parts that need to change

For further information on Single Page Application, visit Brendan Gaetz’s blog, or see how Software Engineer Emmit Scott breaks down the concept of SPA here.

2.4 MV* Framework

In SPA, as a user navigates from one section to another, we only fetch the data from server, while the heavy lifting of routing to the correct view, combining data with the HTML template, and managing a view’s lifecycle is typically delegated to a third-party JavaScript file commonly referred to as an MV* framework.

The are many options for using MV* frameworks; and each of the framework has its pros and cons. Some of the most popular frameworks include:

  • Ember js
  • Backbone js
  • React js
  • Angular js

Tobi Borlinghaus breaks down each type in this post in Developer Economics.

 

2.5 AngularJS 1

In the last few years, AngularJS has been the most popular framework owing to the ease of use, completeness as a framework and excellent documentation and resources that help developers to get started.

Some of the major features of the Angular js framework include:

  • Full support for writing SPA applications
  • Robust templating system that separates display logic from application logic
  • Routing support for navigation from one section to another
  • Resources and services for fetching and handling of data
  • Filters for convenient formatting of data to display
  • Directives to separate the DOM (Document Object Model) handling logic from application logic
  • A great open source community of tools and plugins

 

3.  ANGULAR JS AT BIDMOTION

BidMotion uses a powerful user interface for setting up marketing campaigns on mobile. The campaign can be targeted to many countries, cities, devices, and versions by applying granular targeting parameters derived from aggregated mobile data points. As mentioned, the need for vast stores of accessible data provides difficulties for developers; it can be difficult to develop and perform intensive tasks to render the campaign view when there are hundreds of rules by country and by devices.

The marketing platform includes many sections for campaign configuration, advertisers and media partners and networks. These sections involve presentation of data in charts and tables that can become tedious to handle.

Due is its all around support, AngularJS our choice for development of AdTech software. It has helped us to create a robust and stable User Interface in 6 months of development time. Additionally, the open source directives available for charts and other UI elements provide for a speedier and cleaner developmental phase.

But we have not contented ourselves with the simple and effective AngularJS 1. We are excited about the new version the framework. The new version includes many break-through changes that takes UI engineering to a different new level, bringing a whole new ecosystem of tools to build with.

 

4.  ANGULAR JS 2 AND ITS ECOSYSTEM

The new version of angular, which is currently a release candidate, has been in development since last year. Owing to the angular 1’s popularity, the angular team is taking more time and putting in a lot of effort before releasing the first version. At BidMotion, we are challenging ourselves by implementing the entirety of our new UI with AngularJS 2.

The new framework version promises to be:

  • Cross platform, with support for mobile, desktop and native OS app
  • Enhancing the speed and performance with better change detection and optimised code
  • Improved productivity with code completion, instant error feedback and code generator tools

With such new capabilities, it becomes important to implement further tools and practices to exploit all version 2 has to offer.

 

4.1 Typescript

If you have been working with Javascript for a while, you are familiar with the reoccurring problem when trying to do object oriented programming with class and inheritance: the code becomes painful and tedious. Here enters typescript.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Any browser. Any host. Any OS. Open source.

 

4.2 Observables

The demand for the dynamic user interface and data representation led to difficulty. Each time, we’re adding more complexity, more data, and asynchronous behavior to our applications. To manage all of this and to scale our applications, we need to move towards reactive architecture; the UI becomes event-driven, resilient and responsive.

 

4.3 Redux

Redux is a lifesaver when it comes to managing the application state. By state, we not only mean the data that comes from API, but also the state of user interface; what campaign is currently opened, which tab the user is currently on, etc.

We have many events that would change the state and it would become cumbersome to identify precisely which event caused what effect. Redux serves to define this cause-effect relationship of how the way the events can change the state. By properly exploiting redux, the state is rendered predictable after every event, which allows for developers to manage the complexities of interactive user interface in a simple way.

For further information on Redux, visit this post from You Have To Learn Computers blog or  And Yet blog.

 

5.  FINAL NOTES

By combining the power of Typescript, Observables and Redux, AngularJS 2 will allow smart and easy development of complex data driven User Interfaces. Applications will have more customizable and interactive dashboards with charts and tables that will allow data visuals from increasingly varied perspectives. In AdTech, all this serves to help users in better understanding the performance of their campaigns and make important optimizing decisions. Instead of being buried in data tables, searching for the glint of actionable insight, users can consistently and efficiently apply campaign optimizations in real time.

NO COMMENTS

LEAVE A REPLY