Es hora de desfragmentar la web

Rate this content
Bookmark
Slides

En los últimos años, el número de frameworks web disponibles ha explotado. En cierto sentido, la amplitud de opciones es una clara victoria para nuestro ecosistema. Sin embargo, para muchos de nosotros, también conlleva desventajas significativas: - ¿Alguna vez has utilizado un componente de código abierto popular construido para el framework A y deseaste que existiera en el framework B? ¿Qué hay de 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 desperdiciadas necesarias para lograr un sistema de diseño consistente? - ¿Tu equipo construye SDK para frameworks web y debe reescribirlos manualmente para cada framework? La solución a estos 3 problemas existe hoy en día. Para comprenderlo completamente, primero debemos examinar los frameworks web actuales, repensar cómo debería lucir 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.

34 min
02 Dec, 2022

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 frameworks. Admite la sintaxis JSX y Svelte y genera código legible para varios frameworks web. Mitosis ya está siendo utilizado por clientes empresariales y se puede integrar fácilmente con React, Svelte y otros frameworks. Ahorra tiempo, permite manejar fácilmente las migraciones de versiones de los frameworks y permite realizar pruebas unitarias e integradas de manera eficiente.

Available in English

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

Short description:

Hoy, hablaré sobre 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 sus inconvenientes. Por eso 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, chicos, tienen mucha energía para un día completo de charlas. Gracias por quedarse para la mía. Gracias a los organizadores de React Day Berlin 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 esta idea, se trata de escribir un componente que se pueda renderizar en diferentes frameworks web. Ya sea una aplicación React, una aplicación Quick, una aplicación Svelte, una aplicación Vue. Hay muchos escenarios en los que quieres construir un componente de este tipo debido a una necesidad empresarial u otra necesidad. Hacerlo hoy en día es realmente tedioso. Básicamente tienes 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 ideal, o puedes usar componentes web, que es un estándar desarrollado sobre los navegadores web. Ambas opciones tienen inconvenientes con los que en Builder no estamos contentos. Por eso hemos creado una solución, que es Mitosis, un proyecto de código abierto que lleva disponible un par de años y que resuelve este problema para nosotros y esperamos que también para otras personas. Así que voy a tratar de convencerte de que construir esos componentes es tedioso en este momento, y voy a tratar de convencerte de que Mitosis es una buena solución para eso. Y hacia el final, voy a tratar de convencerte realmente, realmente 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, un ingeniero de software en Buildr y el principal colaborador y mantenedor de los SDK de Buildr.io. Buildr es un CMS visual sin cabeza que permite a los desarrolladores no web construir páginas web arrastrando y soltando componentes. También construyo los SDK utilizando Mitosis. Anteriormente, trabajé en Splash como desarrollador web.

Antes de entrar en todo eso, quiero presentarme brevemente. Mi nombre es Sami Jaber, soy un ingeniero de software en Buildr. Soy el principal colaborador y mantenedor de los SDK de Buildr.io. Buildr es un CMS visual sin cabeza, lo que significa que puedes arrastrar y soltar tus propios componentes de una manera que permite a los desarrolladores no web construir páginas web, y lo que impulsa todo eso son los SDK, que deben ser diferentes para cada framework web. Y así soy el colaborador de esos SDK y los construyo utilizando Mitosis, del cual también soy el principal colaborador. Antes de mi tiempo en Buildr, fui uno de los desarrolladores web en Splash.

3. Introducción a Sísifo y el SDK de Buildr

Short description:

Voy a presentar a un compañero ficticio llamado Sísifo, el ingeniero del SDK de Buildr.io. La tarea de Sísifo de construir componentes web repetidamente puede ser monótona. El SDK de Buildr es una biblioteca de componentes que admite el renderizado en el lado del servidor. Sísifo, que solo conoce React, tiene la tarea de construir el SDK de Vista. Decide aprender Vue estudiando cada componente línea por línea, comenzando con RenderContent.

En lugar de hablar de mí mismo, voy a imaginar a un compañero ficticio y lo voy a llamar Sísifo, el ingeniero del SDK de Buildr.io. ¿Quién está familiarizado con la mitología griega? Oh, wow, muchos. Para aquellos que no están familiarizados con la mitología griega, Sísifo es un hombre que recibió un castigo eterno de los dioses griegos. Ese castigo consistía en rodar una enorme roca cuesta arriba para siempre. Cada vez que llegaba a la cima, la roca rodaba hacia abajo. Tenía que bajar y comenzar a rodarla nuevamente cuesta arriba. Elegí el nombre Sísifo porque, como verán claramente, y trataré de hacerlo lo más claro posible, construir esos componentes web, esos componentes de interfaz de usuario, una y otra vez puede volverse muy, muy monótono.

Entonces estoy hablando de cómo Sísifo es el ingeniero del SDK, ¿entonces qué es este SDK de Buildr que está construyendo? Para simplificar, es básicamente una gran biblioteca de componentes. Tienes cosas como el componente de imagen, columna, texto, botón, video, etc., todos los cuales tienen estilo y gestión de estado y todas estas cosas. Y una característica importante que debes tener en cuenta es que este SDK debe admitir el renderizado en el lado del servidor de forma predeterminada, y eso se volverá muy importante más adelante.

Entonces Sísifo se unió hace aproximadamente un año. Se convierte en ingeniero de Buildr, descubre cómo funciona todo, y decide que quiere trabajar en los SDK. Hasta ahora, el único SDK que existe es el SDK de React. Entonces su jefe entra y le dice: Sísifo, quiero que construyas el SDK de Vista. Tenemos muchos clientes y quieren usar Vista, así que quieren usar Buildr, pero solo tenemos un SDK de React. Sísifo nunca ha escrito una línea de código en Vista en su vida. Al igual que muchas personas en esta sala hoy, solo conoce React. Pero está emocionado de aprender, ambicioso y lleno de buenos ánimos en este momento. Así que decide revisar cada componente línea por línea y aprender cómo escribir esa línea de código en Vista.

Echemos un vistazo a este componente hipotético llamado RenderContent. Es un componente de React. Tiene un nombre, ejecuta algún código una vez en un gancho UseEffect. Hay algún código que desea volver a ejecutar cada vez que algo cambia. Eso es UseEffect con una matriz de dependencias. Desea crear un contexto, así que usa use.provider y agrega el valor. Desea aplicar algunos estilos, usando la propiedad style. Desea rastrear un clic, así que usa onClick y escribe tu código. Y por último, desea renderizar otro componente y darle algunas propiedades. Todo esto es muy básico, cosas muy estándar que hacemos todos los días en React. Entonces, ¿cómo hacemos cada una de estas cinco o seis cosas en Vue? Descubrámoslo.

4. Creación de Componentes Vue y Componentes Web

Short description:

Para crear un contexto, importas algo llamado provide. Cuando ejecutas un código una vez, importas algo llamado onMounted. Cuando ejecutas código cada vez que algo cambia, usas algo llamado watch. Cuando quieres aplicar estilos, usas la etiqueta style y luego escribes algo llamado scoped. Y cuando quieres rastrear un clic, escribes atClick. Sísifo pregunta si hay algo que pueda escribir que genere todo lo demás que necesita. La respuesta son los Componentes Web. Los Componentes Web son una combinación de tecnologías que permiten escribir componentes que funcionan en cualquier framework de JavaScript. Sin embargo, actualmente no se admite el renderizado en el lado del servidor de los componentes web.

Para crear un contexto, importas algo llamado provide, y luego le das el contexto y el valor. Cuando ejecutas un código una vez, importas algo llamado onMounted y dentro de él, pones el código JavaScript que deseas ejecutar. Cuando ejecutas código cada vez que algo cambia, usas algo llamado watch, y luego le pasas la matriz, y luego le pasas el código JavaScript. Cuando quieres aplicar estilos, usas la etiqueta style y luego escribes algo llamado scoped. Y luego, cuando quieres rastrear un clic, no escribes onClick, escribes atClick. Vale, me estás diciendo que use at en lugar de onClick. Solo quiero seguir adelante. Y lo último, quieres proporcionar una propiedad. En React, no tienes que hacer nada, pero en Vue, tienes que agregar dos puntos. Claro, está bien. Como Sísifo no le importa, solo memoriza la sintaxis y ahora puede seguir adelante.

Entonces ahora tenemos este componente, y este es el componente que era anteriormente hace unos cuantos diapositivas atrás en React. Ahora está en Vue. Este no es un trabajo particularmente emocionante, ¿verdad? Si tienes que hacer esto para 25 componentes que son mucho más grandes que este, te aburrirás muy rápido, porque una vez que aprendes a qué se mapea cada cosa, eres como un robot. Solo cortas, pegas, cortas, pegas, y luego lo envuelves en una importación diferente de un lugar diferente. Pero él lo hace, y está emocionado, acaba de unirse a la empresa, no va a quejarse, pero luego le dicen que hizo un trabajo tan bueno en el SDK de Vue que ahora las personas que usan VELT quieren usar Builder. Este es un buen problema para el negocio, pero no un buen problema para Sísifo. ¿Por qué es eso? Bueno, porque ahora tiene que hacer lo mismo de nuevo. Como cualquier ingeniero de software, se queja un poco de que hay demasiados frameworks web, ¿verdad? La lista sigue creciendo y creciendo y creciendo. Mientras que hoy solo tienes dos, mañana tendrás cuatro SDK que debes mantener y construir. La pregunta que Sísifo hace es: ¿hay algo que pueda escribir que genere todo lo demás que necesito? ¿Existe esta caja con un signo de interrogación dentro? En lugar de tener cuatro flechas saliendo de mí, ¿puedo tener solo una flecha saliendo de mí? Y después de buscar y hacer algunas búsquedas en Google, una respuesta muy clara y muy fuerte aparece, eso es Componentes Web, ¿verdad? Componentes Web es esta combinación de tecnologías que las personas desarrollaron sobre los navegadores web, y puedes escribir un componente usando Componentes Web, y luego funcionará en cualquier framework de JavaScript. Hecho.

