|
@_developit | |||||
|
HTM 3's caching is really exciting.
This video shows how only the dynamic parts of a UI are updated, even though the whole demo is a single function and "renders" every update in full.
codesandbox.io/s/damp-snow-rj… pic.twitter.com/wz2zxdCv2n
|
||||||
|
||||||
|
Jason Miller 🦊⚛
@_developit
|
21. sij |
|
inb4: you don't have to like, use or even care about Tagged Templates to get this - you can output this via a drop-in replacement for the JSX babel plugin.
|
||
|
|
||
|
fks
@FredKSchott
|
21. sij |
|
This is wild! I would have never thought of this as a concern of the templating/rendering layer instead of the actual component framework, but the more I do the more I like it
|
||
|
|
||
|
Jason Miller 🦊⚛
@_developit
|
21. sij |
|
it knows so much
|
||
|
|
||
|
Axel Rauschmayer
@rauschma
|
21. sij |
|
Isn’t that the responsibility of, e.g., Preact? Or can HTM also be used without a UI library?
|
||
|
|
||
|
Jason Miller 🦊⚛
@_developit
|
21. sij |
|
It works in tandem. HTM can be used with anything that uses JSX, basically anything that does this:
(type, props, ...children) => Thing
The key is that HTM skips that function and returns cached results. UI libs can use this to skip rendering referentially-equal nodes.
|
||
|
|
||
|
Dimitris Grammatiko
@dgrammatiko
|
21. sij |
|
Is there still a v-dom or just template literals magic?
|
||
|
|
||
|
Jason Miller 🦊⚛
@_developit
|
21. sij |
|
HTM is a replacement for JSX, so it's still whatever renderer you pair it up with.
|
||
|
|
||
|
Tsavo van den Berg, Knott
@KnottTsavo
|
22. sij |
|
I believe this can be achieved with LitElement + Component-Controller Model through differential rendering. Come to the We bComponents SF talk!
|
||
|
|
||
|
Justin Fagnani
@justinfagnani
|
22. sij |
|
This is how lit-html works always, regardless of the component model or any abstractions on top of it.
|
||
|
|
||
|
Joachim Viide
@jviide
|
21. sij |
|
A good reason to structure your trees so they have as many static parts/subtrees as possible.
|
||
|
|
||