Blog: Implementing VDOM in Elm

Request Feedback
1

I just wrote a blog post entitled Implementing VDOM in Elm. It’s meant as an example of some non-trivial Port usage as well as an example of how VDOM actually works without using very much JavaScript.

I’m interested to hear your comments: both on the actual code as well as on the presentation (which is mostly code with a bit of writing). I’m not sure how clear it is.

17 Likes
2

That’s incredibly neat :sun_with_face: Great work!

1 Like
3

I think I’ve managed to simplify the article considerably by introducing the SafeHtml abstraction a section earlier. This allows me to omit a lot more decoders (as they are now trivial) and present extractListeners only once. It also makes the virtual section more focused on the diffing.

4

That is a very nice experiement, well done.

“If you want to build your own rendering engine in Elm, I’ve just shown you how. I hope this can encourage some experimentation with cool techniques. One of the popular ones these days is to not diff against a Virtual DOM, but against the real DOM. You can try that pretty easily.”

I would be tempted to try this out by diffing against a server side rendered DOM in the first instance. However, I think this feature is coming in 0.19 right?

5

I agree, doing rehydration with ports would be interesting, indeed. It would also be interesting to see how an approach like re:dom would perform in real world scenarios that uses the real DOM instead of a virtual DOM and can therefore skip the apply patches to the real DOM stage of VDOM libraries…

6

I wonder how the performance of this approach differs from the real implementation. It will certainly be worse, but by how much?

I’m starting to think this might be a better idea for real systems than I originally thought. Having control over the rendering means one can easily add more constructors to the Node type. Need a custom kind of element? Bam! Done. In pure elm with a small bit of ports code.

Seems a lot more flexible than trying to hook into the existing virtual dom or trying to use something like Custom Elements.

7

I’m having a play with your code because I want to try rehydration.

I think there is a small error in the type signature for diffChildren, which should be:

diffChildren : Int -> List SafeHtml -> List SafeHtml -> List Change
diffChildren index before after = 
    ...

Isn’t the useful thing about custom elements that they are opaque to the Elm VDOM though? So you can embed native DOM manipulating code within an Elm application.

8

But you can do that with a custom node as well. Then the handling code in you port can do the custom dom manipulation based on instructions it gets from the Elm side.