how to divide a large Elm program into smaller components - elm

Question

I'd like to separate the View and Update parts of a program into separate source files, but then, how do I share the Message and Subscriptions declarations ?

Answer 1

Think twice before splitting your modules, premature code splitting might be harmful to your project.
Here is an example of the project structure I use in my Elm apps.
Messages
Html.App.map allows us to tag a message for child component, so we could pass it to Components.Counter.Update.update function, when keyboard subscription emits a message.
module App.View exposing (..)
import Html.App
import Html exposing (text, div, Html)
import App.Model exposing (Model)
import App.Messages exposing (..)
import Components.Counter.View
view : Model -> Html Msg
view model =
div []
[ Html.App.map Counter (Components.Counter.View.view model.counter) ]
Subscriptions
To tag a message from a subscription, we have to use Platform.Sub.map
Please see an example of subscription passing in src/App/Subscriptions.elm
module App.Subscriptions exposing (..)
import App.Model exposing (Model)
import App.Messages exposing (..)
import Components.Counter.Subscriptions
subscriptions : Model -> Sub Msg
subscriptions model =
let
counterSub =
Components.Counter.Subscriptions.subscriptions model.counter
in
Sub.batch [ Sub.map Counter counterSub ]
File structure
Main.elm -- Entry point, where App is initialized
Utils.elm -- Utilities
App/
Messages.elm
Model.elm
Subscriptions.elm
Update.elm
View.elm
Components/
StatefulComponent/
Messages.elm
Model.elm
Subscriptions.elm
Update.elm
View.elm
StatefulComponentWithCommands/
Commands.elm -- Functions, which return Cmd msg
Messages.elm
Model.elm
Subscriptions.elm
Update.elm
View.elm
StatelessComponent/
View.elm

Answer 2

An Elm program can be progressively split into several files as follows :
extract message declarations and associated types into Messages.elm
Add import Messages exposing (..) in Main.elm.
Compile it and test.
extract model declaration and initialisation into Models.elm.
Add import Messages exposing (..) in Models.elm.
Add import Models exposing (..) in Main.elm
Compile it and test
extract the view function into View.elm.
Add import Messages exposing (..) in View.elm.
Add import Models exposing (..) in View.elm
Add import View exposing (..) in Main.elm
Compile it and test
A the end, Main.elm still has the subscriptions and update parts. They can be extracted similarly.
See example at github.com/sporto/elm-tutorial-app/tree/master/src, with corresponding tutorial at elm-tutorial.org/en/05-resources/01-intro.html.