¡Gana Rendimiento! Lleva Tu Tiempo de Ejecución al Tiempo de Compilación

Namaste. Mi nombre es Rohit. Soy un ingeniero fundador en Tria. Estamos trabajando para llevar el mundo a web 3 usando nombres. Puedes seguirme y enviarme un DM en las plataformas sociales, así que échales un vistazo. Y conectémonos.

Un poco más sobre mí. He trabajado en productos como API Weeds, que es una herramienta para observar, probar y documentar APIs, algo así como Postman. Luego construí NativeBase V3, que no salió como planeado, y nos quedamos atascados con muchos problemas de rendimiento. Por lo tanto, Gluestack Style entró en escena. Construimos esto para cambiar completamente cómo podemos manejar el estilo dando la máxima importancia al rendimiento y cómo podemos calcular la mayoría de los elementos esenciales de manera estática. Bueno, para aquellos que no lo saben, NativeBase era una biblioteca de componentes destinada a todas las plataformas Web, React, y iOS y Android. Luego, usando eso, usando Gluestack Style, construimos Gluestack UI, el sucesor de NativeBase, del cual hablaré más adelante. Y ahora estoy trabajando en construir Tria. En Tria, estamos tratando de resolver uno de los problemas más desafiantes de Web 3, que es, estamos transformando la incorporación y la gestión de activos a través de blockchains. Mi principal enfoque aquí es proporcionar a cada usuario una UX y DX inigualables cuando usan nuestra aplicación móvil o SDKs móviles.

Así que mi charla trata sobre cómo puedes ganar rendimiento y llevar un tiempo de ejecución a tiempo de compilación. Así que comencemos. En la agenda de esta charla, tenemos las siguientes cosas. Veremos la tendencia del tiempo de compilación, luego intentaré hacerte entender por qué hay todo este bombo y por qué deberías preocuparte por ello. Luego veremos algunos estudios de caso, donde veremos algunas bibliotecas de front-end que están aprovechando una optimización del tiempo de compilación o el tiempo de compilación en su totalidad. Y después de eso, entenderemos qué es Babel y tocaremos el árbol de sintaxis abstracta. Y después de eso, también haremos un pequeño plugin de Babel. Luego vienen los empaquetadores, intentaremos entender los conceptos básicos y revisaremos un plugin personalizado de Webpack.

Bien. Y sí, así que debes estar viendo mi handle de Twitter en algunas diapositivas. Sabes lo que tienes que hacer. Sígueme. Tengo algunas cosas emocionantes que compartiré en Twitter. Así que no olvides conectarte conmigo. Comencemos por dar sentido a esta tendencia ascendente en las bibliotecas y entender por qué los autores están impulsando las optimizaciones del tiempo de compilación. En los últimos años, hemos visto un número creciente de bibliotecas de front-end que se están moviendo hacia optimizaciones del tiempo de compilación. Esta tendencia subraya el creciente énfasis de la industria tecnológica en el rendimiento y la eficiencia. Y puedes ver esto claramente si estás siguiendo las últimas actualizaciones de React, debes estar al tanto de que React ha anunciado el lanzamiento de un nuevo compilador de React. Este es un desarrollo importante que indica un cambio significativo hacia las optimizaciones del tiempo de compilación y dentro del propio ecosistema de React. Otras bibliotecas como Tamag, UI Glowstack y NativeWin también están priorizando el tiempo de compilación sobre el tiempo de ejecución. Estas bibliotecas están incorporando compiladores en su estructura central y demostrando una clara tendencia de la industria hacia este enfoque. El cambio hacia la optimización del tiempo de compilación está remodelando el panorama del front-end. Y a medida que continuamos adoptando estas arquitecturas modernas, podemos esperar ver más mejoras en el rendimiento y la eficiencia.

