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

From transpilation to linting to static code analysis, ASTs are everywhere. Learn about ASTs and the different tools that come equipped with it. Use the power of Abstract Syntax Trees (AST) to understand your code better.

Further Readings / References:

1. https://www.youtube.com/watch?v=CFQBHy8RCpg
2. https://medium.com/basecs/leveling-up-ones-parsing-game-with-asts-d7a6fc2400ff
3. https://blog.sessionstack.com/how-javascript-works-parsing-abstract-syntax-trees-asts-5-tips-on-how-to-minimize-parse-time-abfcf7e8a0c8
4. https://alligator.io/js/traversing-ast

Transcript

1. 5 Minute Introduction to ASTs in JavaScript
2. Hello I'm Saugat Acharya Open Source Enthusiast (@mesaugat) Lead Engineer, Leapfrog Technology
3. ASTs What are Abstract Syntax Trees?
4. "Tree representation of the abstract syntactic structure of source code." — Wikipedia
5. Example 1 + (2 * 3)
6. A "Real" Example function sum(a, b) { return a + b; } sum(5, 10)
7. AST Parsers https://alligator.io/js/traversing-ast
8. AST Object Representation
9. AST JSON Representation
10. Who uses ASTs?
11. Transpilation / Transformation Transforming JSX and React to ES5 using Babel
12. ES6 to ES5 Converting one AST to another AST
13. Linting / Static Code Analysis Applying lint rules using ESLint
14. Formatting Format code using Prettier Works by compiling code to an AST, and then pretty-printing the AST
15. 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
16. Start Exploring ASTs https://astexplorer.net
17. Explore AST Parsers https://astexplorer.net
18. Thank You