Iterative Development in Elm: HTTP

Elm’s compiler is a great assistant. We can make HUGE changes to our code
and it will make sure we make all the necessary fixes to get it working again.
It gives us complete freedom to refactor.

Just because we can doesn’t mean we should. I’ve found it’s often much nicer
to take a lot of small steps, each of which leave us in a compiling state.
Recently, I’ve been using incremental approach a lot for interactions
involving HTTP requests, especially complex GraphQL queries.

In particular, faking out HTTP requests with a sleep allows me to hand-wave the
request away while I deal with the various UI states (loading, success,
failure), all while remaining in a compiling state.

Time to actually do some work in the command. In an attempt to tighten the
incremental steps we need to get to a compiling state, we’d like to skip making
an actual HTTP request for now. Let’s do something simpler instead. We can use a
combination of Process.sleep and Task.perform to create a command that
returns the same kind of responses that an HTTP request would.

Now that we’ve got all the UI interactions done, we can finally circle back to
the HTTP request. We don’t need to worry about loading or error states. Those
are already handled. All we need to do here is make the API call. Once that
compiles, we’re done! ✅

I’ve found a lot of benefits to the incremental approach. Not only does it help
focus my development process, but it also allows me to scope commits more
tightly. I can actually run the app and interact with the HTML at almost any
point in the development process.

As a bonus, this approach also allows me to develop against an API endpoint that
doesn’t exist yet. This isn’t uncommon when working with a separate backend team
that’s building features in parallel.

So the next time you’re integrating some API, throw a few sleeps into your
code. You may find it’s a winning combo 🥇