redux-elm

The Elm Architecture in JavaScript for building really scalable applications.

redux-elm is framework specifically tailored for solving difficult problems that people have to face in modern front-end application development, it is heavily based on Composition.

Goal of this project is to solve hard problems by defining patterns, not implementation. Library is very lightweight and you should be able to fully understand the codebase. Main building block is redux which serves as predictable state container and because redux-elm is built on top of that, you will be able to benefit from all of its tooling:

• DevTools
• Time Travel
• Immutable application snapshots
• Easy unit testing

Because redux-elm is about Patterns, we have really thorough documentation which guides you to utilize all the ideas that redux-elm provides.

See why the Elm Architecture matters.

How does it look?

redux-elm is about Components and every Component must define two pieces Updater and View where Updater is very similar to Redux reducer and View is simple React Component, of course you can use your own View library.

Counter Updater

import { Updater } from 'redux-elm';

const initialModel = 0;

export default new Updater(initialModel)
  .case('Increment', model => model + 1)
  .case('Decrement', model => model - 1)
  .toReducer();

Counter View

import React from 'react';
import { view } from 'redux-elm';

export default view(({ model, dispatch }) => (
  <div>
    <button onClick={() => dispatch({ type: 'Decrement' })}>-</button>
    <div>{model}</div>
    <button onClick={() => dispatch({ type: 'Increment' })}>+</button>
  </div>
));

Installation & Usage

You can install redux-elm via npm.

npm install redux-elm --save

We didn't want to keep all the boilerplate in redux-elm repo therefore we've prepared simple redux-elm-skeleton repositiory which will serve as easiest way to start using redux-elm.

git clone [email protected]:salsita/redux-elm-skeleton.git
cd redux-elm-skeleton
npm install
npm start
open http://localhost:3000

You will see Hello World so that you can immediately open your favorite Text Editor and start writing your own application. Skeleton repo integrates redux-devtools Chrome extension, so we strongly recommend installing the extension.

Boilerplate

Are you looking for more feature complete boilerplate? There are two boilerplates which works well with redux-elm:

1. https://github.com/jmarceli/redux-elm-boilerplate based on react-boilerplate
2. https://github.com/salsita/redux-boilerplate from redux-elm authors but soon to be deprecated

Documentation

Goal of documentation is explaining basic principle of redux-elm and this is Composition, it's divided into few chapters to gradually increase amount of complexity.

1. Getting Started Tutorial
2. GifViewer Tutorial
3. Composition

First two chapters describes basic principles, while Composition part is the most important part explaining how redux-elm helps you building really scalable application. There's also Chapter which explains how to properly Unit test your application.

Examples

You will find original Elm Architecture examples written in JavaScript using redux-elm:

1. Counter
2. Counters Pair
3. Dynamic List of Counters
4. Random GIF Viewer
5. Random GIF Viewers Pair
6. Dynamic List of Random GIF Viewers

Static Typing

Definitely one of the most important features of Elm programming language is its type system. Elm is statically typed language and fully supports type inference, unfortunately this is not same for JavaScript, however you can still use flowtype because redux-elm provides type definitions for everything that's publicly exposed. We strongly encourage you to do so, because Flow is a great help for spotting subtle bugs before they actually appear. Using Flow in your redux-elm project is seemless and does not require any additional effort except installing flow as your project's dependency.

Flow checks:

• correct model shape
• Matchers
• and many more...

Discussion

Join the discussion on gitter