Practical Abstract Syntax Trees
In this course, you'll learn the fundamentals of abstract syntax trees, what they are, how they work, and dive into several practical use cases of abstract syntax trees to maintain a JavaScript codebase.
1h 57m18 Video Lessons
Published | Updated
Course Preview
What You Will Learn
Abstract syntax tree fundamentals
JavaScript tools that work with abstract syntax trees
How to parse, traverse, and generate abstract syntax trees
Practical skill set for maintaining large JavaScript codebases
In this course, we'll start with the fundamentals of abstract syntax trees (ASTs) and learn the basic mental models. This general AST knowledge can be translated to almost any tool that works with ASTs.
Why this course?
Understanding and using ASTs unlocks the ability to make sweeping changes in a safe and reliable way in any size codebase.
Course topics
Throughout this course, we'll have converted source code into ASTs, traversed, mutated, and generated ASTs. With these concepts we'll then explore several practical applications including things like code audits (static analysis), code transformations (codemods), and linting.
Module 1
We'll learn the fundamentals of abstract syntax trees.
- What is an AST?
- How to explore an AST
- Examples of JavaScript tools that work with ASTs
Module 2
We'll learn how to work with ASTs.
- How to turn code into an AST
- How to programmatically navigate any AST
- How to leverage TypeScript to prevent runtime errors
Module 3
We'll learn how to statically analyze, or "audit" code to understand the state of the codebase using abstract syntax trees.
- An introduction to an example codebase and refactor
- Understanding the state of the current codebase
- When to use an AST-based tool versus doing something manually
Module 4
We'll learn how to transform, or "codemod" code from one state to another using abstract syntax trees.
- How to make changes to an AST
- How to change ASTs with jscodeshift
- How to test a code transform
Module 5
We'll learn how to write rules, or "lint" code using abstract syntax trees.
- How to create rules for code
- How to create custom rules with ESLint
- How to test a rule
Course Content
Introduction
Understanding Abstract Syntax Trees (AST)
What is an Abstract Syntax Tree? Visualizing Code Like a Compiler
Understand the basics of an AST and how it relates to real-world code
LESSON
5:55 minutes
How to View Abstract Syntax Tree Code With AST Explorer
Looking at an example code snippet and how it relates to the resulting AST
LESSON
4:21 minutes
The Best JavaScript AST Tools - ESLint, Babel, Terser, and More
An overview of the tooling available in the web frontend (JavaScript) ecosystem that rely on ASTs
LESSON
1:46 minutes
Environment setup
A quick overview of the basic environment setup used throughout this course
LESSON
1:03 minutes
Working with Abstract Syntax Trees
How to Generate a JavaScript AST With Babel Plugins
Exploring tools to convert (or parse) JavaScript into a real AST
LESSON
6:29 minutes
Traversing an AST With Babel Traverse
Programmatically traverse an AST and visit arbitrary nodes
LESSON
7:33 minutes
Add Type Safety and Prevent Runtime Errors With AST
See how types can surface runtime errors
LESSON
9:31 minutes
Code Audits
Practical code audits
A practical example of needing to perform a code audit (static analysis) to understand the current state of a codebase
LESSON
2:35 minutes
How to Audit Your Code With AST Programming
Create a custom script to audit a codebase
LESSON
15:29 minutes
How to Add a Component and Update an AST
Introduce a shared Button component to replace all existing button elements
LESSON
2:32 minutes
When to Use Abstract Syntax Tree Tooling to Refactor at Scale
A rough formula to determine when to use AST-based tooling
LESSON
1:43 minutes
Codemods
How to Mutate an AST and Automatically Replace Code Components
Transforming code in place by mutating an AST
LESSON
21:13 minutes
How to Create Codemods Using jscodeshift
Using jscodeshift to make the same code transformations with less boilerplate
LESSON
10:03 minutes
How to Unit Test jscodeshift Transforms With ts-jest
Create tests for jscodeshift transforms for a faster feedback loop
LESSON
5:55 minutes
Linting
How to Ensure Codebase is Up to Date With Linting Rules
Implement a linting rule to prevent the code we just transformed from being reintroduced in the future
LESSON
8:44 minutes
How to Use ESLint to Create AST Rules With Babel Traverse
Use ESLint to create the same linting rule for the code with less boilerplate
LESSON
5:31 minutes
How to Test Custom ESLint Linting Rules With AST
Testing custom ESLint linting rules to verify they work as expected
LESSON
4:31 minutes
Your Instructors
Spencer Miskoviak
Frequently Asked Questions
Who is this course for?
This course is for anybody looking to understand the fundamentals of abstract syntax trees and how to apply them in a practical way to maintain and refactor a JavaScript/TypeScript codebase "at scale."
What if I need help?
You can ask us questions anytime through the community Discord channel or by sending us a message.