Bueno, ¿qué pasa con el renderizado en el lado del servidor, que es lo que mencioné antes? Para aquellos de ustedes que tal vez no sepan qué es el renderizado en el lado del servidor, es cuando quieres renderizar tu aplicación web en el servidor y luego enviar la salida HTML al navegador. Ahora, ¿por qué querrías hacer eso? Por muy buenas razones. Hará que tu aplicación web se cargue más rápido y te dará un impulso muy bueno para el SEO. Es una técnica bastante estándar que todos hacen hoy en todos los frameworks web. Y cuando intentamos tener componentes web renderizados en el servidor, nos damos cuenta de que eso no funciona muy bien hoy. Los componentes web están construidos sobre los navegadores, y los servidores no saben cómo renderizarlos. Hay muchas soluciones alternativas que encontrarás, pero serán específicas de cada framework web en el que estés intentando importar el componente web.

5. Building SDKs for Different Frameworks

Short description:

Al construir SDK, no es razonable proporcionar instrucciones diferentes para cada framework. Los componentes web son más difíciles de usar que los componentes nativos, ya que cada framework sabe cómo renderizar sus propios componentes de la mejor manera. Sísifo tuvo que escribir el SDK de Svelte a mano, importando componentes con diferentes nombres y usando una sintaxis ligeramente diferente. A pesar de las diferencias, el código JavaScript subyacente sigue siendo el mismo. Sísifo está frustrado después de construir los SDK de Vue y Solid JS y ahora se enfrenta a la tarea de construir el SDK de QUIC.

Y lo que eso significa es que si eres un desarrollador y quieres construir SDK, tendrás que decirle a cada persona diferente, oh, hey, estás usando Svelte. Asegúrate de hacer esto. Estás usando Next.js. Asegúrate de hacer eso. Estás usando Vue, etcétera, etcétera. Siempre hay diferentes instrucciones. Y eso simplemente no es algo razonable de hacer cuando tienes un negocio. Quieres tener la mejor experiencia de usuario para tus clientes, lo cual, si son desarrolladores de software, quieres que puedan instalar y no tener que preocuparse por nada.

Y cuando digo aquí que los componentes web son más difíciles de usar que los componentes nativos, lo que quiero decir con nativos es que si estás en una aplicación React, el mejor componente es un componente React, etcétera, etcétera, etcétera. No hay forma de evitarlo. Esa es la realidad. React sabe cómo renderizar los componentes React mejor que sabe cómo renderizar los componentes web.

Entonces, ¿nada de componentes web para Sísifo, verdad? Eso significa que tiene que escribir el SDK de Svelte a mano. Y es tan doloroso como lo fue para Vue. Es lo mismo cada vez, pero tienes que importar algo con un nombre diferente. No tienes que preocuparte por la sintaxis. Simplemente importas set context. Importas onMount. Aquí, no importas nada. Utilizas la sintaxis del signo de dólar. Pero cada vez, el código JavaScript es prácticamente el mismo. ¿Quieres aplicar estilos? Es lo mismo en Svelte que en Vue, sin la palabra scoped. Haces on colon click en lugar de at click. Y luego, al final, obtienes este componente. Y nuevamente, cada cosa en aquí es solo código JavaScript que es exactamente lo que era en los otros casos, envuelto en algo ligeramente diferente.

Así que Sísifo se está poniendo un poco molesto, un poco frustrado, un poco aburrido. Ya ha hecho esto dos veces. Así que puedes imaginar su frustración cuando tiene que hacerlo por tercera vez. Y te ahorraré los detalles de implementación, pero tuvo que importar algo con un nombre diferente, usar una sintaxis ligeramente diferente y luego obtuvo el SDK de Solid JS. Y luego tuvo que hacerlo nuevamente con QUIC.

6. Sisyphus and the Box

Short description:

Sísifo tiene una gran deuda técnica y necesita una mejor solución para las tareas repetitivas de codificación. Explora la idea de un código que se ejecuta una vez cuando se monta un componente. Intenta inyectar código JavaScript en diferentes cadenas con los nombres de importación correctos, pero no funciona con Svelte debido al alcance de módulo de las propiedades. Para solucionar esto, utiliza Babel, un transformador de código JavaScript, para reemplazar o eliminar el identificador de props. Con esta solución, Sísifo logra su objetivo de tener una caja que genere todo por él.

Diferente sintaxis. QUIC le gusta tener signos de dólar en todas partes, así que tuvo que usar signos de dólar al final de las importaciones, y el JavaScript se mantuvo igual en su interior. ¿Entonces, a dónde vamos desde aquí? Sísifo tiene esta enorme cantidad de deuda técnica, ha estado rodando la misma roca cuesta arriba una y otra vez. Y cada vez que hay un error, tiene que solucionarlo en cuatro lugares diferentes. Y cada vez que obtenemos una nueva versión de un framework web, React lanza componentes de servidor, alguien quiere soporte para React Native, ver dos y ver tres, etcétera, etcétera. Tiene que hacer lo mismo una y otra vez. Es mucho código.

Entonces, Sísifo vuelve a esta idea. Tiene que haber algo que pueda vivir dentro de esta caja. Simplemente no puede ser lo mejor que el ecosistema tiene para él. Así que comienza a mirar una de esas cosas que estaba haciendo a mano. Esta idea de un código que se ejecuta una vez cuando se monta el componente. Aquí tengo el ejemplo en cuatro frameworks diferentes. Y nuevamente, espero haber dejado claro que es el mismo código JavaScript exacto cada vez envuelto en una importación diferente, excepto en Svelte, que no tiene el identificador de props. Pero entraremos en eso más adelante.

