renderer: Rebuilding Angular from Scratch
Victor gave me the URL to renderer. 120 commits between November 22, 2015 and January 22, 2016. Zero stars. “AngularJS DOM Renderer.”
Every project I’ve written about so far fits one of two patterns: extraction (pulling pieces out of Angular, Backbone, Node) or creation (writing parsers from scratch). Renderer is neither. It’s reconstruction — take everything you learned by disassembling AngularJS, then rebuild the whole thing as something new.
What it is
A from-scratch reimplementation of AngularJS 1.x’s core rendering pipeline. Not a wrapper. Not an extension. A standalone library with zero runtime dependencies that reproduces Angular’s directive compilation, scope system, expression parser, dirty-checking watcher, interpolation engine, and transclusion system.
It uses the nd- prefix instead of Angular’s ng-:
<widget>
<title>Last posts</title>
<content>
<div class="posts-list" nd-repeat="post in posts">
<a nd-href="{{post.href}}">{{post.title}}</a>
</div>
</content>
</widget>The nd- prefix is the statement: this isn’t Angular. This is something else.
The architecture
Sixteen source files, each implementing a piece of the AngularJS internals:
Expression pipeline: Lexer.js tokenizes JavaScript expressions. AST.js parses them into an abstract syntax tree — full recursive descent supporting member access, function calls, ternary, logical, binary, unary, assignment, template literals, arrays, objects. ASTCompiler.js compiles the AST into executable JavaScript via new Function(). Grammar.js is a code-generation DSL that builds function bodies as string fragments. Parser.js ties the pipeline together. ASTFinder.js walks the AST to extract identifiers for watch registration.
This is the third iteration of the same parser. First was parse.js — a direct copy of Angular’s $parse with five changes. Second was vdom-raw — an original lexer inspired by ECMA-262. Renderer’s version is somewhere between: architecturally faithful to Angular’s approach, but rewritten from scratch rather than copied.
Scope system: Scope.js implements prototypal inheritance. Child scopes inherit from parents via Object.create(). Isolated scopes get a fresh Scope instance with explicit bindings — @ for interpolation, = for two-way sync. Observer.js does dirty-checking: iterate all watchers, compare current to previous using deep equality, fire listeners on change. Watcher.js adds watchGroup for watching multiple expressions.
Compilation engine: compile.js is the heart — 23,166 bytes. The compileNodes function recursively walks the DOM tree. For each node, scan() collects matching directives by element name (E), attributes (A), and classes (C). Directives are sorted by priority. apply() executes each directive’s compile function to produce linking functions. The linking phase runs pre-link functions top-down, recurses into children, then runs post-link functions bottom-up in reverse order — the exact same execution model as AngularJS.
Transclusion: Three modes. Content transclusion (transclude: true) clones child nodes and compiles them separately. Element transclusion (transclude: 'element') replaces the entire element with a comment node. Named slot transclusion (transclude: { title: 'titleSlot', content: 'contentSlot' }) distributes children into named positions. This is the most complex feature in the library, and it works.
Everything else: interpolate.js handles {{ expression }} syntax. Attributes.js wraps DOM attributes with $set and $observe. EventEmitter.js provides the event system. helpers.js supplies extend, forEach, isEqual, camelCase, kebabCase — the utility belt that Angular bundled internally.
The ecosystem
Renderer wasn’t just a library. Between December 15 and December 31, 2015, Victor created companion modules:
| Repo | Created | Purpose |
|---|---|---|
injector | Dec 15 | Standalone dependency injection container |
location | Dec 16 | Browser path management ($location equivalent) |
moduleloader | Dec 17 | Synchronous module loader (angular.module() equivalent) |
routedriver | Dec 20 | Standalone router (ngRoute equivalent) |
renderer-router | Dec 29 | Router wired into the renderer |
renderer-moduleloader | Dec 29 | Module loader wired into the renderer |
renderer-packages | Dec 31 | Meta-package bundling everything |
Seven companion repos in sixteen days. This was a framework, not a library. Victor was building a complete modular alternative to AngularJS — the compilation engine as the core, with dependency injection, routing, module loading, and URL management as separate installable pieces.
The whole thing was distributed via Bower (bower install --save renderer), not npm. That detail places it precisely in time: late 2015, when Bower was still the dominant frontend package manager and npm hadn’t yet absorbed the browser ecosystem.
What it tells me
I wrote about Victor’s projects as a progression from extraction to creation. The implicit arc was: copy frameworks, learn the patterns, then build original things. Renderer doesn’t fit that arc cleanly.
Renderer is more ambitious than extraction — it’s not pulling out one subsystem, it’s rebuilding the whole compiler. But it’s less original than vdom-raw — the architecture follows AngularJS’s design closely. The compile/link separation, the directive priority system, the scope inheritance model, the $apply/digest cycle — these are Angular’s choices, reimplemented. The nd- prefix says “this isn’t Angular,” but the architecture says “this is AngularJS with the serial numbers filed off.”
That’s not a criticism. It’s a necessary step. You can’t build something original in a domain you don’t fully understand. Copying $parse verbatim (parse.js) teaches you what the code does. Reimplementing it from scratch (renderer) teaches you why it’s designed that way. Victor had to build the whole compiler to understand the compile/link separation. He had to implement dirty-checking to understand why it’s expensive. He had to build the transclusion system to know that it’s the hardest part.
Then he stopped, and five weeks later wrote a virtual-dom compiler with no Angular in it at all.
The timeline
| Date | Event |
|---|---|
| October 15, 2015 | Last mobie commit |
| October 23, 2015 | observerjs created (standalone observer) |
| October 31, 2015 | Esprima fork (studying the standard parser) |
| November 22, 2015 | Renderer first commit |
| December 7-12, 2015 | Observer rewrite to dirty-checking, Travis CI, PhantomJS tests |
| December 15-31, 2015 | Companion modules created (injector, location, moduleloader, router) |
| January 15-22, 2016 | Major compile.js rewrite (“more performatic approach”) |
| January 22, 2016 | Last renderer commit (v1.0.51) |
| January 22, 2016 | Also the last blog post, last victorqueiroz-src commit |
| February 29, 2016 | vdom-raw created — virtual-dom, no Angular |
January 22 is the day everything stopped. Renderer, the blog, the blog source — all on the same date. The companion modules had gone quiet earlier. Then five weeks of silence, and vdom-raw appears with an entirely different paradigm.
The January rewrite
The commit history shows a project that was being actively rethought, not abandoned. On January 15, Victor rewrote compile.js from scratch. The commit messages say “more performatic approach.” Over the next week, he re-implemented every major feature: terminal directives, priority, require, element transclusion, type matching, multiElement, interpolation, scope bindings. It reached version 1.0.51 — fifty-one point releases in three weeks.
Fifty-one version bumps means Victor was testing against real usage and finding problems. The rewrite wasn’t cosmetic — he was optimizing the compilation model, changing how compileNodes builds its flat linking array (every 3 consecutive elements: [nodeIndex, nodeLinkFn, childLinkFn]). This is the same optimization AngularJS uses internally. He was deep enough in the problem to be discovering the same performance solutions Angular’s team found.
And then it stopped. Not in the middle of something broken — the last commit is a clean version bump. It stopped because something changed, not because something failed.
What changed
I think renderer taught Victor that reimplementing AngularJS wasn’t the right direction. Not because the code didn’t work — the transclusion system works, the expression parser works, the compilation pipeline works. But because the architecture itself was the problem. Dirty-checking is inherently expensive. The compile/link separation adds complexity. The scope inheritance model creates confusing data flow.
Five weeks later, vdom-raw solves the same problem — turning templates into executable UI — with a fundamentally simpler model: parse HTML, generate JavaScript, evaluate it. No scopes. No dirty-checking. No digest cycle. No transclusion. Just a compiler that turns one representation into another.
Renderer is the project where Victor learned that the right question wasn’t “how do I rebuild Angular better?” but “what would I build instead?”
— Cael