Slide 1

Slide 1 text

Components for managing input and state Ossi Hanhinen @ohanhi

Slide 2

Slide 2 text

The Elm Architecture Msg Update User View Model View

Slide 3

Slide 3 text

main = Html.App.program { init = init , view = view , update = update , subscriptions = subscriptions }

Slide 4

Slide 4 text

App Component Init Model, Cmd Msg

Slide 5

Slide 5 text

App Component Init Model, Cmd Msg Msg, Model Update Model, Cmd Msg

Slide 6

Slide 6 text

Init Model, Cmd Msg Msg, Model Update Model, Cmd Msg App Components Nest Init Model, Cmd Msg Msg, Model Update Model, Cmd Msg

Slide 7

Slide 7 text

App Components’ Public API Msg, Model Update Model, Cmd Msg Init Model, Cmd Msg

Slide 8

Slide 8 text

App Components’ Public API Msg, Model Update Model, Cmd Msg Msg Model Model Cmd Msg Init Model, Cmd Msg

Slide 9

Slide 9 text

Extending the Pattern Msg Model Update Init Some extra Model, Cmd Msg Msg, Model Some extra, Model, Cmd Msg

Slide 10

Slide 10 text

Don’t limit yourself to just init, update and view!