The Continued Rise of Web Components and Design Systems

The Continued Rise of Web Components and Design Systems

The start of new a year brings reflection and prediction. Looking back over the past few years, we’ve seen a shift in the way we approach designing and developing websites; we’re no longer designing collections of pages but systems of components. Looking forward, as more of the Web Components specification gets implemented by browser vendors, we expect 2018 to see the continued rise of design systems.

Thinking modular

The web is a constantly-evolving medium. As the scale and complexity of our digital products increases, so to does the need to change our approach towards designing and building them.

“Websites are systems rather than pages and as soon as we stop perceiving them as that, the better.”
– Anna Debenham, @anna_debenham

Design systems are not a brand new concept. The idea of breaking down a design into a collection of reusable components has steadily evolved over recent years. During this time several methodologies have been coined including Atomic Design and Style Guide Driven Development, and the output of this process has been given many names: Pattern Library, Style Guide and Design Language to name a few. These approaches and outcomes all have their variances, but they all share one key concept: modular design and development.

Benefits

Consistency

Thinking modular keeps design consistent. A component can appear anywhere across multiple pages of a website and even across multiple websites and other digital properties. Wherever it appears, its design and behaviour is the same.

Usability

Keeping things consistent increases familiarity; making the interface more predictable makes it easier to understand and quicker to use. All resulting in a better user experience.

Speed

As you build up your design system, ongoing development of new pages and user flows gets quicker and quicker.

Quality

Building with components means you can test them individually to ensure all your accessibility, usability and coding best practices are implemented at the component level.

Into the browser

We’ve discussed design systems and how they can improve our approach across the design and UX disciplines, but what about development? Implementing a component-based design system in the browser is not something that can be done natively; not just yet at least. The core technologies available to us (HTML, CSS and Javascript) are still mostly geared around the concept of the document; the single page.

Enter Web Components

Web Components is the collective term given to four new specifications to extend the web platform. Together, they will allow us to create new, reusable, encapsulated components to use on web pages and applications.

Here’s a brief overview of the four new specs:

  • Custom Elements

For those who are familiar with a bit of HTML, you’ll know some of the existing tags such as <p> for paragraph, <h1> for Heading 1 and <button> for… you get it. The Custom Elements specification defines a method to extend the language and create our own new tags.

  • Shadow DOM

The Shadow DOM provides a way to encapsulate styles and markup within a web component. This means we can hide away the implementation of our component in the knowledge that it will always display the way we intended, regardless of any other CSS, HTML or Javascript on the page.

This has been used by browser vendors for years. If you consider the <video> element, the code we write to display a video is fairly short and concise:

<video controls="controls" width="320" height="240">
  <source src="movie.mp4" type="video/mp4" />
</video>

What actually gets rendered on the page:

HTML Video

We see the video, but we also get a bunch of other elements like a play button and progress indicator.

Where do these elements live? Hidden away in the Shadow DOM.

  • HTML Templates

HTML Templates are like the blueprint for our components. They allow us to declare a fragment of reusable HTML that gets ignored by the browser until we clone it and ‘stamp’ it out on the page.

  • HTML Imports

HTML Imports allow us to import HTML files into other HTML files. This means we can bundle up our components into individual files and only import them as and when we need them.

Bringing it all together

These 4 new specifications are intended to be used in conjunction to give us a complete solution to developing our components. Declare a new Custom Element, define its markup and styles in a HTML Template, clone that template into the Shadow DOM when an instance of that element is created and bundle the whole lot up into a single file which can be included on the page with a HTML import.

A match made in heaven

As more of the Web Components specification gets implemented by browser vendors, we expect to see an increased shift towards modular design and development. 2018 could see the rise of design systems; many in-house and product teams are already discovering the benefits of this approach and we would welcome the introduction of this agency side.