Entonces, Sísifo se pregunta, ¿qué pasaría si hiciera lo más estúpido y loco, que es escribir ese código JavaScript en una cadena y luego inyectarlo en cinco cadenas diferentes que usan el nombre de importación correcto? Quiero decir, esto realmente funciona, cuatro de cada cinco veces. Pero no funciona con Svelte. ¿Por qué? Porque Svelte tiene todas sus propiedades en el alcance del módulo. Entonces, no tienes props.componentes personalizados, solo componentes personalizados. ¿Cómo va a solucionar eso? Usando Babel. Así es, Babel, que es posible que hayas usado herramientas que usan Babel pero nunca lo has usado directamente o no lo has usado para transformar código tú mismo, es un transformador de código JavaScript. Lo que esto significa es que tomará una cadena de código y generará un árbol de sintaxis abstracta. Y luego puedes ir a cualquier parte de ese árbol, identificarlo y hacer cualquier tipo de transformación que desees. Entonces, la cadena se vería algo así a la izquierda. Y luego, en el lado derecho, ves resaltado en amarillo el identificador de props que quieres reemplazar, eliminar o cambiar. Y así, voy a omitir los detalles de implementación porque la función en realidad no cabría en una diapositiva. Pero Sísifo termina escribiendo esta función que transforma props.componentesPersonalizados en componentesPersonalizados encontrando el nodo y eliminándolo. Y ahora puedes pasar de tener este código Svelte que tiene los props a envolverlo en una función en esa llamada de función y terminas eliminando el identificador de props que no existe. Así que retrocedamos un poco. Sísifo quería esta caja que va a generar todo por él.

7. Almacenando Código en JSON y Usando JSX

Short description:

Todas esas llamadas onMount ahora las está escribiendo él una vez y luego se alimentan a generadores que generan el código correcto para cada framework web. Antes de avanzar, quiere almacenar esto en algún lugar. El mejor candidato es usar JSON. Todo lo que acabo de mostrarte se puede escribir en JSON. Son solo cadenas. Pero nadie aquí querría escribir todos sus componentes de interfaz de usuario, toda su lógica en JSON. El candidato obvio aquí es JSX, que no tiene un logotipo. JSX es genial por todas las razones que acabo de mencionar. Puedes analizar JSX en el esquema JSON que Sísifo ideó. JSX Lite te permite hacer lo que quieras en ese código JSX, a diferencia de si estuvieras escribiendo React.

una vez y luego se alimentan a generadores que generan el código correcto para cada framework web. Bastante bien, ¿verdad? Estamos avanzando.

Antes de avanzar, quiere almacenar esto en algún lugar. Y obviamente el mejor candidato es usar JSON. El logotipo de JSON es un agujero negro, lo cual nunca supe hasta que lo busqué para esta diapositiva. Y así usa un objeto JSON, hooks, key, dentro de él hay un objeto onMount y luego coloca el código como una cadena como ves aquí. ¿Hasta dónde podemos llegar con esto? ¿Cuántas cosas podemos poner en ese JSON y cuántas cosas podemos inyectar en cadenas y manipular de todo lo que te mostré anteriormente? Muy, muy lejos.

Y sé que no me vas a creer, así que aquí es donde escapo y te muestro mi demostración interactiva. Entonces ves en la parte superior el objeto JSON del que estoy hablando, y en la parte inferior tienes las cuatro salidas que te he estado mostrando en las diapositivas. Y aquí tienes el código onMount y lo interesante es que puedes ir aquí y agregar como otra llamada de función y como puedes ver se está generando correctamente en todos los lugares. Voy a ir directamente al final donde realmente tenemos el objeto completo. Entonces tienes una declaración de importación, tienes un gancho onMount, un gancho onUpdate con la dependencia, puedes tener el contexto, puedes tener una matriz de hijos con el div, y luego tenemos los estilos. Todo lo que acabo de mostrarte se puede escribir en JSON. Son solo cadenas. Y luego si oculto esto para que puedas ver mejor la salida, obtienes la salida de la que he estado hablando todo el tiempo. Es una salida legible para humanos, parece algo que cualquiera escribiría, porque es solo una interpolación de cadenas. Lo tenemos funcionando y estos son archivos válidos para cada framework web. Por lo tanto, esto se puede guardar en un archivo de vista, un archivo Svelte, etcétera, etcétera.

