Understand Abstract Syntax Trees - ASTs - in Practical and Useful Ways for Frontend Developers

Master abstract syntax trees, ASTs, with Wealthfront Engineer, Spencer Miskoviak. Spencer shares his understanding of ASTs, acquired throughout his career at Wealthfront and previously Handshake and Target, to help up-level your ability to maintain continuously evolving large JavaScript codebases, to parse, traverse, and generate abstract syntax trees and much more. Get started with abstract syntax tree fundamentals and dive deep into several practical use cases of abstract syntax trees in the full course, Practical Abstract Syntax Trees, here: www.newline.co/courses/practi....
As a frontend engineer, it can be difficult to appreciate ASTs because you likely don't use traditional compilers outputting bytecode as such. It is likely that you rely on tooling built on top of abstract syntax trees. Some common examples of frontend build tools or compilers that rely on abstract syntax trees are webpack, babel, and swc. However, ASTs aren't isolated to build tools either. Tools like Prettier (code formatter), ESLint (code linter), or jscodeshift (code transformer) have different purposes but they all rely on abstract syntax trees. It's not necessary to understand abstract syntax trees to be a productive and successful frontend engineer. However, having a basic understanding can boost your ability to maintain and make sweeping changes to any sized codebase in a safe and reliable way.
This course is produced by
ewline; building courses for developers from software professionals. We democratize production-level details that you would have to spend years educating yourself by working at a Silicon Valley company. Get instant access to this course and other newline e-books, guides and courses by subscribing here: www.newline.co/pricing
#newline #AbstractSyntaxTrees #JavaScript
Connect with
ewline Online!
Visit
ewline's Website: www.newline.co/
Find
ewline on Facebook: / newlinedotco
Follow
ewline on Twitter: / fullstackio
Follow
ewline on Instagram: / newlinedotco
Chapters
0:00 Course Introduction
02:30 AST Basics
08:25 Exploring an AST
12:47 JavaScript AST Ecosystem
14:34 Environment Setup
15:38 Generating a JavaScript AST
22:07 Traversing an AST
29:40 Preventing Runtime Errors (with Types)

[@nightwolf4343]

Usually I don't write comments for the videos, but this one is really helpful. So I would like to tell: Thank you for this!

[@newlinedotco]

Glad it was helpful!

[@iyar220]

I'm learning how to build compilers, and I was a bit lost at the subject of context-free grammars and ASTs, thanks for helping to clear that up!

[@ayush612]

Thank you sir for creating this unique video and in such depth ... Thank you and such an awesome presentation and quality!

[@newlinedotco]

You are welcome! Thanks for the kind words. We are glad you enjoyed this.

[@abdullahahmed8468]

really that's amazing and a lot of useful concepts and tools and examples.
Thank you so much.

[@newlinedotco]

Yes, we are glad you liked it!

[@vasilygerrans]

Excellent video! Thank you

[@newlinedotco]

Thanks! We are glad you enjoyed this.

[@ahmedsaka9648]

This is great tutorial

[@dikhyantkrishnadalai6422]

Thank you
It was helpful

[@newlinedotco]

Awesome! We are glad that you enjoyed this.

[@ocsilentwolf7805]

Thank you this will help me in my next project

[@newlinedotco]

Great! So glad to hear this.

[@thatisuday]

Awesome video, keep it up 😄

[@newlinedotco]

Thanks 😁

[@manjurulislamkhan4722]

Brilliant explanation

[@newlinedotco]

Glad you liked it!

[@sambacarlson]

This is amazing.

[@newlinedotco]

Awesome! We are glad this was helpful.

[@user-vf5uw7jb5e]

thank you

[@newlinedotco]

You're welcome!!

[@hamidmouad829]

22:07
const rootNode = parse(code).program.body[0].expression;
function traverse(node) {
if (!node) {
return;
}
if (node.type === "NumericLiteral") {
console.log(node.value);
}
if (node.left) {
traverse(node.left);
}
if (node.right) {
traverse(node.right);
}
}
traverse(rootNode);

[@newlinedotco]

thanks

[@MrFarooqueazam]

wonderful😇

[@newlinedotco]

Thank you! Cheers!

[@solitarywayfarer8693]

How can I generate AST for C source code using C++ language? Please suggest me something.

[@newlinedotco]

This course was produced for JavaScript, but the theory/principles should carry to most other languages/tools. Our Discord server is a great resource to connect with others. You can join us here: discord.com/invite/D88ppSb

[@easycomputerscience69]

Can any one tell AST for java programs

[@newlinedotco]

This course is aimed at JavaScript, but the theory/principles should carry to most other languages/tools. With that focus, I don't have a specific tool recommendation but maybe google/stack overflow could help point you toward the right tools.