Hacker News Reader

Comment by christophilus | Hacker News Reader

I was at the All Things Open conference this week, and Yehuda Katz gave a talk on Glimmerjs[0].

It was enlightening. The size of your front-end application is generally dominated by view code. So, they precompile views into a super simple set of binary VM instructions (making your views very compact). These views don't go through the JS compile / parse phase on the client (saving hundreds of ms, up to seconds on slow devices). They are instantly executable by a small VM written as a JS library, and can be streamed in and rendered as they arrive (the way plain ol' HTML pages do). Turns out to be hella fast, but still gives the benefit of rich client-side rendering capabilities.

[0] https://glimmerjs.com/

View on HN

For folks who want to play around with this, we've got an interactive playground at https://try.glimmerjs.com/ that lets you add components, templates and helper functions.

In a nod to The Net, you can click the π symbol in the bottom right corner where you'll get a debug view of the disassembled binary bytecode.

Tom Dale recently did a a great talk at ReactiveConf about Glimmer that I can highly recommend watching: https://youtu.be/62xd25kEZ3o?t=7h40m

If I'm not mistaken Angular 2+ also has this. It's named AOT compilation (ahead of time).

Edit: so does Vue if you're using vueify (https://github.com/vuejs/vue/issues/4272).

It's not the same, though. Those are compiling textual templates into executable JavaScript. React/Preact do this automatically, too.

What Glimmer does is it converts your views into bytecode (not JavaScript) which can be streamed and run without a JavaScript compilation / parsing phase in the browser. Vue, React, and Angular views all ultimately are translated into JavaScript which has to be compiled / parsed in each browser.

I'll have a look at Glimmer later, but who executes this bytecode?

> They are instantly executable by a small VM written as a JS library

Guess you have download the VM on initial page load.

Yes. It's about 18KB of JavaScript.

glimmer-vm https://github.com/glimmerjs/glimmer-vm

Is it more similar to Vue server-side rendering (https://vuejs.org/v2/guide/ssr.html)? Or are Glimmer and server-side rendering two different beasts?

Two different beasts.

That's pretty exciting. I'm curious when we can just compile our views into some IR or byte code that can be natively run. Isn't that kinda what WASM is trying to do?

Why use binary VM instructions with a VM written in JS instead of just straight binary data? Why does it even need to be instructions in the first place?

It needs to be instructions because the views aren't static. They are reactive. So some of the content is static, some might change due to user interaction. The VM understands this fundamentally and optimizes for that.

hbar is no longer Planck's Constant but the speed a which a metacircular hypecycle can JIT itself on your runtime.

I'm not clear on where the logic is needed. Even if there are cells or boxes that need to be a percentage of their parent and/or have min and max sizes etc, that can still just be binary data.

Anyone thinking on betting on Ember, or Glimmer.

Word of advice / wisdom from having built multiple platforms / sites with it:

Don't.

Glimmer itself is made by Ember?

Yes, the ember core team is behind Glimmer you can use it today in Ember.

Wow that site loads instantly

It's a tiny page of static html.

Oh I thought they're using their library

Reply on news.ycombinator.com