Future-Proof Your UI: Building With Web Components

This talk is confirmed. The time of the talk will be announced soon.

The recording will be published after editing. Multipass and Full ticket holders have early access.

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.

web components

Darko Bozhinovski

Video transcription, chapters and summary will be available later.

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 2023

29 min

The Good, The Bad, and The Web Components

Top Content

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

Web Components, Lit and Santa 🎅

JSNation Live 2021

28 min

Web Components, Lit and Santa 🎅

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

Authoring HTML in a JavaScript World

React Summit US 2023

21 min

Authoring HTML in a JavaScript World

Watch video: Authoring HTML in a JavaScript World

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

Immutable Web Apps

JSNation 2022

20 min

Immutable Web Apps

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 components packaging

Web Components are awesome!

JSNation 2022

10 min

Web Components are awesome!

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

Deploy a Web Component App and Set Up a Continuous Integration Workflow

DevOps.js Conf 2022

111 min

Deploy a Web Component App and Set Up a Continuous Integration Workflow

Workshop

Philippe Ozil

Join us for a workshop in which you’ll deploy a simple Node.js app built with Web Components and set up a Continuous Integration (CI) workflow. You’ll learn about the power of the Lightning Web Runtime (LWR) and GitHub Actions.

web components devops ci cd

Web Components in Action

JSNation Live 2021

184 min

Web Components in Action

Workshop

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.

javascript web components