Innovation
Vizibl Unstripped
August 21, 2015
Darragh Toolan
2 minutes

When you say the words ‘front end’ and ‘back end’ technologies to any engineer there’s a pretty high chance they’ll know what you mean. But outside this circle it’s hard to come across someone who knows what you’re talking about when you start throwing around terms like ‘front end’ and ‘back end.’

The Vizibl platform is made up of a variety of front end and back end technology. Carefully chosen to ensure it delivers both the best possible experience to customers, and maintains a seamless and fluid workflow within the app.

The term front end typically means client facing – what you visually see and do within the browser. Every user interaction, animation, transition, and input is built using front end technology which is implemented by a front end engineer. These technologies come in the form of a variety of programming languages, frameworks, and libraries that all work together to enhance the user’s experience. The obvious goal of front end technology is to provide a consistent experience to the end user; however, this is not always possible due to legacy operating systems and browsers. In these circumstances the application progressively enhances the experience to fit the current capabilities of the user’s device and software.

A typical front end application is built of three technologies:

HTML for templating
CSS for controlling how templates look
Javascript to make pages interactive

Vizibl is no different. The core of Vizibl is built on a front end framework called AngularJS, or Angular for short. Angular is a single page application framework which works by reading templates and binding HTML elements to data. This means we can ensure certain components in the app are listening to other components, and are reacting to data changes and user interactions. This makes the application powerful by giving it the data it needs to continue working.

When it comes to styling our templates we take a similar component based approach, which spans from a set of rules and guidelines we have created called our Brand Guide. Everything we build is set out in the brand guide. This includes the markup, styles, and javascript to get this component working within the app. This is a great way for us to keep everything consistent, both across our entire platform and within individual applications. This way our engineers can rapidly build new features by leveraging this range of ‘drop in’ components.

We do not directly write any of our own CSS per se. We use a pre-processor for that called LESS. This allows us to extend the CSS language. We can use variables, functions, and mixins to build more maintainable and modular CSS. This results in a component and object orientated approach to CSS. Once we have written our LESS, our build script does the same thing, parsing it into valid CSS that can be used in production.

Nothing goes live on the app without thorough testing. We have three forms of testing that ensure we maintain the highest standard of quality. We use unit tests, which are written for each individual component to ensure the code we write does what we want it to. Regression testing which is a visual test that compares every state within the app and flags up any unexpected changes. Finally, we have end to end tests which run through the app clicking buttons. They enter text as a real user would to ensure everything comes together as intended.

Of course this outline is greatly simplified, and we could really go on for hours. But we hope we’ve given you a basic overview of the technologies and methodologies we employ at OSL to provide our customers with the best possible experience.


See the Tecnology in Action! Grab a Demo.



Head of Global Solutions @ Vizibl
One platform. Every device. All your commercial relationships.
Procurement blog posts

From arguing over cost savings to real delivering business outcomes. Our blog will take you there. Drop your email in the field below and we’ll keep you in the loop.

Required

Join the conversation