Glimmer: Blazing Fast Rendering for Ember.js, Part 2

Since every mustache expression in our templates is backed by an object with the Dirtyable Tag on it, we know exactly when the UI needs to update. As we mentioned in the VM execution section, the initial render builds an updating program. Prior to updating the UI, we schedule a re-render, which effectively executes the opcodes in the updating program. During this process each opcode validates the tags that it knows about. If the tag is invalid, we know we need to pull compute the new value by pulling it from the Reference and update the UI with it. At the end of this process we are left with the updated UI.

What’s next for Glimmer VM?

As of today, there are quite a few things that we are thinking about with the Glimmer VM, with our primary focus being on how we can reduce the size of not only the templates of an application, but also of the VM itself. Since we are compiling the wire format into an array of bytes and a constants heap, one could imagine that our wire format could change to be more reflective of what actually gets executed by the VM.

Since we have a VM with an evaluation loop, it’s not hard to imagine where we can start, pause, and resume execution of the VM to allow for better alignment of the browser’s rendering pipeline. It also means that there is the potential for doing streaming server-side rendering response for the initial render of the UI.

Standalone Glimmer.js
Finally, we’d like to call out the great work that’s been done by the Ember community to help launch Glimmer.js as a standalone component rendering library. We’re excited that more developers will have the opportunity to experience the speed and productivity of Ember’s components first-hand through Glimmer.

In the near future, we plan to use Glimmer.js components as part of a lightweight version of our Pemberly framework for mobile-only and other lightweight development use cases. Separately, Ember users will be able to use standalone Glimmer components in existing Ember apps, just by installing an addon. You can read about the plans for Glimmer.js on the official Ember blog.

Source link