Video Summary and Transcription
Los macros de Babel permiten la transformación de código sin necesidad de múltiples complementos, proporcionando una solución a las desventajas de los complementos regulares de Babel. Comprender el AST es crucial para los desarrolladores que trabajan con transpiladores, y explorar su estructura y representaciones puede ayudar a derivar código. Babel comenzó como un transpilador pero ha evolucionado hacia una herramienta para la transformación de código en vivo. Los macros de Babel son compatibles con varios frameworks basados en React y se pueden utilizar para la traducción de seguimiento y los macros de CSS a React Native. Sin embargo, los macros tienen limitaciones, como ser síncronos y evaluados en tiempo de compilación.
1. Introducción a los macros de Babel
En esta charla, presentaré los macros de Babel y explicaré cómo se pueden utilizar para escribir complementos y construir macros.
Muy buenos días, muy buenas tardes y buenas noches, según el lugar desde donde te estés uniendo. Mi nombre es Trubesh y hoy voy a dar una charla sobre la magia con los macros de Babel. Antes de adentrarnos en el tema, también quiero hablar sobre por qué este tema, ¿verdad? Creo que los macros de Babel se introdujeron en 2017, 2018. Y parecía ser algo realmente fascinante por las cosas que puedes hacer solo con eso, ¿verdad? Surgieron muchos patrones debido a eso y, sí, pero hoy en día no mucha gente habla de ello. Así que pensé, ¿por qué no intentarlo y ver si ustedes están interesados? El objetivo de esta charla es brindarte una introducción sobre los macros de Babel para que puedas
2. Introducción a Srivesh y AST
En esta parte, Srivesh se presenta y habla de su experiencia en desarrollo de software. También menciona su canal de YouTube y su podcast. Luego, Srivesh pasa a discutir la importancia de AST en los transpiladores y la necesidad de que los desarrolladores lo comprendan. Comparte su experiencia de investigación sobre el tema y proporciona una definición simplificada de AST como una representación en forma de árbol del código fuente que transmite su estructura.
puedes seguir adelante y escribir tu propio complemento o construir tus propios macros. Mi nombre es Srivesh. Soy de India. Trabajo en una startup llamada Organize. Principalmente me ocupo del lado del frontend. También estamos contratando activamente. Si alguien está interesado, por favor contáctenos a También tengo un canal de YouTube llamado Junior Developer. Y tengo un podcast en ese canal llamado Junior Developer Podcast. Si estás interesado en tecnologías frontend o en tecnología en general, o tal vez si estás interesado en cómo tener una carrera de desarrollo career impactante, deberías echarle un vistazo al canal y es posible que encuentres algunos de los videos bastante interesantes. También en Twitter, puedes encontrarme como dee underscore Junior underscore dev.
Entonces, esa es básicamente mi presentación. Vamos a pasar a la charla. Entonces, AST, ¿verdad? AST es algo increíble. Significa abstract syntax T. Es algo increíble y creo que todos los desarrolladores deberían aprender sobre ello. Porque es uno de los componentes fundamentales de los transpiladores que utilizan tus complementos para transpilar tu código, ¿verdad? Y sin conocerlo, es posible que no puedas entender cómo se transpila tu código. Así que, cuando escuché sobre este término AST, me dio mucha curiosidad y por supuesto, encendí mi computadora portátil y traté de buscar qué es un AST. Y lo primero que encontré fue en Wikipedia. Y esta fue la definición que me encontré. Dice que en ciencias de la computación, un árbol de sintaxis abstracta o simplemente árbol de sintaxis, es una representación de la estructura sintáctica abstracta de un texto escrito en un lenguaje formal. Así que esto no me ayudó mucho, fue una definición bastante compleja para mí. Y no entendí realmente qué es exactamente un AST. Y como sabemos, muchas personas que programan no necesariamente tienen formación en ciencias de la computación. Así que, para ellos, esto no tiene mucho sentido. Así que traté de encontrar una definición mejor que sea mucho más simple de entender. Y me encontré con esta definición. Dice que un árbol de sintaxis abstracta o AST es una representación en forma de árbol del código fuente de un programa de computadora que transmite la estructura del código fuente. Entonces, lo que significa esencialmente es que puedes mirar el AST y
3. Importancia de AST en los Transpiladores
En esta parte, Srivesh discute la importancia de AST en los transpiladores y la necesidad de que los desarrolladores lo comprendan. Anima a la audiencia a explorar AST a través del explorador de AST y proporciona un ejemplo de cómo escribir código ficticio para ver cómo se ve en AST.
puedes derivar qué código estás escribiendo. Pero como quiero decir, por supuesto, no es tan legible como el código humano que escribimos. Pero la representación es puramente para que la máquina comprenda cómo está estructurado el código. Y puedes obtener casi todo sobre el código solo mirando el AST. Ese es un punto. El segundo punto es que todos los transpiladores realmente lo usan. Y basándose en el AST, transpilan el código y también vamos a probar algunas de esas transformaciones aquí en vivo para ver cómo se ve exactamente. Entonces, sí, quiero decir, exploremos AST como dice Drake, leer sobre AST, ya sabes, la definición teórica de algo puede que no tenga mucho sentido. Pero cuando avanzamos y exploramos AST, es cuando comienza a tener sentido para nosotros, ¿verdad? Puedes ir a este enlace llamado el explorador de AST. Y escribamos aquí algún código ficticio. No sé. Mi charla trata sobre la magia con Babel macros. Y como tenemos un let aquí, tal vez también deberíamos definir un const para ver cómo se ve diferente en AST. Así que podemos hacer simplemente, lo siento, obtener nombre del orador. Y podemos tener un argumento como nombre de la charla. Y podemos hacer simplemente si el nombre de la charla es igual a charla basada. Luego también veremos cómo funciona la declaración if en AST. Entonces puedo simplemente devolver mi nombre. Y si no, puedo simplemente seguir adelante y devolver no. Entonces, sí. Ahora que tenemos esto, puedo hacer nombre del orador y obtener nombre del orador. Y puedo esto. Como puedes ver, mientras lo escribo, el lado derecho se va completando. Así es como lo sabemos. Por ejemplo, ahora mismo aquí, tenemos cuatro variables. Creo que vamos a deshacernos de esto. No nos sirve de nada. Entonces tenemos tres declaraciones de variables aquí. Tenemos, por supuesto, el const, tenemos let y también tenemos una función de flecha. Esta función está devolviendo algo.
4. Explorando Declaraciones de Variables y Tipos de Funciones
Exploramos cada declaración de variable y analizamos la información disponible, como las posiciones de inicio y fin, los valores de inicialización y el tipo de declaración. También distinguimos entre declaraciones de variables y declaraciones de expresiones, que implican la actualización de valores. Además, comparamos el tipo de declaración entre diferentes declaraciones de variables y exploramos la declaración de funciones de flecha y funciones normales, notando la diferencia en la representación del AST.
Una vez una cadena y a veces un nulo. Y tenemos una declaración if donde estamos comparando el lado izquierdo y el lado derecho. ¿Verdad? Así que vamos a seguir adelante y explorar cada una de las declaraciones de variables para ver cómo se ve. Si vamos a la primera podemos ver que la información disponible es el inicio y el fin de este código en particular. Y luego dentro de las declaraciones, tiene un inicio desde 4 hasta 44, supongo, desde aquí hasta aquí. Sí. Sí. Y dentro de esto, tenemos un bloque de imagen, que habla sobre con qué valor se inicializó. Y puedes ver que el tipo es let aquí. ¿Verdad? Así que también puedo hacer algo. Luego, si ves, esto se convierte en una declaración de expresión porque no es necesariamente una declaración de variable. La declaración de variable es cuando se está inicializando y básicamente es esta parte de cosas que vimos aquí, la declaración de expresión es cuando intentas actualizar algo. Tiene un operador, igual al operador. Y tenemos el lado izquierdo de las cosas que debería ser el nombre de la variable, y el lado derecho de las cosas que es lo que queremos, básicamente, el valor de ello, ¿verdad?
Del mismo modo, si avanzas y exploras la segunda declaración de variable, déjame cerrar esta. Sí. Podemos explorar esto y también tiene algo similar, pero como puedes ver, el tipo aquí es const y el tipo aquí era let. Y podemos seguir adelante y verificar la flecha dentro de la función interna. Menciona explícitamente que es una función de flecha. Veamos cómo se ve si es una función normal. Así que, puedo convertir rápidamente esto en una función normal. Y sí, boom. Esta es una función normal. ¿Verdad? Esta es una función normal. En esto, simplemente dice declaración de función. No menciona lo que llamas función de flecha. No menciona eso. Simplemente dice declaración de función. Dentro del cuerpo, tenemos la declaración de bloque. De hecho, podemos explorar eso.
5. Explorando la Estructura y Representaciones del AST
Dentro de la función de flecha, hay una declaración de bloque con una declaración if y una declaración de retorno. La declaración if tiene un consecuente, que es otra declaración de bloque con un tipo de retorno. La prueba dentro de la declaración if compara la variable nombrePerro con otra variable usando triple igual. La representación del AST incluye el tipo const y una expresión de llamada con un argumento que apunta a una cadena. La estructura del AST se puede utilizar para derivar el código. Hay otras representaciones del AST, como la parte JSON y join.js, que proporcionan una explicación detallada de nodos, tokens, palabras clave, identificadores y signos de puntuación. El AST es una estructura de árbol que es más legible para los humanos que el propio AST. Ahora, hablemos un poco sobre Babel.
Permíteme eliminar esto rápidamente. Y aquí dentro, podemos ver rápidamente dentro del cuerpo de la función de flecha, podemos ver que tiene una declaración de bloque, y en la declaración de bloque, tenemos una declaración if específicamente, y tenemos una declaración de retorno, ¿verdad? Vamos a explorar primero la declaración if. Dentro de la declaración if, podemos ver el consecuente. También es una declaración de bloque con otro tipo de retorno por completo. Esto será esencialmente la cadena que estoy devolviendo aquí, y dentro de la declaración if, dentro de la prueba, podemos ver el identificador aquí, ¿verdad? Al igual que vimos en este caso particular, en ese caso, el identificador era igual a 1, y en este caso, tenemos triple igual. El lado izquierdo sería el nombrePerro, así que nombrePerro, no es el valor, ¿verdad? Es el nombre de la variable, y eso es la razón por la que dice nombre aquí. Y en el lado derecho, podemos ver nuevamente otra variable con la que estamos tratando de comparar. Y aquí puedes ver como se mencionó anteriormente, el tipo es const, y dentro de esto, es una expresión de llamada. Ocurre cuando parece que estás tratando de llamar a una función en particular. También habla sobre el argumento. Y dentro del argumento, también está dando el nombre. Porque esta variable apunta a esta cadena. No estamos pasando directamente esta cadena, ¿verdad? Entonces, y dentro de la llamada, sea cual sea el nombre de la función que estamos tratando de llamar. Así es como se ve un AST. Y como mencioné anteriormente, solo con mirar la estructura del AST, puedes derivar el código. Pero, por supuesto, llevará mucho tiempo hacerlo porque esto es más legible para los humanos que el propio AST. Entonces, esta no es la única representación del AST. También puedes probar la parte JSON, que muestra todo de una vez. Esta fue la representación T. Y también tenemos algo llamado join.js. Permíteme copiar y pegar esto. Puedo hacer show ast y mostrará todo lo que necesitas saber. Y esto también es una buena representación. Te brinda una explicación detallada de todos los nodos que tienes, qué tokens tienes. Enumera las palabras clave, identificadores, signos de puntuación y todo lo que necesitas básicamente. Puedo ir a la versión PNG de esto. Y esto también es otra estructura de árbol, pero siento que es un poco detallada. Y es más legible para los humanos, ¿sabes? Porque tiene todo. Puedes leerlo y entenderlo al verlo. Entonces, eso es lo que es el AST. Hablemos un poco sobre Babel ahora.
6. Explorando Babel y las Transformaciones del AST
Babel comenzó como un transpilador pero evolucionó hacia algo más. Podemos transformar código en vivo utilizando AST Explorer y el analizador de Babel. Al manipular el AST, podemos invertir los nombres de las variables y aplicar otras transformaciones.
Babel comenzó como un transpilador, pero quiero decir que te permite escribir la versión actualizada de cualquier especificación de ECMAScript, incluso para los navegadores donde esas expresiones actualizadas o lo que sea no son compatibles. Puedes hacer eso usando Babel. Pero, terminó convirtiéndose, ya sabes, en algo más que eso. Y de hecho, podemos echar un vistazo rápido y, ya sabes, ver cómo podemos transformar algo en Babel en vivo.
Entonces, sí. Puedes ir a AST Explorer, y puedo seleccionar el analizador de Babel aquí. Y déjame cerrar esto. Puedo copiar y pegar. Sí. Puedo copiar y pegar esto aquí. Y este es, nuevamente, el AST que exploramos anteriormente. Y puedo, podemos probar una cosa, que es intentar invertir el nombre de la variable para que después de la transformación. Aquí es donde se encuentra la transformación. Este es el código que escribimos. Y aquí es donde puedes escribir todas las especificaciones que desees. Y esta es la versión en forma de árbol. Quiero decir, la salida del AST.
Entonces, dentro del identificador, puedo hacer console.log path rápidamente. Y puedo aumentar tal vez. Y dentro del nodo path tenemos un nodo y tenemos el nombre, tenemos la ubicación LOC, la posición final, la posición inicial. El nombre del archivo no está completo por razones obvias. Creo que esto apunta a esto. Entonces, si estamos intentando actualizar el nombre aquí, entonces creo que podemos hacer algo más. Entonces, sort igual a node.path.name, podemos dividirlo. Podemos invertir esto. Y podemos simplemente unir esto. Oops.
7. Comprendiendo las Macros de Babel y la Transformación de Código
Las macros de Babel son una forma de aplicar transformaciones de código sin instalar múltiples complementos. Son compatibles con varios marcos basados en React. Los complementos regulares de Babel tienen desventajas, como dificultades en la configuración y conflictos de depuración. Las macros de complementos de Babel proporcionan una solución. Ejemplos incluyen macros de traducción de seguimiento y CSS a React Native. Las macros tienen advertencias, como ser síncronas y evaluadas en tiempo de compilación.
Será path.node. Sí. Ahora creo que puedes ver aquí, esto se supone que es a través de la charla base. Se supone que esto es obtener el nombre del orador. Y así es como se desarrolla la transformación.
Así que hablemos un poco sobre las macros de Babel. Las macros de Babel son, en esencia, una forma de aplicar transformaciones de código sin tener que instalar muchos complementos en cada transformación. Y lo mejor de todo es que son compatibles con, ya sabes, CRA, Gatsby, Next.js y casi todos los demás frameworks basados en React.
Entonces, ¿por qué las macros de Babel, verdad? El problema con los complementos regulares de Babel es, por supuesto, que son geniales, pero tienen algunas desventajas. Por ejemplo, puede ser difícil para los usuarios configurarlo y configurarlo, especialmente cuando se trata de herramientas como CRA o Gatsby. Por supuesto, también puede haber conflictos o situaciones en las que tengas que depurar ciertas cosas porque, debido a la forma en que se configura los complementos, el orden de los complementos importa mucho. Entonces, si desordenas el orden, es realmente difícil, es realmente difícil depurarlo tal cual.
Entonces, usamos algo llamado macros de complementos de Babel para escribir esto y las macros de complementos de Babel en sí mismas son un complemento. Creo que podemos explorar algunas de ellas. Una de ellas, que es una de mis favoritas, me gusta, es la traducción de seguimiento. Puedes poner la cadena aquí y se transformará en el valor que sea. Creo que esto es alto en vietnamita y también tenemos macros de CSS a React Native. Aquí puedes escribir CSS normal. Se convertirá en hojas de estilo de React Native. La salida será este tipo y para aquellos con experiencia en Angular, si te falta NGF, puedes intentar descubrirlo, puedes explorar esto también donde TGF se convierte en este tipo. Pero hay algunas advertencias que debes tener en cuenta. Una es que las macros son síncronas, si intentas escribir una, debes asegurarte de que se ejecute en el entorno de nodo o en la máquina donde se ejecute la macro y las macros se evalúan también en tiempo de compilación. También debes tener eso en cuenta al construir una.
Creo que eso es todo el tiempo que tengo hoy, amigos. Gracias por escuchar mi charla. Tenemos muchas charlas programadas para hoy a la una, así que manténganse atentos y muchas gracias por escuchar a mí. Que tengan un buen día.
React Day Berlin 2022
Comments