<commit_before># The Elm Architecture

This tutorial outlines “The Elm Architecture” which you will see in all [Elm][] programs, from [TodoMVC][] and [dreamwriter][] to the code running in production at [NoRedInk][] and [CircuitHub][]. The basic pattern is useful whether you are writing your front-end in Elm or JS or whatever else.

[Elm]: http://elm-lang.org/
[TodoMVC]: https://github.com/evancz/elm-todomvc
[dreamwriter]: https://github.com/rtfeldman/dreamwriter#dreamwriter
[NoRedInk]: https://www.noredink.com/
[CircuitHub]: https://www.circuithub.com/

The Elm Architecture is a simple pattern for infinitely nestable components. It is great for modularity, code reuse, and testing. Ultimately, this pattern makes it easy to create complex webapps in a way that stays modular. We will run through 8 examples, slowly building on core principles and patterns:

  1. Counter
  2. Pair of counters
  3. List of counters
  4. List of counters (variation)
  5. GIF fetcher
  6. Pair of GIF fetchers
  7. List of GIF fetchers
  8. Pair of animating squares

It helps to go through them in order (and with the tutorial here, it helps!)

One very interesting aspect of the architecture in all these programs is that it *emerges* from Elm naturally. The language design itself leads you towards this architecture whether you have read this document and know the benefits or not. I actually discovered this pattern just using Elm and have been shocked by its simplicity and power.

**Note**: To follow along with this tutorial with code, [install Elm](http://elm-lang.org/install) and fork this repo. Each example in the tutorial gives instructions of how to run the code.


## The Basic Pattern

The logic of every Elm program will break up into three cleanly separated parts: model, update, and view. You can pretty reliably start with the following skeleton and then iteratively fill in details for your particular case.

```elm
-- MODEL

type alias Model = { ... }


-- UPDATE
<commit_msg>Link to running examples in intro<commit_after># The Elm Architecture

This tutorial outlines “The Elm Architecture” which you will see in all [Elm][] programs, from [TodoMVC][] and [dreamwriter][] to the code running in production at [NoRedInk][] and [CircuitHub][]. The basic pattern is useful whether you are writing your front-end in Elm or JS or whatever else.

[Elm]: http://elm-lang.org/
[TodoMVC]: https://github.com/evancz/elm-todomvc
[dreamwriter]: https://github.com/rtfeldman/dreamwriter#dreamwriter
[NoRedInk]: https://www.noredink.com/
[CircuitHub]: https://www.circuithub.com/

The Elm Architecture is a simple pattern for infinitely nestable components. It is great for modularity, code reuse, and testing. Ultimately, this pattern makes it easy to create complex web apps in a way that stays modular. We will run through 8 examples, slowly building on core principles and patterns:

  1. [Counter](https://evancz.github.io/elm-architecture-tutorial/examples/1)
  2. [Pair of counters](https://evancz.github.io/elm-architecture-tutorial/examples/2)
  3. [List of counters](https://evancz.github.io/elm-architecture-tutorial/examples/3)
  4. [List of counters (variation)](https://evancz.github.io/elm-architecture-tutorial/examples/4)
  5. [GIF fetcher](https://evancz.github.io/elm-architecture-tutorial/examples/5)
  6. [Pair of GIF fetchers](https://evancz.github.io/elm-architecture-tutorial/examples/6)
  7. [List of GIF fetchers](https://evancz.github.io/elm-architecture-tutorial/examples/7)
  8. [Pair of animating squares](https://evancz.github.io/elm-architecture-tutorial/examples/8)

This tutorial will really help! It it will bring out the concepts and ideas necessary to get to make examples 7 and 8 super easy. Investing in the foundation will be worth it!

One very interesting aspect of the architecture in all these programs is that it *emerges* from Elm naturally. The language design itself leads you towards this architecture whether you have read this document and know the benefits or not. I actually discovered this pattern just using Elm and have been shocked by its simplicity and power.

**Note**: To follow along with this tutorial with code, [install Elm](http://elm-lang.org/install) and fork this repo. Each example in the tutorial gives instructions of how to run the code.


## The Basic Pattern

The logic of every Elm program will break up into three cleanly separated parts: model, update, and view. You can pretty reliably start with the following skeleton and then iteratively fill in details for your particular case.

```elm
-- MODEL

type alias Model = { ... }


-- UPDATE

{'fraction_non_alphanumeric': 0.0854978354978355, 'fraction_numerical': 0.006060606060606061, 'mean_word_length': 4.34837962962963, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 16, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2158983', 'n_tokens_mistral': 1353, 'n_tokens_neox': 1259, 'n_words': 598}