SeedってRustのフロントエンドフレームワークが最高だったので紹介したい
はじめに
こんにちは。「すば」と申します。
この記事はRust 3 Advent Calendar 2020の 21 日目の記事です。
体調悪くてめっちゃ遅刻しました・・・ごめんなさい
今回は、今自分が勉強中のseed
というRustのフロントエンドフレームワークのざっくり紹介したいと思います。
対象読者
- フロントエンドやったことある人
- Rustの学習を始めたので、何か作ってみたい人
この記事の目的
ぶっちゃけると公式のドキュメントが神すぎるので、それさえ読んでいただければこんな記事読む必要ないです。
読んで!!
Seedとは?
簡単に言えば、Elmというフロントエンド用言語のアーキテクチャをRustに移植したフレームワークです。
もっと簡単に言えば、Reduxみたいなものです。
Seedのアーキテクチャは、主に3つの要素で構成されます。
要素 | 役割 |
---|---|
Model | アプリの状態 |
View | Htmlのレンダリング |
Update | onClick等のイベントに応じて、Modelを書き換える |
Component毎にローカルな状態を持つことはなく、基本的にグローバル変数一つで状態を管理します。
不安に思われるかもしれませんが、結構これでうまくいくんです。
また、更新処理が必ずUpdate内に集められているので、処理の一覧性が高くてメンテしやすいです。
個人的には、複雑なことを複雑にやってしまうことを戒めるアーキテクチャだと思っています。
Component毎に状態変数持ってたら、どれがどの値を持っているのかデバッグする時大変じゃないですか?
状態は全部同じ変数に格納しちゃえば見やすいですよ、的な
他にもさまざまなメリットがあるのですが、元ネタのElmの記事を検索すると色々出てくると思います
Why Elm
で検索すると、このアーキテクチャの利点がたくさん出てきます。
Yewとの比較
日本では、Rustのフロントエンドフレームワークと言えば、Yew
が有名です。
どちらもフロントエンドに必要な機能は過不足なく揃ってる印象です。
大きな違いはView部分の描画と、Component分割にあると思います
// Seed
fn view(model: &Model) -> Node<Msg> {
div![
C!["message"],
"Hello world",
]
}
// Yew
pub struct Container {
}
impl Component for Container {
// 省略...
fn update(&mut self, msg: Self::Message) -> ShouldRender {
// 省略...
}
fn view(&self) -> Html {
html! {
<div id="message">
Hello World
</div>
}
}
}
Htmlに関しては、どちらもMacroを用いて表現していますが、
Seed
は関数的に、Yew
はJSX的に表現します。
ここらへんは好みだと思います
Component分割に関しては、
Seed
が関数だけで、Yew
がStructをComponentとして表現しています。
また、Yew
の方はUpdate関数でComponent内の状態を更新できるようになっていますが、
Seed
は、前述したようにグローバル変数を更新して、参照するようになっています。
個人的には、Component内の状態は無ければ無いほど保守が楽なので、Seedの方が好きです。
一概に言い切ることはできませんが、Yew
よりSeed
がシンプルに見えませんか?
公式のチュートリアルが充実している
公式のメニューをご覧下さい。
https://seed-rs.org/
- インストール
- Counterアプリ作成
- TodoMVCアプリ作成
- Time Tracker作成
これらがドキュメントに従うだけでサクッとできます。
少しづつレベルアップしていくので、終わった頃にはちゃんとしたアプリが作れるはずです。
Github内のサンプルが充実している
いろんな事例のサンプルが30個ほどあります。
実装で困った時に、ドキュメントと合わせて参考にしてみるといいんではないでしょうか。
RealWolrdもある
さまざまな言語で同一のインターフェースのブログを作るRealWorld
というプロジェクトがあります。
もちろんSeed
の実装もあります(上記のURL内にはないっぽいけど)
https://github.com/seed-rs/seed-rs-realworld
本格的なアプリの実装に役立つはずです。
(他の言語でも参考になるので、RealWorld
自体は頭の片隅に置いておくといいですよ)
まとめ
Yewよりシンプルだと思うし、結構簡単にできるから、気軽にやってみよう!
exampleがたくさんあるから、まず書いてみよう!
counterあたりから始めるといいかも
Author And Source
この問題について(SeedってRustのフロントエンドフレームワークが最高だったので紹介したい), 我々は、より多くの情報をここで見つけました https://qiita.com/subaru-shoji/items/ff39cc382c707f7a742d著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .