"How to *be* a Compiler" by Mariko Kosaka

Overview

Mariko Kosaka, a JavaScript developer at Google's web developer relations team, presents an unconventional introduction to compiler design through the lens of knitting. Rather than discussing recursion, visitor patterns, or traditional tools like Lex and Yacc, she demystifies compilers by drawing parallels between knitting patterns and code, making the topic accessible to those intimidated by compiler theory.

Key Topics

Knitting as Programming Kosaka establishes that knitting patterns are fundamentally code: both use step-by-step instructions with atomic operations (knit and purl stitches). She demonstrates how to represent knitting logic in JavaScript, manipulating arrays to model stitches. This requires understanding dynamic array resizing—a key insight into why JavaScript is well-suited for knitting visualization compared to languages like C++.

The Path to Creating a Compiler Kosaka's journey began with hobbyist projects (stitch counters, color helpers, image processing for knitwear) and evolved through her experience at School for Poetic Computation and work at Scripto (a TV production text editor). Frustrated by using tools like PEG.js without understanding their internals, she became determined to build a compiler from scratch. She was inspired by John Maeda's "Design by Numbers," a minimalist programming language designed to teach artists the fundamentals of programming.

Compiler Architecture: Four Key Steps Kosaka walks through the actual mechanics of building a compiler that converts Design by Numbers syntax to SVG output:

1. Tokenization (Lexical Analysis): Breaking source code into classified tokens (words vs. numbers). 2. Parsing: Creating an Abstract Syntax Tree (AST)—a map of code structure showing relationships between tokens. 3. Transformation: Converting the AST from source domain (DBN) to target domain (SVG). 4. Code Generation: Outputting executable code (SVG elements).

She demonstrates these steps using Design by Numbers examples (e.g., "paper 100 pen 0 line 0 0 100 50") and reveals that audiences who mentally "compile" these examples perform all four steps in their minds.

Technical Implementation Kosaka built her compiler, named "SVG by Numbers" (sbN), using PEG.js. She also created "64 Stitches," an earlier DSL for knitting patterns with minimal syntax. An interactive online demo at github/kosamari/sbN shows step-by-step tokenization, parsing, AST transformation, and code generation.

The Compiler Perspective on Design A central insight: the compiler doesn't care what the code looks like—it only reads and transforms it. The output (e.g., an SVG line) is independent of the syntax that produced it, making the compiler a universal translator between domains.

Takeaways

Starting Small Is Acceptable: Begin with simple, familiar operations. A tokenizer doesn't need to understand the entire pipeline; it can focus narrowly on dividing and classifying input.

Be a Good Parser (Helpful Communicator): When writing error messages or helping others, avoid saying "that's wrong." Instead, provide pointers (e.g., "try looking up this keyword"). Elm's compiler exemplifies this approach with human-focused error messages.

Context Is Everything: Compilers must transform information from source to target domains. Similarly, software teams benefit from members who understand context-switching—e.g., adapting products for different markets or cultures.

Internationalization in Programming: Kosaka emphasizes that programming itself is English-centric (function, if, while are English keywords). Making programming accessible in other languages—through translation tools or emoji-based languages—addresses an equity issue. She encourages developers to translate resources and build compilers for their native languages.

Learn by Building: The author encourages all developers to build a compiler, citing concrete lessons learned about modularity, communication, and context-awareness. Possible projects range from JavaScript-to-other-language translators to esoteric languages like Piet (color-based code).