<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Flummox | Minimal, isomorphic Flux</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
      <link rel="stylesheet" href="/flummox/css/app.min.css">
    
  </head>
  <body>
    <div id="app"><div data-reactid=".leanp1ogsg" data-react-checksum="192769449"><div style="height:2.25rem;" class="View" data-reactid=".leanp1ogsg.0"><div class="View" style="background-color:#2083E0;position:fixed;width:100%;z-index:9999;" data-reactid=".leanp1ogsg.0.0"><div class="View" data-reactid=".leanp1ogsg.0.0.0"><div class="View" data-reactid=".leanp1ogsg.0.0.0.0"><a href="/" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.0.0.0">Flummox</a></div></div><div class="View View--justifyContentFlexEnd View--flexGrow" data-reactid=".leanp1ogsg.0.0.1"><div class="View" data-reactid=".leanp1ogsg.0.0.1.0"><a href="/flummox/docs/guides" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.0.0">Guides</a><div class="View View--flexDirectionColumn" style="display:none;background-color:#2083E0;position:absolute;right:0;top:100%;width:16em;text-align:right;" data-reactid=".leanp1ogsg.0.0.1.0.1"><div class="View" data-reactid=".leanp1ogsg.0.0.1.0.1.0"><a href="/flummox/docs/guides/quick-start" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.0.1.0.0">Quick Start</a></div><div class="View" data-reactid=".leanp1ogsg.0.0.1.0.1.1"><a href="/flummox/docs/guides/react-integration" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.0.1.1.0">React Integration</a></div><div class="View" data-reactid=".leanp1ogsg.0.0.1.0.1.2"><a href="/flummox/docs/guides/why-flux-component-is-better-than-flux-mixin" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.0.1.2.0">Why FluxComponent &gt; fluxMixin</a></div></div></div><div class="View" data-reactid=".leanp1ogsg.0.0.1.1"><a href="/flummox/docs/api" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.1.0">API</a><div class="View View--flexDirectionColumn" style="display:none;background-color:#2083E0;position:absolute;right:0;top:100%;width:16em;text-align:right;" data-reactid=".leanp1ogsg.0.0.1.1.1"><div class="View" data-reactid=".leanp1ogsg.0.0.1.1.1.0"><a href="/flummox/docs/api/store" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.1.1.0.0">Store</a></div><div class="View" data-reactid=".leanp1ogsg.0.0.1.1.1.1"><a href="/flummox/docs/api/flux" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.1.1.1.0">Flux</a></div><div class="View" data-reactid=".leanp1ogsg.0.0.1.1.1.2"><a href="/flummox/docs/api/actions" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.1.1.2.0">Actions</a></div><div class="View" data-reactid=".leanp1ogsg.0.0.1.1.1.3"><a href="/flummox/docs/api/fluxcomponent" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.1.1.3.0">FluxComponent</a></div><div class="View" data-reactid=".leanp1ogsg.0.0.1.1.1.4"><a href="/flummox/docs/api/higher-order-component" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.1.1.4.0">Higher-order component</a></div><div class="View" data-reactid=".leanp1ogsg.0.0.1.1.1.5"><a href="/flummox/docs/api/fluxmixin" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.1.1.5.0">fluxMixin</a></div></div></div><div class="View" data-reactid=".leanp1ogsg.0.0.1.2"><a href="https://github.com/acdlite/flummox" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".leanp1ogsg.0.0.1.2.0">GitHub</a></div></div></div></div><span data-reactid=".leanp1ogsg.1"><article class="Doc" style="padding:3rem 0;" data-reactid=".leanp1ogsg.1.$=1$/flummox"><div class="Container" data-reactid=".leanp1ogsg.1.$=1$/flummox.0"><div class="Doc-content" data-reactid=".leanp1ogsg.1.$=1$/flummox.0.0"><h1>Flummox</h1>
