Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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 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 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:

  • 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 -->


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

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:

In main.js:

import {charts} from './charts';

charts();


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

$ jspm install c3


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

Then let’s 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
    }
   }
  }
 });
}


In the <head> 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>


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 flavored 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 its 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 30 day trial of Pulse today!

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

Resources:

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
development ,process ,workflow ,tools ,web ,design ,front-end

Published at DZone with permission of Freyja Spaven, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}