Comprendiendo la Compilación de JavaScript

♪♪♪ Hola a todos, y bienvenidos a mi charla, Understanding JavaScript Compilation. 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 sobre la compilación, o debería decir transpilation. 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 transpilation. Un ejemplo es el compilador REST script, que toma el código REST script correcto como entrada y produce el código JavaScript adecuado como salida. Así que de un código fuente a otro. Podemos hacer lo mismo con Babel, por ejemplo. En ese ejemplo, tenemos los operadores de encadenamiento opcional y nullish, que no son compatibles con tiempos de ejecución y navegadores más antiguos. Queremos hacer este código más compatible, así que tomamos este código fuente, alimentamos el compilador Babel, y obtenemos el siguiente código como salida que sigue siendo un código fuente JavaScript válido, que es más compatible con tiempos de ejecución más antiguos.

Toda la fase de compilación se lleva a cabo en tres pasos diferentes. Análisis, transformación de código y generación de código. Vamos a desglosarlos. El paso número uno para el análisis es la tokenización. Así que tenemos var foo equals 10, y lo dividimos en tokens separados, var foo equals 10. Y 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. Así que es bastante difícil de entender a partir de estas diapositivas, así que déjenme pasar a la otra. Bien, así es como se presenta. Tenemos declaraciones de variables en la parte superior. Y nuevamente, JavaScript puede crear múltiples variables en una fila. En ese caso, creamos solo una variable. Así que, terminaremos teniendo solo una declaración de variable. Así que, var foo equals 10, es la declaración de la variable. Podemos desglosarlo en todas las declaraciones de variables que tenemos. En ese caso, solo una. Así que, 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.

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. Aunque 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 recorrer el árbol. Es bastante complejo en, por supuesto, programas complejos. Pero afortunadamente, muchas herramientas como Babel, ESLint, Pretier, nos proporcionan una buena interfaz para recorrer el árbol que se llama el patrón visitante.

En ese caso, con Babel, decimos, está bien, 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, está bien, por favor dame todas las declaraciones de variables dentro de nuestro código. Y si el tipo de la variable es un var, simplemente transfórmalo en un let, lo cual no es sensato. No estoy sugiriendo que hagas eso, pero es un ejemplo muy sencillo. Así que eso hace las cosas más fáciles para nosotros. 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 lo dejamos intacto porque no es una variable, es un, es un const. Así que 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 vamos a verlos en detalle ahora mismo.

Con ESLint, tenemos un enfoque similar. Decimos, está bien, por favor, ESLint, dame todos los literales de plantilla que puedas encontrar en mi código. Y si encuentro uno, puedo reportar 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, está bien, soy demasiado perezoso para eso. Así que simplemente estoy regresando, no estoy arreglando esto. Pero si no tengo una expresión, puedo decir, está bien, así que no tengo expresión. No tengo ninguna expresión. Así que no hay datos dinámicos dentro de mis literales de plantilla. Así que simplemente cambia los literales a comillas dobles. Así que eso es lo que estamos haciendo ahora.

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

Aquí, estamos diciendo, está bien, por favor JS CodeShift, encuentra todos los identificadores. Y si los nombres de los identificadores contienen la cadena de nombre antiguo, reemplázala con la cadena de nombre nuevo. Este es el caso nuevamente para refactorizaciones a gran escala. Así que tenemos como fábrica de nombre antiguo, que se refactoriza en fábrica de nombre nuevo.

También hay otro impresionante plugin 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órmame. Y luego podemos decir, está bien, esta es una operación binaria. Estamos sumando dos números. Y en lugar de compilar a JavaScript, que necesitará hacer esa operación en tiempo de ejecución, hazlo en tiempo de compilación. Así que esa es la salida. Const mysum originalmente era 10 más 20. Y como salida, obtenemos const mysum igual a 30. Ese es el poder de saber cómo recorrer un árbol de sintaxis abstracta e implementar el patrón de visita.

Y lo mismo nuevamente 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 tratar de aprender más sobre cómo recorrer 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 quieren comunicarse, estaría encantado de hablar con ustedes nuevamente sobre cómo refactorizar bases de código y hacer transformaciones de código. Eso es lo que me encanta hacer y hablar. Así que gracias de nuevo.