Globus

Functional reactive JavaScript front-end architecture

Globus is an opinionated but loosely coupled reactive front-end architecture. It is a combination of the following:

• Immux state container
• SimpleImmutable data structures
• Kjappas template syntax
• Snabbdom DOM diff algorithm

Globus is not really well documented yet, but there is API documentation on the individual projects, and i am planning to make an example application.

Example app

import { createApp } from "globus";

const reducers = {
  counter: {
    // initial counter state
    initial: {value: 0},

    increment: (state, addend) =>
      state.set("value", state.get("value") + addend || 1)
  }
};

function View($, _) {
  return div(".hello",
    h1("Mandatory counter app"),
    button(
      {
        // Dispatch counter increment action on click
        $click: () => $.counter.increment(1)
      },
      // Show the current value of the counter
      "Value: " + _.counter.value)
  );
}

document.addEventListener("DOMContentLoaded", function() {
  createApp(reducers, View);
});

Suggested folder structure

my-application/
  reducers/
  views/
  actions/
  lib/
    transport/
    data/
    validation/

Larger applications may introduce an additional domain level:

my-application/
  core/
    reducers/
    views/
    actions/
    lib/
      transport/
      data/
  users/
    reducers/
    views/
    actions/
    lib/
      validation/

• reducers is for describing state changes only. no other side effects.
• actions contain functions that may invoke reducersm while doing other io, like calling backend actions etc
• views contain view templates, and possibly helper functions
• lib contains helper functions, as well as stuff like
• lib/transport data adapters for server communtication, converters,
• lib/data functions dealing with internal data formats, like resource representations, and
• lib/validation validator functions