Design systems become more important as applications grow in complexity and in number. Scalable, reusable and modular code, along with compatible visual assets, are key when organizations build multiple apps for different purposes, but still wish to maintain a level of consistency throughout their UIs.
Implementing a company-wide design system helps to ensure the efficiency and consistency required for smooth web app development.
However, building and adopting a design system can be a challenge.
This article explains why standards-based Web Components are the perfect building blocks for a stable design system that emphasizes productivity, and how Vaadin uses Web Components to build functionality.
Please refer to the previous post of our design systems blog series for a comprehensive introduction to design systems and the thinking behind them.
What are Web Components?
Web Components are a standards-based technology for implementing reusable UI building blocks to share functionality across development projects. They are framework-agnostic, and can be used with virtually any web framework or without any framework at all.
The Web Components standard is based on three technologies:
- Custom elements: A set of JavaScript APIs for defining custom elements and their behaviour.
- Shadow Dom: A browser feature that encapsulates the HTML, JavaScript and CSS of custom elements, so as to avoid conflicts between them and the underlying web page.
- HTML templates: <template> and <slot> elements for writing markup templates to structure a custom element.
This standard is universally accepted and supported by modern web browsers. It’s wide adoption and support make it the most future-proof way of adding functionality to your web app. In addition, the encapsulated functionality allows developers to reuse code, without the fear of conflicts.
You can find further details about the technologies and the standard on the Web Component Wiki page.
How Vaadin uses Web Components
Vaadin components are built on the Web Components standard and run natively in the browser. Vaadin Flow and Vaadin Fusion frameworks use the same components.
- Vaadin Flow is a framework for building web apps 100% in Java. You write the full application logic, including the UI logic in server-side Java.
- Vaadin Fusion is a framework for building web apps in TypeScript and Java. You write the front end with reactive templates and TypeScript and expose the data endpoints with server-side Java.
Both frameworks are interoperable and you can read more about them here.
Vaadin components can also be used independently of Vaadin, together with another framework or completely stand-alone.
Compared to other available Web Components, Vaadin components are easy to style, thanks to CSS custom properties and style modules. This allows them to be modified to fit the look and feel of your applications, and makes them ideal for use in design systems. We are currently working on adding a feature to allow packaging styles into a reusable custom theme.
Vaadin Directory is filled with free, commercial and community-made components. We also offer custom components by commission and instructions in our documentation on how to build them on your own. You can find a full presentation of the different component categories and their features in the Vaadin Components PDF fact sheet.
Why build a design system using Web Components?
Web Components are the ideal choice for a design system, because organizations often choose to use different frameworks for different types of apps, for example mobile apps and web apps. By using Web Components, the same design system can be used for multiple frameworks. Even if an organization currently uses only one framework, they might decide to add another or migrate at some point in the future..
Building the design system on Web Components, that run on every platform and with any framework, means the design system only has to be implemented once. Because the Web Components standard has been widely adopted, thoroughly tested and is rigorously maintained and supported by all modern browsers, it is the best option for a future-proof foundation on which to build a design system.
Design systems and Vaadin
Creating and implementing a design system, even when using standardized web components, requires substantial resources and development effort. The upcoming Vaadin Design System aims to offer the full benefits of a web component-based design system at only a fraction of the cost.
Vaadin Design System will consist of:
- A generic “baseline” design system that is a free feature in our open-source platform.
- Custom design system features, including a documentation tool, that is available as part of the Prime subscription tier.
Instructions on how to maintain and how to use the components, along with powerful theming capabilities (when used with the Vaadin platform), will make the Vaadin Design System easy to adopt out of the box. The ability to customize and style your components, without the need to completely rebuild them, will save a lot of time and effort.
Furthermore, the system will make it easy for designers to implement their vision, without expert skills in programming. And vice versa: programmers will have far less work to do when implementing the design of a component.
The Vaadin Design System will also come with a Figma design kit for visual assets that correspond 1:1 with the components, further reducing the hassle for both designers and programmers when adopting and using the system.
Read the introductory post of our design systems blog series for a full list of upcoming features and stay tuned for updates!
Meanwhile, you can browse the Vaadin components for web components that you can already use to build your web app today. The core set of components are free to use with open source code and you can try all the commercial components by activating a Vaadin pro trial.