JSFoo 2019

As a modern day developer working in the JavaScript ecosystem in the year 2019, one of the tools that we use and are dependent upon the most are compilers. Not just when we’re bundling our code for deployments, but we use them every time we hit a key on our keyboard to edit our code while using our favourite code editor. Didn’t realise that, did anyone? Compilers today not only are used to build/compile our code, but they play a big role improving the Developer Experience (DX). That said, it becomes really important for us to at least attempt to learn how a JavaScript compiler works.

As Ryan Dahl (creator of NodeJS) said once in his talk:

“You can never understand everything. But, you should continuously push yourself to understand the system.”

So what better way could be to understand a compiler than actually building one. One that’s super-simple, teeny-tiny, and explains all the concepts.

This talk should help the audience understand, to what extent are we as JavaScript developers dependent upon compilers, how are we using them to improve the Developer Experience (DX) today, why we must attempt to learn about compilers and finally, building a compiler itself. Leaving the audience with enough understanding on the topic that they can use to help themselves understand the functioning and source code of tools on which they rely so heavily - like Prettier, ESLint, Babel, PostCSS and more.

Outline

• Why we must attempt to learn about JS compilers?
• Uses of compilers today and at what scale are compilers integrated into our workflow.
• How compilers are improving the Developer Experience (DX) for us.
• Possibilities that come with the understanding of compilers
• Answer to “Can we understand and build compilers? Isn’t that something for computer scientists and geeks?”
• Understanding the structure of JS compilers
• Building a 250loc compiler that compiles ES6 import statement to ES5 CommonJS require statement

Requirements

The talk assumes basic experience with JavaScript and awareness of its ecosystem that includes languages that compile to JavaScript like ES6, TypeScript, CoffeeScript, et al and tools like Babel, Prettier, ESLint and more.

Speaker bio

Yatharth is Design Systems and Frontend Architect at PushOwl. He holds great love for everything computer science. Especially algorithms, compressions, performance and understanding all things “under-the-hood”. When not around computers, find him playing classical piano.

Links

• https://twitter.com/yatharthkhatri
• https://github.com/yatharthk/micro-es6-import-compiler

Slides

https://slides.com/yatharthk/how-to-build-compiler-1#/