A New Workflow for Front-End Development

DZone's Guide to

A New Workflow for Front-End Development

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. So, what's the alternative? Let's look into how Raygun handles their workflow.

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.

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 the 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 also 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 lets you measure and extract assets from an up-to-date mock-up.

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:

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 blocks can be rendered anywhere, 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 its flexibility, it can be introduced into a project at any point in its life-cycle.

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:

Check out that sweet asynchronous loading

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

It’s worked out that we want to write some fancy ES6 flavored JavaScript and loaded in Babel to transpile it for older browsers.

It’s seen that we’re importing in the C3 library and loaded that in too plus its dependency – D3.js.

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!