Hermes Hacking: Demystifying JavaScript Engines

I gave the “Hermes Hacking” talk on the (excellent) React Native EU conference. It’s an introduction to how JavaScript engines work, for developers that have no background in parsers, compilers, or interpreters. I briefly cover lexing, parsing, AST interpretation, bytecode generation, garbage collection, with some Hermes-specific topics, and links to articles where you can learn more.

Give it a watch:

Further reading on this topic

Links mentioned for further reading mentioned in the talk:

• AST Explorer — great visualizer for ASTs of different languages, with a working playground of AST transformations for some of them (including Babel, ESLint, and jscodeshift)
• Hermes parser source code
• JavaScript Bytecode VM by Andreas Kling — live coding a JS bytecode VM from scratch. Surprisingly approachable once you understand the core concepts that go into this.
• React Native EU 2019: Tzvetan Mikov - Improving React Native Performance — this talk explains what makes Hermes different from other JS engines
• GenGC and Hades — writeups of how Hermes’s garbage collector works
• Introducing Riptide: WebKit’s Retreating Wavefront Concurrent Garbage Collector by Filip Jerzy Pizło — a deep dive on one of the most advanced garbage collector implementations out there.

A note for my (future) self

It’s a really difficult topic for a conference talk! Interpreters are a whole large (and difficult) branch of software development. To cover its breadth in a a single talk (less than 30 minutes in length), I had to condense each topic to a 2-4 minute gist, and quickly jump between them. I had way over 100 slides and rehearsed them extensively to fit in my time limit. I figured that the best I can do under these circumstances is explain the core concept in abstract, and give links for further reading.

I think it went quite well… but I would not recommend this approach! It would’ve been much easier to tackle a narrower topic and go deeper on it instead. Oh well. One day I’ll learn.