A medida que más y más herramientas de front-end están moviendo sus procesos al tiempo de compilación, ahora es el momento para que cada desarrollador entienda de qué se trata todo este bombo y cómo puedes aprovechar este conocimiento en tus proyectos. Además, necesitarás este conocimiento para depurar problemas relacionados con estas soluciones de tiempo de compilación que estarás utilizando. Así que comencemos viendo qué aporta el tiempo de compilación. Primero, mejora significativamente el rendimiento de la aplicación al descargar cálculos pesados y tareas al tiempo de compilación. Reducimos la carga de trabajo durante el tiempo de ejecución, lo que resulta en una UX más fluida y rápida. En segundo lugar, permite una detección de errores más temprana. En tercer lugar, la optimización del tiempo de compilación puede llevar a tamaños de paquete más pequeños.

Tareas como la minificación y tree shaking pueden reducir significativamente el tamaño final del código. Pero tienes mucho poder. También puedes analizar qué parte del código no se utiliza e incluso eliminarla además de la optimización realizada por tus empaquetadores. Por lo tanto, lleva a tiempos de carga más rápidos y menos uso de datos para el usuario final.

Por último, permite un software más predecible. Al hacer tanto como sea posible durante el tiempo de compilación, podemos tener una mejor comprensión de 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 y a medida que intentamos mejorar cada vez más el rendimiento, la eficiencia y la fiabilidad. En el desarrollo de software, esta tendencia solo va a aumentar a partir de aquí.

Ahora, echemos un vistazo a algunos estudios de caso. Así que, primero tenemos GlueStack. Entonces, GlueStack UI v1 utiliza GlueStack style que tiene la capacidad de calcular la mayoría de tus necesidades de estilo en tiempo de compilación usando un plugin de Babel. Esto nos ayudó a mejorar el rendimiento de BISEX a 7x. Como estábamos convirtiendo todo el cálculo de tus tokens de tema o el estilo de modo de color, todas esas cosas en tiempo de compilación. Y aunque ahora v1 está archivado, v2 también proporciona el mismo rendimiento con la ayuda de NativeWin. NativeWin es un paquete que busca llevar el estilo de Tailwind a React Native y se basa mucho en el tiempo de compilación usando un compilador para hacerlo. Y todos amamos Tailwind y por lo tanto NativeWin, también lo amamos.

Sí. Y luego tenemos React Native UStyle. Esto es algo que estoy construyendo en mi tiempo libre últimamente y rápidamente te mostraré algunas de sus características interesantes y cómo funcionan internamente. Así que, este es el sitio web de React Native UStyle y rápidamente iré a la documentación. Entonces, si vas al uso, esto es lo básico que hace, es un reemplazo directo para React Native. Así que lo que sea que puedas importar de React Native, puedes importar de React Native UStyle. Y en segundo lugar, si estabas importando view, puedes simplemente escribir React Native UStyle y ahora tu view tendrá este poder para escribir alias y tokens de tema. Así que aquí, bg es color de fondo y este es un token de tema, luego p es padding y así sucesivamente. Y puedes definir tus tokens y alias como este en un archivo de configuración y esto está completamente tipado. Bien, esta es la primera característica y la segunda característica son los componentes virtuales. Así que, esto es algo que me emociona. Entonces, lo que hace es que puedes definir un componente en tu tema, como my view y puedes proporcionar esto una etiqueta.

Entonces, my view es tag view. Bien. Y puedes proporcionar el estilo base, variantes y todas esas cosas, que puedes proporcionar a cualquier otro componente. Y lo que esto hace es que ahora desde React Native UStyle, puedes importar VC y ese VC tiene my view. Esto está completamente tipado. Puedes escribir lo que quieras y esto funcionará. Así que ahora puedes escribir my view en tu código y después de ejecutar el bundle, después de ejecutar el plugin de Bevel, este código se convertirá en esto.

Bien. Entonces, tu VC y todas esas cosas desaparecerán y tu view será importada. Y cualquier etiqueta que hayas declarado en tu configuración será utilizada desde React Native y el estilo, el estilo apropiado se aplicará aquí. Así que esto es algo que estoy usando en tiempo de compilación y esto me permite manejar todo en tiempo de compilación y no añade ningún código a mi biblioteca React Native UStyle, no añade ningún código al tamaño de tu bundle y utiliza componentes ya existentes de React Native. Y por último, me gustaría mencionar Tamagui también, ya que ha sido el principal competidor en este espacio y personalmente estoy muy impresionado con lo que Nate ha sido capaz de construir. Este es un paquete sólido.

