A New Workflow For Front-End Development

Sam HoltGeneral, Tech Stuff, Web Development1 Comment

An image showing a full desk for front-end development

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.

The nature of front-end development

This simple Venn diagram pretty much sums up the situation…

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.

Zeplin at work: building the Raygun.com website - part of a front-end development process

Zeplin’s rulers make pixel-perfect design easy, which equates to happy designers and marketers!

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:

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

2. Add Some Code

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

In main.js:

Now we need to write a charting library… Or maybe we should just use an existing one. For this, let’s use C3.

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

Then let’s wire up our chart in charts.js:

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 <head> element of my index.html file:

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:

Asynchronous loading of assets by SystemJS for better front-end development

Check out that sweet asynchronous loading

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 Pulse 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. 

A quick look through Raygun Pulse for better web front-end development

Resources:

We would absolutely recommend Raygun to any business which relies on healthy software to serve there customers. Andrew Schofield, Chief technology officer at Timely. Take a free 14 day trial. Request a short demo of Raygun.

One Comment on “A New Workflow For Front-End Development”

  1. Pingback: Effective Workflow for Designers and Developers » CSS Author

Leave a Reply

Your email address will not be published. Required fields are marked *