Corestream - Code Web Development

Corestream

CoreStream provides organisations with the technology and support to help them manage risk and compliance more efficiently and effectively.

The Brief

CoreStream engage with Code to fulfil the front end architecture and build for their SaaS platform. They asked us to unify and modernise their HTML, CSS and JavaScript codebase to make it more efficient, improve UX and simplify maintenance for this fast growing service. We are tasked with managing this system going forward, providing expert front end architecture and development services and support on a daily basis.

Our Solution

As the application is already based on an existing platform, we initially took the original Javascript code base, spread across multiple separate pieces of functionality and unified it in to a single, safe namespace, reducing code duplication and improving manageability. We then did the same for both the HTML and CSS architecture. In the latest phase, we are moving the entire front end code base in to a new framework, built from the ground up based on modern best practices. This has dramatically reduced the amount of code required, and allowed us to abstract the front end from the functionality. This means a new client can get a fully branded version of the solution in a matter of hours, while allowing for even more dramatic layout changes if required, without having to touch a line of server side code.

The Result

The front end of CoreStream's excellent product is now smooth and intuitive, loading much faster than previously, yet being more flexible. The quality of the UI is a source of consistent positive feedback for the company, and our two firms enjoy an excellent working relationship, based on the challenge of solving complex problems in a simple and easy to use way.

"I have worked with Code for a number of years now to help consult on and implement flexible methods for improving the front end capabilities of our Platform. The primary reason for our long-term relationship is the excellent quality output coupled with a service level that is second to none. Ben and the team have enabled us to scale more rapidly through leveraging additional resource for all front-end technical requirements."

Richard Eddolls, Head of Platforms

Example Pages

1/3

Welcome Page

The welcome page gives permissions controlled access to all a clients available apps. It can be completely customised via properties and responds to the users screen size.

2/3

Generic Grid

The generic grid is a completely flexible grid system for forms management and completion. It uses modal popups for form entry and scrolls vertically and horizontally using the standard screen scrolling, while retaining fixed column headers and respecting page width.

3/3

Workflow

The workflow form is an extremely powerful and flexible system, allowing for multiple stages and sections, bi-directional state changes, and full approval history through an intuitive client side interface.

Unifying the Javascript and CSS code bases was the first order of business, and we added a Bootstrap based front end to the HTML in the latest framework updates. By taking the existing JS and CSS code and combining it in to a smaller, manageable set of external files, we reduced the amount of code substantially, and improved its maintainability. Following DRY (Don't Repeat Yourself) principles and safe namespacing conventions, we shared methods across functionalities, and reduced the overall size of the front end code base by 25%, while more than doubling the available functionality.

Layering Functionality

1. World Class Engine
This uniquely flexible platform is .NET based. The server code is architected and managed by CoreStream's world class development team. On to this engine we added a single Master Page and Page Layout, which are used globally across clients, the branding applied by custom code that injects the right CSS file in to the page at load. The CSS file to be used is configurable via the admin system for easy update by content managers.

2. Separation of Concerns
We decoupled the front end control file from the server side code, and added a property to each app to allow the control file to be changed at will. This allows us to completely recreate the layout of an app within the service without needing to touch the server code, maintaining its integrity.

3. Instant Branding
On top of this vanilla framework we load our client specific branding file. This custom CSS file overrides core colours and layout where required, to give each customer their own unique look and feel.

Developers
Corner

We've applied a lot of modern best practice techniques to give the CoreStream platform an excellent and easily managed UI. The primary rules we have applied with this system is to keep the global namespace unpolluted by creating our own namespace for all of CoreStream's Javascript.

JavaScript

As the service sits on top of an existing platform, we needed to be careful to ensure none of our JavaScript interfered with anything that was already in the page by default. To achieve this we used JavaScript namespacing. Instead of declaring each function individually within the window object, we created our own root object, and then every app that exists has its own namespace within that root object. We do this by inheriting down from the root in a dot syntax format, so if the root were 'code', then the JavaScript for the home page would be in the namespace 'code.home'. Once inside that namespace we can access any of our functions using the same syntax, i.e code.home.loadSlider(). This ensures the global window object is kept clean and we don't override any existing concerns.

A typical namespace example

We create a root namespace at the top, so we still have access to global variables, and then a child namespace for each discrete piece of functionality.

// create the root namespace and making sure we're not overwriting it
var code = code || {};

// setup global variables if needed
code.appname = 'rootapp';

/// 
/// Create namespace for app specific functions, usually in a separate file
/// 
code.genericgrid = {

	// setup variables for use across this namespace
	appname : 'genericgrid',
	
	init : function() {
		console.log(this.appname); // logs 'genericgrid'
		console.log(code.appname); // logs 'rootapp';
	}

}

// initialise our namespace safely
jQuery(document).ready(function(){
	code.genericgrid.init();
});