4 ms·

Oh, wow. When this came up before, I don't know if I looked at the DOM, because I assumed you would do this type of thing by drawing pixels on a Canvas. It's ac

Oh, wow. When this came up before, I don't know if I looked at the DOM, because I assumed you would do this type of thing by drawing pixels on a Canvas. It's actually made of HTML elements? That's impressive.

Aaronmacaron 3y ago
I too think it's very impressive but wouldn't it be even more impressive if it was made using canvas? It would mean that you would need to implement your own rendering loop and layout engine. You'd need to reimplement a lot of elements such as input fields or buttons. You get all of this for free when building on top of HTML/CSS.
- noduerme 3y ago
  You do get a lot of UI elements for free, but styling them consistently and getting them to layout properly becomes a lot more difficult.
- Intralexical 3y ago
  I think it would likely be more technically involved and complicated if it were made with `canvas`. But large blobs drawing to `canvas` aren't anything new at this point. The part that impressed me is doing it the simple way, using what the browser already provides, and getting it to work this well.
  - msephton 3y ago
    Synology DSM (the web interface for a Synology NAS) also constructs a desktop UI the HTML way.
- onetom 3y ago
  It's hard to make that performant. As a reference, here is a browser-adapted version of the https://cuis.st/ https://cuis.st/ Smalltalk environment, which does its own rendering onto a canvas: https://github.com/nmingotti/The-Cuis-CookBook/wiki/Run-Cuis-in-the-Web-Browser.-%28SqueakJS%29 https://github.com/nmingotti/The-Cuis-CookBook/wiki/Run-Cuis...
  - MatthiasPortzel 3y ago
    It’s not performant if you’re using JavaScript APIs. But it’s also possible to write to a canvas with WebGL, which is hardware accelerated and is much faster than jQuery. I believe (although I can’t find a source for it now), that xterm.js used this strategy.
- mrBurger 3y ago
  I dunno, once you write the renderer, you essentially have no limits to worry about. Working within the confines of HTML is way more impressive to me.
- moffkalast 3y ago
  That would be pretty slow, but with WebGL it could work.

Aaronmacaron 3y ago

I too think it's very impressive but wouldn't it be even more impressive if it was made using canvas? It would mean that you would need to implement your own rendering loop and layout engine. You'd need to reimplement a lot of elements such as input fields or buttons. You get all of this for free when building on top of HTML/CSS.

noduerme 3y ago
You do get a lot of UI elements for free, but styling them consistently and getting them to layout properly becomes a lot more difficult.
Intralexical 3y ago
I think it would likely be more technically involved and complicated if it were made with `canvas`. But large blobs drawing to `canvas` aren't anything new at this point. The part that impressed me is doing it the simple way, using what the browser already provides, and getting it to work this well.
- msephton 3y ago
  Synology DSM (the web interface for a Synology NAS) also constructs a desktop UI the HTML way.
onetom 3y ago
It's hard to make that performant. As a reference, here is a browser-adapted version of the https://cuis.st/ https://cuis.st/ Smalltalk environment, which does its own rendering onto a canvas: https://github.com/nmingotti/The-Cuis-CookBook/wiki/Run-Cuis-in-the-Web-Browser.-%28SqueakJS%29 https://github.com/nmingotti/The-Cuis-CookBook/wiki/Run-Cuis...
- MatthiasPortzel 3y ago
  It’s not performant if you’re using JavaScript APIs. But it’s also possible to write to a canvas with WebGL, which is hardware accelerated and is much faster than jQuery. I believe (although I can’t find a source for it now), that xterm.js used this strategy.
mrBurger 3y ago
I dunno, once you write the renderer, you essentially have no limits to worry about. Working within the confines of HTML is way more impressive to me.
moffkalast 3y ago
That would be pretty slow, but with WebGL it could work.