Seamless front end integration – myth or matter of fact?

Posted 4 September 2014 12:00 AM by Jonathan Hodson, Senior Front End Developer @ ClearPeople

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.


Add your comment





intranet Modern SharePoint teamwork employee engagement digital workspace SharePoint JavaScript Windows Azure Digital Transformation staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics jquery QA Quality Assurance testing content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath