はじめに — $mol

はじめに

React や Vue から来て、何ひとつ腑に落ちませんか？まず

メンタルモデルを読んでください。computed、watch、ライフサイクルフック、データ読み込みがどこへ行ったのかを 5 分で。

$mol とは？

$mol はリアクティブな UI フレームワークです。インターフェースが何であるかを記述すれば、どのようにそしていつ更新するかはフレームワークが判断します。仮想 DOM も、手動の購読も、useEffect もありません。コンポーネントをツリーとして書けば、$mol は見えているものだけを描画し、実際に変わったものだけを再計算します。コンポーネントは 3 つのファイルで構成されます。name.view.tree — 宣言的なレイアウト（コンパクトなツリー言語）name.view.ts — 振る舞い（プレーンな TypeScript クラス）name.view.css.ts — 型付きスタイル（コンパイラが検査）この分離こそが核心です。レイアウトは読みやすく、ロジックはテストしやすく、スタイルは型安全に保たれます。三つのうち単独で必須のものはありません。ツリーは手書きもできる構造の省略記法にすぎません。

TypeScript から view.tree へは同じコンポーネントを両方の書き方で組み立て、ツリーがコンパイルされる先のコードまで示します。

誰のためのもの？

成長しても小さいままであってほしいアプリを作りたい人へ。ランタイムはコンパクトで、描画はデフォルトで仮想化されます。あらゆる場所に型があることを好む人へ。スタイルさえ TypeScript が検査します。リアクティビティを手作業で配線するのに疲れた人へ。$mol の状態は表計算のように自動でリアクティブです。

ひと味

カウンターの全体像です。1$my_counter $mol_view2 sub /3 <= Count $mol_view4 sub / <= count \5 <= Increment $mol_button6 click? <=> increment?7 sub / <= label \+1namespace $.$$ {2 export class $my_counter extends $.$my_counter {3 @ $mol_mem count() { return 0 }4 @ $mol_action increment() { this.count( this.count() + 1 ) }5 }6}count はリアクティブです。それを読むものはすべて、値が変わると自動的に再描画されます。setState も、依存配列も、登録するストアもありません。

次はどこへ？

自分のマシンで動かす準備はできましたか？

はじめかたへ進んで、15 分以内に動くアプリを作りましょう。GitHub でこのページを編集役に立ちましたか？はいいいえ次へメンタルモデルこのページの内容$mol とは？誰のためのもの？ひと味次はどこへ？