What are Web Components? Web Components are a technology-agnostic way of creating frontends based on web standards, that are built into our browsers. Many companies already use them in their products at large scale. At Puzzle we also have more and more projects that prefer the simplicity of Web Components to the complexity of JavaScript frameworks like Angular or React. Time to start a Blog post series, to take a closer look at what Web Components are, how they work and what their benefits and pain points are.
What are Web Components
Web Components are a great way of creating reusable and customizable UI building blocks that you can use in your web applications. They are based on web standards and are part of the web platform. Hence they also integrate well with any technology that works with HTML, such as a JavaScript framework, a server-side web framework or a Static Site Generator. Developers use them to create standalone components, complete frontend applications or even large microfrontend architectures.
The concept of Web Components was introduced by Alex Russel in 2011. Since then, the standards and the ecosystem have evolved massively. As of January 2020, all mainstream browsers support Web Components.
Benefits of Web Components
- Available everywhere: Web Components are supported by all major web browsers. Basically they run anywhere you use HTML.
- Future-ready: Web Components are based on web standards, and are therefore backwards compatible and consistently evolving.
- No lock-in: There is no framework that might be dropped by a vendor (say hi, AngularJS). You can rely on Web Components for many years to come.
- Component-based architecture: Web Components promote a component-based architecture, which is a popular and effective way to build web applications.
- Isolation and encapsulation: Web Components provide encapsulation through the Shadow DOM API, which isolates styles and behaviors within a component. This prevents conflicts with global CSS and JavaScript logic, making it easier to manage and maintain large-scale web applications.
Web Components in the real world
It is no surprise that Web Components are being used in some of the most impressive projects by some of the most notable companies in the industry. Here are a few examples:
Youtube
Inspect the Youtube experience with your dev-tools, it is fully built with Web Components.
Adobe
Beside the web version of the famous Adobe Photoshop in Lit, Adobe is pushing hard to expand their Creative Cloud to the web.
Firefox
The Firefox UI has been completely rebuilt with Web Components to improve maintenance and reduce complexity.
SpaceX
SpaceX Dragon Crew touchscreen displays are running Chromium and using Web Components extensively. Full Reddit Discussion.
GitHub
For a better portability and encapsulation GitHub was an early adopter of Web Components. They even started the Catalyst library for their own use to improve the developer experience.
These are only a few examples, there is also Google, MSN, Salesforce, Reddit, GitLab and many more.
Where do we use them?
At Puzzle as well, we have a growing amount of projects using Web Components:
Moser-Baer AG – Webinterface
Moser-Baer AG develops systems for time synchronisation, NTP time servers and medical technology.
For the configuration of the existing time servers and individual clock components, Moser-Baer AG now uses a user interface based on Web Components with LIT.
In this way, we rely primarily on browser standards and guarantee a long-term solution. LIT allows for minimal bundling and thus corresponds to the specific runtime environment.
Puzzle Shell
The Puzzle Shell is a set of Web Components for building a consistent and responsive base layout and design of internal applications. Due to the technology-agnosic nature of Web Components and its light footprint, it can be easily integrated into various technology stacks (e.g. SPA in Angular or Elm, traditional Rails app or Hugo/Antora site).
Evento Portal
The Evento Portal is a platform of the Education and Culture Directorate of the Canton of Bern that integrates various micro frontend applications for secondary and vocational schools, that are written in different frontend frameworks.
Coming up
In the following parts of this series, we will dig deeper and get to the meat of some real Web Components. Stay tuned for the next post about Web Component Browser APIs.
All articles of the series:
- Web Components (Part 1): Future-ready building blocks for your web applications
- Web Components (Part 2): Browser APIs
- Web Components (Part 3): Web Components with Lit
- Web Components (Part 4): Lit for Angular Developers
- Web Components (Part 5): Puzzle Shell