Future-Proof Your UI: Building With Web Components

Rate this content
Bookmark

Do you love standards but hatehatehate the DX of web components? Me too.

As a reformed skeptic of Web Components due to my DX concerns, I encountered an interesting challenge at SuperTokens: creating a UI library that supports all the frameworks and remains future-proof. After some research, I discovered that SolidJS compiles to Web Components, offering a familiar, React-like developer experience - exactly what was needed to convert me into a believer. After a couple of rounds of experimentation, I fell in love with web components.

This talk will share insights from our journey towards adopting Web Components for our next-gen authentication UI library at SuperTokens and why web components are a great idea that's here to stay.

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

FAQ

Darko is a Linux enthusiast and works for SuperTokens, an open-source authentication company. He is also a writer at Darko.io and is active on social media including BlueSky.

Web Components can be considered DIY custom tags that work across various UI frameworks. They are composed of the custom elements API, the shadow DOM API, and the HTML, Slot, and Templates elements.

Web Components are great for creating reusable UI components that work across different frameworks. They are especially useful for design systems, projects needing wide framework support, widgets, embeddables, and leaf components.

The main challenges include complex APIs and a less favorable developer experience compared to frameworks like React and SolidJS. They also don't always translate well from framework components.

Darko suggests using modern tooling that allows writing components in frameworks like SolidJS and compiling them down to Web Components for better developer experience.

The controversy involves differing opinions on Web Components, with some developers thinking they are not the future while others see them as essential due to standardization and compatibility across frameworks.

Web Components can be used in React projects by building them into JavaScript files that can be embedded into React projects, allowing interoperability between the two.

Examples include design systems like Shoelace, projects like SuperTokens that require wide audience support, widgets, embeddables, and leaf components with specific functionalities.

The main topic of Darko's talk is futureproofing your UI using web components.

Darko Bozhinovski
Darko Bozhinovski
27 min
16 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Today, Darko discusses the use of web components to futureproof UIs and their compatibility with multiple frameworks. He addresses the challenges of web components and introduces the Solid Element tool for better developer experience. The demo showcases the usage of props and slots in web components and explores event handling. Darko also demonstrates how to integrate web components with React. He emphasizes that web components are not a silver bullet but are valuable for specific use cases and can be replaced with frameworks. He highlights the usefulness of web components for design systems and projects like SuperTokens. Web components are also suitable for widgets and leaf components.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

The Good, The Bad, and The Web Components
JSNation 2023JSNation 2023
29 min
The Good, The Bad, and The Web Components
Top Content
Web Components are a piece of reusable UI enabled by web standards and built into the web platform. They offer the potential for faster component initialization and less library overhead. Web Components can be created from scratch and utilized with existing component libraries. Shadow DOM and Declarative Shadow DOM provide benefits such as scoped CSS and server-rendered components. The tradeoff between not repeating oneself and achieving full server-side rendering support is discussed. User experience is deemed more important than developer experience.
It's Time to De-Fragment the Web
React Day Berlin 2022React Day Berlin 2022
34 min
It's Time to De-Fragment the Web
Top Content
Today's Talk introduces Mitosis, an open source project that solves the problem of building framework agnostic components. It supports JSX and Svelte syntax and outputs human-readable code for various web frameworks. Mitosis is already being used by enterprise customers and can be easily integrated with React, Svelte, and other frameworks. It saves time, allows for easy handling of framework version migrations, and enables efficient unit and integration testing.
Authoring HTML in a JavaScript World
React Summit US 2023React Summit US 2023
21 min
Authoring HTML in a JavaScript World
Watch video: Authoring HTML in a JavaScript World
This Talk by Tony Alicia focuses on authoring HTML in a JavaScript world. The speaker challenges developers to change their approach to building React components by starting with HTML first. By authoring HTML in a semantic way, readability and maintainability can be improved. Well-authored HTML provides better understanding of content and improves accessibility. It also has performance benefits by reducing DOM size. Investing time in HTML can save time and make applications more future-proof.
Web Components, Lit and Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Web Components, Lit and Santa 🎅
Web Components and the Lit library are introduced, highlighting their ability to create custom elements and replicate built-in components with different functionality. The use of semantic HTML and the benefits of web components in development are emphasized. The features of Lit, such as data binding and rendering, are discussed. The Santa Tracker is showcased as an example of web components being used in educational games. The compatibility of web components with other frameworks and their versatility in creating small widgets or large applications are highlighted.
Immutable Web Apps
JSNation 2022JSNation 2022
20 min
Immutable Web Apps
Today's Talk discusses immutable web apps and their benefits, such as faster loading times and easy version tracking. The use of Universal Module Definition (UMD) style bundling allows for flexible dependency management and gradual upgrades. Tools like Webpack and Rollup provide ways to reference UMDs in bundles and automate dependency configuration. Arborist and YAML files help resolve dependency trees and handle conflicts, while the Orchard CLI tool automates dependency ordering. Internal and external dependencies can be initialized and managed effectively for optimal performance.
Web Components are awesome!
JSNation 2022JSNation 2022
10 min
Web Components are awesome!
Web components allow you to create your own HTML elements that can do anything you want, and they are supported by all modern browsers. Many companies, including YouTube and GitHub, use web components to enhance their websites. There are extensive tooling and libraries available for web component development. The Model Viewer Web Component enables the display of 3D models in Virtual and Augmented Reality without needing to know underlying technologies. Web components can be used with various frameworks and libraries, and there are resources available to help with compatibility.

Workshops on related topic

Web Components in Action
JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
Joren Broekema
Alex Korzhikov
2 authors
The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc.