SURMA: But yeah, so
probably something happened. It was really good. I recommend everyone to
watch all the videos. It has good talks, and
it's even supercharged. JAKE ARCHIBALD: There
is a supercharged? SURMA: I do say so myself. JAKE ARCHIBALD: Yes. SURMA: You were involved. JAKE ARCHIBALD: I was-- SURMA: Monica was involved. JAKE ARCHIBALD: --involved. Yes. SURMA: Even I was involved. JAKE ARCHIBALD: You were? [LAUGHS] They let
you on stage again? SURMA: Yes. JAKE ARCHIBALD:
It was very good. I wanted to talk-- so I really
liked [INAUDIBLE] was Justin's. SURMA: Yes. JAKE ARCHIBALD: And he was
talking about lit-html. Like what sort a of-- SURMA: Yes. And that really spoke
to me, because he wrote an alter-- like, he wrote
basically a VDOM alternative, or a different take on VDOM. And I've been playing around
with VDOM a lot, basically because of tasklets
that we talked about in the last podcast,
which hopefully everybody has listened to. [LAUGHS] JAKE ARCHIBALD: Do you want to
do like an American TV show? Previously. (DEEP
VOICE) Previously on-- SURMA: Oh, we do it like a
proper announcer, though. Because my voice-- JAKE ARCHIBALD:
[EXPLOSION NOISES] So it's just a-- SURMA (DEEP VOICE): Previously. JAKE ARCHIBALD: That was
really good, actually. I liked that. SURMA: [LAUGHS] [MUSIC PLAYING] So I've been looking into VDOM. And it took-- I heard
about VDOM a lot, and I knew basically
what it did. That you had, like, an
alternative in-memory representation of the DOM,
and if you changed something, it would just create a
completely new version and then find all
the differences. But I never realized
that is a solution to the data-binding problem. If you look at Polymer,
usually like annotate, this attribute should always
have the value of this variable that I have in my state. JAKE ARCHIBALD: Right. SURMA: And whenever
it changes, there's some magic going on that it
realizes, oh, this has changed. I should therefore also update
this attribute in the DOM. JAKE ARCHIBALD: Yeah. And I worry a little
bit, especially when it's two-way data binding. I-- it's a lot of
magic involved. SURMA: And you look
at the implementation, and I just never understood it. It's like mutation
observers, but also you create magic getters
and setters so you can hook into the
mutation of the variable. And if either of
the sites change, you have to do all the piping. And it's not easy to implement
a proper two-way binding thing. And then VDOM comes
along and basically just says, don't worry
about the two-way binding. We're just going
to, like, re-render the entire tree as an
object and figure out what changed for you. JAKE ARCHIBALD: Right. SURMA: And in terms of
algorithm, that is simpler. If you want to do like a really
good diffing algorithm, that's not easy, but in
terms of how it works, it's easier to understand. And I never realized, OK. So VDOM is a solution to the
two-way data-binding thing. JAKE ARCHIBALD: Right. It becomes very one way. SURMA: And then
on the other hand, it would use events to bubble
up changes back into your state. And that kind of makes sense. But then after I understood
that, I thought about it more and more, and I was like,
this is, once again, developer experience
over user experience. JAKE ARCHIBALD: Right, because
it is a great developer experience. Because like, that sort of way,
you're re-declaring the world every time. It sorts out a
lot of state bugs. SURMA: You put in a
fairly small library. If you look at [? pre-app, ?]
that's 3 kilobytes. That's tiny. And it does all these things,
plus components and other stuff even. But also, it completely
negates the fact that, if you have a decently
sized document with, let's say, a couple of thousand DOM nodes-- JAKE ARCHIBALD: Right. SURMA: --there's
a lot of diffing going on that is completely
unnecessary, because you, as a developer, know that the
big portion of your document is static and doesn't change. JAKE ARCHIBALD: Right. And you pay that cost
per node, not per change. SURMA: Yeah. So I guess the VDOM update
or render call scales with how big your document is. JAKE ARCHIBALD:
Yeah, to some degree. And there's also
shouldComponentUpdate, which is your sort
of get out of jail-- SURMA: Yeah. I guess. JAKE ARCHIBALD: If there's a
large part of the tree that doesn't change, then you can,
in this sort of React world, sort of avoid redoing
the work there. So we've got this
virtual DOM idea that React uses where you're
paying the cost roughly per node that exists. Whereas lit-html
and hyperHTML, which does a very similar thing. And I've been
looking at hyperHTML. SURMA: I think Justin
even called out hyperHTML as one of the
inspirations for lit-html. JAKE ARCHIBALD: Oh, cool. Oh, excellent. So they use tagged templates,
JavaScript, string, literals. [LAUGHTER] SURMA: Dot com. JAKE ARCHIBALD: Is that right? With some of those words,
maybe not in that order, is the thing, right? SURMA: I think
you're right, but I think I want to also
have it as a shirt. [LAUGHTER] JAKE ARCHIBALD: So
the benefit of using-- so you've got your
HTML in that sort of string part of the template. SURMA: Which is a very
common pattern to have. If you have a
custom element, you want to have your shadow
root markup, for example, or just some styles,
or something in there as like an HTML string
most of the time. Which is what JSX does
in one way or the other. And this one is basically,
without the JSX precompilation bit, and instead using
the HTML tagged-- BOTH: --template string literal. [LAUGHS] JAKE ARCHIBALD: So, and
one of the benefits of that is that it knows that the
string parts of the template do not change. SURMA: No. Because what you use is-- the thing about tagged template
string literals is that-- so these are the things,
in case people don't know, the backticks, the new
backtick strings in JavaScript, are template string literals. And you can tack them by putting
a function name before that, and that means that the
JavaScript [? pauser ?] will dissect the string into the
string bits, and the bits where you-- JAKE ARCHIBALD:
--interpolate it. SURMA: --dollar
[INAUDIBLE] braces things to put values in there. JAKE ARCHIBALD: Right, exactly. SURMA: And then you don't
have to put the [INAUDIBLE] directly. We can do some
processing on that first. And what Justin does is that
he generates a template tag, the actual HTML
template tag, and it replaces your interpolation
variables with a placeholder. JAKE ARCHIBALD: Right. SURMA: So he basically
remembers in the template tag where values can mutate. And that means whenever
you change a value, he doesn't have to
diff the entire tree, but already knows where to
jump and where to compare. JAKE ARCHIBALD: Yes. SURMA: And that makes
a big difference. JAKE ARCHIBALD: Yes. And a hyperHTML by
Andrea Giammarchi is implemented very similar. Like it's-- even if you've
got that interpolation bit in the middle of a string,
in the middle of a text node. I think what Andrea does is
actually at compilation time inserts a comment in
there that you can then go and pick out and then replace
that node with whatever you actually wanted in there. I think Justin just does it
with some text and goes-- SURMA: I think he just
creates a separate text node. But I'm not 100% on that. But most of the time, you
just have two operations. Either you set an attribute,
or you replace a DOM node in the template. And it's the two operations. You can extend it. You have an extension API,
a parts API, he calls it, where you can just
have to ask if this is supposed to be a property
or an event listener. JAKE ARCHIBALD: Right. Yes. SURMA: But at its
basic level, there's only two parts, which is
attribute modification and node replacement. JAKE ARCHIBALD: I've played
a little bit with hyperHTML. You've played with lit. I think it's-- SURMA: It's an
interesting pattern. I feel like it could be
the next move of what is "the thing" on the web. It's a very nice middle
ground because I always did the manual. I'd just write a custom element. I know what things
I need to change and will just
mutate them manually with [INAUDIBLE] selector
and just setting the things. And this is getting mostly
developer experience without paying as big
of a performance cost as with a pure VDOM
diffing approach. JAKE ARCHIBALD: Absolutely SURMA: And that is
really, really nice. [MUSIC PLAYING] (DEEP VOICE) The almighty Jack. JAKE ARCHIBALD:
The almighty Jack. That's a good wrestler name. I like that. [LAUGHTER] The almighty Jack
walks into the ring and then just freezes while the
other guy just walks around-- SURMA: Takes a
chair from the side. JAKE ARCHIBALD: Just
goes-- hits him. And he just falls over. It just doesn't-- SURMA: --turned into a cardboard
cutout in the meantime. JAKE ARCHIBALD: Yeah. [LAUGHS]