<p><a href="https://travis-ci.org/acdlite/flummox"><img src="https://img.shields.io/travis/acdlite/flummox.svg?style=flat-square" alt="build status"></a>
<a href="https://codeclimate.com/github/acdlite/flummox"><img src="https://img.shields.io/codeclimate/coverage/github/acdlite/flummox.svg?style=flat-square" alt="Test Coverage"></a>
<a href="https://www.npmjs.com/package/flummox"><img src="https://img.shields.io/npm/dm/flummox.svg?style=flat-square" alt="npm downloads"></a>
<a href="https://www.npmjs.com/package/flummox"><img src="https://img.shields.io/npm/v/flummox.svg?style=flat-square" alt="npm version"></a></p>
<p>Idiomatic, modular, testable, isomorphic Flux. No singletons required.</p>
<pre><code>$ npm install --save flummox
</code></pre>
<p>Join the <strong>#flummox</strong> channel of the <a href="http://reactiflux.com/">Reactiflux</a> Slack community.</p>
<p><a href="https://gitter.im/acdlite/flummox?utm_source=badge&amp;utm_medium=badge&amp;utm_campaign=pr-badge&amp;utm_content=badge"><img src="https://badges.gitter.im/Join%20Chat.svg" alt="Join the chat at https://gitter.im/acdlite/flummox"></a></p>
<ul>
<li><a href="flummox/docs/api.md">API documentation</a></li>
<li><a href="flummox/docs/guides/quick-start.md">Quick start guide</a></li>
<li><a href="flummox/docs/guides/react-integration.md">React integration guide</a></li>
</ul>
<h2>Features</h2>
<ul>
<li>No singletons = isomorphism for free!</li>
<li>Robust yet minimal API inspired by React and ES6</li>
<li>Tiny. <strong>~3.8kb (compressed and gzipped)</strong>.</li>
<li>The dispatcher and constants are implementation details — no need to interact with them unless you want to.</li>
<li>Async actions <a href="flummox/docs/api/actions#asynchronous-actions">made simple with promises</a>. Pairs well with async-await, or your favorite promise library.</li>
<li>Easy <a href="flummox/docs/guides/react-integration">integration with React</a> via fluxMixin and FluxComponent.</li>
<li>Support for <a href="http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html">plain JavaScript class components</a> in React 0.13.</li>
<li>Serialization/deserialization of stores, for faster page loads.</li>
<li>Centralized <a href="flummox/docs/api/flux">debugging</a>.</li>
<li>“It’s Just JavaScript” — supports CoffeeScript, TypeScript, and any other compile-to-JS language.</li>
</ul>
<p><strong>Version 3.0 with official support for React 0.13 has been released! See the <a href="https://github.com/acdlite/flummox/blob/master/CHANGELOG.md">changelog</a> and <a href="https://github.com/acdlite/flummox/blob/master/UPGRADE_GUIDE.md">upgrade guide</a> for more information.</strong></p>
<p><strong>Pssst…</strong> Want to see an example of an isomorphic Flummox app? You’re looking at one right now! <a href="https://github.com/acdlite/flummox/tree/master/docs">Check out the source</a> to see how it’s made.</p>
<h2>The big idea</h2>
<p>There are <em>sooo</em> many Flux libraries out there. What makes Flummox special?</p>
<p>Flummox allows you to encapsulate your entire Flux set-up — stores, actions, constants, and the dispatcher — into a single class, with <strong>zero singletons or global references</strong>. It’s as easy as</p>
<pre><code class="language-js">const flux = new Flux();
</code></pre>
<p>There are many benefits to this approach, but the biggest one is that it makes isomorphism (running the same code on both the server and the client) incredibly straightforward.</p>
<p><strong>Flummox is not a framework.</strong> Rather than forcing a bunch of new concepts and complicated APIs upon you, Flummox embraces existing idioms from Flux, React, and ES6 — without being too prescriptive.</p>
<h4>Simple example</h4>
<pre><code class="language-js">import { Actions, Store, Flummox } from 'flummox';

class MessageActions extends Actions {
  newMessage(content) {
    return content; // automatically dispatched
  }
}

class MessageStore extends Store {
  constructor(flux) {
    super();

    const messageActions = flux.getActions('messages');
    this.register(messageActions.newMessage, this.handleNewMessage);
    this.messageCounter = 0;

    this.state = {};
  }

  handleNewMessage(content) {
    const id = this.messageCounter++;

    this.setState({
      [id]: {
        content,
        id,
      },
    });
  }
}

class Flux extends Flummox {
  constructor() {
    super();

    this.createActions('messages', MessageActions);
    this.createStore('messages', MessageStore, this);
  }
}

const flux = new Flux();

