February 18, 2019
  • Perspectives
  • Stencil
  • Design Systems
  • stencil
  • web components

5 Reasons Web Components Are Perfect for Design Systems

Kevin Ports

This post is contributed by Kevin Ports, designer and front-end developer at Ionic. He’s passionate about pixels, code, and the space in between.

If you’re building a handful of apps in a startup or small business, delivering a consistent user experience across teams and projects is relatively easy. But if you represent a global corporation with hundreds of developers and designers distributed throughout the world, enforcing a set of design standards can get messy. Having a Design System can help.

A Design System is a centralized library of components that can be shared across teams and projects to simplify design and development while ensuring consistent brand experiences, at scale. In some cases, a Design System is nothing more than a collection of visual design specs. But for the purposes of this post, we’re going to talk about Design Systems as a collection of real-code components that front-end developers drop in their projects like Lego blocks, to quickly build new user experiences without having to worry about the core design of each component.

The HubSpot team, a pioneer in Design Systems, explains why this is valuable:

“That’s the beauty of building a design system. By deciding on a detail once, you free up your entire product development team to focus on solving actual customer problems.”

Of course, for HubSpot, it took 34+ designers and over two years of work to perfect their Design System. For most businesses, that kind of commitment just isn’t feasible.

Enter: Web Components. In this post, I’ll explain the five reasons why Web Components are the perfect way to quickly bootstrap a new Design System, with a future-proof design that will benefit you for years to come.

1. They work everywhere

Web Components use a set of standardized APIs that are natively supported in all modern browsers. These UI components run on nearly all mobile devices and desktop browsers today.

Through the use of a hybrid mobile framework like Ionic, you can deploy Web Components across just about any platform or device, from native iOS and Android apps, to Electron and desktop web apps, or even Progressive Web Apps.

For anyone building a Design System, the big benefit of this is that it finally addresses the need for a single source of truth—one standardized library that works everywhere.

2. They’re easy to customize

By definition, a Design System implies a customized collection of UI components that match your specific brand standards and style guidelines. While there are no limits to what your designers can conceptualize, implementing those customizations in some development environments and frameworks can be tricky.

For example, let’s say you’re using React Native to build a mobile application and you want to change the border around a button. If React Native doesn’t open up customization for that border, you’d be unable to modify it without going directly into the native implementation to manually program it. That doesn’t mean you can’t change the border, it just means it will be harder to do so in some situations. Check out our guide comparing Ionic and React Native for more on this topic.

In contrast, Web Components can be styled and customized to match any design pattern you want to achieve. With the simple use of HTML, JavaScript, CSS, you can build a library of UI components that match whatever your designers dream up. You can start with a ready-made Web Component library like Ionic and then customize from there, or use a tool like Stencil to build your own Web Components from scratch.

3. They help drive adoption

A Design System is only valuable to the extent that it’s actually adopted by your team. Having a brilliant style guide that is widely praised but always ignored is of no value. Web Components can help to address this challenge in a few key ways.

First, the simplicity of Web Components (just a few lines of HTML) makes development faster and easier. And, because they run on any platform or device, a single library will serve any development project. All of that adds up to a great developer experience. And happy developers are more likely to adopt your Design System.

Second, if you’re using Ionic’s library of components, we offer solutions to help drive adoption, like building your own collection of robust developer docs (modeled after our own world-class Docs) and tools like Studio, which offers a customizable library of components that developers can drop right into their development project.

4. They’re future-proof

Perhaps the most appealing benefit of Web Components is that they liberate us from the highly volatile landscape of front-end frameworks and tooling. By using a consistent set of web standards, Web Components are not dependent on a specific front-end framework like Angular, React, or Vue. Sure, you can use Web Components with any of these frameworks, and we encourage you to do so in order to take advantage of the many benefits they provide. But, the great thing is that you won’t be dependent on that framework for your components to work.

This is awesome news for development teams. First, as much as we love the hot frameworks of today, who knows what tomorrow will bring? By choosing Web Components, you insulate yourself from the threat of tech churn and no longer have to worry about picking the right horse.

Second, you will give your development teams the flexibility to choose the underlying frameworks and tools that they prefer. One of the great challenges of implementing a universal Design System is getting all of your development teams to standardize on just one set of technologies. Given the varied interests of most developers, that pretty much guarantees that someone will be unhappy because their tool of choice wasn’t selected. With Web Components, each team can use what works best for them, giving them complete freedom to use the tools they love—today and tomorrow.

5. There are plenty of WC libraries to leverage

Building a Design System from scratch is no easy task. I already mentioned that it took the HubSpot team two years and over 34 designers to build their Design System.

The great news is that there are already a number of Web Component-based UI libraries out there for you to start with: Ionic being one of the biggest and most well known. In fact, as our CEO, Max, argued in his post from a few weeks ago, Ionic is a Design System. You can start with our library of components and easily customize them to suit your needs.

How to get started

If you’re ready to start building a Design System with Web Components, start by checking out our library of totally free, open source UI components. Or schedule a Strategy Session with one of our team members to see how Ionic can help you build a customized Design System that your developers will love.

Kevin Ports