Modules

Elm has modules to help you grow your codebase in a nice way. On the most basic level, modules let you break your code into multiple files.

Defining Modules

Elm modules work best when you define them around a central type. Like how the List module is all about the List type. So say we want to build a module around a Post type for a blogging website. We can create something like this:

  1. module Post exposing (Post, estimatedReadTime, encode, decoder)
  3. import Json.Decode as D
  4. import Json.Encode as E
  7. -- POST
  9. type alias Post =
  10.   { title : String
  11.   , author : String
  12.   , content : String
  13.   }
  16. -- READ TIME
  18. estimatedReadTime : Post -> Float
  19. estimatedReadTime post =
  20.   toFloat (wordCount post) / 220
  22. wordCount : Post -> Int
  23. wordCount post =
  24.   List.length (String.words post.content)
  27. -- JSON
  29. encode : Post -> E.Value
  30. encode post =
  31.   E.object
  32.     [ ("title", E.string post.title)
  33.     , ("author", E.string post.author)
  34.     , ("content", E.string post.content)
  35.     ]
  37. decoder : D.Decoder Post
  38. decoder =
  39.   D.map3 Post
  40.     (D.field "title" D.string)
  41.     (D.field "author" D.string)
  42.     (D.field "content" D.string)

The only new syntax here is that module Post exposing (..) line at the very top. That means the module is known as Post and only certain values are available to outsiders. As written, the wordCount function is only available within the Post module. Hiding functions like this is one of the most important techniques in Elm!

Note: If you forget to add a module declaration, Elm will use this one instead:

  1. module Main exposing (..)

This makes things easier for beginners working in just one file. They should not be confronted with the module system on their first day!

Growing Modules

As your application gets more complex, you will end up adding things to your modules. It is normal for Elm modules to be in the 400 to 1000 line range, as I explain in The Life of a File. But when you have multiple modules, how do you decide where to add new code?

I try to use the following heuristics when code is:

  • Unique — If logic only appears in one place, I break out top-level helper functions as close to the usage as possible. Maybe use a comment header like -- POST PREVIEW to indicate that the following definitions are related to previewing posts.
  • Similar — Say we want to show Post previews on the home page and on the author pages. On the home page, we want to emphasize the interesting content, so we want longer snippets. But on the author page, we want to emphasize the breadth of content, so we want to focus on titles. These cases are similar, not the same, so we go back to the unique heuristic. Just write the logic separately.
  • The Same — At some point we will have a bunch of unique code. That is fine! But perhaps we find that some definitions contain logic that is exactly the same. Break out a helper function for that logic! If all the uses are in one module, no need to do anything more. Maybe put a comment header like -- READ TIME if you really want.

These heuristics are all about making helper functions within a single file. You only want to create a new module when a bunch of these helper functions all center around a specific custom type. For example, you start by creating a Page.Author module, and do not create a Post module until the helper functions start piling up. At that point, creating a new module should make your code feel easier to navigate and understand. If it does not, go back to the version that was clearer. More modules is not more better! Take the path that keeps the code simple and clear.

To summarize, assume similar code is unique by default. (It usually is in user interfaces in the end!) If you see logic that is the same in different definitions, make some helper functions with appropriate comment headers. When you have a bunch of helper functions about a specific type, consider making a new module. If a new module makes your code clearer, great! If not, go back. More files is not inherently simpler or clearer.

Note: One of the most common ways to get tripped up with modules is when something that was once the same becomes similar later on. Very common, especially in user interfaces! Folks will often try to create a Frankenstein function that handles all the different cases. Adding more arguments. Adding more complex arguments. The better path is to accept that you now have two unique situations and copy the code into both places. Customize it exactly how you need. Then see if any of the resulting logic is the same. If so, move it out into helpers. Your long functions should split into multiple smaller functions, not grow longer and more complex!

Using Modules

It is customary in Elm for all of your code to live in the src/ directory. That is the default for elm.json even. So our Post module would need to live in a file named src/Post.elm. From there, we can import a module and use its exposed values. There are four ways to do that:

  1. import Post
  2. -- Post.Post, Post.estimatedReadTime, Post.encode, Post.decoder
  4. import Post as P
  5. -- P.Post, P.estimatedReadTime, P.encode, P.decoder
  7. import Post exposing (Post, estimatedReadTime)
  8. -- Post, estimatedReadTime
  9. -- Post.Post, Post.estimatedReadTime, Post.encode, Post.decoder
  11. import Post as P exposing (Post, estimatedReadTime)
  12. -- Post, estimatedReadTime
  13. -- P.Post, P.estimatedReadTime, P.encode, P.decoder

I recommend using exposing pretty rarely. Ideally on zero or one of your imports. Otherwise, it can start getting hard to figure out where things came from when reading though. “Wait, where is filterPostBy from again? What arguments does it take?” It gets harder and harder to read through code as you add more exposing. I tend to use it for import Html exposing (..) but not on anything else. For everything else, I recommend using the standard import and maybe using as if you have a particularly long module name!