Entonces volvamos por un momento y veamos dónde hemos llegado. Sísifo pasó de tener solo el código onMount a tener todo, escribió un montón de generadores para cada cosa, y ahora está escribiendo un JSON que genera el mismo componente en cada framework. Bastante genial. Pero quiero decir, nadie aquí, creo, querría escribir todos sus componentes de interfaz de usuario, toda su lógica en JSON. Es realmente tedioso, no hay soporte de tipos, no hay resaltado de sintaxis. Entonces, ¿qué más podemos usar? El candidato obvio aquí es JSX, que no tiene un logotipo, así que me tomé la libertad de combinar el agujero negro de JSON con el logotipo de React. JSX es genial por todas las razones que acabo de mencionar. Todos los editores de código lo admiten, ESLint sabe cómo analizarlo, TypeScript lo admite. Tiene un ecosistema de herramientas muy rico, ¿verdad? Por lo tanto, no habría necesidad de construir nada adicional. Simplemente puedes aprovechar JSX, y mucha gente ya está familiarizada con él. También puedes usar Babel porque es capaz de analizar JSX, por lo que puedes analizar ese JSX en el esquema JSON que Sísifo ideó. Y finalmente, cuando digo JSX Lite, me refiero al hecho de que puedes hacer cualquier cosa que quieras en ese código JSX, a diferencia de si estuvieras escribiendo React, porque cuanto más casos de uso complejos escribas, más tienes que hacer un analizador más inteligente que pueda manejar todos tus casos especiales.

8. Código Dinámico en Sintaxis CSS y JSX

Short description:

Tener código dinámico dentro de CSS puede ser problemático al usar Svelte y Vue. Se necesitan barreras de protección para manejar esto. La sintaxis JSX proporciona una estructura familiar, similar a React, lo que facilita la escritura y ejecución de componentes en cualquier lugar.

Entonces, tener código dinámico loco ejecutándose dentro de tu CSS se volverá complicado, porque ese CSS se mueve a una etiqueta de estilo en Svelte y Vue. Por lo tanto, debes tener algún tipo de barreras de protección. Permíteme mostrarte cómo se ve eso. Si volviera aquí, mostraría el input nuevamente, y ahora tenemos que el input superior ya no es JSON, sino esta sintaxis JSX de la que he hablado. Si comentara todo, verías que obtenemos el mismo código de componente que obteníamos del JSON, pero ahora lo obtenemos de un archivo JSX. En la parte superior, puedes ver que se parece casi exactamente a React, ¿verdad? No hay nada desconocido al respecto. Solo las importaciones tienen nombres diferentes a los que estamos acostumbrados, en lugar de useEffect, tenemos onUpdate. Todo se ve familiar aquí, y luego, si oculto eso, es exactamente el mismo código. Estos son componentes válidos que puedes guardar y ejecutar en cualquier lugar.

9. Introducción a Mitosis

Short description:

Mitosis es un proyecto de código abierto que te permite escribir un componente una vez y ejecutarlo en cualquier lugar. Admite la sintaxis JSX y Svelte y genera código legible para varios frameworks web. No hay dependencias extrañas ni restricciones, ya que Mitosis simplemente genera el componente en un archivo de React o Vue.

Aquí volvemos. Así que volvamos a nuestro gráfico que ha ido creciendo y creciendo. Ahora tenemos este escenario en el que Sísifo está escribiendo un archivo JSX y eso se convierte en un JSON, que luego se genera en cuatro componentes diferentes que se guardan como cadenas o archivos. Lo logró. Eso es lo que quería. Eso es lo que quiere lograr y ahora hay una única fuente de verdad. Y en pocas palabras, eso es lo que es Mitosis. Mitosis es un proyecto de código abierto que hemos desarrollado en Builder. Te permite escribir un componente una vez y ejecutarlo en cualquier lugar. Puedes escribir componentes en una sintaxis JSX o en una sintaxis Svelte, que un colaborador agregó hace unas dos semanas. Y genera este código legible y esta enorme lista de frameworks web y muchos, muchos más. Y para ser claro, en realidad no hay nada sorprendente al respecto. Te mostré el código. Es lo que un desarrollador normal habría escrito casi si tuviera que escribir ese código una y otra vez. No se importan dependencias extrañas. No hay restricciones porque al final del día, todo lo que hace Mitosis es generar ese componente en un archivo que es un archivo de React o un archivo de Vue. Entonces, si en algún momento alguien se cansa de usar Mitosis o no necesita diferentes salidas, simplemente puedes tomar esa salida y usarla como fuente de verdad en su lugar.

10. Beneficios de Mitosis y Construcción sobre ella

Short description:

La mayoría de los generadores están en fase beta o alfa, pero Mitosis ya está siendo utilizado por clientes empresariales sin problemas. Experian es una empresa que utiliza Mitosis para su sistema de diseño de interfaz de usuario. En las demostraciones, los componentes de Mitosis se pueden integrar fácilmente con React, Svelte y otros frameworks. Permite funcionalidad dinámica, generación de tipos y argumentos de componente. Mitosis ahorra capital humano al evitar la reconstrucción redundante de sistemas de diseño complejos como Material UI. Construir sobre Mitosis permite obtener beneficios instantáneos de optimizaciones y correcciones de errores, creando una web más eficiente.

El estado actual es, diría yo, que la mayoría de los generadores están en fase beta. Algunos de ellos están en una fase muy temprana, por lo que todavía están en fase alfa. La base está ahí, los analizadores, los generadores y el esquema JSON, pero hay errores que deben solucionarse. Pero los clientes de enterprise de Builder, muchos de ellos están utilizando esas nuevas SDK que están construidas con Mitosis, y ni siquiera pueden notar la diferencia. Para ellos, esto es simplemente una biblioteca de Svelte, una biblioteca de Quik, una biblioteca de Solid Jest, simplemente ni siquiera lo saben, y está impulsando su sitio de comercio electrónico, sus sitios de enterprise, y no tienen ningún problema.

