Seamless front end integration – myth or matter of fact?

by Jonathan Hodson, Senior Front End Developer@ClearPeople

04/09/2014

In my time working on a wide variety of different solutions I have developed boilerplates and all kinds of frameworks that make my life easier but none that make the entire production teams and customer’s lives easier… until I joined ClearPeople.

As a front end developer our task is usually the same from project to project… 

Get the awesome designs from the designer and bring them to life using our standard arsenal of wizardry, HTML5, CSS3, JQuery etc. Then we hand over the HTML files to a .NET or PHP developer and they perform their own brand of magic to integrate the CMS solution. 

Simple… right?

As I am sure any experienced developer, no matter what your discipline is, will know it is never that simple!

There are so many factors that can make the integration of your HTML into the CMS solution your client has chosen a nightmare. 

“One cannot just simply hand over their files with thoughts of moving on to the next project and succeed.”

One thing that we produce for customers here at ClearPeople that I haven’t seen in other places I’ve worked in, is a fully functional front end prototype! No CMS solution but a fully navigable “site” none the less, to be used for user acceptance and usability refinement. ClearPeople primarily develop .NET solutions, so a fellow developer of the .NET persuasion and I put our heads together and developed a .NET prototyping platform, the likes of which I have never come across before, that makes for almost seamless integration into a multitude of .NET CMS solutions. 

We wanted to keep it simple and easy to use for any kind of developer to pick up and use it, we defined a few requirements:

  • Semantic and valid HTML
  • Easy page creation
  • .NET outputted markup for controls
  • A masterpage and sub layouts
  • Simple folder structure
  • Basic XML based page properties
Once we had our requirements we (I say we but I mean one of our senior .NET developers) set to work creating the backbone for the platform, the “database”. We wanted the ability to create pages and to be able to drop our controls effortlessly in-page. We developed an XML file for the application to use for adding and placing controls on the pages we had assigned them to.  We defined some tags that the prototype would pick up to define pages, child pages and the controls therein with a few added extras like body classes, menu name (for breadcrumbs), and page titles etc.
 

front end development coding

Example of XML “database” file


After a 2 hour crash course in .NET and the difference between .aspx pages and .ascx controls I was able to build my controls and pages effortlessly in a matter of hours.

Creating a control is as simple as adding the markup to an .ascx file and then using the xml file to assign that control to a placeholder which we have defined within a page (our .aspx file).
 

front end development work

Example of in-page placeholder for assigning controls


On top of the “backend” functionality we added a front end framework to deal with presentation. This consisted of our foundation grid, a 12 column grid we use in both design and front end development. The grid is fully mobile optimised and set up for either a fluid, responsive or adaptive front end solution. It also includes our standard set of custom jQuery functions for interactivity, enabling native mobile functionality including gesture support.

The prototype has become a real time saver, is a great point of reference for developers to ensure front end always replicates the designs throughout the build, and is incredibly useful for the QA team too. All our teams have now adopted this as the standard development process and it has stopped much of the hair pulling around integration issues.