yo-yo.js

[00:00:00]
>> If you wanna actually use this in a web page, you can use this fantastic library. I think I've used it every day so far these talks called yo-yo. There's also bel. These are related. So this library yo-yo uses hyperx and it uses this other library called morphdom, and what morphdom does is just like you can get in react with the virtual DOM.

[00:00:28]
It can sort of compute the difference between two DOM trees. And in the performance benchmarks that they've run, it's actually just as fast to compare real DOM nodes as it is to compare virtual DOM nodes. And then the benefit is that if you use that technique, you can interoperate with maybe older code that expects that generates kind of classic DOM nodes and you don't have to spend a lot of time kind of fighting between the real DOM and the virtual DOM like you might have to if you're using a virtual DOM based system.

[00:01:07]
So let's just see what that looks like, cuz it's really nice. So I'm gonna go in this directory and we're gonna make a thing called yo.js. You can require yo-yo like this. And just for starters, we can do something in node and then I'll make it run in the browser.

[00:01:24]
So you can't pass in fragments. You actually have to pass in a single element. So if you just begin everything with div and /div, that's probably good enough. So we can have a little thing, can have a variable in there and define it outside. So this works just like you might expect.

[00:01:46]
Except in node, you're actually going to get a fake DOM tree, because node doesn't have a real DOM. So it has to use a fake one. But if you call toString, then you get back a string, pretty cool. So hopefully you can already see how this might be really useful if you want to write code that's gonna run in the server to render something the first time you load a page and then it's gonna sort of upgrade itself into.

[00:02:15]
And so just running in the browser and doing reactive diffing operations without having to do a network round trip every time can be really good. Okay, so if we wanna make this actually run in a real browser, what we can do is you can call html.update and you can give it some sort of root element that it's gonna do the DOM diffing on.

[00:02:39]
So I'll just create one of those. This is my standard way of doing that. You can do it in one line, because appendChild will return its argument. So. Can make a div and then have a handle on that div at the same time. So that's just a shorthand for doing these two statements.

[00:02:59]
So this would be if I'd done this So this and this is the same thing just so you know. So if I call html.update, then if I just have some blank HTML to use, I get with budo commands which you can get npm-install-gbudo. It runs browserify behind the scenes and then it's gonna run a local server for us.

[00:03:32]
We see object HTMLDivElement, because I'm still calling that toString. So if I remove that, then oops, there we go 5. So what's really cool is when we start to actually modify things, modify state. A simple way to do that is to put our update logic in our markup here into a function.

[00:04:03]
We wanna call the function the first time we load the page, but also we might have other elements, other activities that are gonna change that state. So for example, we might have a timer that's going to change that state like every second will increment n. And then if we want the page to re-render, we can call the update function again.

[00:04:27]
We do that. And now, we have a counter that counts up seconds starting from five. So I'm gonna commit that to the repo. Along with hyperx one and this one. Whoops, getting my git command's confused here. Okay, so hopefully, I'll have a chance to play with this kind of stuff over lunch.

[00:05:06]
Another thing that I wanna show really quick is that you can, whoops, is that you can also have things like events. So to do that, maybe we'll have a button instead of doing a set interval and that's gonna modify something else. So maybe we're also gonna have another variable x in a div and we'll have a button with an onclick event that says, CLICK ME.

[00:05:40]
We'll start out x at 0. And then every time we click that button, we can increment x and call the update function. So we have our counter like before. So that's going on. And now, we have a button. When we click it, it goes up.
>> So that's like very bare bones react kind of stuff.

[00:06:16]
>> Yep, that's all it takes. You don't have to have a billion line config file. You don't have to have jsx. You don't have to have much of anything at all. You just need a little bundler. That's pretty much it and you get almost all of the benefits.

[00:06:30]
And if you want more of the advanced features, there's modules for that.