JavaScript ASTs Workshop

Improved productivity 💯 with the practical 🤓 use of the power 💪 of Abstract Syntax Trees 🌳 to lint ⚠️ and transform 🔀 your code

Before You Start

I've used this repo to teach about ASTs in various settings. I've branched the repo for each one of them. Reference those branches based on what you're following along with:

Frontend Masters: fem

To checkout that branch run: git checkout <branch name>. From there on you should be good.

You may also want to check out the Changes section in the README below.

Welcome

By coding along with us in this workshop you’ll:

Learn what can be done with Abstract Syntax Trees.
Explore what tools are available for learning about and developing with ASTs.
Discover what ASTs are.
Understand why and how to write custom ESLint rules
Write custom Babel plugins
Learn why and how to write a codemod with Babel

Workshop workflow

The workflow of this workshop is fairly simple and based on Make It Stick methodologies:

Learn a few concepts via demos
Apply the concepts via exercises
Write down three core concepts you learned and provide feedback on the exercise (elaboration and reflection)

Project

System Requirements

git v2.10.2 or greater
NodeJS v6.9.5 or greater
yarn v0.20.3 or greater (or npm v4.2.0 or greater)

All of these must be available in your PATH. To verify things are set up properly, you can run this:

git --version
node --version
yarn --version

If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.

Setup

After you've made sure to have the correct things (and versions) installed, you should be able to just run a few commands to get set up:

git clone https://github.com/kentcdodds/asts-workshop.git
cd asts-workshop
yarn run setup --silent
node scripts/autofill-feedback-email.js [email protected]
git commit -am "ready to go"

Replace [email protected] with your email address

This may take a few minutes. If you get any errors, please read the error output and see whether there's any instructions to fix things and try again. If you're still getting errors or need any help at all, then please file an issue.

If this finishes without issues, great 👏! However, if you have problems, please file an issue on this repo here.

Note on yarn

If you don't have yarn installed and don't want to use it for some reason, you can use npm as well. Instead of yarn start setup, run node ./scripts/install && npm start validate and enjoy waiting (and hopefully things don't break for you). May be a good idea to still run node ./scripts/verify to verify you have the right version of other things too.

Running the workshop

The workshop is set up to place the right exercise in the exercises directory when you run a special script. This way you always know exactly where to go. For example, to start the first ESLint exercise:

npm start exercise.eslint.0

You'll notice that this will create an exercises directory with the source file and tests in it. Your job is to make that test pass! To run the tests, run:

npm start

Tip: You could run npm start in a separate terminal window, and use another one to run the npm start exercise... scripts

On your own

This workshop is intended to be grouped with a lecture, but if you're unable to watch a recording or have a lecture, then you can feel free to run through the workshop yourself. The solutions are all in the other/final directory if you get stuck. Good luck! 🎉 To get a primer on ASTs, you may find this talk recording helpful: ASTs for Beginners