Front-End Development – A New Workflow To Improve Code Quality

By Sam Holt | Posted Jun 2, 2016 | 7 min. (1377 words)

Front-end development is one of the fastest evolving aspects of modern web development. It seems like there is a new framework or methodology every other week built to solve the issues around this relatively new technical area.

In the dark ages of web development, front-end development was something either flogged off onto over-burdened designers, or hacked on by exhausted software developers. Not ideal, and unfortunately many web projects are still scattered with the results of this way of thinking.

Those were grim times.

Fast-forward to the present day and look at the tools and resources we have available.

At Raygun we’re dedicated to producing design and code of the highest standard. This permeates into how we approach our workflow. We’ll look at:

  • Four key areas of a front-end workflow:
    • Design
    • HTML and CSS
    • JavaScript
    • Post-deployment maintenance
  • How to make front-end development accessible to all members of your team
  • How these tools improve code quality, help to reduce bugs in a web application and generally result in a higher quality product

Let’s dive in…

1. Design And Front-End Development

At Raygun, we’ve introduced two web-oriented design tools into our workflow: Sketch and Zeplin. We won’t go into great detail about these, but we feel they are vital to our front-end development process.

Here’s a brief summary of each for context:

  • Sketch is a digital design app built from the ground up with web in mind
  • Zeplin is a collaboration tool to share designs across a team

These tools are not only great for cutting down design time, they make it easier to extract resources, ascertain dimensions and are largely web-focussed. No more pt to px conversion, inconsistent rendering of fonts, or soul-crushing frustration of building something from an out-of-date design mock-up.

Sketch makes designs easier to work with, Zeplin let’s you measure and extract assets from an up-to-date mock-up.

2. HTML And CSS

There have been a few CSS methodologies around for a while now, these three stand out as the most popular:

  • OOCSS
  • SMACSS
  • BEM

When followed closely, the first two in this list have been used to great success in web design. But when it comes to building apps in a large team of engineers, BEM is by far the easiest and most scalable methodology to follow.

At Raygun we use BEM to structure our markup and our stylesheets.

BEM = Block-Element-Modifier

The ground rules

Naming conventions

You can essentially use any combination of dashes or underscores to split up your elements and modifiers, that’s really just a matter of preference. Here is how we name our components:

  • block
  • block__element
  • block__element––modifier
Blocks can contain only one level of child elements
JavaScript-oriented selectors are prefixed with js-, and are not referenced in the CSS

That seems like a fair bit to take in, so let’s consider the following example:

<!-- HTML -->

<div class="module">
  <div class="module__header module__header--alert">
    <h2>User behavior</h2>
  </div>
  <div class="module__body">
    <div class="chart">
      <div class="chart__chart-container">
        <div class="js-chart"></div>
      </div>
      <div class="chart__metrics">
        <div class="js-chart-metrics"></div>
      </div>
    </div>
  </div>
  <div class="module__footer">
    <p>...</p>
  </div>
</div><!-- HTML -->
/* CSS */

/* Block */

.module {
  border: 1px solid grey;
  font-size: 1rem;
}

/* Elements */

.module__header {
  padding: 0.5em;
  border-bottom: 1px solid grey;
}

.module__body {
  padding: 0.75em;
}

.module__footer {
  padding: 0.5em;
  border-top: 1px solid grey;
}

/* Modifiers */
.module__header--alert {
  background-color: red;
  color: white;
}

/* Block */

.chart {
  border: 1px solid grey;
  padding: 0.75em;
  display: flex;
  flex: 0 auto;
  flex-flow: row;
}

By adhering to this structure in our front-end development workflow, we eliminate a lot of the issues which have made HTML and CSS so difficult to maintain in the past.

  • BEM makes CSS easier to read, more modular and less ambiguous
  • Flat CSS means no more nested rules the length of your arm, no more ugly !important tags and, most importantly, no more inheritance wars with other developers
  • JavaScript DOM changes are completely independent to presentation, which follows the progressive enhancement pattern
  • HTML blocks can be rendered any where, and have no dependencies on other blocks

