Code Organization

I have been struggling with the best way to organize my code to keep things as simple and readable as possible. I understand apps that have multiple components (though that’s not really an Elmish idiom) can be treated as submodules with their own views and update functions and msgs. In an app that has few UI components but modest complexity with the model, I have recently struck upon the idea of separate update functions and msgs for the view and the data. That is anything that changes the current presentation of data without changing the data itself is handled by a view module, and anything that changes the data without changing the presentation is handled by the data module. In order to avoid circular imports this requires me to set up Msgs.elm with a MainMsg union type for the data and view msgs. I’m curious what people think about this organization and what suggestions would make it better.

I think you’re on the right track. Try (as a starting point, adapt as necessary):

  • Common.elm, defining Msg, Model, and other types that are used everywhere
  • Most of your other files import Common.Something
  • Main.elm imports from everything (and is imported by nothing) and contains the main value.

These three talks helped me a lot with code organization

in case you haven’t watched them already.


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.