Frontend Architecture for Design Systems

Chapter 7. Red Hat Code

The fall of 2014 saw the launch of the Redhat.com website. I’d only been on this multiyear project since the spring prior, so while I was pretty familiar with the code architecture at launch, I’d had little opportunity to shape it. The scope of the project and our looming deadline meant I spent most of my time getting the work done, and little time wondering if that work I was doing truly met the needs of the organization.

In the end, the site launched, and by all measures it was a success. The UI was efficient, the site loaded quickly, and few argued that the site wasn’t attractive. But I can still recall that fateful afternoon when I was asked a very simple question: “How modular is our design? We’d like to be able to share small parts of our theme with other company websites.”

It took me a little while to recover from the chuckle that welled up inside of me. You see, being intimately familiar with the markup, JavaScript, and CSS written for this project, I knew that this design was the antithesis of modular! We did a lot of great work on this theme, but creating a modular design was never even a consideration.

Dependency Bloat

If someone were looking to render a single band of content with our styles, they would first need to load the following:

Bootstrap CSS: 114 KB (uncompressed)

This site didn’t leverage too much of the Bootstrap library, but all of the CSS was written with the assumption that Bootstrap had already washed all over it. Pull those ...