View
200
Download
1
Embed Size (px)
Citation preview
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