Course overview

Introduction

What is an Abstract Syntax Tree? Visualizing Code Like a Compiler

How to View Abstract Syntax Tree Code With AST Explorer

The Best JavaScript AST Tools - ESLint, Babel, Terser, and More

Environment setup

Understanding Abstract Syntax Trees (AST)

How to Generate a JavaScript AST With Babel Plugins

Traversing an AST With Babel Traverse

Add Type Safety and Prevent Runtime Errors With AST

Working with Abstract Syntax Trees

Practical code audits

How to Audit Your Code With AST Programming

How to Add a Component and Update an AST

When to Use Abstract Syntax Tree Tooling to Refactor at Scale

Code Audits

How to Mutate an AST and Automatically Replace Code Components

How to Create Codemods Using jscodeshift

Codemods

How to Ensure Codebase is Up to Date With Linting Rules

How to Use ESLint to Create AST Rules With Babel Traverse

Linting

node.js

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](https://github.com/facebook/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](https://eslint.org)
- How to test a rule

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.

Practical Abstract Syntax Trees

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

Welcome to this course on Practical Abstract Syntax Trees (ASTs)! 🌳

When I was originally faced with making changes that affected hundreds of files in a codebase I would question whether or not it was critical to make that change. If it was, I would then slowly go through each file and make the update. This would take a long time, and was error prone.

After doing this several times, I learned that ASTs unlock the ability to automate a lot of repetitive, or challenging tasks like this in a more reliable way. In the process I also realized that ASTs have a much broader application than only refactoring.

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.

When seeing or hearing the term "AST", it's tempting to ignore it because it either seems irrelevant to the work you're doing or just sounds way too complex.

After this course, hopefully you'll understand that neither of these statements are true.

First, ASTs are more common than you may think, and are used in many examples of software such as webpack, babel and Prettier.

Second, ASTs can seem complex due to their vocabulary, tooling, or documentation. However, this course will take an 

 approach. That way, we'll first acquire a strong understanding of ASTs, then we'll start to interact with ASTs and finally, we'll start to explore the tooling available for using ASTs in a practical way.

This way, your AST knowledge can be applied to any AST-based tool.

The course will start by covering the fundamentals of ASTs, what they are, and how they work. Once we're comfortable with ASTs, we'll start to explore several practical use cases including:

Many courses build an app along the way, but we'll use a sample app, because this course is aimed at practical uses of ASTs for maintaining and refactoring codebases.

This course is for anyone who has ever needed to maintain and refactor a large codebase.

This course is primarily written in JavaScript and TypeScript and works on a JavaScript codebase. Many of the concepts in the course are not JavaScript or TypeScript specific, but many of the tools will be specific to these languages.

The first lesson will dive into understanding ASTs and how they work.

---
title: Course overview
description: Course overview
role: "INTRODUCTION"
privateVideoUrl: "https://fullstack.wistia.com/medias/v4swv4fpze"
---

## About the course

Welcome to this course on Practical Abstract Syntax Trees (ASTs)! 🌳

## Why ASTs?

When I was originally faced with making changes that affected hundreds of files in a codebase I would question whether or not it was critical to make that change. If it was, I would then slowly go through each file and make the update. This would take a long time, and was error prone.

After doing this several times, I learned that ASTs unlock the ability to automate a lot of repetitive, or challenging tasks like this in a more reliable way. In the process I also realized that ASTs have a much broader application than only refactoring.

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.

## ASTs

When seeing or hearing the term "AST", it's tempting to ignore it because it either seems irrelevant to the work you're doing or just sounds way too complex.

After this course, hopefully you'll understand that neither of these statements are true.

First, ASTs are more common than you may think, and are used in many examples of software such as webpack, babel and Prettier.

Second, ASTs can seem complex due to their vocabulary, tooling, or documentation. However, this course will take an _AST-first_ approach. That way, we'll first acquire a strong understanding of ASTs, then we'll start to interact with ASTs and finally, we'll start to explore the tooling available for using ASTs in a practical way.

This way, your AST knowledge can be applied to any AST-based tool.

## What will we cover?

The course will start by covering the fundamentals of ASTs, what they are, and how they work. Once we're comfortable with ASTs, we'll start to explore several practical use cases including:

-   Code audits (static analysis) - to understand the current state of source code
-   Code transforms (codemods) - to transform source code from one state to another
-   Code linting (rules) - to prevent certain patterns from appearing in source code

Many courses build an app along the way, but we'll use a sample app, because this course is aimed at practical uses of ASTs for maintaining and refactoring codebases.

## Who is this course for?

This course is for anyone who has ever needed to maintain and refactor a large codebase.

This course is primarily written in JavaScript and TypeScript and works on a JavaScript codebase. Many of the concepts in the course are not JavaScript or TypeScript specific, but many of the tools will be specific to these languages.

## Let's get started

The first lesson will dive into understanding ASTs and how they work.


Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Practical Abstract Syntax Trees

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:27)

Course overview

Module 2: Understanding Abstract Syntax Trees (AST)

Lesson 1: (5:55)

What is an Abstract Syntax Tree? Visualizing Code Like a Compiler

Lesson 2: (4:21)

How to View Abstract Syntax Tree Code With AST Explorer

Lesson 3: (1:46)

The Best JavaScript AST Tools - ESLint, Babel, Terser, and More

Lesson 4: (1:03)

Environment setup

Module 3: Working with Abstract Syntax Trees

Lesson 1: (6:29)

How to Generate a JavaScript AST With Babel Plugins

Lesson 2: (7:33)

Traversing an AST With Babel Traverse

Lesson 3: (9:31)

Add Type Safety and Prevent Runtime Errors With AST

Module 4: Code Audits

Lesson 1: (2:35)

Practical code audits

Lesson 2: (15:29)

How to Audit Your Code With AST Programming

Lesson 3: (2:32)

How to Add a Component and Update an AST

Lesson 4: (1:43)

When to Use Abstract Syntax Tree Tooling to Refactor at Scale

Module 5: Codemods

Lesson 1: (21:13)

How to Mutate an AST and Automatically Replace Code Components

Lesson 2: (10:03)

How to Create Codemods Using jscodeshift

Module 6: Linting

Lesson 1: (8:44)

How to Ensure Codebase is Up to Date With Linting Rules

Lesson 2: (5:31)

How to Use ESLint to Create AST Rules With Babel Traverse

Course overview