Elm Architecture

Model: stores data for the application

Update: accepts an event from the view, updates and returns the new model for the application state

View: creates a DOM based on the contents of the model.

Subscription: external triggers which may send messages to Update; such as timers or replies from servers.

Buttons, text fields, and so forth send events (with parameters) back to the Updater. Update checks the kind of message and returns a new, modified model.

DOM Diffing

Create a tree whenever view is run and then do a tree-difference algorithm on both. Use this to update the real DOM over the wire.

Html.lazy: exploits functional programming; if the same input always equals same output, check if inputs are same as last run. if so then re-cycle subtree from last time. no changes to diff.

Html.keyed: instead of parameter constness like html.lazy, uses result constness. each result becomes a key so diffing looks at changes in a list of keys. primary reason for this is so adding and removing from lists creates 1 element diffs instead of diffs for each item in the list.