Comprendiendo la Compilación de JavaScript

Rate this content
Bookmark

Compilar (o transpilar) JavaScript moderno a versiones anteriores compatibles con ECMAScript ha permitido que la web evolucione increíblemente rápido, al mismo tiempo que nos hace desarrolladores más felices. Pero, ¿cómo funciona el proceso de compilación? ¿Cómo podemos escribir nuestros propios complementos de Babel? ¡Descubrámoslo!

8 min
18 Feb, 2022

Video Summary and Transcription

La charla de hoy explora los conceptos de compilación y transpilación en JavaScript, destacando los tres pasos involucrados: análisis sintáctico, transformación de código y generación de código. Se discute el proceso de recorrer un árbol de sintaxis abstracta, con ejemplos de herramientas como Babel y ESLint que se pueden utilizar para transformaciones de código. Se presentan herramientas y técnicas de transformación de código, como CodeShift y el complemento T-TypeScript, enfatizando el poder de los árboles de sintaxis abstracta y el patrón visitante. El resumen concluye alentando a explorar más sobre refactorización y transformaciones de código utilizando herramientas como Babel, TSLint y astexplorer.net.

Available in English

1. Understanding JavaScript Compilation

Short description:

Hoy vamos a hablar de compilación, o mejor dicho, transpilación. De hecho, cuando hablamos de compilación, nos referimos a ese proceso que toma un código fuente como entrada y produce código binario o bytecode como salida. Toda la fase de compilación se lleva a cabo en tres pasos diferentes. Análisis sintáctico, transformación de código y generación de código.

♪♪♪ Hola a todos y bienvenidos a mi charla, Entendiendo la Compilación de JavaScript. Antes de comenzar, permítanme presentarme brevemente. Soy Michele Riva, Arquitecto Senior en NearForm, autor del libro Real World Next.js, Google Developer Expert y Microsoft MVP.

Hoy vamos a hablar de compilación, o mejor dicho, transpilación. De hecho, cuando hablamos de compilación, nos referimos a ese proceso que toma un código fuente como entrada y produce código binario o bytecode como salida. En JavaScript, es más probable que adoptemos la transpilación. Un ejemplo es el compilador de scripts REST, que toma un código de script REST correcto como entrada y produce código JavaScript correcto como salida. Así que de un código fuente a otro. Podemos hacer lo mismo con Babel, por ejemplo. En ese ejemplo, tenemos el encadenamiento opcional y los operadores nulos, que no son compatibles con versiones antiguas y navegadores antiguos. Queremos hacer que este código sea más compatible, así que tomamos este código fuente, lo alimentamos al compilador de Babel, y obtenemos el siguiente código como salida, que sigue siendo un código fuente válido de JavaScript, que es más compatible con versiones antiguas.

Toda la fase de compilación se lleva a cabo en tres pasos diferentes. Análisis sintáctico, transformación de código y generación de código. Vamos a desglosarlos. El primer paso para el análisis sintáctico es la tokenización. Así que tenemos var foo equals 10, y lo dividimos en tokens separados, var foo equals 10. Luego podemos crear un árbol de análisis. Y aquí podemos ver la estructura de nuestro programa y entender si es correcto o no. Y el siguiente paso sería la creación del árbol de sintaxis abstracta. Es bastante difícil de entender desde estas diapositivas, así que déjenme ir a la otra. Ok, así es como se presenta. Tenemos declaraciones de variables en la parte superior. Y nuevamente, JavaScript puede crear múltiples variables seguidas. En ese caso, creamos solo una variable. Así que terminaremos teniendo solo una declaración de variable. Entonces, var foo equals 10, es la declaración de variable. Podemos desglosarlo en todas las declaraciones de variables que tenemos. En ese caso, solo una. Entonces, declarador de variable, donde declaramos que foo es igual a 10. Podemos desglosar el declarador de variable nuevamente en dos partes diferentes, el identificador, foo, y el literal numérico, que es 10.

2. Understanding Abstract Syntax Tree Traversal

Short description:

Si estuviéramos escribiendo como foo equals true, habríamos escrito el literal booleano en lugar del numérico. Al leer un árbol de sintaxis abstracta, llamamos a este proceso atravesar el árbol. Con Babel, podemos transformar las declaraciones de variables de var a let. El mismo concepto se aplica a otras herramientas como Prettier, ESLint, Babel, GIS, CodeShift. Con ESLint, podemos informar y corregir errores relacionados con literales de plantilla.

Si estuviéramos escribiendo como foo equals true, habríamos escrito el literal booleano en lugar del numérico, o cadenas o lo que sea, solo para que entiendas. Si bien es bastante fácil entender este árbol, supongo que este, es un poco más desafiante de manejar.

Al leer un árbol de sintaxis abstracta, llamamos a este proceso atravesar el árbol. Es bastante complejo en, por supuesto, programas complejos. Pero afortunadamente, muchas herramientas como Babel, ESLint, Pretier, nos proporcionan una interfaz agradable para atravesar el árbol que se llama el patrón visitante.

