Asm-dom, a minimal WebAssembly virtual DOM to build C++ SPA

Re:Asm-dom, a minimal WebAssembly virtual DOM to build C++ SPA by austincheney on Monday March 16, 2020 @09:52AM (#22592647)

Then perhaps there is something you aren't doing correctly. It could be your abstraction. Even on old hardware I don't notice this blocking, unless the output is millions of items, when the code is using the native DOM methods.

Here is an application I wrote last year that can output a large table to the DOM pretty quickly even with hundreds of thousands of records: https://sparser.io/demo/

Here is one I am currently working on that can output thousands of file system artifacts to the DOM without any blocking to the user interface. http://mailmarkup.org/sharefile/demo1.mp4

[ Parent | on HN ]

Re:Asm-dom, a minimal WebAssembly virtual DOM to build C++ SPA by Tade0 on Monday March 16, 2020 @10:27AM (#22592976)

I tried your application and it gets choppy at <80 records on my phone.

It's not "my abstraction" - it's a general problem that many people have been trying to tackle - vDOM is just one of many approaches.

[ Parent | on HN ]

Re:Asm-dom, a minimal WebAssembly virtual DOM to build C++ SPA by austincheney on Monday March 16, 2020 @12:08PM (#22593823)

The UI is not developed with a phone in mind, assuming you are talking about the Sparser application. I just attempted this in my IPhone for the first time. Here are the numbers according to the tool (the numbers output to the title box in the top left corner of the screen):

* 108ms raw execution time

* 857ms total browser visual render time

I used this code: https://raw.githubusercontent.com/prettydiff/prettydiff/mast... which generated a table of 23010 records.

The execution performance was better than I expected for a phone and I am not seeing any delay in user interaction. What were your numbers?

[ Parent | on HN ]

Re:Asm-dom, a minimal WebAssembly virtual DOM to build C++ SPA by Tade0 on Monday March 16, 2020 @12:31PM (#22594119)

I've pasted that snippet and while it did indeed render fast, adding a newline anywhere caused the whole thing to hang for 12 seconds on my phone. Try it - you'll get a similar effect.

It's easy to just render a large page from scratch. Reflowing half of it by e.g. adding some vertical space is what's really hard.

EDIT: Actual numers are lower, but still troubling:

Parsing time: 771.7 milliseconds.

Browser time: 12078.1 milliseconds.

[ Parent | on HN ]