GleamとLustre
LustreとはGleamでSPAが書けるフレームワーク。 アーキテクチャとしてElmアーキテクチャを採用しているため、書き味はElmにかなり近いらしい(そこまでElmを書いた経験がないので分からない)
Lustreの技術的な概要
アーキテクチャ
Elmアーキテクチャ
DOMの扱い
仮想DOM
Lustreのエコシステム
LustreにはコアとなるLustreの他に、
LustreのUIライブラリ
アニメーションライブラリ
LustreからHTTP Requestを行なうライブラリ
LustreからWebsocketを扱うライブラリ
Lustre向けのデバッガー
Lustre向けTailwindコンポーネント集
などがある。
また、LustreにはServer componentsが開発中ながらも実装されているためErlangサーバーの情報をLustre上で表示することも可能になる。イメージとしてはPhoenix Liveviewに近い。 Lustreの開発ツール
最近のWeb開発ではVite等を使ってホットリロードなどを行なうことが一般的になっている。 Lustreでカウンター
Lustreで簡単なカウンターを作ってみる。
仕様は以下の通りになる。
+と-のボタンがある。
+を押すと加算、-で減算される。
数値の初期値は0で、常に画面に表示されている。
Elmアーキテクチャでは
状態
状態の更新
見た目
の3つを分けて扱う。これら3つはElmアーキテクチャにおいて以下のように呼ばれている。
Model
Update
View
カウンターをElmアーキテクチャに落しこむとこうなる。
Model
カウンター数値
Update
数値を加算、減算させる関数
View
ボタンなどを配置するHTML
これらをLustreで実装していく。
Model
今回のモデルは数値を扱えれば良いのでこんな感じになる。
code:rust
pub type Model =
Int
Update
アップデート関数は以下のようになる。
第二引数にあるmsgはupdate関数に関する情報が渡される。
以下のようにmsgに渡された値を分岐して任意の操作を行なっている。
code:rust
pub fn update(model: Model, msg: Msg) {
case msg {
Incr -> model + 1
Decr -> model - 1
}
}
また、Msgは型なので定義する必要がある。
code:rust
pub type Msg {
Incr
Decr
}
View
ViewはHTMLに対応するような形で記述する。第一引数にタグの属性、第二引数に要素を記述する。
event.on_click()は名前の通りOnClickに相当する。
また、関数に与えられた値は上述したupdate関数の第二引数に与えられる。
code:rust
pub fn view(model: Model) {
let count = int.to_string(model)
html.div([], [
element.text(count),
])
}