En ese caso, con Babel, estamos diciendo, ok, querido Babel, por favor, dame todas las declaraciones de variables o los identificadores, todos los literales numéricos, y simplemente los imprimimos en la consola. Una vez que obtenemos, por ejemplo, todas las declaraciones de variables, podemos comenzar a transformarlas. Así que ese es el caso. Decimos, ok, por favor, dame todas las declaraciones de variables dentro de nuestro código. Y si el tipo de variable es var, simplemente transfórmalo en let, lo cual no es sabio. No estoy sugiriendo que lo hagas, pero es un ejemplo muy sencillo. Así que eso nos facilita las cosas. Dicho esto, a la izquierda, tenemos nuestra entrada var foo equals 10. Y a la derecha, tenemos nuestra salida let foo equals 10. Como puedes ver, en la línea dos, tenemos constante y la dejamos intacta porque no es una variable, es una constante. Como puedes ver en el código, no estamos diciendo si es constante, por favor, cámbialo a let. Así que no estamos haciendo eso. Como dije, el mismo concepto se aplica a otras herramientas, como Prettier, ESLint, Babel, GIS, CodeShift. Y los veremos en detalle ahora mismo.

Con ESLint, tenemos un enfoque similar. Decimos, ok, por favor, ESLint, dame todos los literales de plantilla que puedas encontrar en mi código. Y si encuentro uno, puedo informar a ESLint un error, como por favor, no uses literales de plantilla. Y también puedo proporcionar una solución para ello. Pero en ese caso, si tengo una expresión dentro de mis literales de plantilla, puedo decir, ok, soy demasiado perezoso para eso. Así que solo estoy devolviendo, no estoy corrigiendo esto. Pero si no tengo una expresión, puedo decir, ok, así que no tengo expresión. No tengo ninguna expresión. Así que no hay data dinámica dentro de mis literales de plantilla. Así que simplemente cambia los literales por comillas dobles. Eso es lo que estamos haciendo ahora.

3. Code Transformation Tools and Techniques

Short description:

JS CodeShift es una poderosa biblioteca desarrollada y mantenida por Facebook para refactorizaciones a gran escala. Te permite encontrar y reemplazar identificadores, facilitando la refactorización del código. Otra herramienta útil es el complemento T-TypeScript, que permite realizar transformaciones como realizar operaciones en tiempo de compilación en lugar de tiempo de ejecución. Al comprender los árboles de sintaxis abstracta e implementar el patrón visitante, puedes lograr transformaciones de código poderosas. Herramientas como Babel, TSLint, YASLint, Recast, Pretier y el sitio web astexplorer.net pueden ayudarte en este proceso. Gracias a todos por estar aquí y no dudes en contactarme para más discusiones sobre refactorización y transformaciones de código.

Y a la izquierda, la entrada y a la derecha, la salida. JS CodeShift, es otro ejemplo impresionante. Es una biblioteca desarrollada por Facebook y mantenida por Facebook mismo. Y está destinada a refactorizaciones grandes, a gran escala. Y el concepto es bastante similar.

Aquí, estamos diciendo, ok, por favor JS CodeShift, encuentra todos los identificadores. Y si los nombres de los identificadores contienen la cadena del nombre antiguo, reemplázalo con la cadena del nombre nuevo. Este es el caso nuevamente para refactorizaciones a gran escala. Entonces tenemos, por ejemplo, el nombre antiguo factory, que se refactoriza en el nuevo nombre factory.

También hay otro complemento impresionante de TypeScript, que se llama T-TypeScript, que puede ayudarnos a implementar nuevamente transformaciones agradables en el código. Por ejemplo, podemos decir, si hay una operación binaria como uno más uno, por favor, infórmamelo. Y luego podemos decir, ok, esta es una operación binaria. Estamos sumando dos números. Y en lugar de compilar a JavaScript, lo cual necesitaría hacer esa operación en tiempo de ejecución, hazlo en tiempo de compilación. Esa es la salida. Const mysum originalmente era 10 más 20. Y como salida, obtenemos const mysum igual a 30. Esa es la potencia de saber cómo atravesar un árbol de sintaxis abstracta e implementar el patrón visitante.

Y lo mismo se aplica con Babel, TSLint, YASLint, Recast, Pretier, JS CodeShift, y también hay un sitio web increíble, que se llama astexplorer.net que realmente puede ayudarte a depurar tus fórmulas y aprender más sobre cómo atravesar un árbol. Así que realmente quiero agradecerles a todos por estar aquí. Ha sido un verdadero placer hablar en Node Congress, y estos son mis manejadores de redes sociales, así que si quieres comunicarte, estaré encantado de hablar contigo nuevamente sobre cómo refactorizar bases de código y realizar transformaciones de código. Eso es lo que me encanta hacer y hablar. Así que gracias de nuevo. Espero verlos a todos pronto.

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

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Workshop
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
WorkshopFree
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.