Components for managing input and state

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

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