Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AST for JavaScript developers

250 views

Published on

What does Abstract Syntax Tree stand for and what are its use cases. We will explore existing syntax analyzers for building AST, and will get acquainted with some popular JavaScript solutions built on top of AST transformations: codemods, prettier, js2flowchart.

Published in: Software
  • Be the first to comment

AST for JavaScript developers

  1. 1. AST for JavaScript developers
  2. 2. I am Bohdan Liashenko and I work at awesome company @zero-plus-x You can find me at: @bliashenko
  3. 3. Abstract Syntax Tree Wh-why?
  4. 4. AST
  5. 5. Plan for today js2flowchart Visualization library to convert any JavaScript code into beautiful SVG flowchart What is AST? Lexical analysis; Syntax analysis; Babylon; ... Use cases Babel ; JSCodeshift; Prettier; ...
  6. 6. Abstract Syntax Tree Wh-what?
  7. 7. ...simplified example
  8. 8. How to get AST from plain code?
  9. 9. Scratch the surface of compiler HLL Code Lexical analyzer Syntax analyzer Semantic analyzer Intermediate code generator Machine independent code optimiser Code generato r Machine dependent code optimiser 0101 0111 AST
  10. 10. Lexical analyzer (scanner) Takes a string of code and splits it into a list of tokens
  11. 11. Longest Match Rule c c o n s t _ a c o o n c o n s c o n s t c o n s t ... const keyword ... ... Language Dictionary
  12. 12. Syntax analyzer (parser) Takes a list of tokens and turns it into an AST representation
  13. 13. Lexical analyzer Syntax analyzer
  14. 14. Want to learn more about compilers?
  15. 15. the-super-tiny- compiler Compile some lisp-like function calls into some C-like function calls. https://github.com/jamiebuilds/the-super- tiny-compiler
  16. 16. LangSandbox Project to illustrate how to build a programming language https://github.com/ftomassetti/LangSandbox
  17. 17. Can I just use a library?
  18. 18. AST Explorer Choose one https://astexplorer.net/
  19. 19. Babylon Babylon is a JavaScript parser used in Babel. Support for JSX, Flow, Typescript.
  20. 20. Use case: Code transpiling. Babel.
  21. 21. “Babel is not a ‘tool for having ES6 support’. Well, it is, but it is far not only what it is about.
  22. 22. JavaScript compiler, specifically a source-to-source compiler, often called a "transpiler". Babel parse transform generate
  23. 23. Babel plugin … in fact, you only need to transform AST
  24. 24. babel-handbook A guided handbook on how to use Babel and how to create plugins for Babel https://github.com/jamiebuilds/babel-handbook
  25. 25. Use case: Code refactoring. JSCodeshift.
  26. 26. Clean my code in one click
  27. 27. jscodeshift & codemods jscodeshift is a toolkit for running “codemods”. A “codemod” is a code which describes what transformation should be made to AST … boring, show me some code
  28. 28. Some code
  29. 29. React updates/migrations Replace PropTypes to prop-types across entire app
  30. 30. Try yourself https://github.com/facebook/jscod eshift https://github.com/reactjs/react- codemod
  31. 31. Use case: Code formatting. Prettier.
  32. 32. Make my code great again
  33. 33. IR - Intermediate representation (also known as a Doc), describes how AST nodes can be formatted. Prettier Code AST IR Code
  34. 34. A prettier printer Book which explains a magic behind code formatting http://homepages.inf.ed.ac.uk/wadler/pape rs/prettier/prettier.pdf
  35. 35. js2flowchart
  36. 36. What?
  37. 37. Why? Automation! And it was fun. https://github.com/Bogdan-Lyashenko/js-code-to- svg-flowchart
  38. 38. Use case ▷ explain/document your code by flowcharts ▷ learn others code by visual understanding ▷ create flowcharts for any process simply described by valid JS syntax
  39. 39. Paste code - download SVG. Live editor https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html
  40. 40. ▷ From code: ▷ CLI: js2flowchart yourFile.js ▷ VS Code extension (built by @LucasBadico) Or, you can use it:
  41. 41. Features ▷ Abstractions levels ▷ Presentation generator ▷ Flow tree modifiers ▷ Colour themes support ▷ etc...
  42. 42. Abstractions levels
  43. 43. Tree modifiers
  44. 44. FT - Flow tree ST - ShapesTree How it works? Code AST FT ST SVG
  45. 45. Try it out Docs & Examples provided
  46. 46. Thanks! Any questions?
  47. 47. https://github.com/jamiebuilds/the-super-tiny-compiler https://github.com/ftomassetti/LangSandbox https://astexplorer.net/ https://github.com/jamiebuilds/babel-handbook https://github.com/facebook/jscodeshift https://github.com/reactjs/react-codemod http://homepages.inf.ed.ac.uk/wadler/papers/prettier/prettier.pdf https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html https://marketplace.visualstudio.com/items?itemName=lucasbadico.code-flowchart Links

×