🗂
宣言的なJSフレームワークを作ってみた 特徴
概要
長いGWを利用してJSフレームワークを作ってみた。
成果物
開発目標
- 既存のフレームより学習コストが低くなるよう、簡単で直感的なモノにする。
- 業務アプリを簡単に素早く作成できること
特徴
- シンプルで学習コストが低い
- 宣言的な記述
- MVVM、双方向バインド
- ブロックによるSPA開発
- HTML、CSS、JSコードの分離、バインドルールの分離により、協業をやりやすく
- ライブラリ依存なし
- 新しい言語仕様（ES2022/ES2021）の積極採用 ※IEの切り捨て
- パーサーとか作れないので、なるべくブラウザの機能を利用する
シンプルで学習コストが低い
個人の感想です。
宣言的な記述
リストなどの繰り返し構造を持つデータを宣言的に記述
javaScript
class AppViewModel {
"@members" = [
{ name:..., email:..., age:... },
{ name:..., email:..., age:... },
{ name:..., email:..., age:... },
];
"@members.*.name";
"@members.*.email";
"@members.*.age";
}
html
<template data-x:loop="members">
<tr>
<td data-x:bind="members.*.name"></td>
<td data-x:bind="members.*.email"></td>
<td data-x:bind="members.*.age"></td>
</tr>
</template>
アクセサプロパティを使って、宣言的に記述
javaScript
class AppViewModel {
"@members" = [ ... ];
"@members.*.age";
"@seniorMembers#get" = () => this["members"].filter((m, i) => this[`members.${i}.age`] > 50);
"@seniorMembers.*.name";
"@seniorMembers.*.email";
"@seniorMembers.*.age";
}
MVVM、双方向バインド
双方向バインドするには、書き込み可のプロパティを作って
javaScript
class AppViewModel {
"@@message" = "welcome to data-x.js";
}
バインドするだけ
html
<input type="text" name="message">
バインドする際の注意
HTML要素とのバインドになり、テキストの中に埋め込むとかはできない。
ブロックによるSPA開発
他のフレームワークでいうところのコンポーネント。
ブロックは、html、css、jsモジュール（ViewModel）で構成される。
ブロックは他のブロックから分離され影響を受けない。
ブロックはshadowrootを使って実現されるので、html的にも分離される。
HTML、CSS、JSコードの分離、バインドルールの分離により、協業をやりやすく
ブロックを、html、css、jsモジュール（ViewModel）に分離し、デザイナとプログラマの協業をやりやすくする。
バインドルールの定義を外部ファイルに記述し、html要素の属性汚染を少なくする。
html
<div data-x:bind="message" class="message"></div>
のようなhtmlの記述をhtmlとバインドルールの記述に分離し
html
<div class="message"></div>
バインドルール
div.message {
--bind-textContent: message;
}
html要素の属性が肥大化することを防ぐ
ライブラリ依存なし
他のライブラリを使いません。
新しい言語仕様（ES2022/ES2021）の積極採用
IEの切り捨て。
新しい言語仕様の勉強も兼ねているので積極的に使ってみる
パーサーとか作れないので、なるべくブラウザの機能を利用する
JSXみたいなテンプレートはありません。
バインドルールのパーサーは、ブラウザのCSS解析にがんばってもらう。
Discussion