j-hannes / structured-elm-todomvc

Structured TodoMVC with Elm to exemplify real-world apps

Structured TodoMVC in Elm

This is based on the official TodoMVC Elm example, but instead of putting all the code in one file, this project has the goal to exemplify how you would break that file in different modules to create your app structure, always following The Elm Architecture.

Project Structure

We have four main folders: Action, Model, Update and View.

Each one of those folders have a Main.elm file, which combines all other modules, e.g. the Update.Main is a combination of all other Updates in the project, the Model.Main is a combination of all other models in the project, and so on.

Finally, the root main file, called Todo.elm, uses the Main Update, the Main Model and the Main View to start your app.

Checkout the modularized alternative too

Build Instructions

Run the following command from the root of this project:

elm-make Todo.elm --output elm.js

Then open index.html in your browser!