宣言的なJSフレームワークを作ってみた 特徴

開発目標

• 既存のフレームより学習コストが低くなるよう、簡単で直感的なモノにする。
• 業務アプリを簡単に素早く作成できること

特徴

• シンプルで学習コストが低い
• 宣言的な記述
• MVVM、双方向バインド
• ブロックによるSPA開発
• HTML、CSS、JSコードの分離、バインドルールの分離により、協業をやりやすく
• ライブラリ依存なし
• 新しい言語仕様（ES2022/ES2021）の積極採用 ※IEの切り捨て
• パーサーとか作れないので、なるべくブラウザの機能を利用する

シンプルで学習コストが低い

個人の感想です。

宣言的な記述

リストなどの繰り返し構造を持つデータを宣言的に記述

class AppViewModel {
  "@members" = [
    { name:..., email:..., age:... },
    { name:..., email:..., age:... },
    { name:..., email:..., age:... },
  ];
  "@members.*.name";
  "@members.*.email";
  "@members.*.age";
}

<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>

アクセサプロパティを使って、宣言的に記述

class AppViewModel {
  "@members" = [ ... ];
  "@members.*.age";
  "@seniorMembers#get" = () => this["members"].filter((m, i) => this[`members.${i}.age`] > 50);
  "@seniorMembers.*.name";
  "@seniorMembers.*.email";
  "@seniorMembers.*.age";
}

MVVM、双方向バインド

双方向バインドするには、書き込み可のプロパティを作って

class AppViewModel {
  "@@message" = "welcome to data-x.js";
}

バインドするだけ

<input type="text" name="message">

バインドする際の注意
HTML要素とのバインドになり、テキストの中に埋め込むとかはできない。

ブロックによるSPA開発

他のフレームワークでいうところのコンポーネント。
ブロックは、html、css、jsモジュール（ViewModel）で構成される。
ブロックは他のブロックから分離され影響を受けない。
ブロックはshadowrootを使って実現されるので、html的にも分離される。

HTML、CSS、JSコードの分離、バインドルールの分離により、協業をやりやすく

ブロックを、html、css、jsモジュール（ViewModel）に分離し、デザイナとプログラマの協業をやりやすくする。
バインドルールの定義を外部ファイルに記述し、html要素の属性汚染を少なくする。

<div data-x:bind="message" class="message"></div>

のようなhtmlの記述をhtmlとバインドルールの記述に分離し

<div class="message"></div>

div.message {
  --bind-textContent: message;
}

html要素の属性が肥大化することを防ぐ

ライブラリ依存なし

他のライブラリを使いません。

新しい言語仕様（ES2022/ES2021）の積極採用

IEの切り捨て。
新しい言語仕様の勉強も兼ねているので積極的に使ってみる

パーサーとか作れないので、なるべくブラウザの機能を利用する

JSXみたいなテンプレートはありません。
バインドルールのパーサーは、ブラウザのCSS解析にがんばってもらう。

感想とかもらえれば、ありがたいです。