Clean & Simple: The Lost Art of Coding
William Drol
William Drol
Home  |  Blog

One Simple Thing To Consider When Developing Enterprise-Level Websites

April 4th 2016  |  LinkedIn

As an industry, we devote extensive resources to build and grow branded web identities for our clients. We're committed to content management, email marketing, globalization and social media. We use mature, proven technologies such as server arrays, database servers, web services and content management systems. Clearly, we've got this part down to a science.

Wild West Adventure Why, then, does front-end development feel like a trip to the wild-west? We often inherit large websites with content that exceeds thousands of pages. We're noticing a pattern. The greater the scale, the greater the chaos. These sites never include a simple, proven or scalable front-end architecture. Instead, we get styles gone wild (sometimes with 10,000+ lines of code per stylesheet).

House of Cards On support contracts, we're not too keen to disturb monstrous files like these (#becauseSideEffects), so we sometimes create new files to override the originals (either due to lack of documentation or the fear of accidentally breaking something). There's one simple thing you can do to prevent all this:

Namespace your front-end code in a way that automatically guarantees unique names across your entire code base... and then enjoy zero side-effects going forward.

Does that seem challenging? Actually, it's quite easy. Let's get started!

Simplicity, Sanity and No More Side-Effects

Specific technologies aside, all websites have files and folders. You have to put the markup templates somewhere in your file system. Everything in the following list is a folder:

Views
  Components
    Navigation
      StoryList
      Breadcrumbs
      PrimaryNav
      SecondaryNav
    Content
      LeadStory
      NewsBrief
      FeaturedStory
      MainPost
      etc...

The key is to use folder names from the file system to automatically guarantee unique names in the front-end. The markup and styles for a breadcrumb component would look like this:

<div class="Navigation-Breadcrumbs">
  <!-- All component markup here -->
</div>

//----- LESS or SASS
.Navigation-Breadcrumbs
{
  //----- All component styles here
}

In the file system, you cannot have duplicate folders at the same level, so this convention guarantees unique names no matter how large the site becomes. Notice, you're using the name of the Navigation folder, followed by a dash, followed by the name of the Breadcrumbs folder, which yields:

Navigation-Breadcrumbs

Use this name as the unique namespace value in your front-end code. All markup and styles for this component should go inside the containers shown above and nowhere else. Btw, using either LESS or SASS makes single containers like these practical and intuitive.

We recommend putting all files associated with each component in the same place and named consistently. This gives you a single point of reference. For example:

Views
  Components
    Navigation
      Breadcrumbs
        Breadcrumbs.cshtml
        Breadcrumbs.less
        Breadcrumbs.js

Want to Dive Deeper?

This technique prevents side-effects and scales wonderfully. For a deeper dive into everything you see here and more, please have a look at my Font-End Architecture for Enterprise Development.

What About Timing?

When's the best time to do this? The answer depends on the size of your website and where your company stands right now. If you're currently in the process of: