emberjs
[Feature] Swappable renderer
Based on how much struggle I've been having with the VM latetly:
- https://github.com/glimmerjs/glimmer-vm/pull/1563
- https://github.com/glimmerjs/glimmer-vm/pull/1547
- https://github.com/emberjs/ember.js/issues/20644
- https://github.com/emberjs/ember.js/issues/20643
- https://github.com/emberjs/ember.js/issues/20642
- https://github.com/emberjs/ember.js/issues/20631
- https://github.com/emberjs/ember.js/issues/20610
- https://github.com/emberjs/ember.js/issues/20535
- https://github.com/emberjs/ember.js/issues/20628
And with the lack of ability for folks to iterate on implementing language improvements: https://github.com/emberjs/rfcs/issues/816 (not due to lack of trying, but due to how the VM is hard to work with / maybe has a lot of baggage)
And with the amount of progressing happening on an alternate renderer:
-
compat todos are done: https://github.com/lifeart/glimmer-next/issues/10 (we'll see tho if it works with ember-modifier, ember-resources, and bigger projects)
-
faster reactivity technique: https://github.com/lifeart/glimmer-next/issues/41 (Update-only VM)
-
looks like this is a list of remaining stuff: https://github.com/lifeart/glimmer-next/issues/3
glimmer-next compared with svelte and ember
https://krausest.github.io/js-framework-benchmark/2024/table_chrome_121.0.6167.85.html#eyJmcmFtZXdvcmtzIjpbImtleWVkL2VtYmVyIiwia2V5ZWQvZ2xpbW1lci0yIiwia2V5ZWQvZ3h0Iiwia2V5ZWQvc3ZlbHRlIl0sImJlbmNobWFya3MiOlsiMDFfcnVuMWsiLCIwMl9yZXBsYWNlMWsiLCIwM191cGRhdGUxMHRoMWtfeDE2IiwiMDRfc2VsZWN0MWsiLCIwNV9zd2FwMWsiLCIwNl9yZW1vdmUtb25lLTFrIiwiMDdfY3JlYXRlMTBrIiwiMDhfY3JlYXRlMWstYWZ0ZXIxa194MiIsIjA5X2NsZWFyMWtfeDgiLCIyMV9yZWFkeS1tZW1vcnkiLCIyMl9ydW4tbWVtb3J5IiwiMjNfdXBkYXRlNS1tZW1vcnkiLCIyNV9ydW4tY2xlYXItbWVtb3J5IiwiMjZfcnVuLTEway1tZW1vcnkiLCIzMV9zdGFydHVwLWNpIiwiMzJfc3RhcnR1cC1idCIsIjMzX3N0YXJ0dXAtbWFpbnRocmVhZGNvc3QiLCIzNF9zdGFydHVwLWludGVyYWN0aXZlIiwiNDFfc2l6ZS11bmNvbXByZXNzZWQiLCI0Ml9zaXplLWNvbXByZXNzZWQiLCI0M19maXJzdC1wYWludCJdLCJkaXNwbGF5TW9kZSI6MX0=
And with the desire to use Starbeam in the future, tho no one is really working on that as I write this
And with how we don't score whell in https://github.com/krausest/js-framework-benchmark (like it or not, this is how we are judged, so we must play the game)
And since we kinda need to migrate away from a pure-JSON representation of the complied templates so that we can explore more expressive syntax (something glimmer-next is already prepared to enable)
And with the ovelwhelming effort it feels like it would take to merge the 3 repos:
- this one: https://github.com/emberjs/ember.js
- glimmer-vm: https://github.com/glimmerjs/glimmer-vm
- glimmer.js: https://github.com/glimmerjs/glimmer.js (which honestly needs to happen anyway)
I've been wondering if we can work out a minimal public/intimate API for completely swapping out glimmer-vm / runtime such that folks can better experiment with improvements to ember.
As a quickly, barely thought out psuedo API, it could look like this, to support what we have today
import { registerRenderer } from '@ember/renderer';
// idk if these are real, but not the point
import { render } from '@glimmer/vm';
import { runtime } from '@glimmer/runtime';
registerRenderer({ render, runtime });
which could allow for someone to easily choose to use glimmer-next without forking ember-source.
import { registerRenderer } from '@ember/renderer';
// idk if these are real, but not the point
import { render, runtime } from 'glimmer-next';
registerRenderer({ render, runtime });
Or could allow someone to work on developing a native renderer for iOS and Android.
import { registerRenderer } from '@ember/renderer';
// idk if these are real, but not the point
import { render, runtime } from 'glimmer-android';
registerRenderer({ render, runtime });
One may consider that we have a lot to do, and we don't have enough steam to work on anything like this (like a native renderer).
I think we have people who currently aren't contributing as much, but would if they were able to, so we could enhance our parallel efforts -- widen the pipe, so to speak
Note as well, this issue could also be a call-for-help to have someone dedicate a bunch of time to improve the existing glimmer-vm.
Starbeam's vanilla renderer would be a good candidate here as well: https://github.com/starbeamjs/starbeam/issues/152
Another use case: Terminal UI renderers -- similar to Ink https://github.com/vadimdemedes/ink (I bet we could use way less memory pressure tho)
Looks like the place to implement this is in setupApplicationRegistry here:
https://github.com/emberjs/ember.js/blob/main/packages/%40ember/-internals/glimmer/lib/setup-registry.ts#L41
registry.register('renderer:-dom', Renderer);
This is called from buildRegistry here:
https://github.com/emberjs/ember.js/blob/main/packages/%40ember/application/index.ts#L226
And that's called from init in the Application's suprer class, Engine, here:
https://github.com/emberjs/ember.js/blob/main/packages/%40ember/engine/index.ts#L335
init(properties: object | undefined) {
super.init(properties);
this.buildRegistry();
}
And we know application init occurs during boot with the Application class we create in app/app.js/ts.
So, we should be able to override the static buildRegistry and setup our own renderer:-dom.
So now it's a question of how much of Renderer is public API / (though, realistically, probably none of it, and we'd discover what should be public API through this process)
woah, look at all the renderers React has: https://github.com/chentsulin/awesome-react-renderer
there is certainly demand for this.