TodoMVC in Elm + ElmFire • Demo

TodoMVC implemented in Elm, extending Evan Czaplicki's version, using Firebase via ElmFire and elmfire-extra for storage and real-time collaboration.

Build Instructions

This app needs the Elm plattform version 0.16. Compile with:

elm make --yes --output js/elm.js src/TodoMVC.elm

Then open index.html in your browser. The app should connect to the shared Firebase and retrieve the current list of items.

Alternatively use the enclosed Makefile on Unix-like machines:

make all open

Architectural Overview

The app complies with The Elm Architecture, using evancz/start-app and evancz/elm-effects.

A sketch of the data flow:

• Inputs are coming from
  • Firebase changes
  • user interaction
• The model comprises two parts
  • shared persistent state, mirrored from Firebase by means of ElmFire.Dict
  • local state (filter settings, intermediate edit state)
• An update function takes an input event and the current model, returning a new model and possibly an effect, i.e. a task to change the Firebase data (using ElmFire.Op).
• A view function renders the current model as HTML

Please note that content changes made by the user always flow through the Firebase layer. From there they a passed down to the new model. This utilizes the fact that the Firebase library immediately reflects local writes without waiting for a server round trip.

Firebase queues up write operations during a network outage. So the app will work offline and will catch up after going online again.

For adding new items the app uses Firebase's push operation, which generates chronologically sorted unique ids. The model uses a dictionary to map these ids to the items' payload.

Future Work

• Explore architectural variations
  • Componentize the model: split it into a shared part and a local part where the local part depends on the shared part but not the other way round.
• Possibly structure the code into components, as outlined in The Elm Architecture.