Make your own TEA (The Elm Architecture)

If you’re familiar with the frontend ecosystem for the last few years, you’ve probably come across a framework which roughly follows the structure of:

• A model representing the state of the program

• An update function that maps one model to another, with input from events

• A view that sends interactions to the update function

While this pattern has existed in many places and been called many different names, one of the most popular has been “The Elm Architecture”, or TEA. Other frameworks such as Redux would pick up this approach and bring it to a wider audience, but I’d argue that the recent popularity was due to Elm.

TEA allows you to model changes between state without needing modify data in-place, instead returning immutable copies of the data with modification only being applied to the new model rather than the old. This makes a great deal of sense when you’re in an immutable language, such as Elm or Derw. The Html package for both Elm and Derw are based around this loop.

Since I find it interesting to implement, I figured I would demonstrate how, in TypeScript. The reference implementation has diffing, patching, hydration, pub/sub, and support for async events. While I was at it, I though I’d play with the blog post format and concept. I had an idea that I could tell a blog post through a series of commits, showing the evolution of concepts from scaffolding to full functionality. So, to read the rest of this blog post, head over to Github where you’ll find the pull request with full comments and commit history.

Check it out here: https://github.com/eeue56/make-your-own-tea/pull/1

This is an example of the code from the first commit:

If you liked this post, follow me on Twitter to stay up to date.