plaxdan / elm-lifecycle

A symmetrical simplified Elm lifecycle diagram.

A symmetrical simplified Elm lifecycle diagram.

Below is a simplified description of events just to help follow along the above diagram. For more detailed descriptions of Elm workflow please see one of the following resources:

• http://guide.elm-lang.org
• http://www.elm-tutorial.org/en/

init

An HTML.App.program is created within the main function of an Elm program. The Html.App.program initiates the Elm application by calling your init function. This creates a (Model, Cmd Msg) tuple which is handed off to the Elm runtime.

1. main is called
2. Html.App.program is called within main
3. Html.App.program calls your init function
4. The init function returns a (Model, Cmd Msg) tuple which is handed off to the Elm runtime
5. The Elm runtime runs the Cmd and then calls your update function with the resultant Msg and Model (thus closing the "update loop")
6. update then returns a new (Model, Cmd Msg) tuple
7. the update loop may continue until no more Cmds are run

Once the Elm program has been initialized and a view is rendered to the screen then further updates come from either subscription to external events such as time, or a web socket; or from user interaction with the view.

subscriptions

1. an external event occurs to which your application is subscribed
2. the subscriptions function passes a Sub Msg to the Elm runtime The Msg will most likely contain a payload from the event.
3. the Elm runtime passes the Msg (with its payload) and the current Model to your update function (thus beginning the update loop)

view

1. the user interacts with the view (clicks a button, mouseover a div etc)
2. if an Html.Events event has been configured for the user behavior, then an Html Msg is passed to the Elm runtime.
3. the Elm runtime passes the Msg (with its payload) and the current Model to your update function (thus beginning the update loop)

elm-lifecycle's Issues

Accompanying text

Love the graphic! Very clean!

Would love to see accompanying text underneath to follow a typical flow...

i.e.

1. User interacts with view
2. Msg handled by update
...