Simple illustration of The Elm Architecture

tea.js

// This is the thing you give to Elm, your purely functional core,
// which exposes init, view, and update.

const app = require('./business-logic')


// This represents the implementations for all the side effects
// that your program knows how to requests.
// There is only one public function, perform(cmd: Cmd<Msg>) -> Promise<Msg>.

const runtime = require('./side-effects')


// Let's do some a actual work!

var [ model, initialCmd ] = app.init()

function main(cmd) {
  runtime.perform(cmd).then(msg => {

    // Call into the app in order to get the updated model and command.
    [ newModel, newCmd ] = app.update(msg, model)
    
    // Keep track of the state globally.
    // This ensures that parallel commands always use the most recent version.
    model = newModel
    
    // Display HTML (this illustration doesn't cover HTML events).
    app.view(model)
    
    // Recurse into main to do the next command!
    main(newCmd)
  })
}

main(initialCmd)