Build Time Optimization in Front-End

Hola a todos, así que tengo esta pregunta para ustedes. ¿No sería genial si pudiera escribir bg y $red y eso se convirtiera en color de fondo y RGB y lo que quieras aquí en la propiedad de estilo de cualquier etiqueta HTML que desees? Bueno, esto se puede hacer utilizando una solución incorporada, y te mostraré cómo puedes construir algo como esto y aprovecharlo en tus aplicaciones de React.

Entonces, hola, mi nombre es Rohit, y soy un ingeniero fundador en Tria. En Tria, estamos trabajando en llevar el mundo a Web3 utilizando nombres. Puedes seguirme y enviarme un mensaje directo en las plataformas sociales. Un poco más sobre mí. Así que he trabajado en productos como API Weeks, que es una herramienta para ver, probar y documentar APIs, algo similar a Postman, y luego construí NativeBase V3, que no salió como estaba planeado, y nos quedamos atascados con muchos problemas de rendimiento, por lo tanto construimos GlueStack Style. Construimos esto para cambiar por completo cómo manejamos el estilo y dar la máxima importancia al rendimiento y cómo podemos calcular la mayoría de los elementos esenciales estáticamente, y eso puede optimizarse en tiempo de compilación. Usando eso, construimos GlueStack UI, el primer sucesor de NativeBase. ¿Quién no conoce NativeBase? NativeBase es una biblioteca de componentes que se ejecuta de manera universal en aplicaciones iOS, Android y web. Ahora estoy trabajando en construir Tria. En Tria, estamos tratando de resolver uno de los problemas más desafiantes de Web3, que es transformar la incorporación y la gestión de activos en diferentes blockchains. Mi enfoque principal aquí es proporcionar a cada usuario una experiencia de usuario (UX) y una experiencia de desarrollo (DX) óptimas cuando usen nuestra aplicación móvil o nuestros SDK móviles.

Entonces, mi charla trata sobre cómo puedes obtener rendimiento y llevar tu tiempo de ejecución al tiempo de compilación, y empecemos.

Comencemos por comprender esta tendencia creciente en las bibliotecas y por qué los autores están impulsando las optimizaciones en tiempo de compilación. En los últimos años, hemos visto un número creciente de bibliotecas de front-end que se están inclinando hacia la optimización en tiempo de compilación y los compiladores. Esta tendencia subraya la creciente importancia de la industria tecnológica en el rendimiento y la eficiencia. Esto se puede observar claramente si estás siguiendo las últimas actualizaciones de React. Debes saber que React ha anunciado el lanzamiento del nuevo compilador de React. Este es un desarrollo importante que indica un cambio significativo hacia las optimizaciones en tiempo de compilación, incluso dentro del propio ecosistema de React.

Además, otras bibliotecas como Tamagiby, Gluestack y NativePrint también priorizan el tiempo de compilación sobre el tiempo de ejecución. Estas bibliotecas incorporan compiladores y transpiladores en su estructura principal, demostrando una clara tendencia hacia este enfoque. Este cambio hacia la optimización en tiempo de compilación está transformando el panorama del desarrollo front-end. A medida que continuamos adoptando estas arquitecturas modernas, podemos esperar ver más mejoras en el rendimiento y la eficiencia.

Primero, comprendamos qué aporta la optimización en tiempo de compilación. En primer lugar, mejora significativamente el rendimiento de la aplicación al trasladar cálculos y tareas pesadas al tiempo de compilación. Esto reduce la carga durante el tiempo de ejecución y resulta en una experiencia de usuario más fluida y rápida. En segundo lugar, permite detectar errores antes y, en tercer lugar, permite la optimización en tiempo de compilación que puede llevar a un tamaño de paquete más pequeño. Incluso después de la minificación y remodelación realizada por tus empaquetadores, también puedes analizar la lógica de tu código y la entrada que proporciona el usuario, y eliminar el código que no se ejecutará según la entrada del usuario. Por último, permite tener un software más predecible. Al hacer la mayor cantidad de tareas posible durante el tiempo de compilación, podemos comprender mejor cómo se comportará nuestro software en producción.

