@rkenmi - Kefir.js - Reactive Javascript

Kefir.js - Reactive Javascript


The basics of Kefir.js, and reactive programming.

Kefir.js - Reactive Javascript


Back to Top

Updated on March 13, 2017

Background

Kefir.js is a Reactive Programming library for JavaScript inspired by Bacon.js and RxJS, with focus on high performance and low memory usage.

Kefir works with objects called observables.

observables could be two things; a stream, or a property (not to be confused with a Javascript object property)

Streams

A stream is a sequence of events made available over time. In other words, it can be seen as an array of events. Each index in this array describes a point in time.

For example, let's say that some user goes to a webpage and click-spam on a button. In this stream, at t = 1, a mouse click event may occur, and at t = 2, another mouse click event might occur. So on and so forth.

Property

A property is an observable, just like a stream, but a property has the concept of a current value. Using the example above, when some user goes to a webpage and click-spam on a button, at t = 1, a property may have 1 mouse click as its current value, and at t = 2, it may have 2 mouse clicks as its current value.

https://rpominov.github.io/kefir/docs-src/images/stream-and-property.png

So what's the difference between a property and a stream?

  1. Properties may represent some value.
  2. When properties are given a subscriber, the callback into the subscriber is called immediately or synchronously. Therefore, the timing that the subscriber callbacks are executed are different between properties and streams.

What is a subscriber?

A subscriber adds side effects to the property or stream.
For example, given this function call:

foobar.onValue(fn) 

.onValue is a subscriber method that adds a callback function called fn to any values that are generated (at some point in time) on foobar, which is an observable (i.e., a property or a stream).


Article Tags:
Javascriptkefir.jsreact