Ahora construyamos una comprensión básica de los términos compilador y transpilers. ¿Qué son y cómo son diferentes? Como puedes ver en la pantalla, los compiladores transforman el código fuente escrito en un lenguaje de programación a otro lenguaje. Básicamente un lenguaje de nivel más bajo que puede ser ejecutado directamente por una computadora y los transpilers por otro lado convierten tu código fuente de un lenguaje de programación a otro de nivel de abstracción similar. Así que, por ejemplo, convierte tu ES6 a ES5 o niveles más bajos, o tal vez tu código TypeScript a código JS. Ahora lo siguiente que necesitamos saber es cómo estos transpilers principalmente entienden o leen nuestra base de código. ¿Hacen una operación de lectura de archivo y luego alguna manipulación de cadenas y todo eso? Bueno, la respuesta es sí y no, ambos. Así que los transpilers principalmente usan una estructura de datos conocida como árbol de sintaxis abstracta o AST.

Este árbol se genera leyendo tu archivo y luego entendiéndolo para crear nodos de este árbol. Un árbol de sintaxis abstracta es una estructura de árbol que representa la estructura gramatical de tu código, enfocándose en las relaciones entre los elementos, no en los detalles de formato. Y es como un mapa de tu código que muestra cómo las expresiones y declaraciones se ajustan juntas. Así que veamos cómo se ve este árbol para un fragmento de código. Así que sí, si puedes ver este es el código de JavaScript normal y en el lado derecho está el AST. Así que si hago clic directamente en JSON, este es todo el árbol que se está creando para estas líneas particulares de código. Y si paso el cursor sobre, como si hago clic en consejos y hago clic en árbol, entonces esto me dirá qué tipo de nodo es esa selección particular. Si selecciono todo esto, esto es como un declarador de variable y luego dentro de esa declaración declarador de variable, otro declarador de variable, y luego en él, expresión de arreglo ya que es un arreglo y luego hay literales de cadena. Así que todos estos datos se están almacenando en este árbol y puedes pasar por este árbol en tu plugin de Babel y luego manipular estos datos muy fácilmente. Así que volvamos a nuestra charla.

Así que ahora vamos a tomar rápidamente una comprensión a alto nivel sobre Babel también. Y lo que hace. OK. Así que Babel es un transpiler de JavaScript gratuito y de código abierto y esto ha sido revolucionario en el desarrollo de la sintaxis de React y JSX como lo conocemos ahora.

Y aquí hay algunos beneficios clave de Babel. Así que usando Babel, puedes aprovechar las características de JavaScript para un código más limpio y eficiente y mantener la compatibilidad con una gama más amplia de navegadores. Y el punto principal es que puedes mover tus tareas computacionalmente pesadas a tu tiempo de construcción y Babel puede ejecutarlas. Así que esto es lo principal de lo que estoy hablando hoy. OK, así que ahora podemos comenzar con la demostración que debes estar esperando y construir nuestro plugin personalizado de Babel.

Sí, así que este es AST Explorer que vemos, usamos para ver los ASTs y cuando haces clic en transformar aquí, obtienes esta vista aquí es tu código original y este es el código transformado y este es tu plugin de Babel en realidad. Y esta es nuevamente la estructura de árbol que usamos anteriormente.

Así que he copiado un código básico de una aplicación React. Lo que quiero hacer es eliminar los registros de consola de aquí y dejar console.errors o console.warn todas esas cosas en el código. Pero quiero eliminar solo los registros. OK, así que para eso escribí este plugin de Babel.

Así que esencialmente los plugins de Babel son una función y devuelve un objeto que tiene una propiedad visitor. Esto es lo principal. Así que este patrón de visitante que llamamos, el visitante puede tomar múltiples tipos de nodos. Así que aquí la expresión de miembro es un tipo de nodo. Si ves. Así que cómo procedo a construir esto. Así que primero seleccionaré toda esta cosa de console.log. OK. Luego veré qué puedo distinguir, cómo puedo distinguir esta cosa de cualquier otro código. Así que para mí debería haber un objeto y ese objeto debería tener una propiedad llamada log y el nombre de ese objeto debería ser console.

