Separate Logic from Effects in Cycle.js

Organize Code in the Main and Effect Functions

Customize Effects from the Main Function

Generalize Effect Handling with Drivers in the run() Function

Read Effects from the DOM with Click Events

Use the Cycle.js run() Function

Make Our Toy DOM Driver More Flexible

Fine-grained Control over the DOM Source in Cycle.js

Use Hyperscript in Cycle.js as an Alternative to Template Languages

Convert our Toy DOM Driver to the Cycle.js DOM Driver

Read Text Input in a Cycle.js Hello World Application

Modify and Track State in Cycle.js

Fetch Data using the Cycle.js HTTP Driver

Manage Multiple Observable Streams in Cycle.js

Organize your Cycle.js Application into the Model-View-Intent Pattern

Create a Generic Cycle.js Component

Use a Cycle.js Component in the main() Function

Use Multiple Independent Instances of a Cycle.js Component

Isolate Component Instances in Cycle.js

Export Values from Components through Sinks in Cycle.js

Overview of Cycle.js

Cycle.js Fundamentals

Let's see next how to use the HTTP driver to generate requests and capture responses. We will build a small app to fetch a single piece of data from a REST server and display that on the DOM.

[00:00] Let's see next how we can use more than just a DOM driver. I think it's time we try making some HTTP request. For that we're going to need the HTTP driver which is available as a script.

[00:12] Here it's called, "cycle HTTTP," and at least version 13. Once we have that we will get the global object called, "CycleHTTPDriver," and we can pick some things from it such as make HTTP driver.

[00:31] We can empty our main function so we can start clean. Here we can give as a driver we can create HTTP driver. That's what we're going to run against our application.

[00:44] Now we can start using it. What are we going to write here as our application and what kind of server should be used? We can use JSON place holder as a backend. It has here a user's resource which has an array of user data.

[01:02] Our application can be just to download user data for the first user and then display like, let's say, name, email, and website. We could create that as an application.

[01:15] As usual we can start by first returning a sinks object with a DOM, sink being a stream that has just one value, and that value is a div. Inside that div we put a button with the class get-first and the text content is get first user. The idea is that once we click this button it should make the request to download that user data.

[01:39] Then we have a div that contains all of the user details that we downloaded. We will show a header. Actually we need those elements. Let's not forget to import them.

[01:52] We need div, a button, a header one and header four and an a link. The header one will have the user's name.

[02:02] Here as a placeholder I'm just going to use name in parentheses. Then the user's email where we put a placeholder there as well, and a link. Here we're going to have as class name user website, and then we need the attributes href. We don't know what that should be, so I'm going to put that.

[02:26] Then here website. This is the DOM sink and it should display here that placeholder. Our goal is, once we click here, this button, that should trigger a request to the server, we get back a response, and then we display the response data here.

[02:46] Let's write those steps down in order to achieve that feature. We did a button click, and then request sent, response received, and data displayed on the DOM. These are things that we need in order to make that feature happen.

[03:06] If you don't know how to write your app in order to achieve this, a good hint is that you start by labeling which of these are reads and which of these are writes. We know that user events are reads, we saw that from previous lessons. We know that displaying data on the DOM, that's a write effect on the DOM.

[03:28] Sending out a request is an HTTP concern, and it's of type write, because we're outputting something. Receiving response is an HTTP concern and we're reading that.

[03:41] This is going to be useful because we can just take these as our guideline on how to write our application. We know that reads come from sources and writes go to sink.

[03:53] We can actually start coding here. Let's start with the familiar ones, we know that click on the button, that is a read. It comes from sources.DOM. We can select get-first. That will give us the button here and events of type click.

[04:14] We have the write DOM stream that's this one already. Actually this time I'm going to extract this and just call it here, "virtual DOM stream."

[04:26] It doesn't make a big difference, it just gives us a name for this. This is done and this done. We need to do this and that.

[04:36] We know that writes go to sinks, so we should have a sink stream called, "request stream." We'll see how to build that, but we know that that would go down here as the HTTP sink. Then we also know that responses are reads. Somehow from sources.HTTP we should get that.

[04:59] Let's build here request stream. We know that it should depend on the read of the DOM, this part. We can actually get each click and map the click event to a request object.

[05:17] A request object is, first of all, an object that has some fields here. We have a URL which should be this URL here for JSON placeholder. We can have a method such as get or post.

[05:34] Here I'm going to add a field, not so much related to HTTP, but it's specific to the cycle HTTP called, "category." We're just labeling what kind of request this is. I'm going to label this with whatever name I want, I'm just going to call this, this is, "user data." It's a request related to user data.

[05:53] That helps us because here with sources.HTTP we can say I want to select responses related to this category. It works like the DOM select, we're just selecting events from the source of data. That will give us actually a stream of streams.

[06:15] We need to flatten streams of streams. There are different ways of flattening, but the typical way in extreme is just a basic flattening which does a canceling of old requests. This gives us response stream.

[06:29] Once we have that, we need to connect together read HTTP with write DOM. We can do that by mapping each response object to response.name in the virtual DOM and response.email, as well as the href being response.website and response.website as the text content.

[06:59] Notice also that once we get this response it's going to be a response object. Since it's JSON data that we're getting, we need to basically get that response object and just map it to the body, because body won't have the actual JSON that we're interested in.

[07:20] Let's run this. Initially we see nothing. That's like before. We've seen this happened before.

[07:27] It's because we don't actually have any response that came from the server, so we need to start with something. We can put a startWith and here we can give empty user data. For instance, if we give the empty object, all of those fields would be undefined as you see.

[07:46] Then we'll say click here, that should make this trigger, which makes this trigger. It sends down an event to the HTTP driver, which in turn will give us an event here as response. Then we finally see the user data.

[08:03] That's how you use the HTTP driver to make interactive apps that also talk to the server.

Course

Cycle.js Fundamentals

Fetch Data using the Cycle.js HTTP Driver

Share this video with your friends