Thoughts on Glimmer

This post was originally published on my blog. I have a "Daily Jots" series where I post short, unedited posts every day about random topics. Take a look if you're interested.

I’ve recently gotten into learning Ember.js for a new project I’m wanting to create (my hackathon registration system, Registrar). While doing so, I came across Glimmer, Ember’s new component engine that’s been extracted from the framework. Glimmer’s been around since 2017 (or a bit earlier), but it was kinda revolutionary for its time: it’s a VM written in JavaScript that efficiently parses bytecode that’s compiled from Handlebars templates. There’s a number of large benefits to this:

• Parsing and compiling JavaScript takes a significant amount of time. There’s a reason why the Chrome team recommends that if you’re passing down large amounts of JSON content, you use JSON.parse to process it instead of just including it in your JS. Browsers can run JSON.parse() faster than they can process the raw object in JavaScript because JavaScript is a more syntactically complex language. The same goes for things like React apps. It takes a significant amount of time to process and compile the hundreds or thousands of React.createElement() calls that there might be in a typical React app, which results in a longer First Meaningful Paint. Glimmer gets rid of this entirely by just reading in a raw binary, which doesn’t have to be parsed at all. Zero parse.
• Glimmer also extracts the strings out of the compiled Handlebars and lets the bytecode reference individual string locations in a root string array. It also deduplicates this array, which means that you’re saving size across your entire app.
• Glimmer is actually set up as two different VMs: an append VM and an update VM. Because Glimmer can see what variables are used where in your Handlebars templates, ti can use update bytecode to efficiently update only the DOM attributes that need updating when a dynamic variable has changed, instead of having to re-render the entire application like in React. Again, these were conversations going on in 2017, kinda before the whole “package size” talk became mainstream with Svelte. Glimmer overall just seems pretty amazing.

If you want to learn more about all of this, here’s a few resources I highly recommend checking out:

• Tom Dale’s post on compilers being the new framework
• Tom Dale’s tech talk on how Glimmer works under the hood
• “Glimmer 2, Ember’s new DOM rendering Virtual Machine” by Gavin Joyce