This document discusses compilers, transpilers, and why understanding them is important. It introduces compiler concepts like lexers, parsers, and code generation. It then demonstrates how to solve real problems by writing compiler transformations, like converting function expressions to arrow functions or lint rules to disallow certain syntax. Overall, it advocates learning the basics of compilers in order to build your own domain-specific languages, tools, and codemods to manipulate code like data.

1. Compilers, Transpilers,
and Why You Should
Care
@amasad
Facebook JS Infra

2. 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

3. 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

4. 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

5. DOMQL
• A satirical language that allows DBAs to become
web developers
• An SQL-like language for querying and
manipulating the DOM

6. 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

7. Lexer

8. Whitespace

9. Keywords

10. Keywords

11. Literal

12. Parser Grammar

13. Select Node

14. Where Node

15. Compiled CSS
Selectors

16. Demo

17. 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

18. Let’s write a lint rule

19. Let’s write a
transformer

20. Babel Transformer

21. One Language to Rule them
All
• JavaScript ES2015+ (No HTML, No CSS, No
nonsense)
• JSX
• Flow
• Inline styles
• React
• React Native

22. 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