Cycle.js Fundamentals

97 minutes

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

Cycle.js builds on RxJS and is a reactive and functional JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

pro-course-rss-logo

PRO RSS Feed

The Cycle.js principle: separating logic from effects

Main function and effects functions

Customizing effects from the main function

Introducing run() and driver functions

Read effects from the DOM: click events

Generalizing run() function for more types of sources

Making our toy DOM Driver more flexible

Fine-grained control over the DOM Source

Hyperscript as our alternative to template languages

From toy DOM Driver to real DOM Driver

Hello World in Cycle.js

An interactive counter in Cycle.js

Using the HTTP Driver

Body-Mass Index calculator built in Cycle.js

Model-View-Intent pattern for separation of concerns

Our first component: a labeled slider

Using the component in the main() function

Multiple independent instances of a component

Isolating component instances

Exporting values from components through sinks

Overview of Cycle.js

rx tutorial about The Cycle.js principle: separating logic from effects

The Cycle.js principle: separating logic from effects

3:30 rx

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

rx tutorial about Main function and effects functions

Main function and effects functions

2:10 rx

We need to give structure to our application with logic and effects. This lessons shows how we can organize our code into two parts: main() function for logic, and effects functions for effects.

rx tutorial about Customizing effects from the main function

Customizing effects from the main function

2:05 rx

How can we show one string on the DOM, and a completely different string on Console log? This lesson shows how we can make our main function return multiple Observables, each one targeted at a different type of effect.

rx tutorial about Introducing run() and driver functions

Introducing run() and driver functions

4:06 rx

The last part of the code we wrote is neither logic nor effects. It is code which ties together logic (main) with effects. We can encapsulate that in a run() function. This lesson shows how we can structure these pieces together, and generalize effect handling with "drivers".

rx tutorial about Read effects from the DOM: click events

Read effects from the DOM: click events

6:00 rx

So far we only had effects that write something to the external world, we are not yet reading anything from the external world into our app. This lesson shows how we can change the DOM Driver to return a "DOM Source" representing read effects, such as click events. We will leverage that to create an interactive application.

rx tutorial about Generalizing run() function for more types of sources

Generalizing run() function for more types of sources

4:23 rx

Our application was able to produce write effects, through sinks, and was able to receive read effects, through the DOM sources. However, the main function only gets the DOMSource as input. This lessons shows how we can generalize main to receive an object of sources, containing all kinds of read effects that we can use.

rx tutorial about Making our toy DOM Driver more flexible

Making our toy DOM Driver more flexible

5:22 rx

Our previous toy DOM Driver is still primitive. We are only able to send strings as the textContent of the container element. We cannot yet create headers and inputs and all sorts of fancy DOM elements. In this lesson we will see how to send objects that describe what elements should exist, instead of strings as the DOM sink.

rx tutorial about Fine-grained control over the DOM Source

Fine-grained control over the DOM Source

2:58 rx

What if we wanted to change the behavior of our app reset the timer every time the mouse hovers over it? Currently we only support clicks, and they are hard coded in the DOM Driver. This lesson will introduce DOMSource.selectEvents(), a way of making the DOM Source rich and allowing the main() function to determine which read effects it needs.

rx tutorial about Hyperscript as our alternative to template languages

Hyperscript as our alternative to template languages

2:53 rx

Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can create our own template language is to write a function that returns these objects for us. This lessons shows how we can use these functions as a DSL to create our DOM description objects.

rx tutorial about From toy DOM Driver to real DOM Driver

From toy DOM Driver to real DOM Driver

4:52 rx

This lessons shows how we are able to easily swap our toy DOM Driver with the actual Cycle.js DOM Driver, a more solid, more flexible, more efficient implementation.

rx tutorial about Hello World in Cycle.js

Hello World in Cycle.js

4:44 rx

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.

rx tutorial about An interactive counter in Cycle.js

An interactive counter in Cycle.js

8:08 rx

This lesson shows how we can create a more interactive app: a counter display with buttons to increment and decrement it. This reveals how we can use the RxJS scan() operator to remember past values and keep state.

rx tutorial about Using the HTTP Driver

Using the HTTP Driver

12:19 rx

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.

rx tutorial about Body-Mass Index calculator built in Cycle.js

Body-Mass Index calculator built in Cycle.js

6:40 rx

So far we have been writing very small apps in Cycle.js. Let's start growing the size of the apps we build. This time, we will see how to build a simple Body-Mass Index Calculator.

rx tutorial about Model-View-Intent pattern for separation of concerns

Model-View-Intent pattern for separation of concerns

3:17 rx

We built the BMI calculator all inside one function: main(). As apps scale, we don't want main() to grow. We need an organized pattern where each function focuses on doing one thing. This lesson shows how we can easily refactor the main() function into three parts: Intent, Model, and View.

rx tutorial about Our first component: a labeled slider

Our first component: a labeled slider

8:05 rx

We are starting to get a better architecture for these UI apps. But we still have a problem of repeating code for the sliders, since they share so much in common in looks and functionality. This lessons shows how we can create a generic labeled slider as a main() function receiving properties as sources.

rx tutorial about Using the component in the main() function

Using the component in the main() function

1:57 rx

We have made a Cycle.js app for generic labeled slider which can be configured through props, but how can we reuse it in other Cycle.js apps? This lesson shows how we can embed any Cycle program inside a larger Cycle program in a very simple manner.

rx tutorial about Multiple independent instances of a component

Multiple independent instances of a component

4:31 rx

Once we have a labeled slider component inside the main function, we should be able to create another labeled slider. This lesson teaches how to accomplish that, and make sure those two instances work independently of each other.

rx tutorial about Isolating component instances

Isolating component instances

3:39 rx

We added classNames to pre-processing and post-processing steps when calling the LabeledSlider, in order to instances independent of each other. It would be better if we could hide these steps away. This lesson introduces the isolate() helper function to achieve that.

rx tutorial about Exporting values from components through sinks

Exporting values from components through sinks

3:30 rx

Our app is not yet a BMI calculator, because it only has two sliders, but doesn't show the calculated BMI number. In this lesson we will learn how to export any stream from a child component and use it in the parent component, in order to display the BMI calculation on the DOM.

rx tutorial about Overview of Cycle.js

Overview of Cycle.js

2:28 rx

This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.

Presented by:

André Staltz

Andre is a user interface engineer at Futurice, with extensive knowledge
in reactive programming. He is a contributor to RxJS, has built
RxMarbles, written an introduction to reactive programming which went
viral, and collaborated to design ReactiveX.io. His current mission is
to redefine how we understand and structure user interfaces with the
reactive web framework Cycle.js.

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