Welcome back! In my previous article Choosing the Best Framework for Your Design System, we explored the benefits of web components for design systems, particularly their framework-agnostic nature. This allows a single library to power projects built with various frameworks (or no framework at all!).
Today, let’s dive deeper and understand the technical aspects of working with web components. We’ll explore how they’re built and the tools that can streamline the process.
The Building Blocks of Web Components
Web components are a potent combination of browser capabilities that empower you to build reusable UI elements. Here’s the breakdown:
- Custom HTML Tags: Imagine crafting your own HTML elements! With web components, you define custom tags that function just like native HTML tags that can be used in projects with any tech stack.
- Component Behavior: Breathe life into your components! You can define how they react to user interactions (clicks, keypresses, etc.). This allows for dynamic and engaging UI elements.
- Component Template and Style: Define how your component appears visually and how it displays child elements and properties. This ensures consistent rendering and styling across your project.
These building blocks are part of the official HTML specifications, making them future-proof. Modern browsers offer excellent support, and this trend is expected to continue. Additionally, web components’ framework-agnostic nature shines here. When used with another framework like Angular, your custom components seamlessly integrate as regular HTML elements.
Tooling for a Smoother Workflow
While you can build web components from scratch, most developers leverage libraries to enhance their experience:
- Reduced Boilerplate: Creating web components involves repetitive code, especially for advanced features. Libraries abstract this complexity, allowing you to focus on your component’s unique functionality.
- Enforced Structure: Vanilla JavaScript sometimes offers multiple ways to achieve a task, potentially leading to inconsistent and challenging-to-maintain codebases especially as you make use of more advanced features. Web component libraries encourage a well-structured approach, promoting a clean and maintainable library.
Exploring Popular Libraries:
Let’s take a peek at two popular choices:
- Lit: The go-to library, Lit provides helpful defaults and simplifies complexity. It retains a minimalistic approach, similar to vanilla JS development, but streamlines the process and provides access to advanced functionalities. Many design systems utilize Lit, and it boasts the biggest online community and tooling ecosystem in the Web Components space.
- Stencil: Offering an alternative for those seeking more structure, Stencil enforces a stricter approach and offers a superior developer experience. This can be beneficial for teams new to web components and it uses JSX for templates, familiar to React developers.
Web Components with JS Frameworks
Here’s the magic: you can write components using your preferred framework (React, Angular, or Vue) and then export them as web components utilizing libraries like react-to-webcomponent or framework-specific features in Vue 3 and Angular. This empowers you to leverage existing team expertise while achieving framework-agnostic reusability.
However, this approach comes with a trade-off: increased bundle size. Your component will carry the framework it was built with, potentially leading to a larger footprint. While faster connections and loading techniques mitigate this concern in many cases, performance-critical projects might find this a deal-breaker.
In essence, this solution offers a double-edged sword:
- Advantage: Reuse components across projects regardless of the underlying framework, promoting efficient code utilization.
- Disadvantage: Potentially larger bundle size due to the embedded framework code, which could impact performance on slower connections.
My exploration of web component creation techniques led me to a fantastic resource: “All the Ways to Make a Web Component” by Div Riots. This impressive resource offers a side-by-side comparison of bundle sizes for a whopping 61 different web component creation methods! Additionally, it provides readily available code samples, allowing you to quickly build a basic component and experiment with various approaches.
Open Web Components: A Valuable Resource Hub
This isn’t a library, but an incredible resource nonetheless! The Open Web Components project offers:
- Boilerplate generators to kickstart your component-building journey with linting, tests and StoryBook.
- Comprehensive learning materials.
- A captivating collection of component libraries and design system examples all built with Web Components.
A Surprisingly Low Adoption
Despite these resources, web components’ developer experience often falls short of major JavaScript frameworks. They have a smaller community and remain a niche choice in web development. This has undoubtedly impacted their adoption rate. In our next article, we’ll delve deeper into the reasons why web components, although promising on paper, haven’t become the dominant force in the design system landscape.
2 thoughts on “Exploring Web Components for Design Systems”