It seems a lot of the libraries that did that are old (e.g. Knockout). I wonder why. Impossible to get good performance without DOM ownership or lack of interest?
It seems a lot of the libraries that did that are old (e.g. Knockout). I wonder why. Impossible to get good performance without DOM ownership or lack of interest?
In Lit's case it's perf and simplicity. Doing one reference check to see if you need to render the template anew, or update the DOM parts is just much faster than checking each node.
Yes, for Lit it would defy its very premise (which is very elegant!)
Would a combo of morphdom/idiomorph and an HTML templating lib (mustache, handelbars, pug, etc) work? Not quite clear on what the workflow would be for integrating a reactive library with markup it didn't make 🤔
I've often considered making a morphdom integration for lit-html...
I’m not super familiar with lit-html source code, but doesn’t it have its own diffing logic? I just worked on a mustache + morphdom combo integration with ReactiveElement at work. Seems to be working well, but not battle-tested yet
lit-html doesn't diff. It just checks whether the new template to render is the same as the previous template. If they're the same, just update the bindings. If they're different, replace the DOM. Much faster than a diff.
Oh I didn’t realize that. When you say checking whether the 2 are the same, is it comparing strings of HTML? I’ve been a little paranoid about perf ramifications of morphdom, but haven’t found a better solution. (Other than managing shadow DOM with imperative JS)
It leverages a lesser known property of tagged templates: you get a stable reference to the strings array across multiple invocations, so you can just directly compare references. From mdn:
Wow, TIL!
I thought I might have been overstating it when I said lesser known, but I guess not!