6 ways to make your Elm code clearer

Code clarity means less time fixing problems—especially in large codebases. But what habits are worth the effort?

Here are 6 simple refactors to continually make to increase the clarity of your Elm code:

What data does a given function operate on?

Adding a type annotation answers this question, and makes Elm’s compiler errors more accurate.

VS Code and IntelliJ both let you automatically generate annotations, making this easier.

Don’t pass your entire Model to a function when it only needs a small subset.

Instead, use extensible record arguments, or pass data in separately.

This makes your functions easier to rule out as causes of errors when debugging.

Sometimes you need complicated functions that involve multiple steps. But these can be hard to understand.

Extract each step into its own named functions, so that the complex function can be skimmed at a high level.

Module interfaces are clearest when they focus on a single data type and its helper functions.

When you see new types and helper functions for then begin to show up, move them into their own module.

Give your code a change to be findable when it’s needed!

Make sure your modules are named for the types and helper functions they contain.

Are a module’s types and functions the current “best practice” in your codebase? The answer isn’t always clear.

Keep a Deprecated directory and move outdated modules there if they can’t be removed yet.

This post was originally a Twitter thread as part of Ship 30 for 30.