Crea Componentes Reutilizables Con Mitosis Y Constructor.

Un desafío común entre los equipos de desarrollo es utilizar el mismo lenguaje; Mientras que una subclave está usando Vue, otro puede ser el uso de REACT, haciendo que el trabajo redundante y te obliga a crear componentes compartidos dos veces.

En este tutorial, vamos a explorar la mitosis, una herramienta que puede compilar el código de JavaScript estándar, así como los marcos y bibliotecas como angular, reaccionar y vue, lo que permite crear componentes reutilizables.

Vamos a revisar algunos datos básicos para aclarar cuándo se debe utilizar la mitosis, y luego instalar la mitosis en un nuevo proyecto para verlo en acción. ¡Vamos a empezar!

La mitosis vs. Los componentes Web

A pesar de que algunos desarrolladores inicialmente recurrieron a los componentes de la web para crear componentes reutilizables, se han encontrado problemas como un elemento laminar componente de compatibilidad del navegador y su enfoque de nivel inferior, lo que hizo que la creación de componentes reutilizables un proceso intensivo.

Del mismo modo, algunas librerías como RAAC tenían flujos de trabajo que hacía difícil la incorporación de componentes Web, lo que lleva a la creación de soluciones como LitElement de Google, jónico y Stencil.js.

Mientras tanto, una tendencia paralela surgió en Esbelto y Solidjs. Destinados a la construcción de aplicaciones, esbelto y SolidJs obtuvieron enormes ganancias de rendimiento al compilar el código fuente de JavaScript estándar, la creación de paquetes que eran más pequeños y más rápidos que los componentes de la web.

mitosis se basa en la funcionalidad de esbelta y solidjs, empleando la misma velocidad de compilación y lo que le permite volver a compilar un componente en diferentes estructuras y bibliotecas de la misma base de código. El componente compilado funciona como cualquier otro componente de marco.

Al igual que en solidjs, Mythosis utiliza una versión de JSX que compila los componentes para JSON. Plugins a continuación, compilar los componentes para diferentes objetivos, lo que permite crear herramientas en dos direcciones:

El código que se puede convertir a los plugins de la mitosis JSON que compila o JSON serializar a los marcos de destino

usos mitosis WYSIWYG edición y un marco para la compilación de spa. Ahora que entendemos cómo funciona la mitosis, vamos a crear un componente de la mitosis.

Mitose Introducción

En primer lugar, vamos a instalar la mitosis de la CLI:

NPM-instalar g @ builder.io/mitosis-cli

crear una carpeta vacía en el equipo. En su terminal, abrir la carpeta y crear un nuevo proyecto NGP:

NPM init-y

A continuación, vamos a instalar la mitosis:

NPM instalar @ constructor. io / Mythosis

Crea un archivo llamado component.lite.jsx. Lite.jsx es la extensión de los proyectos de la mitosis. A continuación, vamos a instalar la extensión BUILDER.IO VS código, que proporciona resaltado de sintaxis para los archivos Lite.jsx.

en el archivo component.lite.jsx, agregue el siguiente código:

importación {usestate, muestran, por} «@ builder.io/mitosis»; Función de exportación por defecto de componentes (apoyos) {const = estado usestate ({count: 0})

En el código anterior, declaramos el estado utilizando el gancho Usestate. Ahora, cuando se cambia cualquier propiedad en el objeto de estado, la UI se representará.

A continuación, agregue el siguiente bloque de código para component.lite.jsx, que devolverá JSX como RAACT o SOLIDJS:

RETURN (

{/ * Botón de añadir a contar * /} {state.count + = 1}} haga clic para añadir un botón

)}

en el código anterior, el componente muestra permite que podamos prestarle condicionalmente la UI. A medida que el estado se actualiza con las reasignaciones simples, no hay necesidad de añadir la función SetState, que usaríamos en React. Por último, cabe destacar que todos nuestros estados se pueden agrupar en un objeto.

Ahora que nuestro componente se construye, vamos a ver algunos ejemplos de nuestro componente compilado para diferentes marcos!

Mitose compilación

reaccionar

Vamos a utilizar la mitosis para compilar nuestro componente en un Reaccionar componente:

mitosis compilación a = reaccionar component.lite.jsx component.jsx

la bandera a = nos permite seleccionar la estructura para los que vamos a compilar nuestro componente mitosis. Cuando se compila para reaccionar, obtendremos el siguiente resultado:

importación {} USECONTEXT de «React»; {} la importación useelocalobservable «MOBX-reaccionar-lite»; Exportar la función componente estándar (apoyos) {const estado useelocalobservable = (() = ({count: 0})); RETURN (

{state.count + = 1;}} haga clic para añadir un botón

); }

vue

-a = vue component.lite.jsx component.vue

Cuando se compila a vue, nuestro componente se verá como el código de abajo:

ombligo

-a = esbelta component.lite.jsx component.svelte

Cuando compilamos nuestra mythis componente para la nave, obtendremos el siguiente resultado:

angular

= -a angular component.lite.jsx> component.tsx

Cuando puedo compilar nuestro componente mitosis para el angular, que se verá como el código a continuación:

importación {componente} de «@ angular / núcleo»; @Component ({selector: «Componente», modelo:

,}) Exportación componente estándar de la clase {count = 0; }

componentes Web

-a = customelement component.lite.jsx component.js

Cuando compilado para componentes web, conseguiremos el resultado siguiente:

/ ** * uso: * * * * componente / clase extiende HTMLElement {constructor () {super (); auto const = Este; This.state = {conteo: 0}; // controlador de eventos para el botón event’click’no 1 this.onbutton1click = (evento) = {this.state.count + = 1; this.update (); }; } Connectedcallback () {this.innerhtml = `

`; this.update (); } Update () {this.QuerySelectorAll ( «[Data-name = ‘Mostrar’]»). Foreach ((EL) => {el.style.display = this.state.count> 10 «en línea»: «Ninguno»;}); This.QuerySelectorAll ( «[Data-name = ‘div-1’]). Foreach ((EL) => {el.innertext = this.state.count;}); this.QuerySelectorAll ( «[Data-name = ‘Botón-1’]»). Foreach ((EL) => {EL.RemoveEventListener ( «clic», this.onbutton1click); el.addeventlistener ( «clic», es decir OnButton1Click);}); }} CustomElements.define ( «Componente», Componente);

Como se puede ver, es fácil de instalar Mythosis, crear un componente, y luego compilarlo en el lenguaje, la biblioteca o marco de su elección. Cubrimos varios ejemplos de este tutorial, pero sólo arañan la superficie; Otros objetivos incluyen la compilación rápida, liquid.js, solidjs, reaccionan nativa y más.

Conclusión

Cuando no es posible utilizar el mismo idioma que el resto de su equipo, Mythosis es una herramienta útil que permite ahorrar tiempo, reducir el trabajo redundante.

Mitose le permite escribir un código base de un componente individual, y luego compilarlo para uno de varios objetivos. Facilita soluciones de código libre y de código baja para la creación de aplicaciones rápido y reactivos.

Hemos explorado el plug-in Builder.io, pero otro popular plug-in es FIGMA-HTML, que permite transformar el diseño de su código de Figma a cualquier estructura.

A medida que construye sus propios componentes reutilizables, se puede ver los resultados visuales utilizando el violín builder.io JSX-Lite. Sin embargo, en el momento de la escritura, esta función se encuentra todavía en una etapa inicial de visualización. ¡Espero que disfrutes este tutorial!


Compartir