Fearless refactors con AST Pablo Ingold, Miguel G. Sanguino Empieza a codificar tus refactors! 10/12/2019

Técnicas de refactor 1. Find-and-replace (en un directorio completo) para modificar ficheros de código.

1. Find-and-replace (en un directorio completo) para modificar ficheros de código. Técnicas de refactor

1. Find-and-replace (en un directorio completo) para modificar ficheros de código. 2. Script con expresiones regulares usando grupos de captura. Técnicas de refactor

1. Find-and-replace (en un directorio completo) para modificar ficheros de código. 2. Script con expresiones regulares usando grupos de captura. Técnicas de refactor

1. Find-and-replace (en un directorio completo) para modificar ficheros de código. 2. Script con expresiones regulares usando grupos de captura. Aquí es donde entran los “codemods” y AST Técnicas de refactor

Codemods

“Código que modifica código” Se suelen usar para: • Actualizar código Fuente manteniendo el “coding style” y convenciones. • Hacer cambios en nuestro código cuando se modifica un API. • Auto-fix del código fuente cuando un paquete público introduce breaking changes. Codemods

Qué es AST?

Abstract syntax tree An abstract syntax tree is a tree representation of the abstract syntactic structure of source code written in a programming language. The syntax is "abstract" in the sense that it does not represent every detail appearing in the real syntax, but rather just the structural or content- related details. - Wikipedia “ “

• Abstract Syntax Trees son estructuras de datos muy utilizadas en compiladores, generalmente como resultado de la fase de análisis de sintaxis. • AST se usa intensamente durante el análisis semántico, donde el compilador verifica el uso correcto de los elementos del programa y el lenguaje. • Frente al código fuente, AST no incluye signos de puntuación y delimitadores no esenciales (llaves, punto y coma, paréntesis, etc.). Abstract syntax tree

Cada nodo del árbol representa una parte del código fuente. Cómo AST parsea el código Lo que escribes Nodos AST Const var name ‘=‘ value ‘;’ Identifier Literal VariableDeclaration

Qué pinta tiene un arbol AST Const var name ‘=‘ value ‘;’ Identifier Literal VariableDeclaration

Consideremos estos 4 ejemplos: Por qué AST y no Regex Todos generan el mismo árbol AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

AST

Todos estos proyectos usan AST y puede que no lo supierais AST en JavaScript

Las reglas de Eslint están escritas con AST para analizar tu código AST en JavaScript

V8 usa Ignition para parsear javascript en AST y compilarlo en bytecode AST en JavaScript https://v8.dev/blog/background-compilation

Babel parsea tu código a AST, hace transformaciones al árbol e imprime el código de vuelta. AST en JavaScript

AST codemods

AST codemods Vamos a usar codemods para parsear nuestro código a AST, hacer transformaciones en el árbol sintáctico y volver a imprimir nuestro código al fichero original sin perder el “code style”

Python: https://pybowler.io/ Java: https://www.vogella.com/tutorials/EclipseJDT/article.html#using-jdt-to-modify-existing-source-code CSS: https://postcss.org/ C++ & C#: https://www.jetbrains.com/resharper-cpp/ SQL: https://www.red-gate.com/products/sql-development/sql-prompt/ Javascript: https://github.com/facebook/jscodeshift AST codemod libraries

jscodeshift

We have tens of thousands of JavaScript modules at Facebook. When an engineer makes breaking API changes we transform all of our JavaScript to new code. To deprecate and remove legacy APIs Felix Kling and I developed a tool called jscodeshift for doing AST-to-AST transforms for JavaScript. - Christoph Nakazawa jscodeshift “ “

jscodeshift es un Toolbox. • Utiliza el parser de babel (babylon), ast-types (libreria de Ben Newman) para crear nodos y recast para el “pretty-printing”. • Es un wrapper de éstas 3 herramientas que nos prove de un API para poder hacer find, filter, map y replace de los nodos de AST. • También nos proporciona un runner/worker para poder transformer miles de ficheros en paralelo. Si no habeis trabajado nunca con AST podeis usar AST Explorer desarrollado por Felix para inspeccionar los nodos AST. jscodeshift

