https://github.com/ThomasWeiser/todomvc-elmfire

TodoMVC+Firebase in Elm+ElmFire
https://github.com/ThomasWeiser/todomvc-elmfire

elm elmfire firebase todomvc

Last synced: 28 days ago
JSON representation

TodoMVC+Firebase in Elm+ElmFire

• Host: GitHub
• URL: https://github.com/ThomasWeiser/todomvc-elmfire
• Owner: ThomasWeiser
• License: bsd-3-clause
• Created: 2015-08-04T10:52:48.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-06-16T20:06:36.000Z (over 8 years ago)
• Last Synced: 2024-11-10T20:12:20.399Z (about 1 month ago)
• Topics: elm, elmfire, firebase, todomvc
• Language: Elm
• Homepage: http://thomasweiser.github.io/todomvc-elmfire/
• Size: 375 KB
• Stars: 60
• Watchers: 4
• Forks: 13
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-BigData - TodoMVC/Firebase - Fork of TodoMVC demonstrating start-app, [The Elm Architecture](https://github.com/evancz/elm-architecture-tutorial) and Firebase as backend. (Examples)

README

        
# TodoMVC in Elm + ElmFire • [Demo](https://thomasweiser.github.io/todomvc-elmfire/)

[TodoMVC](http://todomvc.com/)

implemented in

[Elm](http://elm-lang.org/),

extending [Evan Czaplicki's](https://twitter.com/czaplic)

[version](https://github.com/evancz/elm-todomvc),

using [Firebase](https://www.firebase.com/)

via [ElmFire](https://github.com/ThomasWeiser/elmfire)

and [elmfire-extra](https://github.com/ThomasWeiser/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](https://github.com/evancz/elm-architecture-tutorial/),

using [evancz/start-app](http://package.elm-lang.org/packages/evancz/start-app/2.0.0/)

and [evancz/elm-effects](http://package.elm-lang.org/packages/evancz/elm-effects/1.0.0).

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](https://www.firebase.com/docs/web/api/firebase/push.html),

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](https://github.com/evancz/elm-architecture-tutorial/).