Cycle.js

A fully functional and reactive

JavaScript framework for cleaner code

Why yet another framework?

Something needs to change in the way we build systems.

Horrendous complexity
Too much code in HTML
Inconsistent and surprising behaviour
Monolithic
No clear way to separate concerns

Too much wiring - low signal-to-noise ratio
A lot of very complex middleware that's difficult to make
Async is a pain
Too verbose in some places and too implicit in others

AngularJS

React

We need something better.

Or, at the very least, something different!

Introducing...

A better way

(conveniently also the central idea of Cycle.js)

Functional
Reactive
Programming

What is FRP?

FRP is the culmination of Functional and Reactive Programing to achieve a more explicit dataflow with less magic and more

conciseness.

It helps you make your code cleaner and more understandable with very cohesive, decoupled units that are composable and testable.

Yeah, that was vague...

Let's go one principle at a time

Functional

A way to make programs focusing on small, reusable functions.

Three core pillars:

Pure Functions

Composing Functions

Higher-order Functions

Pure Functions

Do not use anything outside of their inputs

Will give you only one output for one set of inputs.

// PURE. 
// Only operates on inputs.
// Does not modify external state.
// One input will give you only one output.
function sum(x, y) {
  return x + y;
}

// IMPURE.
// Console defined elsewhere
// - doesn't operate on only inputs.
// Has a side effect on the console.
function log(thing) {
  console.log(thing);
}

// IMPURE.
// Doesn't operate on only inputs.
// Modifies external state.
function getNetwork() {
  // ... doing things with network 
  // (HTTP requests, etc)
}

// IMPURE.
// One input may give you many
// different outputs.
function silly(number) {
  if (Math.random() > 0.5)
    return number - 1;
  return number; 
}

Do not modify external state or cause anything to happen to the external world.

Pure functions, generally, make it easier to understand, test, and reason about your code, because of the less wiring involved in using them.

Few examples

Composing Functions

Composing functions is a technique to build bigger chunks of behavior from smaller chunks.

let isEven = (x) => x % 2 == 0;

let not = (val) = !val;

let isOdd = (x) = not(isEven(x))

F(x) = g(f(x))

F(x) = g(f(x))

isOdd(x) = not(isEven(x))

isOdd(x) = not(isEven(x))

Higher-order Functions

Higher-order functions

are functions that can take functions as parameters.

// Takes a list and returns a new list with
// the given function applied to each of them
function map(func, list) {
  let result = [];
  for (val of list) {
    result.push(val);
  }
  return result;
}


// Returns a list of values from the given list 
// that the given function returns "true" for.
function filter(shouldInclude, list) {
  let result = [];
  for (val of list) {
    if (shouldInclude(val))
      result.push(val);
  }
  return result;
}


let evenSquaresOfOneDigits = 
  map(x => x * x, 
    filter(x => x % 2 == 0, 
      [1, 2, 3, 4, 5, 6, 7, 8, 9]));

You can use them in many ways.

Higher-order functions allow you to think of behavior as a series of transformations to data.

Functional programming emphasizes

Small
Pure
Reusable

That covers functional, now let's look at reactive

Reactive

A way to easily decouple functions

from each other and make any dependencies more clear.

Proactive vs Reactive

"Others define when I should change"

"I define when I change, and due to what"

"Hey, set yourself to this value."

"Hey, this is my new value."

"OK"

"I can do whatever I want with it."

How do you accomplish this?

Event emmiters

No intuitive way to apply transformations events
Have to maintain internal state about who to notify
No way to handle errors

Streams of events

Can transform events using higher-order functions
Can simply be returned as any old value from any function
Can emit errors

What are Streams?

Streams are collections, just like arrays...

Arrays

memory

...but they're spread over time, not memory

Streams

time

click!

Some operations which streams support

Takes a stream of values, applies a given function to each of those values, and returns a stream with the new values.

Filter

Takes a stream of values, and returns a stream that only includes values that a given function returns true for.

Fold

Takes a stream of values, and creates a new stream that emits acculamated values according to a given function.

Flatten

Takes a stream of streams, and "flattens" them into one stream that emits values from all the emitted streams.

Cycle.js is a fusion of functional and reactive programming that allows you to have the best of both worlds.

Cycle.js allows you to write your entire app as a pure function, bringing the advantages of functional programming with it.

This function, called main(), transforms (using higher-order functions) streams of inputs from the outside world to streams of outputs to the outside world.

Because your app is a pure function, you can split it up into more pure functions that each only transform input streams (sources) to output streams (sinks)

And then you can compose them, because they behave like literally any old function!

Sources are streams of inputs

from the outside world.

(User clicks, HTTP responses, really anything)

Sinks are streams of output

to the outside world.

(Rendered page, HTTP requests, again anything)

The outside world is represented by what are known as drivers. These are the impure functions, the only place where your code touches the external world.

They take in sinks from the main function, use the values from them to affect the world, and return inputs from the world as sources to the main function.

It's a... guess what?

Cycle!

Demo

A basic counter example, with increment and decrement buttons, and a number.

That's it!

Explore more about Cycle.js at cycle.js.org