Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Components for managing input and state

Components for managing input and state

This talk was given in the first-ever Elm Remote Meetup.

Ossi Hanhinen

June 06, 2016
Tweet

More Decks by Ossi Hanhinen

Other Decks in Programming

Transcript

  1. Components for
    managing input and state
    Ossi Hanhinen
    @ohanhi

    View Slide

  2. The Elm Architecture
    Msg Update
    User View
    Model
    View

    View Slide

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

    View Slide

  4. App Component
    Init Model, Cmd Msg

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide