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.
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: