3 ms·

OK, my confusion is why it's called a "VM": Glimmer is a flexible, low-level rendering pipeline for building a "live" DOM from Handlebars templates that can su

by chubot 10y ago

OK, my confusion is why it's called a "VM": Glimmer is a flexible, low-level rendering pipeline for building a "live" DOM from Handlebars templates that can subsequently be updated cheaply when data changes. This sounds like something written on top of a JavaScript VM, not a VM itself. Is it implemented with VM-like techniques? What does the instruction set look like?

whichdan 10y ago
https://github.com/glimmerjs/glimmer-vm/tree/master/packages/%40glimmer https://github.com/glimmerjs/glimmer-vm/tree/master/packages...
steveklabnik 10y ago
> This sounds like something written on top of a JavaScript VM, not a VM itself. You can write VMs in languages that are implemented with a VM. > Is it implemented with VM-like techniques? More than that, it is literally a virtual machine. > What does the instruction set look like? IIRC, it's a stack-based VM. Here's the opcodes, I believe: https://github.com/glimmerjs/glimmer-vm/blob/master/packages/%40glimmer/wire-format/lib/opcodes.ts https://github.com/glimmerjs/glimmer-vm/blob/master/packages... (I have mostly a high-level understanding on this, after talking to lots of people and watching presentations; I don't hack on Glimmer myself.)
- abecedarius 10y ago
  Thanks. Up to this point I too was scratching my head wondering what the fuss was about -- if this was a JavaScript-in-Typescript VM, or what. It's a custom virtual machine for a domain-specific language for filling templates, right?
  - steveklabnik 10y ago
    Yes, this is a good succinct way to put it. It compiles handlebars templates to its VM, and then as the machine executes, it updates the DOM appropriately. You can think of the Glimmer VM as a VM interface to the DOM rather than the direct DOM interface, and handlebars templates as programs that compile to that VM.
- eric_the_read 10y ago
  I like that one of the opcodes is "FixThisBeforeWeMerge". Looking this over, I can see why my initial reaction of "why aren't you using WebAssembly?" was facile; this really is a VM optimized for templating languages. I'm reminded of the Bad Old Days when I was a ClearCase admin; we ended up building what my boss at the time called a Revision Control VM on top of it, so that our developers never really learned ClearCase per se; instead, they learned our system that happened to use CC under the hood. Since then, I've treated the term "VM" with a looser interpretation than usual; clearly, I should have applied that here (though it is, strictly speaking, a VM in the classical sense as well).
- chubot 10y ago
  OK so I guess the VM outputs a virtual DOM tree from a handlebars template, rather than text? I don't really see why you can't do that with a simple tree interpreter, but sure why not. I've implemented template languages in multiple languages. I've also thought of compiling different languages to the same VM with string instructions (IIRC the old Cheetah template language compiles to Python bytecode). I sort of see where this is going but the docs weren't particularly clear to me. If anything it sounds like there are a lot of other components besides the VM, which weren't really described in the blog post, and I couldn't find any links.
  - steveklabnik 10y ago
    > so I guess the VM outputs a virtual DOM tree from a handlebars template, rather than text? As the article mentions, this technique is distinct from virtual DOM. The article is light on what specifically it does though. From the article: > I'll describe the details of this approach in another post, but the short version is that we compile templates into "append-time" opcodes for a bytecode VM. The process of running the "append-time program" produces the "updating program", which is then run every time the inputs change. anyway. > If anything it sounds like there are a lot of other components besides the VM, which weren't really described in the blog post, and I couldn't find any links. There's a little bit; that is, this post is specifically about Glimmer's VM; Glimmer itself has a few more things, just like React is more than just a virtual DOM implementation. In Glimmer's case, there's glimmer-component, which lets you write web components, and glimmer-application, which lets your register your components into a cohesive whole, etc. TL;DR: Glimmer as a project is similar to react. It has some significant and novel implementation details that keep it speedy.
    - chubot 10y ago
      OK thanks, that helps. It sounds potentially interesting but in its early stages.
      - steveklabnik 10y ago
        No problem! It is and it isn't; that is, all of this is extracted from Ember, so it has had a lot more maturity and testing than you might think at first. Not _super_ so as it's still relatively new, but deployed in lots of big places.

