Log in
React Conferences
React Day Berlin 2024React Day Berlin 2024
EN

Future-Proof Your UI: Building With Web Components

Darko Bozhinovski
Darko Bozhinovski
SuperTokens
Video thumbnail
This video will go public in 2 days
Multipass and Full ticket holders have instant access to event recordings.
Please login if you have one.
Get Multipass

Register a free account to unlock access to this video today.

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.

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.
Available in Español: A Prueba de Futuro Tu UI: Construyendo Con Web Components
Video transcription and chapters available for users with access.
Available in other languages:

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
Zach Leatherman
Zach Leatherman
Eleventy (11ty) Creator
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.
web componentsreact web components
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
Sami Jaber
Sami Jaber
Builder.io
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.
web components
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
Tony Alicea
Tony Alicea
Tony is a bestselling Udemy and Pluralsight author, known for his online courses such as "JavaScript: Understanding the Weird Parts"
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
Web Components, Lit and Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Web Components, Lit and Santa 🎅
Sam Thorogood
Sam Thorogood
Gridcog, Australia
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.
web components
Immutable Web Apps
JSNation 2022JSNation 2022
20 min
Immutable Web Apps
Andy Desmarais
Andy Desmarais
Meltwater
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 componentspackaging
Web Components are awesome!
JSNation 2022JSNation 2022
10 min
Web Components are awesome!
Dwane Hemmings
Dwane Hemmings
Vonage
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.
web components

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.
web componentsjavascript