Elm codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

Introduction

Demo

Documentation

This codebase was created mainly to demonstrate a Single Page Application written in Elm using the Effect pattern. It was forked initialy from the great rtfeldman/elm-spa-example.

For more information on how this works with other frontends/backends, head over to the RealWorld repo.

How it works

The Effect pattern used in this application consists in definining an Effect custom type that can represent all the effects that init and update functions want to produce.

These effects can represent:

• a Cmd value
• a request to change the state at an upper level (for example an URL change from a subpage without an anchor)

The init and update functions are changed to use this new type, using a custom application function, that turns the type into actual effects.

There are several benefits to this approach that makes it a valuable pattern for complex applications:

• All the effects are defined in a single Effect module, which acts as an internal API for the whole application that is guaranteed to list every possible effect.

• Effects can be inspected and tested, not like Cmd values. This allows to test all the application effects, including HTTP requests.

• Effects can represent a modification of top level model data, like the Session when logging in, or the current page when an URL change is wanted by a subpage update function.

• All the update functions keep a clean and concise signature returning a tuple:
  Msg -> Model -> ( Model, Effect Msg ).

• Because effects carry the minimum information required, some parameters like the Browser.Navigation.key are needed only in the effects perform function, which frees the developer from passing them to functions all over the application.

• A single NoOp or Ignored String can be used for the whole application.

How to run

Install dependencies:

npm install

To run in debug mode with live reloading:

npm run watch

To build for production:

npm run build