// perform action
flux.getActions('messages').newMessage('Hello, world!');
</code></pre>
<h3>Idiomatic</h3>
<p>If you know Flux, you know Flummox. If you’re not familiar with Flux, there are <a href="http://facebook.github.io/flux/docs/overview.html#content">many</a> <a href="https://medium.com/brigade-engineering/what-is-the-flux-application-architecture-b57ebca85b9e">great</a> resources available to get you up to speed.</p>
<p>The primary goal of Flummox is reduce the boilerplate involved in setting up Flux for your application, so the API has been kept as minimal and predictable as possible. It uses Facebook’s dispatcher under the hood. It encourages (but does not require) the use of ES6 classes. The state API for stores mirrors the state API for React components. Everything works as you’d probably expect.</p>
<h3>Modular</h3>
<p>There are three classes in Flummox: Store, Actions, and Flux. They are completely independent from each other. For example, you can create a new Store without ever touching Flux or Actions. You can extend them, modify them, add mixins — if it’s possible with JavaScript, you can do it.</p>
<p>Examples in this document use ES6 class notation, but that’s a pattern, not a requirement: underneath the hood, it’s just JavaScript prototypical inheritance. It’s compatible with CoffeeScript, TypeScript, and regular ES5 right out of the box.</p>
<h3>Testable</h3>
<p>Because Flummox does not rely on singletons, and each of the different classes can be instantiated independently from the others, it’s really easy to write tests. A good example can be found in Flummox’s own <a href="https://github.com/acdlite/flummox/blob/master/src/__tests__/Store-test.js">test suite</a>.</p>
<h3>Isomorphic</h3>
<p>This is a big one, and one of the biggest motivating factors for creating this library. Isomorphism is tricky or impossible in many other Flux libraries because they rely on singleton objects, spread out across multiple modules. Often they force you to use a separate API.</p>
<p>Again, because Flummox does not rely on singletons, you get isomorphism for free: just create a new Flux instance on each request! Here’s a very basic example how that might look using Express and React:</p>
<pre><code class="language-js">
// shared/Flux.js
class Flux extends Flummox { ... }

// server/app.js
app.get(&quot;/&quot;, function(req, res) {
  const flux = new Flux();

  res.send(
    React.renderToString(&lt;App flux={flux} /&gt;)
  );
});
</code></pre>
<p>Flummox also gives you the ability to serialize the initial state of your application on the server, send it down to the client as a string, and deserialize it before the initial render. While not required for isomorphism, it helps make the initial page load snappy by reducing unnecessary AJAX requests to the server.</p>
<h2>React integration</h2>
<p>Integrating Flummox with React is really easy. You can do it the long way by manually adding and removing event listeners, but that leads to a lot of boilerplate. Use FluxComponent and/or fluxMixin to subscribe to store changes.</p>
<p>Here’s a basic example:</p>
<pre><code class="language-js">import React from 'react';
import FluxComponent from 'flummox/component';

class OuterComponent extends React.Component {
  render() {
    return (
      // Pass an array of store keys, or a map of keys to state getters
      &lt;FluxComponent connectToStores={['storeA', 'storeB']}&gt;
        &lt;InnerComponent /&gt;
      &lt;/FluxComponent&gt;
    );
  }
}
</code></pre>
<p>You can subscribe to subsets of store state using custom state getters. Read all about it in the <a href="flummox/docs/guides/react-integration">React integration guide</a>.</p>
<h2>Roadmap</h2>
<p>Flummox is still quite new, but the core features are already in place. A big focus right now is improving the documentation, writing guides, and providing examples. Since Flummox’s core innovation is its approach to isomorphism, I would like to make it especially easy for newcomers to learn how to use Flummox to create isomorphic applications.</p>
<p>Feature requests and PRs are absolutely welcome, as long as they keep with the spirit of a minimal core API. Any additional features (e.g. undo-redo &amp; versioning) are likely to be implemented as addons, rather than as part of the core.</p>
<h2>Recommended libraries</h2>
<p>Flummox is just Flux. It has no opinion on the rest of your stack. You don’t even have to be using React. But in case you’re interested, here are some recommended tools and libraries that complement Flummox well:</p>
<ul>
<li><a href="http://facebook.github.io/react/">React (of course!)</a></li>
<li><a href="http://facebook.github.io/immutable-js/">Immutable.js</a> — Using immutable data in your applications not only makes your application more performant, but it also simplifies state management in your stores. No more defensive copying! It also helps ensure isolation between stores by reducing the likelihood that you’ll accidentally mutate a dispatched payload.</li>
<li><a href="https://github.com/rackt/react-router">React Router</a> — A complete routing solution for React, with excellent support for isomorphic applications.</li>
<li><a href="https://babeljs.io/">Babel</a> — Use next-generation JavaScript (ES6, and even some ES7) today. Once you’ve tried it, it’s the only way to write JavaScript. Babel also very conveniently supports JSX compilation.</li>
</ul>
<h2>Inspiration and thanks</h2>
<ul>
<li>Facebook, obviously.</li>
<li>Pete Hunt’s talk at React.js Conf 2015 <a href="https://www.youtube.com/watch?v=KtmjkCuV-EU">“Full Stack Flux”</a>. The idea of stores as essentially “a reduce() + a change event” was illuminating.</li>
<li><a href="https://github.com/goatslacker/alt">alt</a>, a similar Flux library from which I shamelessly copied (ideas, not code)</li>
</ul>
<h2>License</h2>
<p>MIT</p>
<p>Andrew Clark <a href="https://twitter.com/acdlite">@acdlite</a></p>
</div></div></article></span></div></div>

    
      <script src="/flummox/js/app.min.js" defer></script>
    
  </body>
</html>


Collaborative Calculation and Data Science

colby

sagemath

Product

Resources

Company