diff options
| author | Hayleigh Thompson <me@hayleigh.dev> | 2023-09-11 12:22:51 +0100 |
|---|---|---|
| committer | Hayleigh Thompson <me@hayleigh.dev> | 2023-09-11 12:22:51 +0100 |
| commit | e08055b9c60f464744a7e586e321e38681ee63c1 (patch) | |
| tree | c369936aa5893359dbb5ea13f6bea304b759c9e2 | |
| parent | be4bb9fec5ec0c075720b40deeb2b2591f85ee3a (diff) | |
| download | lustre-e08055b9c60f464744a7e586e321e38681ee63c1.tar.gz lustre-e08055b9c60f464744a7e586e321e38681ee63c1.zip | |
:memo: Include a diagram on the model-view-update architecture in the main lustre api reference.
| -rw-r--r-- | docs/public/page/api/lustre.md | 42 |
1 files changed, 42 insertions, 0 deletions
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 |