Y también hay un ejemplo de Experian, que es una empresa en los Estados Unidos que realmente ha estado utilizando Mitosis para generar parte de su sistema de diseño de interfaz de usuario. Y hay muchas otras empresas que están empezando a considerar su uso. Si aún no estás convencido, voy a sumergirme rápidamente en mi última demostración que puedo mostrarte, porque creo que esa es la mejor manera de convencer a las personas de que esto realmente funciona. Así que en el lado izquierdo tienes este componente de Mitosis escrito en JSX, y aquí tengo un servidor de React y un servidor de Svelte y puedes ver en la parte inferior que estoy importando esta aplicación de charla en cada caso, y la importas normalmente, la renderizas normalmente, y aquí es como una aplicación de lista de tareas totalmente dinámica, así que puedes hacer lo que quieras, puedes eliminar, y la experiencia de construir esos componentes no es desconocida o no convencional. Simplemente vas aquí, si quieres hacer un cambio en el estilo aquí, todo lo que sucede es que Mitosis en segundo plano se vuelve a ejecutar, actualizando los cambios, lo cual lleva un segundo, pero ves que el color aquí se oscurece casi al instante, así que no estás sufriendo en términos de la experiencia del desarrollador tanto. Siempre y cuando conectes todo, funciona.

Otro ejemplo es un ejemplo de autocompletado. Puedes tener cualquier cosa aquí, obtener datos, promesas, todo eso. Nada de eso es algo que no funcione en Mitosis, porque como te mostré, es solo cadenas que se generan. Así que puedes hacer lo que quieras, realmente, porque tienes esos bloques de construcción que se pueden generar correctamente. Todo lo demás es posible. Incluso puedes generar tipos. Si miras aquí, en este ejemplo de SvelteKit, SvelteKit se ejecuta después de Mitosis y está generando tipos. Hay soporte completo de tipos y todo eso, así que puedes saber qué estás proporcionando. Incluso puedes proporcionar componentes como argumentos. Así que, nuevamente, son componentes normales. A estas alturas, espero que quien haya estado viendo y escuchando esté convencido de que tal vez Mitosis es algo que puede funcionar, y la pregunta es, ¿por qué deberíamos usarlo? Creo que hay un buen argumento de que se está desperdiciando mucho capital humano y recursos humanos en la actualidad. Un ejemplo es Material UI, que es un sistema de diseño complejo que tiene cuatro o cinco equipos diferentes reconstruyéndolo desde cero para cada framework web. No creo que haya mucha reutilización de código que sea posible, así que todos están haciendo lo mismo una y otra vez, lo cual creo que es una verdadera lástima. Es una verdadera lástima que las personas estén perdiendo muchas horas haciendo lo que otras personas ya han hecho en un sabor ligeramente diferente. Creo que el mundo podría beneficiarse mucho si hiciéramos lo que, supongo, titulé esta charla, que es desfragmentar la web. Lo que quiero decir con eso es que si todos construyéramos sobre algo como Mitosis, Y cada vez que alguien optimiza un generador, encuentra algo que se puede hacer mejor, todos se benefician al instante. Simplemente actualizan a la última versión. Si alguien encuentra un error, o si alguien escribe un generador completamente nuevo que hace algo de una manera más interesante o diferente que maneja un caso de uso específico, todos pueden aprovechar eso al instante. Y para resumir quién podría beneficiarse de esto, diría que las personas que están construyendo sistemas como Material UI serían excelentes candidatos.

QnA

Beneficios de Mitosis y Preguntas y Respuestas

Short description:

Las personas que construyen sistemas de diseño en grandes empresas de tecnología con diferentes frameworks web pueden beneficiarse de Mitosis. También los SDK de Buildr se benefician de Mitosis, ahorrando tiempo y expandiendo el mercado. Prueba Mitosis, contribuye y observa los resultados. ¡Gracias! Ahora, pasemos a la sesión de preguntas y respuestas.

Las personas que están construyendo sistemas de diseño en grandes empresas de tecnología que tienen diferentes frameworks web y necesitan adherirse a un sistema de diseño, ese es un caso de uso perfecto para algo como Mitosis.

Y por último, personas como nosotros en Buildr. Tenemos SDK que necesitan exportar componentes para la web, y en ese caso, utilizar Mitosis ahorra mucho tiempo y abre un mercado más grande de inmediato.

Eso es todo. Si has visto esta charla, has entendido cada parte de Mitosis y cómo funciona. Así que pruébalo, construye algunos componentes, verifica si encuentras algún problema, repórtalo y contribuye. Porque, nuevamente, eres tan capaz como cualquier persona que ya ha contribuido, porque así es como funciona Mitosis. No es tan complicado.

Muchas gracias. ¡Hurra! Por favor, acércate. Aquí mismo. Aquí. Este, este, este. Eres la estrella. Eres la estrella. Muy bien. Responderemos algunas preguntas y luego el resto. Sammy estará en la sala de preguntas y respuestas de los oradores, junto a la recepción. O creo que también estará en línea para las personas que están de forma remota.