En conclusión, el cambio hacia la optimización en tiempo de compilación es una progresión natural. A medida que intentamos mejorar cada vez más el rendimiento, la eficiencia y la confiabilidad en el desarrollo de software, esta tendencia solo aumentará. Echemos un vistazo rápido a una comprensión general de Babel y lo que hace para que podamos construir nuestro complemento de Babel y realizar la tarea que te mostré en las etapas iniciales de esta charla. Babel es un transpilador de JavaScript de código abierto y gratuito. Ha sido revolucionario en el desarrollo de React y la sintaxis JSX tal como la conocemos ahora. Aquí tienes algunos beneficios clave de Babel. Te permite aprovechar las últimas características de JavaScript para tener un código más limpio y eficiente, mantener la compatibilidad con una amplia gama de navegadores y mover la lógica computacionalmente pesada del tiempo de ejecución al tiempo de compilación. Nos centraremos principalmente en esto. Comencemos por comprender cómo podemos construir un complemento personalizado de Babel. Vamos al código y veamos cómo podemos crear un complemento personalizado de Babel. Este es el código que te mostré anteriormente.

Así que todos saben lo que es. Así que comencemos por entender qué es AST. Básicamente, este es un código JavaScript normal para tu React. Y si ves cuando selecciono esto, esto en el lado derecho es tu árbol AST. Esto es básicamente un árbol que contiene nodos, diferentes nodos. Así que si hago clic en return, me mostrará una declaración de retorno. Esta cosa en particular es todo un nodo. Luego, si selecciono una función, entonces se resalta la declaración de función. Este es otro nodo. Luego, si hago clic en H1, entonces se resalta, este es otro nodo. Básicamente, tiene múltiples nodos dentro de un árbol.

Y así, comencemos por entender cómo abordaremos la construcción del plugin de Babel. Así que primero que nada, si intentamos hacerlo manualmente, encontraremos HTML, etiqueta HTML, la etiqueta HTML de apertura y dentro de eso veremos si contiene un prop de estilo. Luego, dentro de eso iniciaremos sesión y buscaremos si contiene un alias o incluso si no contiene ningún alias, podría contener una propiedad como un valor de token. Bien, entonces puede ser color de fondo, ¿verdad? y luego dólar rojo. Aún así, queremos convertir dólar rojo en el valor de token apropiado. Bien. Así es como lo abordaremos.

Y así, comencemos. Así que primero que nada, intentaremos obtener la configuración del archivo definido. Por ejemplo, podemos hacer que el usuario cree un archivo custom.config. js. Y luego haremos una operación de lectura de archivo y obtendremos la configuración. No lo estoy mostrando aquí, pero puedes hacerlo. Bien, así que esta es nuestra configuración. contiene alias, BGC, tokens, rojo, bien. Y luego esta es nuestra función principal, el plugin principal de Babel. Así que el plugin de Babel es esencialmente una función y devuelve un objeto de patrón de visitante. Bien, entonces lo que es el patrón de visitante, es como un iterador, y esto seguirá iterando sobre tus nodos de código, diferentes nodos de tu árbol. Y cada vez que paso una propiedad como JSX attribute y es una función dentro de esa función de callback, obtengo la ruta, esta ruta, supongamos, JSX attribute lo que es JSX attribute.

