TodoMVC+Firebase in Elm+ElmFire
TodoMVC implemented in Elm, extending Evan Czaplicki's version, using Firebase via ElmFire and elmfire-extra for storage and real-time collaboration.
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
The app complies with The Elm Architecture, using evancz/start-app and evancz/elm-effects.
A sketch of the data flow:
model
comprises two parts
ElmFire.Dict
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
).view
function renders the current model as HTMLPlease 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.