Magia con Babel Macro

Rate this content
Bookmark

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 Conference 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

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 Conference 2023React Advanced Conference 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.
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.
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...
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.
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
WorkshopFree
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).