Thread by @sseraphini

I will talk about Practical AST (Abstract Syntax Trees) 🌲 at @frontinmga on September 14th.

frontin.maringa.br

https://twitter.com/frontinmga/status/1136689971539173378

To understand what is an AST, you need to know a little bit of how compilers works.
I think the most tiny compiler is this one github.com/jamiebuilds/th… by jamiebuilds.

A compiler has basically three stages:
* Parsing
* Transformation (codemod, @babeljs plugins, optimizations)
* Code Generation

You first do Lexical Analysis that transforms raw strings into tokens
And then you do Syntactic Analysis that will transform these tokens in AST
After you got your AST you can do some transformations on them much like a @babeljs plugin or you can do code generation.

How an AST look like?
On the image with have the AST for the code below:

import { useState } from 'react';

How can I learn and explore javascript AST?
You can use astexplorer.net where you can paste your code, learn about the AST of it, and play with some transformations

Elsewhere is AST used?
* AST as used on IDE to handle refactors
* AST is used by @geteslint to check rules
* @PrettierCode uses AST to pretty print your code
* @typescript and @flowtype uses to provide info for type checking

Elsewhere is AST used?
* @babeljs uses to transform new javascript code into old one
* @GraphQL uses to handle SDL and processing GraphQL query language
* @RelayModern uses AST to optimise all GraphQL queries

@geteslint has a concept called Selectors (eslint.org/docs/developer…) similar to CSS selectors to find nodes inside an AST.

example:

CallExpression[callee.name='setTimeout'][arguments.length!=2]

We also use AST to make codemods (medium.com/@cpojer/effect… by @cpojer) to refactor your code with confidence.
For this you can use jscodeshift (github.com/facebook/jscod…) that uses recast under the hood (github.com/benjamn/recast).

Here are some examples of codemods:
* github.com/sibelius/ast-i… (transform your raw strings to i18n keys and extract all of them to a locale file)
* github.com/sibelius/codem… (transform imports from @reactnative v24 style to @reactnative v25 style)

Here are some examples of codemods:
* github.com/lucasbento/rn-… by @lbentosilva (transform from react-native import to new @ReactNativeComm packages)
* github.com/jongold/import… by @jongold (generic codemod to transform imports)
* github.com/reactjs/react-… by @reactjs

If you want to learn more about Practical uses os AST and how to start using it today to improve your codebase, come watch me on @frontinmga

@frontinmga @threadreaderapp unroll