Reflex is a JS library for writing fast and easily maintainable applications that is heavily inspired by (more honestly, is a port of) Elm and it's amazingly simple yet, powerful architecture where "flux" (in react terms) is simply a byproduct of an architecture. Reflex does not competes with Elm but rather provides a ramp up solution where Elm is natural next step.

Disclaimer

Reflex does competes and often times is this documentation compared to React + Redux duo. That is not to criticize or devalue those libraries, but rather an to better explain difference in trade-offs. In fact reflex would not have being possible without success of React & Redux for which we are highly grateful.

An Introduction to Reflex

Reflex inherits a strong emphasis on simplicity, performance and ease-of-use.

This guide will introduce:

• Fundamentals of the architecture.
• Show how to build an interactive application.
• Emphasize the principles and patterns in use.
• Illustrate benefits of design tailored for static typeing.

A Quick Sample

Below is a simple counter. It just lets you increment and decrement the counter. All the code examples will have flow type annotations. It is not mandatory, but is highly recommended to use flow type annotations & a checker. We will gradually illustrate the advantages of doing so through out the documentation.

/* @flow */

import {start, beginner, html} from "reflex"
import type {DOM, Address} from "reflex"

export const init =
  (value:number=0) =>
  new Model(value)

export class Model {
  value: number;
  constructor(value:number) {
    this.value = value
  }
}


export const update =
  (model:Model, command:Command):Model => {
    switch (command.type) {
      case "Increment":
        return new Model(model.value + 1)
      case "Decrement":
        return new Model(model.value - 1)
    }
  }

type Command =
  | { type: "Increment" }
  | { type: "Decrement" }

export const view =
  (model:Model, send:Address<Command>):DOM =>
  html.section({ className: "counter" }, [
    html.button({
      onClick: event => send({ type: "Decrement" })
    }, ["-"]),
    html.output({
        className: "value"
    }, [`${model.value}`]),
    html.button({
        onClick: event => send({ type: "Increment" })
    }, ["+"])
  ])

export const main = start(beginner({model: init(), update, view}))

Notice that the update and view are just plain functions & entirely decoupled from each other. This makes composition straight forward, no need for (high-order) components, mixins or other nonsense.

Why Reflex ?

Lot of popular libraries are inspired by Elm. Reflex is an honest port & there for a great ramp up for Elm. Unlike other derivations of Elm, Reflex recognizes essential role type system plays in Elm. It full embraces design choices driven by type system & in conjunction with flow provide a strong guarantees:

• No runtime errors in practice. No null vs undefined. No undefined is not a function.
• Type checker catches outlines errors without even running your code. That help you add features more quickly & without regressions.
• Well-architected code stays well-architected as it grows and changes over time.