AST for JavaScript developers
Download as PPTX, PDF3 likes1,916 views
This document discusses Abstract Syntax Trees (AST) for JavaScript developers. It begins with an introduction to ASTs, including what they are and how they are used. It then covers how to generate an AST from code using lexical and syntax analysis. Finally, it discusses several use cases for ASTs, including code transpilation with Babel, code refactoring with JSCodeshift, code formatting with Prettier, and converting code to SVG flowcharts with js2flowchart.
AST for JavaScript developers
- 2. I am Bohdan Liashenko and I work at awesome company @zero-plus-x You can find me at: @bliashenko
- 5. AST
- 6. 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; ...
- 10. How to get AST from plain code?
- 11. 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
- 12. Lexical analyzer (scanner) Takes a string of code and splits it into a list of tokens
- 13. 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
- 14. Syntax analyzer (parser) Takes a list of tokens and turns it into an AST representation
- 16. Want to learn more about compilers?
- 17. the-super-tiny- compiler Compile some lisp-like function calls into some C-like function calls. https://github.com/jamiebuilds/the-super- tiny-compiler
- 18. LangSandbox Project to illustrate how to build a programming language https://github.com/ftomassetti/LangSandbox
- 19. Can I just use a library?
- 21. Babylon Babylon is a JavaScript parser used in Babel. Support for JSX, Flow, Typescript.
- 22. Use case: Code transpiling. Babel.
- 23. “Babel is not a ‘tool for having ES6 support’. Well, it is, but it is far not only what it is about.
- 24. JavaScript compiler, specifically a source-to-source compiler, often called a "transpiler". Babel parse transform generate
- 26. Babel plugin … in fact, you only need to transform AST
- 27. babel-handbook A guided handbook on how to use Babel and how to create plugins for Babel https://github.com/jamiebuilds/babel-handbook
- 28. Use case: Code refactoring. JSCodeshift.
- 29. Clean my code in one click
- 30. 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
- 31. Some code
- 32. React updates/migrations Replace PropTypes to prop-types across entire app
- 34. Use case: Code formatting. Prettier.
- 35. Make my code great again
- 36. IR - Intermediate representation (also known as a Doc), describes how AST nodes can be formatted. Prettier Code AST IR Code
- 37. A prettier printer Book which explains a magic behind code formatting http://homepages.inf.ed.ac.uk/wadler/pape rs/prettier/prettier.pdf
- 38. js2flowchart
- 39. What?
- 40. Why? Automation! And it was fun. https://github.com/Bogdan-Lyashenko/js-code-to- svg-flowchart
- 41. 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
- 42. Paste code - download SVG. Live editor https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html
- 43. ▷ From code: ▷ CLI: js2flowchart yourFile.js ▷ VS Code extension (built by @LucasBadico) Or, you can use it:
- 44. Features ▷ Abstractions levels ▷ Presentation generator ▷ Flow tree modifiers ▷ Colour themes support ▷ etc...
- 46. Tree modifiers
- 47. FT - Flow tree ST - ShapesTree How it works? Code AST FT ST SVG
- 48. Try it out Docs & Examples provided