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

2:42 cycle

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.

Create a Generic Cycle.js Component

7:09 cycle

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.

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

3:55 cycle

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.

Manage Multiple Observable Streams in Cycle.js

7:19 cycle

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. We'll see how as our application grows there are three distinct sections: handling read effects, handling write effects, and handling internal state.

Fetch Data using the Cycle.js HTTP Driver

8:10 cycle

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.

Modify and Track State in Cycle.js

5:37 cycle

This lesson shows how we can create a more interactive app: a counter display with buttons to increment and decrement it. We'll see how we can use the xstreamfold() operator to remember previous values and combine them to create the next values. This is actually how you keep state in Cycle.js.

Read Text Input in a Cycle.js Hello World Application

5:45 cycle

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.

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

4:32 cycle

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.

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

2:18 cycle

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.

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

2:48 cycle

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.

Make Our Toy DOM Driver More Flexible

4:56 cycle

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.

Use the Cycle.js run() Function

3:39 cycle

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.

Read Effects from the DOM with Click Events

5:45 cycle

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.

Generalize Effect Handling with Drivers in the run() Function

3:16 cycle

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".

Customize Effects from the Main Function

1:40 cycle

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.

Organize Code in the Main and Effect Functions

2:29 cycle

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.

Separate Logic from Effects in Cycle.js

3:49 cycle

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.

Event Delegation with RxJS

6:17 rxjsPRO

Event delegation is an extremely powerful technique. It allows you to use a single event handler to listen to events on any number of child elements. It also has the added benefit of working with dynamically added elements without even a single line of additional code. Libraries such as jQuery offer this feature right out of the box, but with RxJS and the fromEvent helper, we’ll need to utilise the selector function to achieve the same result. NOTE: The element.closest method shown in this video required a polyfill for older version of IE which can be found here https://github.com/jonathantneal/closest

Yolk (An RxJS UI Library) in 7 Minutes

6:48 rxjsPRO

Yolk is a small library that works in tandem with RxJS to render handle events and render out HTML using JSX. If you already understand RxJS, Yolk is a very simple addition to your front-end toolbelt. If you're just learning RxJS, Yolk is also an excellent way to practice using Observable and figuring out how they work together by building familiar UI applications.

An overview of RxJS reactive concepts

2:14 rxjsPRO

This video gives an overview of the concepts of reactive programming we saw during this series, and explains how reactive programming can provide true separation of concerns.

Use cached network data with RxJS

7:44 rxjsPRO

In this lesson, we learn how to build the final feature of our user interface: how to use the cached network response to replace a suggested user when the user clicks on the 'x' close button for that user.

Share Network Requests with RxJS merge

3:34 rxjsPRO

This lesson teaches how to control whether network requests are cached or are pessimistically re-executed, with the help of the RxJS merge operator.

Clear data while loading with RxJS startWith

6:28 rxjsPRO

Let's fix a small UI glitch that was occurring on startup and whenever the refresh button was clicked. In this lesson we will see how to avoid common bad habits of imperative programming, and how to use reactive programming to keep the complete dynamic behavior of a value specified in one convenient place.

Send new requests from refresh clicks in RxJS

5:07 rxjsPRO

In this lesson we learn how to fetch new data whenever the refresh button is clicked. This lessons starts to give us a feeling of how is it to develop reactive applications in RxJS.

Render on the DOM with RxJS

5:22 rxjsPRO

Learn how to take data from a network response and display it on the DOM using RxJS reactive event streams.

Use RxJS Async Requests and Responses

7:14 rxjsPRO

In this lesson we start building a small UI widget: suggestions box displaying users to follow in Github. We will learn how to perform network requests to a backend using RxJS Observables.

Reactive Programming - Why choose RxJS?

4:05 rxjsPRO

This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm for programming. See how reactive programming helps you understand the dynamic behavior of a value evolving over time.

Use an event stream of double clicks in RxJS

4:36 rxjsPRO

See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect double clicks with a few operators in RxJS. We will use .bufferWhen to accumulate events into an array to determine if a double click occurred.

Understand Reactive Programming using RxJS

4:31 rxjs

This lesson introduces Reactive Programming using RxJS in simple terms, with a concrete example and no scary terminology.

Error Handling in RxJS

5:12 rxjsPRO

Get your code back on the happy path! This lesson covers a variety of ways to handle exceptions thrown by Observables in RxJS. Operators covered are: catch, onErrorResumeNext, retry and retryWhen

Introduction to the ConnectableObservable and using publish().refCount() in RxJS

3:56 rxjsPRO

An RxJS cold Observable can be made hot by declaring it with .publish().refCount(). What does publish() do? What does refCount() do? This lesson introduces the ConnectableObservable, and how to use it with publish and refCount.

Aggregating Streams With Reduce And Scan using RxJS

3:47 rxjsPRO

What is the RxJS equivalent of Array reduce? What if I want to emit my reduced or aggregated value at each event? This brief tutorial covers Observable operators reduce() and scan(), their differences and gotchas.

Demystifying Cold and Hot Observables in RxJS

3:50 rxjsPRO

Have you ever been caught by complications surrounding Cold and Hot Observables with RxJS (Reactive Extensions for JavaScript)? Worry no more, there is only one "catch" to understand, and then the whole issue will make sense to you when developing reactive applications.

RxJS - map vs flatMap

2:35 rxjsPRO

What is the difference between map and flatMap? How do you take an Observable of Observables and output a single stream? This lesson is a quick look at map and flatMap and how they relate.

Toggle A Stream On And Off With RxJS

3:52 rxjsPRO

This lesson covers how to toggle an observable on and off from another observable by showing how to use a checkbox as a toggle for a stream of data.

Stream Processing With RxJS vs Array Higher-Order Functions

3:49 rxjsPRO

Higher order Array functions such as filter, map and reduce are great for functional programming, but they can incur performance problems. This lesson illustrates how stream processing with RxJS can save you from these pitfalls.

Throttled Buffering in RxJS

3:41 rxjsPRO

Capturing every event can get chatty. Batching events with a throttled buffer in RxJS lets you capture all of those events and use them responsibly without overloading a subscriber downstream.

RxJS Observables vs Promises

6:53 rxjsPRO

Let's look at some of the basic features of RxJS Observables as asynchronous primitives, by comparing them to their cousins, Promises.

What Is RxJS?

2:31 rxjsPRO

RxJS Observables represent a collection of values over time, and can be accessed in familiar ways similar to arrays. RxJS can be thought of as underscore or lodash for asynchronous operations!

Creating An Observable with RxJS

6:53 rxjsPRO

Let's learn the basic anatomy of an RxJS Observable by creating one from scratch. In this lesson, we create a simple Observable. It covers handling asynchronicity, emitting values, observable completion and error handling.