Es hora de desfragmentar la web

Rate this content
Bookmark
Slides

A lo largo de los últimos años, el número de frameworks web disponibles para nosotros ha explotado. En cierto modo, la amplitud de elección es una clara victoria para nuestro ecosistema. Sin embargo, para muchos de nosotros, también viene con severas desventajas: - ¿Alguna vez has usado un componente de código abierto popular construido para el framework A, y deseaste que existiera en el framework B? ¿Qué tal una biblioteca de sistema de diseño? - ¿Tu empresa tiene frontends construidos en diferentes frameworks, y tus equipos web están frustrados por las horas perdidas necesarias para lograr un sistema de diseño consistente? - ¿Tu equipo construye SDKs para frameworks web, y debe reescribirlos manualmente para cada framework? La solución a estos 3 problemas existe hoy. Para entenderla completamente, primero debemos examinar los frameworks web de hoy, repensar cómo debería ser un componente, e introducir una nueva Representación Intermedia de nuestros componentes. Esto es lo que hemos hecho en Builder.io cuando creamos Mitosis, y estamos emocionados de compartirlo con todos.

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

FAQ

Mitosis es un proyecto de código abierto que permite escribir un componente de software una vez y ejecutarlo en diferentes frameworks web. Facilita la creación de UI components que pueden ser utilizados en numerosos frameworks sin necesidad de reescribir el código para cada uno.

Mitosis simplifica el proceso tedioso de reescribir los mismos componentes para diferentes frameworks al permitir que los desarrolladores escriban el componente una sola vez. Luego, Mitosis genera automáticamente el código necesario para que el componente funcione en una variedad de frameworks web.

Los Web Components son una suite de diferentes tecnologías que permiten crear componentes web reutilizables en diversos frameworks. Sin embargo, presentan limitaciones en la renderización en el servidor, ya que están construidos principalmente para operar en navegadores.

Un CMS visual headless es un sistema de gestión de contenido que permite a los usuarios construir páginas web a través de una interfaz de arrastrar y soltar, sin necesidad de escribir código. Está diseñado para facilitar a los no desarrolladores la creación de sitios web, manteniendo separadas las capas de gestión de contenido y presentación.

Mitosis ofrece la ventaja de reducir significativamente el tiempo y los recursos necesarios para desarrollar y mantener componentes en múltiples frameworks. Esto se traduce en una eficiencia mejorada, reducción de deuda técnica y facilita la actualización y optimización del código.

Sísifo enfrentó el reto de tener que reescribir manualmente los mismos componentes para diferentes frameworks, lo que era un proceso repetitivo y tedioso. Cada vez que surgía un nuevo framework o una actualización, tenía que modificar múltiples versiones del mismo SDK, incrementando la carga de trabajo y la posibilidad de errores.

Mitosis permite a las grandes empresas que utilizan diferentes frameworks web mantener un sistema de diseño consistente y actualizado fácilmente, ya que permite generar automáticamente los componentes necesarios para cada framework a partir de una única base de código.

Sami Jaber
Sami Jaber
34 min
02 Dec, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy presenta Mitosis, un proyecto de código abierto que resuelve el problema de construir componentes agnósticos de framework. Soporta la sintaxis JSX y Svelte y genera código legible por humanos para varios frameworks web. Mitosis ya está siendo utilizado por clientes empresariales y puede integrarse fácilmente con React, Svelte y otros frameworks. Ahorra tiempo, permite un fácil manejo de las migraciones de versiones de framework y permite pruebas unitarias e integración eficientes.
Available in English: It's Time to De-Fragment the Web

1. Introducción a los Componentes Agnósticos de Framework

Short description:

Hoy, discutiré la idea de los componentes agnósticos de framework. Construir estos componentes puede ser tedioso, y las soluciones actuales como escribirlos a mano o usar componentes web tienen compensaciones. Es por eso que hemos desarrollado Mitosis, un proyecto de código abierto que resuelve este problema. Te mostraré por qué construir estos componentes es tedioso, por qué Mitosis es una buena solución y cómo funciona mejor de lo esperado.

