Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

TAKE CONTROL OF YOUR JAVASCRIPT

Slide 3

Slide 3 text

Webpack Babel Uglifyjs Rollup ESLint Istanbul Ternjs jscodeshift

Slide 4

Slide 4 text

//TODO Write linting rules to enforce your team’s code conventions ESTree- based AST + Visitor Pattern Write your own javascript transpiling code Write powerful “code-mods” to automatically refactor thousands of legacy scripts from ES5 to ES6 ESLint jscodeshift

Slide 5

Slide 5 text

Yonatan Mevorach Front-End Tech-Lead at blog.cowchimp.com github.com/cowchimp @cowchimp

Slide 6

Slide 6 text

Abstract Syntax Tree http://flic.kr/p/gC4EkS cb

Slide 7

Slide 7 text

var foo = 'bar'; Program Variable Declaration Body Kind Declarations Variable Declarator Id Init Identifier Literal

Slide 8

Slide 8 text

{ "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "foo" }, "init": { "type": "Literal", "value": "bar" } } ], "kind": "var" } ] } var foo = 'bar';

Slide 9

Slide 9 text

{ "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "foo" }, "init": { "type": "Literal", "value": "bar" } } ], "kind": "var" } ] } var foo = 'bar';

Slide 10

Slide 10 text

http://flic.kr/p/3xNFue cbd Parse Traverse Manipulate Generate code I/ { O {

Slide 11

Slide 11 text

http://flic.kr/p/3xNFue cbd Parse I/ { O {

Slide 12

Slide 12 text

astexplorer.net

Slide 13

Slide 13 text

http://flic.kr/p/3xNFue cbd Traverse I/ { O {

Slide 14

Slide 14 text

ESLint

Slide 15

Slide 15 text

This code is a simplified version of the eslint-plugin-piggyback plugin: https://github.com/cowchimp/eslint-plugin-piggyback

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

http://flic.kr/p/s8G9qy cb

Slide 21

Slide 21 text

http://flic.kr/p/3xNFue cbd Manipulate I/ { O {

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

http://flic.kr/p/3xNFue cbd Generate code I/ { O {

Slide 27

Slide 27 text

jscodeshift

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

http://fav.me/d6qkcnq

Slide 36

Slide 36 text

github.com/cowchimp/awesome-ast blog.cowchimp.com @cowchimp yonatan@sears.co.il