De acuerdo. Veamos qué tenemos en nuestro Slido. Gracias por esa charla. Es un placer. Me encanta el ambiente. Interesante. En realidad, hay algunas preguntas que van en la línea de si crees que la IA, para los grandes modelos de lenguaje, podría ser una buena solución para los problemas de Sísifo. ¿Traducir automáticamente entre sintaxis de frameworks y luego hay otra que dice si crees que la IA podría hacer algo similar? Quiero decir, uso mucho GitHub Copilot, me gusta lo fácil que me resulta hacer gran parte del trabajo. Me sorprendería si alguien confiara en un modelo de lenguaje grande o en el aprendizaje automático para generar los componentes que van a implementar directamente en producción. Sí, dejaría eso en manos de algo más determinista como Mitosis en lugar de algo en lo que no puedes estar 100% seguro de que hará lo que deseas. ¿Confías en que GitHub Copilot escriba todo tu código y lo implemente directamente en producción? No lo creo. Tal vez algún día.

Pruebas Unitarias e Integración en Mitosis

Short description:

Mitosis admite pruebas de integración para todas las salidas, pero no es posible realizar pruebas unitarias para el componente de mitosis en sí. En su lugar, se pueden ejecutar una serie de pruebas unitarias en la salida generada para garantizar la agnosticidad del framework.

Bueno, eso en realidad encaja muy bien con lo que se piensa acerca de las pruebas unitarias para mitosis o en mitosis. Oh, sí. En realidad, lo bueno es que hemos configurado esto para nuestros SDK y en el código base de mitosis puedes tener diferentes servidores ejecutando todo y ejecutar pruebas de integración al menos, por lo que puedes configurar pruebas de integración para todas las salidas. No puedes hacer pruebas unitarias para el componente de mitosis porque en realidad no es algo que se pueda renderizar, por lo que querrías tener una suite de pruebas unitarias que luego se ejecuten en la salida generada y asegurarte de que esa suite sea agnóstica del framework. Pero diría que las pruebas de integración son algo que mitosis puede manejar muy fácilmente en este momento.

Manejo de Migraciones de Versiones de Framework

Short description:

Mitosis permite manejar fácilmente las migraciones de versiones de framework, como pasar de view-2 a view-3. Al actualizar el generador y agregar una opción de configuración, Mitosis puede generar versiones tanto de view-2 como de view-3 lado a lado. Esta flexibilidad se extiende a otros frameworks como React, donde múltiples versiones con diferentes opciones de estilo pueden coexistir. Los usuarios pueden elegir la versión que mejor se adapte a sus necesidades.

