All Projects → kentcdodds → Asts Workshop

kentcdodds / Asts Workshop

Licence: mit
Improved productivity 💯 with the practical 🤓 use of the power 💪 of Abstract Syntax Trees 🌳 to lint ⚠️ and transform 🔀 your code

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Asts Workshop

Iceberg
Front-End Boilerplate built with React + Babel + Webpack + SASS
Stars: ✭ 144 (-43.08%)
Mutual labels:  eslint, babel
Lighthouse Badges
🚦Generate badges (shields.io) based on Lighthouse performance.
Stars: ✭ 150 (-40.71%)
Mutual labels:  eslint, babel
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (-42.69%)
Mutual labels:  eslint, babel
React Pages Boilerplate
Deliver react + react-router application to gh-pages
Stars: ✭ 134 (-47.04%)
Mutual labels:  eslint, babel
React Redux Webpack Starter
Learning react
Stars: ✭ 189 (-25.3%)
Mutual labels:  eslint, babel
Book
《现代化前端工程师权威指南》https://guoyongfeng.github.io/book/
Stars: ✭ 141 (-44.27%)
Mutual labels:  eslint, babel
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (-9.49%)
Mutual labels:  eslint, babel
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+545.45%)
Mutual labels:  eslint, babel
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (-34.78%)
Mutual labels:  eslint, babel
React Ast
render abstract syntax trees with react
Stars: ✭ 160 (-36.76%)
Mutual labels:  babel, abstract-syntax-tree
Instapack
All-in-one TypeScript and Sass compiler for web applications! 📦 🚀
Stars: ✭ 131 (-48.22%)
Mutual labels:  eslint, babel
Yarsk
Don't use this, use Create React App
Stars: ✭ 199 (-21.34%)
Mutual labels:  eslint, babel
Barebones
A barebones boilerplate for getting started on a bespoke front end.
Stars: ✭ 127 (-49.8%)
Mutual labels:  eslint, babel
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-44.27%)
Mutual labels:  eslint, babel
Vue Spa Project
vue.js + vuex + vue-router + fetch + element-ui + es6 + webpack + mock 纯前端SPA项目开发实践
Stars: ✭ 118 (-53.36%)
Mutual labels:  eslint, babel
React Itunes Search
🎵Simple web app for itunes search with React
Stars: ✭ 147 (-41.9%)
Mutual labels:  eslint, babel
Advanced React Patterns
This is the latest advanced react patterns workshop
Stars: ✭ 1,899 (+650.59%)
Mutual labels:  workshop, kcd-edu
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (-54.55%)
Mutual labels:  eslint, babel
Express Webpack React Redux Typescript Boilerplate
🎉 A full-stack boilerplate that using express with webpack, react and typescirpt!
Stars: ✭ 156 (-38.34%)
Mutual labels:  eslint, babel
Sharec
📦 Store your configs in one place and share between projects without any pain
Stars: ✭ 198 (-21.74%)
Mutual labels:  eslint, babel

JavaScript ASTs Workshop

Improved productivity 💯 with the practical 🤓 use of the power 💪 of Abstract Syntax Trees 🌳 to lint ⚠️ and transform 🔀 your code

slides-badge chat-badge Build Status Dependencies MIT License All Contributors

PRs Welcome Donate Code of Conduct Watch on GitHub Star on GitHub Tweet

Sponsor

Before You Start

I've used this repo to teach about ASTs in various settings. I've branched the repo for each one of them. Reference those branches based on what you're following along with:

  • Frontend Masters: fem

To checkout that branch run: git checkout <branch name>. From there on you should be good.

You may also want to check out the Changes section in the README below.

Welcome

By coding along with us in this workshop you’ll:

  • Learn what can be done with Abstract Syntax Trees.
  • Explore what tools are available for learning about and developing with ASTs.
  • Discover what ASTs are.
  • Understand why and how to write custom ESLint rules
  • Write custom Babel plugins
  • Learn why and how to write a codemod with Babel

Workshop workflow

The workflow of this workshop is fairly simple and based on Make It Stick methodologies:

  1. Learn a few concepts via demos
  2. Apply the concepts via exercises
  3. Write down three core concepts you learned and provide feedback on the exercise (elaboration and reflection)

Project

System Requirements

  • git v2.10.2 or greater
  • NodeJS v6.9.5 or greater
  • yarn v0.20.3 or greater (or npm v4.2.0 or greater)

All of these must be available in your PATH. To verify things are set up properly, you can run this:

git --version
node --version
yarn --version

If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.

Setup

After you've made sure to have the correct things (and versions) installed, you should be able to just run a few commands to get set up:

git clone https://github.com/kentcdodds/asts-workshop.git
cd asts-workshop
yarn run setup --silent
node scripts/autofill-feedback-email.js [email protected]
git commit -am "ready to go"

Replace [email protected] with your email address

This may take a few minutes. If you get any errors, please read the error output and see whether there's any instructions to fix things and try again. If you're still getting errors or need any help at all, then please file an issue.

If this finishes without issues, great 👏! However, if you have problems, please file an issue on this repo here.

Note on yarn

If you don't have yarn installed and don't want to use it for some reason, you can use npm as well. Instead of yarn start setup, run node ./scripts/install && npm start validate and enjoy waiting (and hopefully things don't break for you). May be a good idea to still run node ./scripts/verify to verify you have the right version of other things too.

Running the workshop

The workshop is set up to place the right exercise in the exercises directory when you run a special script. This way you always know exactly where to go. For example, to start the first ESLint exercise:

npm start exercise.eslint.0

You'll notice that this will create an exercises directory with the source file and tests in it. Your job is to make that test pass! To run the tests, run:

npm start

Tip: You could run npm start in a separate terminal window, and use another one to run the npm start exercise... scripts

On your own

This workshop is intended to be grouped with a lecture, but if you're unable to watch a recording or have a lecture, then you can feel free to run through the workshop yourself. The solutions are all in the other/final directory if you get stuck. Good luck! 🎉 To get a primer on ASTs, you may find this talk recording helpful: ASTs for Beginners

Contributing

If you have any questions, let me know.

If you want to edit/update anything in the exercises, please see (and follow) the contributing guidelines!

Events

If you use this workshop, please make a Pull Request this README with a link to your event.

Changes

The community and tools move fast. Here's a list of changes since I first gave this workshop:

Contributors

Thanks goes to these wonderful people (emoji key):

Kent C. Dodds
Kent C. Dodds

💻 📖 🚇 ⚠️
João Marques
João Marques

🐛
Mircea Staicu
Mircea Staicu

💻 ⚠️
Stanimira Vlaeva
Stanimira Vlaeva

💻
Justin Dorfman
Justin Dorfman

🔍

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].