From e08055b9c60f464744a7e586e321e38681ee63c1 Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Mon, 11 Sep 2023 12:22:51 +0100 Subject: :memo: Include a diagram on the model-view-update architecture in the main lustre api reference. --- docs/public/page/api/lustre.md | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/docs/public/page/api/lustre.md b/docs/public/page/api/lustre.md index 7ec5021..4be06d4 100644 --- a/docs/public/page/api/lustre.md +++ b/docs/public/page/api/lustre.md @@ -2,6 +2,48 @@ ## Applications +On the client, Lustre applications are built on the Model-View-Update architecture. +This pattern was popularised by the Elm programming language before being adopted +by other state mangement libraries like Redux and Vuex. + +Your applications will be made up of three fundamental parts: + +- A `Model` that represents the entire state of your application and an `init` + function to create it. +- A `Msg` type that represents all the ways the outside world can communicate + with your application and an `update` function that that modifies the model + in response to these messages. +- A `view` function that renders the current state of your application to the + DOM. + +``` + ┌--------+ + | | + | update | + | | + +--------+ + ^ | + | | + Msg | | #(Model, Effect(Msg)) + | | + | v +┌------+ ┌------------------------+ +| | #(Model, Effect(Msg)) | | +| init |------------------------>| Lustre Runtime | +| | | | ++------+ +------------------------+ + ^ | + | | + Msg | | Model + | | + | v + ┌--------+ + | | + | view | + | | + +--------+ +``` + ### App | erlang javascript ```gleam -- cgit v1.2.3