Read Text Input in a Cycle.js Hello World Application

[00:00] By now, you should have some idea of what cycle run does and what the domDriver is. It's important that you feel that there's no magic going on here. We really just have instructions for write effects coming out as sinks here, these streams, and instructions for read effects coming in as sources. These are also streams.

[00:21] Enough with building our own cycle.js. We can start learning how to solve problems using cycle.js. I'm going to delete this old code here. We're going to start blank, we don't need the log driver either. This is usually how we start. We have an empty main function, we have some drivers, and we connect them.

[00:40] We're also going to need the div helper function to create a virtual DOM element for div. Then as well label input hr and h1. I recommend you start by first returning the sinks object. We're going to have one sink stream for each driver that takes a write effect.

[01:01] Here we're going to give to the domDriver a stream of just one value. That value will be the div that has inside it label saying name and then input. Here we can give attributes of type. We want text. Then we're going to have a horizontal line and a header which will say hello, and exclamation mark.

[01:30] For now, we don't know what to put here but we're just going to do one thing at a time and see if this still works, and it does. This virtual DOM value ended up creating the elements that we wanted there.

[01:46] This doesn't yet react to our events. We need to take those as read effects. Right now, we're passing the write effects to the domDriver and it's creating this, but we need to detect the reads. We do that through sources. Sources is an object like sinks that has the DOM property coming from the domDriver.

[02:10] There we can select under input, that would be the tag name for this element here. Instead actually we can pass here a string that has some class names or even IDs if you want. Once I pass this string this function knows how to parse that and detect these class names. Then I can use those same class names here and we can do .events of type input.

[02:38] This will return to us a stream of input events. I'm going to store that in a variable called input event stream. So far, this is not connected to anything else so this is the same application. There is no difference.

[02:56] What we need to do is create another stream and call it name stream, which will be input event mapped, each event to event target. That would give us the element here for this input. Then we say event.target.value. This gives us the string for this input event.

[03:17] For instance, every time I type here that would give me the string w and then the string wo, string wor, that type of stuff. Now that we have name stream, if we plot that overtime it would look something like this. We have w, wo, wor.

[03:39] If we get each name and we map each name string to a virtual DOM tree which displays that, maybe then we're able to accomplish our app, because we just literally map state to view. For each of those strings we'd have the corresponding div that displays that.

[04:07] Once I hit this, it's curious that we don't actually see anything here. That happens because, notice that the DOM sink here is mapped from the name stream, which in turn is mapped from the input event stream. If we plot that one it looks like this as a marble diagram.

[04:27] Initially, we don't have any event happening, so it's like that. Once we map that we get this as name stream and then we get this as the DOM sink. That's why we're basically telling the DOM driver show nothing overtime. That's what's actually happening here.

[04:46] In order to fix this, we need to kick start our app with something. Here we need to basically pre-append the name stream with some string. Here I'm giving the empty string, I have that in the beginning. Then I can map this to something useful.

[05:05] That's what we're going to have here. That's why we see our app displayed here. I could actually replace this with, let's say, world, and then we would see world initially. This should now work. Once I type here it does change the header.

[05:24] This is how you should go about building a basic cycle.js application. You start by writing sinks and then just hooking together streams that are based on the sources. That's why it's also called cycle.js because applications are a loop of write effects and read effects.