10 ms·
Fast, Bump-Allocated Virtual Doms with Rust and Wasm
- deleted 8y ago[deleted]
- chrispeel 8y ago"Fist-Bump allocated Virtual Domination with Rust by WASMs" sez my lizard brain...
- hiccuphippo 8y agoYes, I was thinking web developers, rather than using rust and wasm directly, would first get the benefits when the libraries they use start moving the heavy duty parts to it. Can't wait to see if someone uses this for building a react-like framework.
- k__ 8y agoWould be interesting to see if React could simply integrate it.
- steveklabnik 8y agoThe Rust Wasm working group agrees, and that's why they've been pursuing a strategy of building libraries, rather than full front-end frameworks. There are some people who are doing that, and now that the "build a library in wasm" story is going pretty well, there are some plans to move into that space too (https://rustwasm.github.io/2019/03/12/lets-build-gloo-together.html https://rustwasm.github.io/2019/03/12/lets-build-gloo-togeth...). But almost all of the previous work has been for libraries.
- dman 8y agoI am hopeful for the other half to land as well - heres to hoping that something like piet and druid results in a completely rust based Application delivery platform that ships in the browser.
- vanderZwan 8y agoCould you elaborate on what Piet and Druid are, perhaps with a few links? I assume you don't mean the esolang[0]. [0] https://esolangs.org/wiki/Piet https://esolangs.org/wiki/Piet
- dman 8y agoSure, sorry about the initial omissions. https://github.com/xi-editor/druid https://github.com/xi-editor/druid https://github.com/linebender/piet https://github.com/linebender/piet
- vanderZwan 8y agoThanks! Looks very interesting, going to watch the video about Druid linked in the README.MD later[0]. And no worries, it's very easy to forget not everyone is introduced! Anyway, to actually engage with your point: I can see the appeal of an all-Rust framework: good typing system + high performance (both in speed and low memory use, ideally) sounds fantastic! So out of curiosity: how do you think hot swapping would be handled? I'm asking this who has not dived into Rust at all and only observed it with interest from a distance. For starters, I understand Rust has fairly slow compilation times, no? Or is that only true for optimized code and do we have fast debug options? Similarly, hot swapping requires maintaining state. With JS that's not too difficult because you don't worry about memory layout: as long as the high-level structure and names are the same the code works fine (it just kills the JIT optimizations). With WASM, that goes out the window: add or remove a field to your struct and all offsets change. Rust may guarantee no memory leaks, but that is not the same as guaranteeing that a snapshot of the memory state of one Rust program works on a different one. I guess some kind of "export to/import from JavaScript based representation" glue code that runs every hot reload could work, but that sounds like it could really freeze the browser when hot-reloading the big frameworks. [0] https://www.youtube.com/watch?v=4YTfxresvS8 https://www.youtube.com/watch?v=4YTfxresvS8 would be funny if I forgot to include links myself at this point :p
- dman 8y ago
- bfrydl 8y agoI believe this is also true for development tooling, not just actual code executing in the user's browser. There's no real reason why tools like webpack, eslint, and so on need to be written in JS for most use cases. Members of the Rust community in particular are actively working in this space, building ES parsers, transpilers, and module bundlers. There's no all-in-one solution but even now with a little effort you could replace webpack with Rust-made tools, so long as you don't mind losing hot reloading or code splitting.
- chriskrycho 8y agoSee also (for one example) Notion (https://www.notionjs.com https://www.notionjs.com): Node version management, in Rust, for fully-reproducible environments. (I contribute a bit!)
- writepub 8y agoFirstly, congrats on shipping a virtual DOM lib in WASM. Hopefully, frameworks intent on using a V-DOM will greatly benefit from this. Having said that, is a V-DOM required in 2019, if DOM updates are optimally batched, like in FastDom ( https://github.com/wilsonpage/fastdom https://github.com/wilsonpage/fastdom ). Decades of optimizing browser internals would surely account for not trashing the DOM, if updated optimally. So, is it required?
- lhorie 8y agoThey are only batched if they are all updates or all reads, but not if there's an interpolation of both. Even if the browser optimizes it with an optimum update strategy, it doesn't matter if a developer who doesn't know better forces thrashing to occur. Virtual DOM libs help structure code in such a way that idiomatic code falls into the pit of success.
- zdragnar 8y agoTo build a client-rendered site? No, vdom is not required. To build a tool with multiple render targets? Maybe, or at least something similar. In particular, the trend of rendering a page via a node.js server, and delivering the rendering logic to the client so that subsequent renders do not require a full round-trip is pretty alluring if you're building something more complex than a blog or run-of-the-mill ecommerce site. https://catberry.org/ https://catberry.org/ is one of the older examples I can think of that do the above sans vdom, though now that I look at it again, it seems to have changed quite a bit in the years since I first found it.
- acdha 8y agoIt’s never been required — and is usually substantially slower – but a virtualdom may be worth the overhead because it avoids the need to organize those updates. Most cases aren’t performance sensitive to the point where that’s the deciding factor in a decision.
- megaman821 8y agoIt appears lit-html is using a method that keeps updates declarative. https://lit-html.polymer-project.org/ https://lit-html.polymer-project.org/
- ilovecaching 8y agoHow exciting. One of the great things about React is that it's just as much a pattern as a library, and with Rust macros and v-dom it should be rather easy to build something similar to JSX in Rust (with the proper Rust-isms of course). Can't wait for Rust to rule the web.
- steveklabnik 8y agoI'm watching https://github.com/bodil/typed-html https://github.com/bodil/typed-html personally; not just JSX, but statically typed!
- fxfan 8y agoAlso see scalatags! (this is in some ways a response to your child comment).
- dbrgn 8y agohttps://github.com/chinedufn/percy/ https://github.com/chinedufn/percy/ already has a virtualdom implementation and a procedural macro for JSX like HTML.
- gambler 8y ago>Virtual DOM libraries provide a declarative interface to the Web’s imperative DOM. I'm not sure what this means. DOM is an object model for HTML. It is mutable, but HTML itself is definitely declarative. Which brings up an interesting question. Why are DOM-diffs something that is done by userland libraries when it can and probably should be done by the browser itself?
- kreetx 8y agoMy guess is that the desired DOM is entirely re-created from some state, instead mutating it in place. The declarataivity then is that "given this state the DOM should be this".
- Hello71 8y ago1. This is called "Shadow DOM", it is only supported in the latest browsers. wasm is AFAIK slightly more widely compatible. 2. Even if calls from wasm to the browser are as fast as JS, they will still incur overhead above "internal" function calls.
- anonytrary 8y agoShadow DOM has nothing to do with this.
- sraquo 8y agoBecause virtual DOM is not the only way to achieve efficient DOM updates, and even within the concept of virtual DOM there could be many different ways to achieve efficient diffing (e.g. React vs Snabbdom). There is nothing special about a particular virtual DOM spec to deserve a place in web standards.
- dmitriid 8y agoWeb standards could specify an API (which is very simular across all virtual dom inplementations) and let browsers chise their own implementations and optimisations. Since the browser has full access to the entire object model, and memory layouts, and dom optimisations, and..., and..., it’s a shame that we have to write code that is the prerogative of the browser.
- cmroanirgo 8y agoIt seems memory fragmentation can occur, rather easily, if you hold onto a few of them. > The disadvantage of bump allocation is that there is no general way to deallocate individual objects and reclaim their memory regions while other objects are still in use.
- Rusky 8y agoThe use case in the article does not hold onto a few of them, though- it holds on to exactly two at any time.
- anonytrary 8y agoThe benchmark leaves me wondering if this was worth it.
- dmitriid 8y agoWhy virtual DOM is not a part of browser APIs is anyone’s guess at this point.
- MrEldritch 8y agoIt is! They call it the DOM, for short.
- dmitriid 8y agoI mean virtual DOM as exemplified by virtual-dom, hyperscript, React.
- lootsauce 8y agoUh no, actually virtual DOM would be a great addition to the browser. What is there is an imperative api, the big win of virtual DOM is the specification of the UI is the specification of all possible updates to the ui in an efficient manner. It would be nice for the browser to include an api method that takes VDOM data-structure, diffs it and applies the changes in native land vs implementing this in user land.
- Zooper 8y agoBecause it's an inefficient hack and native APIs could improve upon the way in which it operates to such a degree that it would no longer be called the virtual DOM?
- moron4hire 8y agoBump allocation sounds a lot like heap allocation. Is a "bump" a small heap?
- steveklabnik 8y agoBump allocation is a strategy for building an allocator; where that allocator's memory is is irrelevant to the algorithm itself. Most of the time, that is the heap, but you could write an allocator that takes a bunch of stack memory and hands it out too.
- Rusky 8y agoAs the article describes, it's a small (or large...) heap with some specific behavior and restrictions- space is allocated in order, making allocation extremely fast; and in exchange there's no way to free individual objects, you must instead free them all at once.
- Bahamut 8y agoThe benchmark has some old versions of Angular (2) and the legacy AngularJS (1.x) - how do the benchmarks look with a more recent version (v7)?
- Caspy7 8y agoThe post notes that they had issues with recent versions.
- btown 8y agoCould this be used in something like Cloudflare Workers to enable server-side rendering?