Web Development

How we work: front-end development – the pattern library

Sam Bowler
Sam Bowler

Front-end development is one of the most dynamic and exciting disciplines to work in on the web.

The pace at which new techniques and tools are released can make staying on top of them a full-time job in itself, let alone making sound decisions about which should be used for each project we work on.

This has led us to adopt a relatively simple and “tech-agnostic” approach to our front-end development at Ridgeway. Although we have tried and trusted techniques that we know work well, we ensure that the approach we’re taking is always the right one for the job in hand rather than sticking with a solution which may have worked previously, but is possibly too bloated or simplistic for the problem at hand.

Our process

We do, however, have one tool that remains consistent across our larger CMS-based projects: the pattern library. In days gone past, the collaborative process between back-end and front-end developers could become fractious with each stepping on each other’s toes if even slightly mismanaged.

To address this, we designed our process to allow each discipline to focus on doing their best work (see Charlie’s tweet) before bringing it together to form the final solution.

This isn’t to say that the teams work in complete isolation. It’s integral to the process that up-front collaboration happens to bottom out the best solution to the problem at hand: is this API structured appropriately? How do we facilitate making this as easy as possible for the client to manage? How does the user interact with this component?

The pattern library

Our pattern library is based on the brilliant grunt-assemble which allows us to keep the mark-up for patterns completely separated from the extra functionality we’ve built on top to allow us to explore the library effectively. 

Pattern Library

Part of the pattern library for the recently launched Atkinsons Bullion project.

The pattern library index allows developers to see a full view of all patterns being worked on with a status next to each (the status is one of: not started, in progress, done) so that we can get a feel for progress at a quick glance.

Pattern Library

The detail view of the “category navigation” on Atkinsons Bullion.

Clicking through to a pattern allows developers to see it in action (and this is the view used for most of the pattern development itself) and also click in to preview the markup itself. Additional developer comments can also be added here for any “gotchas” that might be worth knowing when working with the pattern (not shown in screenshot). 

Pattern Library

Code view of the “category navigation” on Atkinsons Bullion.

Once the pattern has been developed in the pattern library, the front-end and back-end developers come together to discuss any nuance of the front-end implementation, leading to an iterative process where the pattern markup is integrated in to the CMS and combined with the other components to form the final site.

Of course, this process doesn’t work in all scenarios. JavaScript heavy projects such as the customer service tool that we’ve recently been working on with educational publisher, CGP Books, requires a different approach but we’ve found that for CMS-based sites, the pattern library allows each discipline to work to the best of their abilities whilst also facilitating the collaboration that we know is necessary to deliver a great end product.

Fancy working as a front-end developer at Ridgeway? We currently have some great opportunities to join our fun and friendly team. Check out our careers site.