Code Transformation and Linting with Abstract Syntax Trees
00:00:00 - 00:04:28
Introduction
Kent C. Dodds introduces his Code Transformation and Linting course. He also reviews the course agenda and setup for coding exercises.
-
http://kcd.im/asts-workshop-slides
-
https://github.com/kentcdodds/asts-workshop
Abstract Syntax Trees
00:04:29 - 00:13:26
Examples of Abstract Syntax Trees
Kent discusses the importance of Abstract Syntax Trees (AST) by examining examples where they are used: plugins for Babel and ESLint as well as within Codemods.
-
http://slides.com/kentcdodds/a-beginners-guide-to-asts#/
00:13:27 - 00:26:47
Introducing Abstract Syntax Trees
Through visual and online demonstrations, Kent discusses what an Abstract Syntax Tree (AST) is. AST is a visual tree representation of the abstract syntax of programming code. AST's can help aid in learning how programming works by quickly seeing the progression of code through a program.
-
http://astexplorer.net/#/gist/fc5316331bd7d36af6ce9b23c5e5d861/latest
-
http://resources.jointjs.com/demos/rappid/apps/Ast/index.html
00:26:48 - 00:44:56
Exploring ASTs
To demonstrate the power of AST, Kent will review three use cases in the course: building out Babel and ESLint plugins, and then showing how to use AST with Codemods. Using the AST Explorer tool, Kent starts with an ESLint example to show how to traverse AST so that programmers can track stylistic code, logical problems, or domain specific issues to keep bugs from entering the codebase.
ESLint Plugin and AST
00:44:57 - 00:52:28
Challenge 1: Making a Plugin
In this challenge, students write an ESLint plugin.
00:52:29 - 00:56:08
Challenge 1: Solution
Kent walks through the solution to Challenge 1.
00:56:09 - 00:59:26
Challenge 2: Adding New Methods
In this challenge, students write a plugin that integrates new methods and functions that past validation.
00:59:27 - 01:10:43
Challenge 2: Solution
Kent walks through the solution to Challenge 2 and takes questions from students.
01:10:44 - 01:13:33
Challenge 3: Schema Property
In this challenge, students learn about using the JSON schema property.
-
http://json-schema.org/example1.html
01:13:34 - 01:22:33
Challenge 3: Solution
Kent walks through the solution to Challenge 3.
01:22:34 - 01:24:47
Challenge 4: Edge Cases
In this challenge, students learn how to create plugins for edge cases.
01:24:48 - 01:51:41
Challenge 4: Solution
Kent walks through the solution to Challenge 4 and takes questions from students.
01:51:42 - 01:58:49
Challenge 5: Applying Fixes
In this challenge, students learn how to incorporate the ability to fix bad code automatically.
-
http://eslint.org/docs/developer-guide/working-with-rules#applying-fixes
01:58:50 - 02:05:42
Challenge 5: Solution
Kent walks through the solution to Challenge 5.
Babel Plugin and AST
02:05:43 - 02:27:20
Introducing Babel and AST
In showing how to set up working with Abstract Syntax Trees in Babel, Kent demonstrates the differences and similarities between working with ESLint.
02:27:21 - 02:32:44
Challenge 6: Captains Log
In this challenge, students use a snapshot of transpired code.
-
https://github.com/kwelch/babel-plugin-captains-log
02:32:45 - 02:41:07
Challenge 6: Solution
Kent walks through the solution to Challenge 6.
02:41:08 - 02:42:57
Challenge 7: Prefixing
In this challenge, students continue to build out the plugin by attaching a prefix to a function.
02:42:58 - 02:47:26
Challenge 7: Solution
Kent walks through the solution to Challenge 7.
02:47:27 - 02:48:52
Challenge 8: Arrow Function
In this challenge, students add support for arrow function expression.
02:48:53 - 02:55:08
Challenge 8: Solution
Kent walks through the solution to Challenge 8.
02:55:09 - 02:55:40
Challenge 9: Divide Function
In this challenge, students add support for divide function.
02:55:41 - 02:59:51
Challenge 9: Solution
Kent walks through the solution to Challenge 9.
Codemods and AST
02:59:52 - 03:09:34
Introducing Codemods and AST
Kent reviews integrating Codemod, a library used to refactor code which can be partially automated, with AST.
03:09:35 - 03:16:45
Challenge 10: Upgrade Patterns
In this challenge, students update code to swap out jQuery with vanilla JavaScript.
03:16:46 - 03:27:21
Challenge 10: Solution
Kent walks through the solution to Challenge 10.
03:27:22 - 03:31:13
Challenge 11: Swap Out Utilities
In this challenge, students continue to work to swap out more jQuery with vanilla JavaScript functions.
03:31:14 - 03:41:05
Challenge 11: Solution
Kent walks through the solution to Challenge 11.
Wrapping Up Code Transformation and Linting with Abstract Syntax Trees
03:41:06 - 03:41:51
Wrapping Up
Kent wraps up the Wrapping Up Code Transformation and Linting with Abstract Syntax Trees course with a list of resources for further learning and thanks to the class.