If the rules of BEM are followed closely, every member of your team can easily make changes to your application’s front-end without fear of unexpected consequences.

Bonus points:

Set up KSS with Grunt or Gulp to automatically generate a living style guide as you write your CSS. This can be enormously helpful for designers and developers as a design reference for every block and component of your application.

3. JavaScript In Your Front-End Development Process

JSPM

Let’s continue looking at our example and add a bit of functionality with the help of this relatively new tool. The JavaScript Package Manager allows developers to easily include remotely hosted packages and plugins. Packages are loaded into your project with SystemJS (a polyfill for the ES6 module loader – coming soon). It also handles bundling for extra optimisation.

JSPM simplifies your JavaScript workflow, helping developers to write better code by following modern best practices. Thanks to it’s flexibility, it can be introduced into a project at any point in it’s life-cycle.

Let’s have a quick look at how it works:

1. Install jspm

# Install the CLI
$ npm install jspm -g

# Navigate to your app
$ cd ~/path/to/app

# Install jspm in your app directory
$ npm install jspm --save-dev

# Initialize jspm (hint: If running locally, set baseURL to "./")
$ jspm init

2. Add Some Code

For this example, I’ve created the following files:

index.html
assets/css/main.css
lib/main.js
lib/charts.js
data/dummydata.json

In main.js:

import {charts} from './charts';

charts();

We need to write a charting library… Or maybe we should use an existing one. Let’s use C3.

$ jspm install c3

Note: I’ve loaded in the C3 stylesheet from a CDN

Now we can wire up our chart in charts.js:

import c3 from 'c3';

export function charts() {

 const errorChart = c3.generate({
  bindto: '.js-chart',
  data: {
   x: 'date',
   y: 'errors',
   url: './data/dummydata.json',
   mimeType: 'json'
  },
  zoom: {
   enabled: true
  },
  axis: {
   x: {
    label: {
     text: 'Date'
    },
    type: 'timeseries',
    tick: {
     format: '%d-%m-%y',
     fit: true
    }
   }
  }
 });
}

Note: As this is just a demo, you’ll see I’ve chucked a bit of dummy data into a local JSON file for simplicity’s sake.

In the element of my index.html file:

<script src="./jspm_packages/system.js"></script>
<script src="./config.js"></script>
<script>
    System.import('./lib/main.js');
</script>

If you want to take a look at this example in greater detail, check out this Gist for the BEM and jspm example.

3. Reap the benefits

Notice how everything just works? That’s all thanks to SystemJS.

So that is a very simple example, and I wouldn’t say it really showcases the exciting new language features of ES6 very well. To fully understand and appreciate what we’ve accomplished here, we’ll need to look at the Chrome dev tools’ Network tab:

SystemJS has done a fair bit of heavy-lifting here.

  1. It’s worked out that we want to write some fancy ES6 flavoured JavaScript and loaded in Babel to transpile it for older browsers
  2. It’s seen that we’re importing in the C3 library, and loaded that in too plus it’s dependency – D3.js
  3. It’s doing it all asynchronously, which will cut down on page load time!

I’ve barely scratched the surface on what jspm can do for your workflow, try it out for yourself.

4. Post-deployment Maintenance

So you’ve got your designers whipping up mocks in Sketch and sharing them with Zeplin, the whole engineering team are following the BEM methodology and you’ve brought your JavaScript code-base into the 21st Century with jspm? All these workflow improvements will help your team to produce higher quality code faster.

But what about after deployment? How does any given user experience your application? How do you measure client-side performance across all pages and assets?

Don’t worry, we have an answer to all these questions! Raygun Real User Monitoring is a real-time user monitoring solution to track, measure and drill down into your application’s performance. It also gives you insights into how your users are accessing your app with browser, device and location metrics to help developers ensure all users are getting a great experience. You’ll make your front-end development process a breeze!

Sign up for a free 14 day trial of Raygun here. 

Resources: