Yolk (An RxJS UI Library) in 7 Minutes

[00:00] In your typical RxJS set up you can look on a button and observe any of the events off of it, or anything that would dispatch an event. So I can say observable from event pass in my button, and observe the clicks. At this point it's just waiting for someone to subscribe, so we'll say subscribe before it starts observing. So I'll just take the events which it's pushing through when it's observing, and log them out.

[00:32] So I'll save this, come over here and click this button, and you can see it's capturing those mouse events through console.log. So logging out mouse events is great and all, but we really want to change the DOM or update the HTML somehow, and RxJS doesn't give us any of that, so that's where yolk comes in. So I'm going to get rid of this button, and instead I'll use this container, so I'll paste that here, paste that here, and I'll re-implement this inside of yolk.

[01:03] So I'm just going to start with a function, it's called app which is going to return some JSX. Now React has made JSX pretty popular, so you may have seen this syntax before that looks pretty much like HTML, but it's really basic if you haven't. So we'll just go ahead and say, "Hello, World," and then with yolk I can say render, and I'll use the JSX here as well, and I'll render my app into my container. So I'll hit save, then we get a nice, pretty "Hello, World" over here.

[01:37] Again, this is just yolk saying take this function and whatever it returns, and it's just returning this JSX with "Hello, World" inside and render it into the container, and the container is an empty DIV with an id of container. So we want to add our button back, because we still want to click on something. In JSX to handle an event you say onClick = {} then some function that's going to get called on that click.

[02:02] So what yolk gives us is this ability to create and observe these streams of events, so I'll say click$ and the dollar sign is just the convention to say this is a stream or observable, and I can say this.CreateEventHander. So now I can take my click passed in to onClick, and if I subscribe to my click, I can get that same event and log it out. I'll just add a big "click me here" just to give me some text to click on, and once I start clicking you can see I get my mouse events again.

[02:47] So yolk allowed me to easily create an event handler, use it inside my clicks, and set up that observable for me, and return some JSX based on that. So to show you how to render something out, I'm going to create an input which is going to be a checkbox, and we're going to listen onChange. I'll do a similar thing where I do const toggle is this.createEventHandler, and then pass my toggle into here, and then I can watch for changes on my toggle.

[03:19] I'll just create another stream called message, which is going to be toggle and whenever that toggles I just want to say, "Hi." So I can take my message and I'll just drop it inside of a DIV down here, so that now when I toggle, I can click and the message "Hi" will appear, because an onChange event fired and toggle is observing onChange events and message mapped any of those events, I could have put the event in here, but I just left it out, and it returned "Hi," and then dropping this into my DOM here actually subscribes to it and renders the result.

[04:02] So you can actually take advantage of what you can pass into this createEventHandler, it allows you to provide a mapping function for that event, so I'll map the event to event.target.checked, so that will be true or false based on the input, and then an initial value which is going to be false, because it's going to start out as unchecked.

[04:26] So now my message is actually going to get a true or false coming through here, so instead of event, now I have something like an isChecked where I can say if it is checked, return on, if it's not, return off. Hit save here, you can see it starts as off because the initial value is false, it comes through false here, returns off and renders out off. When I click, now it's on because checked turned to on, now checked checks to see if it's true, and it is true, and it renders out on.

[05:02] Now the last piece here is how your component handles props, so that's basically just if I have something like a greeting and I want to pass in something like "Hello," then I'll just use the ES6 shorthand to destructure the greeting out of the props, and I'll just go ahead and render the greeting, hit save, and you see we have the greeting that we passed in, the "Hello," coming through the props and being rendered out here.

[05:35] Now what gets really interesting is that this greeting is also an observable, so I can do observable techniques like withLatestFrom, so now we have the greeting as one of the sources in our stream, the next parameter is a function with the first parameter being our message that's coming from the map, and then the next one being the latest from greeting, and that's just always going to be "Hello."

[06:04] Then I can just return m + g which is going to be when the checkbox is true on plus "Hello," and when it's false off plus "Hello." So I'll render this out, you see we get off hello, I'll check this, on hello. So obviously you're going to need a solid understanding of RSJX and observables to be able to use yolk, because in yolk everything is a stream, all the events, all the props and everything, and they all get pushed into JSX, but once you've learned RSJX better yolk is really just a thin layer that helps you create events, map those events to some JSX, and then render out some results from those streams.