Bueno, ustedes tienen mucha energía para un día completo de charlas. Gracias por quedarse para la mía. Gracias a los organizadores del Día de React en Berlín por elegir mi charla y a todos los demás que están en la sala hoy. Estoy realmente emocionado por lo que quiero hablar, así que vamos a sumergirnos.

Lo que voy a discutir hoy es la idea de los componentes agnósticos de framework. Para aquellos que no están familiarizados con esa idea, es cuando escribes un componente que quieres renderizar en diferentes frameworks web. Así que una aplicación de React, una aplicación Quick, una aplicación de Svelte, una aplicación de Vue. Hay muchos escenarios en los que quieres construir un componente de este tipo debido a una necesidad de negocio o cualquier otro tipo de necesidad. Hacer eso hoy en día es realmente tedioso. Efectivamente tienes una de dos opciones. Puedes hacerlo a mano, escribir ese mismo componente una y otra vez a mano cuatro, cinco, seis veces, lo cual obviamente no es genial, o puedes usar web components, que es un estándar que se ha desarrollado sobre los navegadores web. Ambas opciones tienen compensaciones con las que en Builder no estábamos contentos. Es por eso que hemos llegado a una solución, que es Mitosis, un proyecto de código abierto que ha estado disponible durante un par de años ahora, que resuelve este problema para nosotros y esperamos que para otras personas. Así que voy a intentar convencerte de que construir esos componentes es tedioso en este momento, y voy a intentar convencerte de que Mitosis es una buena solución para eso. Y hacia el final, voy a intentar realmente, realmente convencerte de que Mitosis funciona, porque es casi demasiado loco para funcionar, pero funciona mejor de lo que esperarías.

2. Introducción a Sami Jaber y Buildr

Short description:

Soy Sami Jaber, ingeniero de software en Buildr y el principal contribuyente y mantenedor de los SDKs de Buildr.io. Buildr es un CMS visual sin cabeza que permite a los no desarrolladores web construir páginas web arrastrando y soltando componentes. También construyo los SDKs usando Mitosis. Anteriormente, trabajé en Splash como desarrollador web.

Ahora, antes de entrar en todo eso, solo quiero presentarme brevemente. Mi nombre es Sami Jaber, soy ingeniero de software en Buildr. Soy el principal contribuyente y mantenedor de los SDKs de Buildr.io. Así que Buildr es un CMS visual headless, lo que significa que puedes arrastrar y soltar tus propios componentes de una manera que permite a los no desarrolladores web construir páginas web, y lo que alimenta todo eso es los SDKs, que necesitan ser diferentes para cada framework web. Y así soy el contribuyente a esos SDKs y los construyo usando Mitosis, del cual también soy el principal contribuyente. Antes de mi tiempo en Buildr, fui uno de los desarrolladores web en Splash.

QnA

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
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.
Componentes Web, Lit y Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Componentes Web, Lit y 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.
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
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.
Aplicaciones Web Inmutables
JSNation 2022JSNation 2022
20 min
Aplicaciones Web Inmutables
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.
¡Los componentes web son increíbles!
JSNation 2022JSNation 2022
10 min
¡Los componentes web son increíbles!
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.
Hablemos de los Componentes Web
React Advanced Conference 2021React Advanced Conference 2021
32 min
Hablemos de los Componentes Web
Web Components are a suite of technologies that allow you to create reusable HTML elements, combining the fun of React with regular HTML. Custom elements and the shadow DOM are key features of Web Components, allowing you to define new elements, encapsulate functionality and styles, and interact with a separate DOM. HTML templates serve as placeholders for content to be rendered later in custom components. Custom elements and HTML templates are cross-framework compatible and can be used in React, Angular, Vue, or any other framework.

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