So far we have been making inactive pages. Let's step it up a notch and respond to our users actions.

init, update and view

These three functions specify everything that happens in your app to handle user interactions.

The view function returns what the app should look like and it takes a "model" as an argument. The model represents the current state of the program and the view function decides how the user will view the data in the current model.

The init function creates the first version of the model. The update function updates a model in response to some message.

Events and messages

Elements emit events when a user interacts with them. e.g. A user may click a button that would emit a click event. The "on_click" function adds a handler that will dispatch a message when a click event happens. The message is then handled by the update function to change the app state.

Events are raw information about what the user did, messages are related to what your app should do. In this example both buttons will emit click events but one will send an Increment message the other a Decrement message.

Try adding a new button and message to "Double" the current value.

Why simple?

This app is added to the page using "lustre.simple". This is because the application does not yet interact with the outside world for example with other services. We will get beyond simple apps in the next chapter.