Share

Create a simple registration form using Cycle.js and track the application state

This tutorial is the first in a series where we will be building a simple registration form
using Cycle.js and we will be tracking the application state on what the user input is.

Table of Contents

1 Create a simple registration form using Cycle.js and track the application state

This tutorial is the first in a series where we will be building a simple registration form
using Cycle.js and we will be tracking the application state on what the user input is.
This repo is just a rewrite for Ivan Kleshnin‘s Cyclejs example 1.1,
except this version is using xstream library of André Staltz

View the original version here:
1.0-Form

Online demo is available here.
Source code for this tutorial is available in Github.

1.1 About Cycle.js

Cycle.js is a functional and reactive JavaScript framework for predictable code created by Andre Staltz from Futurice.

1.2 Create the application boilerplate

The quickest way to create a new project with Cycle.js is by using create-cycle-app.

The application folder structure will look like this:

Inside the src/ directory, we will be having the source code:

  • app.js => will have your app source code, this is where we will be putting our logic
  • main.js => will have main() function which will be executed by Cycle.run
  • app.test.js => will have tests for your app

1.3 Getting the value of username input field

  • From the DOM Source get the username dom element
  • Capture only the input events for the element
  • Map each event to the value of the input element i.e., the target
  • Start with a empty quotes value for the initial application state

1.4 Getting the value of email input field

Again we are doing the same for the email element

1.5 Constructing the virtual DOM tree

Here we are constructing the Virtual DOM using the application state which in turn is got by combining the username and
email streams.

We will be using the xstream library by Andre Staltz, which is an extremely intuitive, small, and fast
functional reactive stream library for JavaScript

Also, we are capturing the application state using the values stored in username and email and
rendering them in the DOM using pre tags in JSON format.

1.6 Returning the output sinks

Finally we are returning the virtual DOM tree as output sinks back again to the main function.

1.7 Links