Magia con Babel Macro

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

La charla cubrirá todas las posibilidades que Babel Macro abre y también dará una visión general del Árbol de Sintaxis Abstracta.

This talk has been presented at React Advanced 2021, check out the latest edition of this React Conference.

FAQ

Los macros de Babel son una forma de aplicar transformaciones de código sin necesidad de instalar muchos complementos en cada transformación. Son importantes porque permiten una configuración más sencilla y son compatibles con herramientas populares como CRA, Gatsby y Next.js.

AST significa Árbol de Sintaxis Abstracta. Es una representación en forma de árbol del código fuente de un programa que transmite la estructura del código fuente, permitiendo a las máquinas entender cómo está estructurado el código.

El AST es usado por los transpiladores para entender y transformar el código fuente. Comprender el AST puede ayudar a los desarrolladores a entender cómo se transpila su código y a realizar transformaciones específicas en él.

Las macros de Babel simplifican la configuración y evitan conflictos que pueden surgir con el orden de los complementos en herramientas como CRA o Gatsby, facilitando así el proceso de desarrollo.

Puedes aprender más sobre programación frontend y tecnologías relacionadas en el canal de YouTube 'Junior Developer' y en el podcast del mismo nombre, donde se discuten diversos temas relacionados con el desarrollo de carrera en tecnología.

Babel es un transpilador que permite escribir código utilizando la versión más actualizada de ECMAScript y transformarlo para que sea compatible con navegadores que no soportan dichas actualizaciones.

Los nodos en un AST representan estructuras como declaraciones, expresiones y bloques de código. Cada nodo describe una parte del código fuente, y los transpiladores utilizan esta información para transformar el código.

Dhrubesh Deb Sharma
Dhrubesh Deb Sharma
20 min
25 Oct, 2021

Comments

Sign in or register to post your comment.
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.
Available in English: Magic with Babel Macro

1. Introducción a los macros de Babel

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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.

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

Vite: Repensando las Herramientas de Frontend
JSNation Live 2021JSNation Live 2021
31 min
Vite: Repensando las Herramientas de Frontend
Top Content
Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Turbopack. ¿Por qué? ¿Cómo? ¿Cuándo? y la Visión...
React Day Berlin 2022React Day Berlin 2022
32 min
Turbopack. ¿Por qué? ¿Cómo? ¿Cuándo? y la Visión...
Top Content
The Talk discusses TurboPack, a successor to Webpack, aiming to create a framework-independent, flexible, and extensible tool for the open-source community. It addresses performance challenges by integrating SWC into Next.js. The challenges with Next.js and Webpack include orchestration issues, backward compatibility constraints, and cache invalidation problems. TurboEngine and TurboPack provide constant performance in incremental builds, leveraging Rust's predictable performance and parallelism. The Talk also covers topics like dependency tracking, task graphs, cache invalidation, lazy asset graphs, and the integration of TurboPack with Next.js. The future plans involve reconfiguring Webpack and TurboEngine, moving computations to the cloud, providing insights into builds, and facilitating migration and integration with JavaScript projects.
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
React Day Berlin 2022React Day Berlin 2022
9 min
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.
El Núcleo de Turbopack Explicado (Codificación en Vivo)
JSNation 2023JSNation 2023
29 min
El Núcleo de Turbopack Explicado (Codificación en Vivo)
Tobias Koppers introduces TurboPack and TurboEngine, addressing the limitations of Webpack. He demonstrates live coding to showcase the optimization of cache validation and build efficiency. The talk covers adding logging and memorization, optimizing execution and tracking dependencies, implementing invalidation and watcher, and storing and deleting invalidators. It also discusses incremental compilation, integration with other monorepo tools, error display, and the possibility of a plugin system for Toolpag. Lastly, the comparison with Bunn's Builder is mentioned.

Workshops on related topic

Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
Workshop
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
JSNation 2023JSNation 2023
44 min
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
WorkshopFree
Ryan Albrecht
Ryan Albrecht
¿Conoces ese molesto error? ¿El que no aparece localmente? Y no importa cuántas veces intentes recrear el entorno, no puedes reproducirlo. Has revisado las migas de pan, leído la traza de pila y ahora estás jugando al detective para unir los tickets de soporte y asegurarte de que sea real.
Únete al desarrollador de Sentry, Ryan Albrecht, en esta charla para aprender cómo los desarrolladores pueden utilizar la Reproducción de Sesiones, una herramienta que proporciona reproducciones de video de las interacciones de los usuarios, para identificar, reproducir y resolver errores y problemas de rendimiento más rápido (sin golpear tu cabeza contra el teclado).