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.

 
4.7 (10 ratings)102 students

1h 57m18 Video Lessons

Published  | Updated

Technologies Covered

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

5 modules18 lessons1h 57m total

Introduction

1 lesson 2m total

Course overview

Course overview

INTRODUCTION

2:27 minutes

Understanding Abstract Syntax Trees (AST)

4 lessons 13m total

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

3 lessons 23m total

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

4 lessons 22m total

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

3 lessons 37m total

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

3 lessons 18m total

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

Profile image for skovy

Spencer Miskoviak

👋 Hi! I'm Spencer, the author of this course. When I first heard about abstract syntax trees I thought they were something reserved for academia. After being faced with many large refactorings and seeking a way to automate it, I stumbled across ASTs. I was surprised by the versatility, practical uses, and everyday tooling that relies on ASTs. I shared one of these practical uses at React Conf in 2019 to remove 4MB of JavaScript.

This course distills the time I spent struggling through documentation in a way I wish I could have learned about abstract syntax trees and their applications in the frontend web ecosystem.

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.

 

newline Pro Subscription

Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

$20/MO

Charged monthly. Free to cancel anytime.

Or

One-Time Purchase

Get lifetime access to this course.

$39$49$10 off

Student Reviews

Hills

a year ago

5.0

Recommend learning about AST's with Spencer. The course has hands-on examples and clearly explained topics.

Practical Abstract Syntax Trees

$39

$49