Vocabulario: Nodes: Son la unidad minima del AST, Tambien llamados “AST nodes.” Son objetos simples y no nos proven de ningún método. Node-paths: Wrappers al rededor de los nodos AST que nos da la libreria “ast-types” para poder recorrer el AST. Los nodos por si solos no tienen información del parent o su scope, los node-paths nos dan esa información. Collections: Grupos de cero o más node-paths que nos devuelve el API de jscodeshift cuando hacemos queries soble el AST. Collections contienen Node-paths, Node-paths contienen Nodes, Y los Nodes son de lo que está hecho AST jscodeshift

Usamos Babel y Eslint en el día a día así que tenia sentido elegir uno de estos para nuestros codemods. Eslint lo descartamos antes de empezar, esta pensado para otro tipo de tareas, no imprime de vuelta del AST a código. Pusimos a Babel y jscodeshift a trabajar para saber cual era mejor para lo que queríamos: • Babel transforma código que va a ser ejecutado en un navegador, le da igual el código que genera. Añadimos recast para parsear el código y mantener el “code style”. • Las colecciones de jscodeshift nos permitían recorrer el árbol con más facilidad y con menos código. • Los codemods con Babel se veían más imperativos, con jscodeshift eran más declarativos. Jscodeshift trae todo lo que necesitabamos “out of the box”, nos da herramientas que hacen que nuestros codemods sean más pequeños, más legibles, más reutilizables y eramos más rápidos desarrollandolos. Porqué elegimos jscodeshift sobre Babel o Eslint

js-codemod/template-literals: Casos de uso simples El repo de js-codemod contiene una colección de scripts que podemos utilizar. js-codemod script

js-codemod/object-shorthand : Casos de uso simples El repo de js-codemod contiene una colección de scripts que podemos utilizar. js-codemod script

Breaking changes

En ING tenemos proyecto con lit-element. Tenemos un catalogo de componentes compartido llamado ing-web Hace unos meses, ing-icon introdujo un breaking change para evitar posibles ataques xss: Enfrentandose a breaking changes

Imaginemos que tenemos un proyecto con multiples usos de ing-icon. Quieres actualizar la versión de ing-web, pero para eso hay que actualizar todos los atributos .svg antes. Enfrentandose a breaking changes

Hemos escrito este codemod para que haga todo el trabajo por nosotros Enfrentandose a breaking changes

Hemos escrito este codemod para que haga todo el trabajo por nosotros Enfrentandose a breaking changes Executamos jscodeshift sobre el código fuente y nos devuelve una colección de nodos Importamos el fichero de código y el api de jscodeshift

Hemos escrito este codemod para que haga todo el trabajo por nosotros Enfrentandose a breaking changes Devuelve una colección con todos los tag templates cuyo tag es html y tiene un template literal como argumento

Hemos escrito este codemod para que haga todo el trabajo por nosotros Enfrentandose a breaking changes Buscamos los literals

Hemos escrito este codemod para que haga todo el trabajo por nosotros Enfrentandose a breaking changes Filtramos la colección y nos quedamos solo con los que sean tags

Hemos escrito este codemod para que haga todo el trabajo por nosotros Enfrentandose a breaking changes Con esto hemos identificado todos los nodos que queremos reemplazar

Hemos escrito este codemod para que haga todo el trabajo por nosotros Enfrentandose a breaking changes Creamos un template literal con el contenido del string con original

Hemos escrito este codemod para que haga todo el trabajo por nosotros Enfrentandose a breaking changes Creamos un tag template con el tag ‘tag’ y le pasamos el template literal como argumento

Hemos escrito este codemod para que haga todo el trabajo por nosotros Enfrentandose a breaking changes Creamos un arrow function con el parámetro ‘tag’ y el tag template recién creado como body de la función