by chubot 10y ago

whichdan 10y ago

https://github.com/glimmerjs/glimmer-vm/tree/master/packages/%40glimmer https://github.com/glimmerjs/glimmer-vm/tree/master/packages...

steveklabnik 10y ago

> This sounds like something written on top of a JavaScript VM, not a VM itself. You can write VMs in languages that are implemented with a VM. > Is it implemented with VM-like techniques? More than that, it is literally a virtual machine. > What does the instruction set look like? IIRC, it's a stack-based VM. Here's the opcodes, I believe: https://github.com/glimmerjs/glimmer-vm/blob/master/packages/%40glimmer/wire-format/lib/opcodes.ts https://github.com/glimmerjs/glimmer-vm/blob/master/packages... (I have mostly a high-level understanding on this, after talking to lots of people and watching presentations; I don't hack on Glimmer myself.)

abecedarius 10y ago
Thanks. Up to this point I too was scratching my head wondering what the fuss was about -- if this was a JavaScript-in-Typescript VM, or what. It's a custom virtual machine for a domain-specific language for filling templates, right?
- steveklabnik 10y ago
  Yes, this is a good succinct way to put it. It compiles handlebars templates to its VM, and then as the machine executes, it updates the DOM appropriately. You can think of the Glimmer VM as a VM interface to the DOM rather than the direct DOM interface, and handlebars templates as programs that compile to that VM.
eric_the_read 10y ago
I like that one of the opcodes is "FixThisBeforeWeMerge". Looking this over, I can see why my initial reaction of "why aren't you using WebAssembly?" was facile; this really is a VM optimized for templating languages. I'm reminded of the Bad Old Days when I was a ClearCase admin; we ended up building what my boss at the time called a Revision Control VM on top of it, so that our developers never really learned ClearCase per se; instead, they learned our system that happened to use CC under the hood. Since then, I've treated the term "VM" with a looser interpretation than usual; clearly, I should have applied that here (though it is, strictly speaking, a VM in the classical sense as well).
chubot 10y ago
OK so I guess the VM outputs a virtual DOM tree from a handlebars template, rather than text? I don't really see why you can't do that with a simple tree interpreter, but sure why not. I've implemented template languages in multiple languages. I've also thought of compiling different languages to the same VM with string instructions (IIRC the old Cheetah template language compiles to Python bytecode). I sort of see where this is going but the docs weren't particularly clear to me. If anything it sounds like there are a lot of other components besides the VM, which weren't really described in the blog post, and I couldn't find any links.
- steveklabnik 10y ago
  > so I guess the VM outputs a virtual DOM tree from a handlebars template, rather than text? As the article mentions, this technique is distinct from virtual DOM. The article is light on what specifically it does though. From the article: > I'll describe the details of this approach in another post, but the short version is that we compile templates into "append-time" opcodes for a bytecode VM. The process of running the "append-time program" produces the "updating program", which is then run every time the inputs change. anyway. > If anything it sounds like there are a lot of other components besides the VM, which weren't really described in the blog post, and I couldn't find any links. There's a little bit; that is, this post is specifically about Glimmer's VM; Glimmer itself has a few more things, just like React is more than just a virtual DOM implementation. In Glimmer's case, there's glimmer-component, which lets you write web components, and glimmer-application, which lets your register your components into a cohesive whole, etc. TL;DR: Glimmer as a project is similar to react. It has some significant and novel implementation details that keep it speedy.
  - chubot 10y ago
    OK thanks, that helps. It sounds potentially interesting but in its early stages.
    - steveklabnik 10y ago
      No problem! It is and it isn't; that is, all of this is extracted from Ember, so it has had a lot more maturity and testing than you might think at first. Not _super_ so as it's still relatively new, but deployed in lots of big places.