Compilers, Transpilers, and Why You Should

Care@amasad

Facebook JS Infra

Rich Programmer Food• Steve Yegge’s blogpost http://bit.ly/1ftuLcl

• Learning the basics of compilers isn’t about compilers; it’s about manipulating code

• In the same way that we manipulate data in our code we should be able to manipulate code

• It’s almost like a superpower

Real life situation• A new language feature came out. Say Arrow

Functions in JavaScript

• Your editor doesn’t support it and it’s acting weird

• Your codebase uses old function expressions and you want to be consistent

• You want to disallow new code to use function expressions

• IE7 doesn’t support it

Intro to compilers

• Compiler phases: Lexer, Parser, Optional Analysis, Code Generation (or interpreter in this case)

• I’ll use DOMQL, a toy language I built in 2011 to learn about compilers

DOMQL

• A satirical language that allows DBAs to become web developers

• An SQL-like language for querying and manipulating the DOM

Example Queries

• SELECT DIV FROM BODY WHERE ID=‘container'

• UPDATE (SELECT H1 FROM (SELECT DIV FROM BODY).ALL) SET CLASS='active' WHERE CLASS=‘disabled'

• DELETE A FROM BODY.ALL WHERE HREF LIKE "google.com" AND ROWNUM BETWEEN 5 AND 10

Lexer

Whitespace

Keywords

Keywords

Literal

Parser Grammar

Select Node

Where Node

Compiled CSS Selectors

Demo

Problems Solved• Your editor doesn’t support new syntax. Add it to

the lexer and style it

• Your codebase uses old function expressions. Write a codemod transform

• You want to disallow new code to use function expressions. Write a Lint rule

• IE7 doesn’t support it. Write a compiler transform

Let’s write a lint rule

Let’s write a transformer

Babel Transformer

One Language to Rule them All

• JavaScript ES2015+ (No HTML, No CSS, No nonsense)

• JSX

• Flow

• Inline styles

• React

• React Native

Build your own

• Learn the basics of compilers (superpower)

• Build DSL, Tools, Codemods etc.

• Build your own language

• Think about ways to improve the web