Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 835 of the free egghead.io lessons, plus get RxJS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Hello World in Cycle.js

4:44 RxJS lesson by

Now you should have a good idea what Cycle.run does, and what the DOM Driver is. In this lesson, we will not build a toy version of Cycle.js anymore. Instead, we will learn how to use Cycle.js to solve problems. We will start by making a simple Hello world application.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Now you should have a good idea what Cycle.run does, and what the DOM Driver is. In this lesson, we will not build a toy version of Cycle.js anymore. Instead, we will learn how to use Cycle.js to solve problems. We will start by making a simple Hello world application.

By now you should have some idea of what Cycle.run does, and what the DOM driver is. It's important that you feel that there's no magic going on here. We really just have instruction for write effects coming out as syncs from the main, and read effects coming in as sources. Enough with building our own Cycle.js, let's start learning how to start solving problem in Cycle.js. Let's build first a "Hello, World!" app.

So if you've seen the Angular JS website, they have here a "Hello, World!" app with a label, and an input field where you can write "Hello, World!", you can write "World," and the header just greets the name that was given in the input field. Back to Cycle.js we can remove this old code, we won't be needing the console.log driver, and this is usually how we start. We have an empty main, we have some drivers, and we connect them.

We're also going to be needing the label helper function to create a virtual DOM element, and also for INPUT, and H1, and HR, and DIV. The main always returns an objects of syncs, and we're going to have a DOM sync which is just an observable, and this observable for now is going to have just one event, and that event is the DIV or virtual DOM element containing a label saying "Name." Then we get there on the DOM the label inside the DIV.

We continue this we can make an input of type is text, then we can make an HR and H1 saying, "Hello," something, we don't know what that something is yet, we're going to see. Now we get these DOM elements, but they are just write effects, so that's what the sync does. We cannot yet detect these input events given to the INPUT field. That's because user events are read effects, and read effects come through the sources.

Sources have sources.dom, that's the DOM source, the DOM source have a function called select, which allows us to restrict our interest in the input element. Actually it's a better idea to use class names, so I'm going to give the class field to this and that's going to just create the class to the DOM event. Here I'm going to use the field that I just wrote. Then we get events of type input, what this will return is an observable of the input events happening on that field.

So now this is an observable of input DOM events. From that we can create another observable called namestream which is input event stream mapped, you can get each of these events, get their target, that would be the actual DOM element for this input field, and the value is the string inside that. So namestream is the event stream of strings that happen each time I type here. Each time I type I get a new string for that input field.

So if we get this namestream, and what if we map each of these names to a write effect? Every time the user inputs something, we will make a write effect to show that corresponding name. That makes sense, but as you can see, where did my DOM go? It all disappeared. That's because initially there is no events that happen on the namestream. The namestream only emits an event when we input something here.

Initially we have no name at all, and that's why if we map emptiness to something we get emptiness, and that's why the DOM write effect is emptiness. We need to start by prepending a name here, that way we're going to prepend this with the empty string. I could have put "world" here, and then we get world as the default there. So what I'm doing here is basically saying, to kick start everything I will have to have something.

Namestream starts with an empty string, so this is empty string, it creates a write effect, we see that on the DOM, and now that we generate new events when we type here, they will come through here, go through the name and go back here, and that's what happens. That's why it's also called Cycle.js, because this really happens as a loop of read and write effects.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?