Log in
React Conferences
React Day Berlin 2024React Day Berlin 2024
ES

A Prueba de Futuro Tu UI: Construyendo Con Web Components

Darko Bozhinovski
Darko Bozhinovski
SuperTokens
Video thumbnail
This video will go public in few 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

¿Te encantan los estándares pero odias el DX de los web components? Yo también.

Como un escéptico reformado de los Web Components debido a mis preocupaciones de DX, me encontré con un desafío interesante en SuperTokens: crear una biblioteca de UI que soporte todos los frameworks y siga siendo a prueba de futuro. Después de investigar un poco, descubrí que SolidJS compila a Web Components, ofreciendo una experiencia de desarrollador familiar, similar a React, exactamente lo que necesitaba para convertirme en un creyente. Después de un par de rondas de experimentación, me enamoré de los web components.

Esta charla compartirá ideas de nuestro viaje hacia la adopción de Web Components para nuestra biblioteca de UI de autenticación de próxima generación en SuperTokens y por qué los web components son una gran idea que llegó para quedarse.

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

web components
Darko Bozhinovski
Darko Bozhinovski
27 min
16 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hoy, Darko discute el uso de web components para hacer que las UIs sean a prueba de futuro y su compatibilidad con múltiples frameworks. Aborda los desafíos de los web components e introduce la herramienta Solid Element para una mejor experiencia de desarrollador. La demostración muestra el uso de props y slots en web components y explora el manejo de eventos. Darko también demuestra cómo integrar web components con React. Enfatiza que los web components no son una solución mágica, pero son valiosos para casos de uso específicos y pueden ser reemplazados con frameworks. Destaca la utilidad de los web components para sistemas de diseño y proyectos como SuperTokens. Los web components también son adecuados para widgets y componentes hoja.
Available in English: Future-Proof Your UI: Building With 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

Lo Bueno, Lo Malo, y Los Componentes Web
JSNation 2023JSNation 2023
29 min
Lo Bueno, Lo Malo, y Los Componentes Web
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
Es hora de desfragmentar la web
React Day Berlin 2022React Day Berlin 2022
34 min
Es hora de desfragmentar la 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
Autoría de HTML en un Mundo JavaScript
React Summit US 2023React Summit US 2023
21 min
Autoría de HTML en un Mundo JavaScript
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
Componentes Web, Lit y Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Componentes Web, Lit y 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
Aplicaciones Web Inmutables
JSNation 2022JSNation 2022
20 min
Aplicaciones Web Inmutables
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
¡Los componentes web son increíbles!
JSNation 2022JSNation 2022
10 min
¡Los componentes web son increíbles!
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

Despliega una aplicación de componentes web y configura un flujo de integración continua
DevOps.js Conf 2022DevOps.js Conf 2022
111 min
Despliega una aplicación de componentes web y configura un flujo de integración continua
Workshop
Philippe Ozil
Philippe Ozil
Únete a nosotros en un masterclass en el que desplegarás una aplicación Node.js simple construida con componentes web y configurarás un flujo de integración continua (CI). Aprenderás sobre el poder del Lightning Web Runtime (LWR) y las GitHub Actions.
web componentsci cddevops
Componentes Web en Acción
JSNation Live 2021JSNation Live 2021
184 min
Componentes Web en Acción
Workshop
Joren Broekema
Alex Korzhikov
2 authors
El masterclass amplía el conocimiento del lenguaje de programación JavaScript, revisa los patrones generales de diseño de software. Se centra en los estándares y tecnologías de los Componentes Web, como Lit-HTML y Lit-Element. También practicamos la escritura de Componentes Web tanto con JavaScript nativo como con Lit-Element. Al final, revisamos las herramientas clave para desarrollar una aplicación: open-wc.
web componentsjavascript