¡Genial! Hay un par de cosas sobre el manejo de migraciones de versiones de framework, como pasar de view-2 a view-3 y cómo manejar eso. En realidad, eso es algo que tuvimos que hacer. Teníamos soporte para view-2, tuvimos que tener soporte para view-3, actualizamos el generador para tener una opción, el generador de vista en mitosis, para permitirte generar view-2 y view-3. Y simplemente agregando eso como una opción de configuración, ahora estamos generando view-2 y view-3 lado a lado. Y simplemente le decimos a los usuarios de view-3 que importen la versión de view-3. Lo bueno de mitosis es que, como no lo estás escribiendo a mano, puedes generar instantáneamente diez versiones diferentes para el mismo framework, cada una con un caso de uso ligeramente diferente. Incluso puedes hacerlo para React, puedes tener una versión de React que use style.jsx, y otra que use emotion y otra que use style components, y todas vivirán lado a lado y puedes decirles a las personas que elijan la que prefieran. Eso es un buen seguimiento para la siguiente pregunta, que es, ¿cómo funciona mitosis con estilos que no son CSS y JS? Como vanilla extract o lezen, tal vez no. Sé que algunas personas están usando Sass. Estoy usando Tailwind en el ejemplo, por lo que puedes usar lo que quieras. Personalmente no he configurado vanilla extract, no estoy seguro de cómo es diferente de otras soluciones de CSS y JS. Dado que Tailwind funciona y Sass funciona, creo que cualquier otra cosa debería funcionar, pero tendría que investigar cómo funciona vanilla extract en realidad. Genial. Esta es una frase interesante. ¿Qué tan confiable es esto y cómo funciona con bibliotecas de terceros o asume escribir código puro? Sí, puedes usar cualquier biblioteca de terceros siempre y cuando no haga algo específico del framework. No puedes importar una biblioteca de React en Vue, por lo que si quieres generar código de Vue, no puedes tener una biblioteca de React utilizada en el código fuente de Mitosis, pero absolutamente puedes usar cualquier biblioteca de JavaScript, simplemente la importas normalmente y puedes escribir código normal de JavaScript y TypeScript, y funcionará bien. ¿Qué sucede cuando tienes ciertas funciones, tal vez, que están disponibles en un framework pero no en el otro? ¿Se encarga de eso? ¿Hay una solución alternativa? Diría que depende. La razón por la que Mitosis funciona es porque, nuestra esperanza, que era que la mayoría de los frameworks web te permiten hacer el mismo conjunto de cosas y porque en su mayoría lo hacen, puedes tener esta capa de abstracción en ese esquema JSON. Siempre hay cosas que un framework hace que otros no, y en ese caso, es caso por caso. Si algo es compatible en todas partes excepto en un lugar, generalmente agregamos algo de código de plantilla para que funcione, como el prop de estilo en Svelte que no existe, por lo que agregamos algunas soluciones alternativas solo para que funcione. Pero diría que sí, las cosas que se superponen bien existen, y de lo contrario, constantemente tomamos decisiones según cuánto soporte queremos usar mientras mantenemos el framework lo suficientemente agnóstico. ¿Qué cosas no puede construir Mitosis? Una cosa en la que estamos investigando en este momento son los portales, eso es algo que existe en React, y eso es algo que estamos averiguando cómo hacer, porque eso no es algo que existe en todas partes. Y esto es algo que está en proceso y encontraremos la mejor manera de hacerlo. Cualquier cosa que sea muy específica del framework, que solo tenga sentido en un framework, simplemente no se podrá utilizar fácilmente en Mitosis. Diría que los hooks personalizados en React es algo que la gente sigue preguntando, pero ¿cómo escribirías un hook personalizado en Vue cuando ese concepto no existe? Entonces, algunas de estas preguntas sobre cosas realmente específicas de React nos las hacen, y estamos tratando de averiguar qué podemos hacer para mantener la experiencia lo más familiar posible. Suena como un desafío divertido. ¿También puedes escribir Svelte y generar código de otros frameworks o es una entrada, múltiples salidas? Supongo que eso se refiere al hecho de que dije que tenemos soporte para JSX y Svelte. Todo lo que hacemos es tomar ese JSX y convertirlo en JSON, y lo mismo ocurre con Svelte. Tenemos un analizador que toma el código de Svelte y lo convierte en JSON. Una vez que se genera el JSON, puedes generar el código en cualquier otro framework web. Por lo tanto, el soporte para Svelte es prácticamente el mismo que el soporte para JSX, siempre y cuando el analizador cubra todos los casos que necesita cubrir. Tenemos tiempo para una pregunta más, y luego puedes encontrar a Samy en la sala de preguntas y respuestas del orador. ¿Puedes incluir bibliotecas existentes de React de GitHub en Mitosis? No. Porque, como dije, no puedes ejecutar una biblioteca de React en un componente de Svelte, entonces, ¿qué esperarías que sucediera? Siempre que estés haciendo algo en Mitosis y no estés seguro de cómo funciona, como, ¿funcionaría si lo hicieras a mano en la salida? Y, no. Y si quisiéramos agregar una nueva biblioteca de salida, ¿cuál es la mejor manera de contribuir? Únete a Discord, únete a GitHub, tenemos guías, muchas personas han agregado sus propios generadores, con una cantidad sorprendentemente mínima de ayuda de nuestra parte, pero sí, en realidad es sorprendentemente fácil y refrescante tener un proyecto de código abierto que pueda hacer tanto, y muchas personas pueden contribuir fácilmente, así que definitivamente no seas tímido, comunícate en Discord y podemos ayudarte a configurarlo. Genial, gracias, Sammy. De nada. Puedes encontrar a Sammy allí. ¡Un gran aplauso para Sammy! ¡Gracias!

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

JSNation 2023JSNation 2023
29 min
The Good, The Bad, and The Web Components
There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.
JSNation Live 2021JSNation Live 2021
28 min
Web Components, Lit and Santa 🎅
Get started with Web Components – enabling you to define new HTML elements that work everywhere regular HTML does. This talk will focus on Lit, a suite from Google that helps you create WCs with features you'd expect like data-binding and declarative definitions. It'll also cover how we've used them to build one of the web's jolliest sites, Google's Santa Tracker 🎅
React Summit US 2023React Summit US 2023
21 min
Authoring HTML in a JavaScript World
 In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.
JSNation 2022JSNation 2022
20 min
Immutable Web Apps
Resolving dependencies when they are all bundled together is easy. Resolving dependencies when they are in being loaded via script tags is much more challenging. The goal of this talk is to explain how Meltwater handles dependency resolution when building native Web Component based applications that rely on packages published by many different teams.
JSNation 2022JSNation 2022
10 min
Web Components are awesome!
Ever wondered how by placing "video" or "audio" into your HTML, you get a media player with controls included? Or how, depending on the type attribute, "input" can be a button, a place to enter text, select a date or file, color picker and more? What if you could create your own element? The answer: Web Components! 🤯 In this talk, we’ll take a look at what Web Components are, how to make one and include it into an application.
React Advanced Conference 2021React Advanced Conference 2021
32 min
Let's talk about Web Components
Before the dawn of some of the most popular frameworks (read: React and Vue), there was Web components. Web Components take one of the best parts of these frameworks (reusable components) and combine it with the best parts of web development (native browser support and not needing to set up a build process). As if that's not enough, web components allow you use the same functions across any framework.If at this point, you're wondering "If web components are so awesome, why haven't I heard about them before?", then you're in luck because that's exactly what this talk is about.In this presentation, we'll take a look at what web components are, why web components are awesome, why web components can be a pain and how we can use web components both as a standalone tool and together with frameworks.

Workshops on related topic

JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
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.