-
Notifications
You must be signed in to change notification settings - Fork 12
Add AST workshop to workshop catalog #2859
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| --- | ||
| title: "Abstract Syntax Trees for JavaScript Developers" | ||
| tags: "ember" | ||
| format: "Workshop: 1 day" | ||
| subtext: "Bookable for teams – on-site or remote" | ||
| description: "Have you ever wondered what kinds of fruits grow on Abstract Syntax Trees or how to grow them in your own backyard? In this workshop you'll learn all the basic concepts of ASTs and how to work with them. We will cover tools like codemods, ember-template-lint and Babel, and at the end you will have a good understanding of how they work and how you can extend them to meet your needs. This workshop is designed for JavaScript developers who are comfortable with Node.js and want to understand the tooling layer beneath their linters, build pipelines, and migration scripts." | ||
| introduction: <p>Have you ever wondered what kinds of fruits grow on Abstract Syntax Trees or how to grow them in your own backyard? In this workshop you'll learn all the basic concepts of ASTs and how to work with them. We will cover tools like codemods, ember-template-lint and Babel, and at the end you will have a good understanding of how they work and how you can extend them to meet your needs.</p><p>This workshop is designed for JavaScript developers who are comfortable with Node.js and want to understand the tooling layer beneath their linters, build pipelines, and migration scripts.</p> | ||
| hero: | ||
| color: purple | ||
| image: "/assets/images/workshops/abstract-syntax-trees/abstract-syntax-trees-hero.jpg" | ||
| imageAlt: "Branching tree structures" | ||
| og: | ||
| image: /assets/images/workshops/abstract-syntax-trees/og-image.jpg | ||
| topics: | ||
| - title: Introduction to Abstract Syntax Trees | ||
| text: > | ||
| We’ll introduce the concept of an Abstract Syntax Tree by looking at various examples like the JSON tree and HTML Element tree. Participants explore syntax trees interactively using AST Explorer, learning to navigate Handlebars ASTs and identify the node types, attributes, and relationships. | ||
|
|
||
|
|
||
| - title: Use cases for Abstract Syntax Trees | ||
| text: > | ||
| Next we’ll explore concrete use cases for Abstract Syntax Trees in real-world engineering: code analysis, compilation and refactoring. | ||
|
|
||
|
|
||
| - title: Working with Handlebars ASTs | ||
|
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The workshop still talks about it like this, but I think we have a different name for it nowadays? cc @mansona since I don’t fully recall if the core teams settled on a name for glimmer template syntax.
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I mean that can be a topic that we talk about when giving the workshop 🤷 I mean we still use the handlebars parser, we call it htmlbars internally, the package that has info about the syntax is
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Then let's keep it like this to stay consistent with the current workshop terminology. |
||
| text: > | ||
| Participants will apply the learned concepts to do a variety of real-world exercises on Handlebars template files. This includes code analysis & compilation with @glimmer/syntax and refactoring with ember-template-recast. Participants will detect problematic code patterns and implement a way to automatically fix them. | ||
|
|
||
|
|
||
| - title: Writing ESLint rules using the JavaScript AST | ||
| text: > | ||
| During the final section we’ll dive into the JavaScript ecosystem and do code analysis exercises by writing various ESLint rules that can be integrated into a CI pipeline. | ||
|
|
||
|
|
||
| leads: | ||
| - handle: real_ate | ||
| --- | ||
|
|
||
| <!--break--> | ||
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was originally given as a 1/2 day workshop at EmberConf 2020. There are however a bunch of optional exercises which could stretch it. What do we want to do here? I've never attended nor given the workshop as far as I remember, so I can't really estimate this.
In the future the workshop could also be extended a bit more by adding auto-fixable eslint rules at the end, meaning all concepts are applied to both Handlebars and ESlint.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's make it a 1 day workshop