Así que iré aquí y veré que esto tiene un callee, como una llamada de función y que eso es de tipo expresión de miembro. Y luego dentro de esa expresión de miembro, veo un objeto que tiene un nombre console y una propiedad que tiene el nombre log. Así que simplemente veré cualquier llamada. Asignaré como un oyente. Esto es como un oyente y escucho todas las expresiones de miembro en este archivo y obtengo la ruta. Y siempre que esta condición se cumpla. Así que lo que esta condición es, solo verifica algunas de las cosas nulas. Y luego finalmente verifica como path dot node dot object dot name es console. Eso significa que la ruta es básicamente el nodo de expresión de miembro. OK. Así que si desplazo aquí. Así que. ¿Dónde se fue? OK.

Así que esta expresión de miembro, este callee es el nodo y luego este path dot node dot object dot object dot name es console. Y de manera similar, verifico el valor de la propiedad y la propiedad se llama log. Entonces eliminaré esto. Eliminaré esta declaración. OK. Así que este path dot parent dot path dot remove hace lo mismo. Entonces, lo que hace es que dado que este path es la expresión de miembro. Así que si ves esta expresión de miembro, el padre de esta es la expresión de llamada. Cuando selecciono la expresión de llamada, todo este console log, se está resaltando. Lo que significa que esta expresión de llamada es lo que queremos eliminar. Por eso voy al path padre. Lo siento. Y por eso voy al path padre y elimino eso. Estoy llamando a la función remove para eliminar ese nodo en particular. Y así es como funcionará todo este plugin wave. Así que cada vez que escribo cualquier console log, si puedes ver en el archivo transformado, no habrá ningún console log, pero el archivo original tiene console log. Así que ese es un simple plugin wave que estarás usando o puedes usar si no lo estás.

Y sí, luego volvamos a la charla. Espero haber podido hacerte entender qué son los plugins wave y cómo puedes construir uno. Ahora sigamos adelante y veamos cómo la cosa que es responsable de ejecutar estos plugins wave que es el trabajo de un empaquetador. Para simplificar las cosas, tomaré el ejemplo de un pack que es un empaquetador muy común. Y comencemos entendiendo los conceptos básicos de cómo funciona y cuáles son los conceptos clave que debes conocer. Así que cada empaquetador tiene un punto de entrada. Imagina tu aplicación como una casa. Bien. Y todo empaquetador necesita un punto de partida como una puerta principal. Este es el punto de entrada o un solo archivo Javascript donde comienza la ejecución de tu aplicación. Así que los empaquetadores como un webpack comienzan a procesar el código desde aquí e identifican todos los módulos conectados.

Así que y estos módulos son como tus habitaciones de tu casa y esencialmente tus archivos Javascript. Así que cada archivo Javascript en tu proyecto se considera un módulo.

Estos módulos pueden contener datos de código o activos como imágenes y los módulos también pueden importar funcionalidades de otros módulos. A medida que el empaquetador procesa estos módulos, construye un gráfico de dependencias. Este gráfico mapea todas las conexiones entre módulos y muestra cómo dependen unos de otros. Y esto permite que tu empaquetador entienda el orden en el que debe procesar cada módulo y empaquetarlos juntos.

Ahora, dado que no todos los empaquetadores entienden todo lo que está escrito en tu código. También se requieren algunos cargadores. Los cargadores son como traductores para tu empaquetador y pueden transformar archivos como imágenes CSS o incluso datos en un formato que el empaquetador pueda entender y usar dentro del paquete de tu aplicación. Luego tenemos las cosas más importantes que son los plugins. Los plugins son herramientas poderosas que extienden la funcionalidad de un empaquetador más allá del empaquetado básico y pueden realizar varias tareas como minificación de código, tree shaking y optimización de imágenes, etc. Y algunos empaquetadores también te brindan la capacidad de configurar su comportamiento para diferentes entornos como desarrollo y producción y habilitar características como mapas de origen o división de código para un mejor rendimiento. Y finalmente, el empaquetador toma todos los módulos procesados y transformados y los empaqueta en uno o más archivos de salida optimizados como un paquete de Javascript o un paquete de CSS. Y esto facilita que el navegador cargue y ejecute tu aplicación.