Downloaded 56 times
Uploaded byBohdan Liashenko
AST for JavaScript developers
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
- 1.
- 2. I am BohdanLiashenko and I work at awesome company @zero-plus-x You can find me at: @bliashenko
- 4.
- 5.
- 6. Plan for today js2flowchart Visualizationlibrary to convert any JavaScript code into beautiful SVG flowchart What is AST? Lexical analysis; Syntax analysis; Babylon; ... Use cases Babel ; JSCodeshift; Prettier; ...
- 7.
- 9.
- 10. How to getAST from plain code?
- 11. Scratch the surfaceof 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) Takesa string of code and splits it into a list of tokens
- 13. Longest Match Rule c c on 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) Takesa list of tokens and turns it into an AST representation
- 15.
- 16. Want to learnmore about compilers?
- 17. the-super-tiny- compiler Compile some lisp-like functioncalls into some C-like function calls. https://github.com/jamiebuilds/the-super- tiny-compiler
- 18. LangSandbox Project to illustratehow to build a programming language https://github.com/ftomassetti/LangSandbox
- 19. Can I justuse a library?
- 20.
- 21. Babylon Babylon is aJavaScript parser used in Babel. Support for JSX, Flow, Typescript.
- 22.
- 23. “Babel is nota ‘tool for having ES6 support’. Well, it is, but it is far not only what it is about.
- 24. JavaScript compiler, specifically asource-to-source compiler, often called a "transpiler". Babel parse transform generate
- 26. Babel plugin … infact, you only need to transform AST
- 27. babel-handbook A guided handbookon 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 codein one click
- 30. jscodeshift & codemods jscodeshiftis 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.
- 32. React updates/migrations Replace PropTypesto prop-types across entire app
- 33.
- 34. Use case: Code formatting.Prettier.
- 35. Make my codegreat again
- 36. IR - Intermediaterepresentation (also known as a Doc), describes how AST nodes can be formatted. Prettier Code AST IR Code
- 37. A prettier printer Bookwhich explains a magic behind code formatting http://homepages.inf.ed.ac.uk/wadler/pape rs/prettier/prettier.pdf
- 38.
- 39.
- 40. Why? Automation! And it wasfun. https://github.com/Bogdan-Lyashenko/js-code-to- svg-flowchart
- 41. Use case ▷ explain/documentyour code by flowcharts ▷ learn others code by visual understanding ▷ create flowcharts for any process simply described by valid JS syntax
- 42. Paste code - downloadSVG. 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...
- 45.
- 46.
- 47. FT - Flowtree ST - ShapesTree How it works? Code AST FT ST SVG
- 48. Try it out Docs& Examples provided
- 49.
- 50.