Single Design System for React, Vue, and Angular in 2020
Do you need a truly reusable design system in different UI frameworks?
You are in the right place!
What is the problem?
When we talk about design systems we think about reusable components that can be useful across the company and across the teams.
And the problems appear when:
- your team starts work in a different Javascript framework
- your company buys a product which coded in a different framework
- your team starts developing a cross-platform desktop web application (Electron)
- your team decides to build a simple Progressive Web Application
- your team builds React Native/Ionic mobile app
If you have already met one of the problems or you see it in the future then Web Components are a great solution for you!
What are Web Components?
Here is a short definition from MDN.
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Simply it’s a browser API that allows you to create new custom encapsulated HTML tags that contain their specific logic and styles which work in all modern browsers and can be used in all Javascript frameworks and libraries.
Let’s say everywhere, where HTML works!
And the next question:
What is this? 🤓
Well. Web Components come with four main specifications:
Custom Elements
You can define custom elements with their specific logic that can be used everywhere in the applications.
(e.g. <error-message></error-message>).
Shadow DOM
It allows you to create an encapsulated custom style and markup inside your custom elements. Imagine shadow DOM of your <error-message> custom element contains h3 and p HTML tags and it has its own style. As style is added in Shadow DOM it will never override whole DOM elements styles:
ES Modules
The ES Modules specification defines the inclusion and reuse of JS documents in a standards-based, modular, performant way. You can define ES6 class for your error-message custom element and enjoy its features:
HTML Template
New <template> and <slot> tags.
When you have to reuse the same markup structures repeatedly on a web page, it makes sense to use some kind of a template rather than repeating the same structure over and over again.
Which browsers support Web components?
All modern browsers support Web Components, and you can still use it in IE by loading its polyfill.
How to build a design system using Web Components?
You can develop your company-specific tool or just write your reusable components by using simple vanilla js, and it’s should be a good decision.
But besides it, there is a great CLI tool called Stencil which makes it even easier to build and distribute Design Systems with Web Components.
Stencil does not only make it easy to build Web Components but it also automatically manages polyfills for browsers that need them.
It also produces components that are very small in terms of file size and exceed performance standards for the modern Progressive Web App era.
BTW. There is also Vue’s Web Component and Angular Elements which are also good options to build a Web Components based design system. But keep in mind that both require their own framework bundle to be linked in the applaction.
How does Stencil work?
Here is a basic sample of the Stencil component. It’s very like an angular component and has similar functionality.
Stencil allows you to only include the bundle of your component and use it everywhere where javascript and HTML work without caring about polyfills.
It also supports lifecycle methods, props, state, and the components are rendered using JSX. Which you should be familiar with if you ever used React.js.
If you are interested in a more detailed Stencil introduction I would recommend you to read this article:
Simply you can use your Stencil components in your React.js, Vue and angular app. Check Stencil’s framework integration tutorial.
Conclusion
Web Components perfectly solve challenges that we already discussed above, but before start making a design system out of them, first, consider whether it is the best option for you at this time. Maybe a well structured React/Vue/angular shared folder is enough for your project.
Thank you for reading. I would love to hear your thoughts on this.
Happy coding!