Hemos escrito este codemod para que haga todo el trabajo por nosotros Enfrentandose a breaking changes 65 Ejecutamos replaceWith sobre todos los nodos que encontramos pasándole el arrow function recién creado

Enfrentandose a breaking changes Por útimo convertimos AST en código de nuevo Hemos escrito este codemod para que haga todo el trabajo por nosotros

Enfrentandose a breaking changes Fichero original jscodeshift codemod Resultado

Enfrentandose a breaking changes Y eso es todo, hemos adaptado todos nuestros ficheros a un breaking change. Todo lo que hay que hacer es escribir un pequeño script!!

Y eso es todo, hemos adaptado todos nuestros ficheros a un breaking change. Todo lo que hay que hacer es escribir un pequeño script!! Enfrentandose a breaking changes

Manteniendo código legacy

Manteniendo código legacy 2.048 Paquetes Frontend { } 1.947.006 Líneas de código {*.js} 1.436.705 Líneas de javascript Estado actual de las aplicaciones frontend en ING España *node_modules excluido.

Manteniendo código legacy 2.048 Paquetes Frontend { } 1.947.006 Líneas de código {*.js} 1.436.705 Líneas de javascript 100 Paquetes Libraries Estado actual de las aplicaciones frontend en ING España { } 199.964 Líneas de código {*.js} 197.146 Líneas de javascript *node_modules excluido.

Manteniendo código legacy 2.048 Paquetes Frontend { } 1.947.006 Líneas de código {*.js} 1.436.705 Líneas de javascript 100 Paquetes Libraries Estado actual de las aplicaciones frontend en ING España Node y Build tasks 91 Paquetes { } 199.964 Líneas de código { } 340.982 Líneas de código {*.js} 197.146 Líneas de javascript {*.js} 126.923 Líneas de javascript *node_modules excluido.

Manteniendo código legacy Estado actual de las aplicaciones frontend en ING España Core V1 V1 V1 V1 App dependencies V1

Manteniendo código legacy Estado actual de las aplicaciones frontend en ING España Core V2 V1 V2 V1 V2 V1 V1 V1 V1 Legacy App dependencies V1 V2

Manteniendo código legacy Estado actual de las aplicaciones frontend en ING España Core App dependencies V3 V2 V1 V3 V2 V1 V2 V1 V1 V1 V1 Legacy V1 V2 V3 V2 V1 V2 V1 V2 Legacy V3 V3

Manteniendo código legacy Estado actual de las aplicaciones frontend en ING España Core V1 V1 V1 V1 App dependencies V1 V2 V3 V4 V2 V1 V2 V1 V2 Legacy V3 V2 V1 V3 V2 V1 V2 Legacy V3 V3

Manteniendo código legacy Estado actual de las aplicaciones frontend en ING España Core V1 V1 V1 V1 codemod codemod codemod App dependencies V1 V2 V3 V4 V2 V1 V2 V1 V2 Legacy V3 V2 V1 V3 V2 V1 V2 Legacy V3 V3

Manteniendo código legacy V1 Estado actual de las aplicaciones frontend en ING España V2 V3 V4 V4 V4 V4 V4 Core V4 V4 V4 V4 V4 V4 V1 V1 V1 V1 codemod codemod codemod No more legacy App dependencies V2 V1 V2 V1 V2 Legacy V3 V2 V1 V3 V2 V1 V2 Legacy V3 V3

Manteniendo código legacy Ejemplo: uso de i18n Old way New way

Manteniendo código legacy Old way Ejemplo: uso de i18n New way

No content

Links útiles Articles • https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb • https://nec.is/writing/transform-your-codebase-using-codemods/ • https://www.toptal.com/javascript/write-code-to-rewrite-your-code/ • https://itnext.io/ast-for-javascript-developers-3e79aeb08343/ Tools • https://astexplorer.net/ • https://resources.jointjs.com/demos/rappid/apps/Ast/index.html

Gracias @sanguinoide linkedin.com/in/sanguinoide linkedin.com/in/pablo-ingold