Workshop: 1 day
Abstract Syntax Trees for JavaScript Developers
Workshop description
Have you ever wondered what kinds of fruits grow on Abstract Syntax Trees or how to grow them in your own backyard? In this workshop you'll learn all the basic concepts of ASTs and how to work with them. We will cover tools like codemods, ember-template-lint and Babel, and at the end you will have a good understanding of how they work and how you can extend them to meet your needs.
This workshop is designed for JavaScript developers who are comfortable with Node.js and want to understand the tooling layer beneath their linters, build pipelines, and migration scripts.
Introduction to Abstract Syntax Trees
We’ll introduce the concept of an Abstract Syntax Tree by looking at various examples like the JSON tree and HTML Element tree. Participants explore syntax trees interactively using AST Explorer, learning to navigate Handlebars ASTs and identify the node types, attributes, and relationships.
Use cases for Abstract Syntax Trees
Next we’ll explore concrete use cases for Abstract Syntax Trees in real-world engineering: code analysis, compilation and refactoring.
Working with Handlebars ASTs
Participants will apply the learned concepts to do a variety of real-world exercises on Handlebars template files. This includes code analysis & compilation with @glimmer/syntax and refactoring with ember-template-recast. Participants will detect problematic code patterns and implement a way to automatically fix them.
Writing ESLint rules using the JavaScript AST
During the final section we’ll dive into the JavaScript ecosystem and do code analysis exercises by writing various ESLint rules that can be integrated into a CI pipeline.
Your mentor