Entonces, lo que definimos en visitor, escribo el tipo de nodo JSX. Así que este es el tipo de nodo, lo que sea que quieras buscar, supongamos que quiero, como, quiero encontrar la ruta de esta etiqueta de elemento de apertura h1. Así que escribiré JSX opening element aquí. Y esa ruta estará en el callback de esa función, obtendré la ruta a ese nodo particular. Bien, así que sí, así que esta ruta punto nodo define este atributo, bien, este es el atributo, y dentro de punto dentro de ese nodo punto nombre, hay otra propiedad llamada nombre, que significa que el valor del atributo. Así que eso quiero decir, lo siento, el nombre del atributo. Así que esto es estilo. Así que hasta aquí podremos encontrar cualquier elemento de apertura JSX, o solo un atributo JSX que contiene un nombre de estilo contiene una propiedad llamada nombre. Bien, así que esto es, encontramos que esto se puede definir aquí, en cualquier lugar llegaremos a esta parte del código, bien, luego dentro de eso necesitaremos verificar si este estilo puede ser definido arriba bien, incluso aquí, un objeto puede ser definido, y eso puede ser pasado como un estilo. Nuestro objetivo no es manejar eso ahora mismo. Así que eso es una cosa separada que puedes realizar como, si defino esto aquí en algún lugar aquí, entonces necesitas verificar si hay algún objeto, entonces tienes que retroceder todas esas cosas no se pueden mostrar en este pequeño tiempo. Así que simplemente consideraré solo este paso. Así que si esto es un contenedor de expresión, así que esto es un contenedor de expresión. Así que verificaré que t punto es esto t te proporciona funciones utilitarias de ayuda. Así que t punto es JSX expression container ruta punto nodo punto valor ruta punto nodo punto valor es esta cosa. Este es nuestro ruta punto nodo. Y esta es nuestra propiedad de valor y estoy verificando que si esa propiedad valor propiedades de tipo JSON expression container, entonces quiero proceder. Así que estamos entrando en esto y aquí estoy verificando ruta punto nodo punto valor punto expresión. Así que si ves selecciona esto, esto es punto expresión y luego contiene una propiedad llamada propiedades, que es un array y contiene múltiples propiedades de objeto. Así que esta propiedad de objeto si ves aquí, cuando paso el ratón sobre la propiedad de objeto 1, resalta bg dos puntos dólar y la propiedad de objeto 2 es c dos puntos dólar uno. Correcto. Así que estos significan la propiedad en un objeto particular. Así que si ves aquí, apagaré esto. Sí. Así que si ves aquí, lo que hago es recorrer estas propiedades y verifico que si config punto aliases contiene la propiedad punto clave punto nombre. Así que si abro esta propiedad, esta es la propiedad punto clave punto nombre. Esto es bg. Así que si eso está disponible en esto, entonces renombraré este valor. Reemplazaré este bg con background color. Y como viene del archivo de configuración que definimos arriba.

Y si property dot value comienza con dólar. Así que si ves esta es la propiedad. Colapsé la clave y este value dot value es dólar rate. Así que si esto comienza con dólar, sé que es un token. Así que lo que haré es verificar de nuevo si este valor de token existe. Lo dividiré y verificaré la segunda parte de eso después del dólar. Veré si eso existe en tokens en mi config. Reemplazaré este valor con esa propiedad ese valor particular. Y eso es todo.

Así que lo que hace todo este código es. Así que bg se convierte en background color. Y tu dólar rate se convierte en el rgb255 que definimos aquí. Y c se convierte en color y dólar 1 se convierte en 4. Así que así es como también puedes construir tus propios Babel plugins personalizados. Tal vez tu utilidad sea diferente. Así que puedes hacer diferentes cosas con la ayuda de Babel plugins.

Y sí, volviendo a las diapositivas. Así que estos son algunos recursos útiles que puedes seguir. Así que para entender más sobre Babel plugin y cómo puedes construir tus propios Babel plugins personalizados, puedes seguir esto. Este es un manual absolutamente útil. Y también puedes ver los Babel docs también. Y esta es la herramienta que estoy usando para construir Babel plugins se llama astexplorer.net. Así que puedes revisarlo. E incluso yo también estoy construyendo un kit de herramientas de desarrollo de Babel plugin. Así que sígueme en Twitter. Estaré compartiendo actualizaciones sobre eso pronto. También puedes consultar los Webpack docs para entender cómo funcionan los bundlers.

Sí, eso es todo por mi charla. Y gracias por unirte. Y espero que hayas aprendido mucho.