It’s an exciting time to be a front-end web developer, but to be candid, it’s also one of the most challenging. Less than five years ago, calling yourself a “front-end dev” meant you knew how to write HTML, CSS, and maybe a little bit of JavaScript (or for many, a lot of jQuery). Not anymore.


The proliferation of mobile devices has opened the floodgates for responsive web design, which has kept front-end coders constantly inventing new ways to make their sites faster and more full-featured, regardless of screen size or connection speed. That means production-level CSS needs to be minified, JavaScript needs to be concatenated and uglified, and images need to be optimized, to name just a few best practices. Performance and optimization are no longer the often-forgotten tasks you maybe do at the end of the project; now, they’re two of the most important things you consider before writing a line of code.

Managing all of these build processes manually would be tedious, but luckily, a number of tools and libraries have sprung up to help with site scaffolding (Yeoman), task automation (Grunt/Gulp) and package management (Bower). There are literally thousands more on GitHub (so many, in fact, that they’ve spawned their own fake drinking game).

Just as build processes have improved, so have our prototyping and development tools. Some of the brightest minds in our field are trying to figure out how tried-and-true development processes can be adapted – or in some cases, reinvented – to support this paradigm shift toward responsive design. At DEG, we’ve taken particular interest in Brad Frost’s Atomic Design methodologies (and his excellent, companion Pattern Lab static site builder), which treat websites not as a whole, but as a series of small, interlocking elements that can be connected to create larger, more complex systems.

But we noticed something was missing. It’s great that we have all of these amazing tools at our disposal, but none of them are really built to play nice with each other out of the box. At the start of a project, we were still spending several hours downloading packages, configuring Grunt tasks and setting up Pattern Lab patterns that were more in line with our team’s processes. There needed to be a better way to expedite this process across projects, and for every member of our team.


Introducing Yeo+Lab

That’s why we built Yeo+Lab. At its core, Yeo+Lab is a site-scaffolding tool that brings Yeoman and Pattern Lab together (thus the name), and takes the time, effort and headaches out of setting up a new website that has all of necessary workflow tools and processes you need.

After you’ve installed Yeo+Lab, just type “yo patternlab” into a terminal window, answer a few questions about how you want your site to be configured, and sit back and wait. When Yeo+Lab is finished, you’ll have a fully scaffolded-out new Pattern Lab site that’s preconfigured to work with Grunt, Bower and a number of other front-end development bells and whistles.

Yeo+Lab is designed to speed up the start of your development process, without getting in the way. The questions you answer before Yeo+Lab runs will build out the tools you want to use, but it’s flexible and won’t force you to install anything that doesn’t fit your process.

This isn’t just about improving efficiency, although that’s definitely important. As a team, we’re convinced that working from a common codebase allows us to build on best practices and adds consistency to our development process across DEG projects, which means we can deliver a higher-quality final product to our clients. And since it’s open-source, if we can help other developers improve their process along the way, that’s just icing on the cake.

We want your feedback

This project is already a fairly robust scaffolding tool that solves a lot of problems, but it’s also a work in progress that we will continue to improve upon. I invite you to download it and try it for yourself, and if you find it useful, please let us know — or better yet, fork the project on GitHub and help us make it even better. We’ll be writing some follow-up blog posts soon to explain more of Yeo+Lab’s features, as well as real-world case studies of how it’s improved our process and code quality.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>