5-min-introduction-to-ASTs-in-javascript.pdf

Slide 1

Slide 1 text

5 Minute Introduction to ASTs in JavaScript

Slide 2

Slide 2 text

Hello I'm Saugat Acharya Open Source Enthusiast (@mesaugat) Lead Engineer, Leapfrog Technology

Slide 3

Slide 3 text

ASTs What are Abstract Syntax Trees?

Slide 4

Slide 4 text

"Tree representation of the abstract syntactic structure of source code." — Wikipedia

Slide 5

Slide 5 text

Example 1 + (2 * 3)

Slide 6

Slide 6 text

A "Real" Example function sum(a, b) { return a + b; } sum(5, 10)

Slide 7

Slide 7 text

AST Parsers https://alligator.io/js/traversing-ast

Slide 8

Slide 8 text

AST Object Representation

Slide 9

Slide 9 text

AST JSON Representation

Slide 10

Slide 10 text

Who uses ASTs?

Slide 11

Slide 11 text

Transpilation / Transformation Transforming JSX and React to ES5 using Babel

Slide 12

Slide 12 text

ES6 to ES5 Converting one AST to another AST

Slide 13

Slide 13 text

Linting / Static Code Analysis Applying lint rules using ESLint

Slide 14

Slide 14 text

Formatting Format code using Prettier Works by compiling code to an AST, and then pretty-printing the AST

Slide 15

Slide 15 text

What Can You Do with ASTs? Examples 1. Create your own Babel plugin 2. Write custom ESLint rules 3. Generate codemods to refactor code quickly 4. Analyze your code by looking into AST parse times 5. Build your own AST parser