Maquet使用感の調査

Maquette VDOM ライブラリでVueに近いものらしい.

まぁ, そもそもVueもReactもnpmすら扱ったことはない.

いや, Reactだそうだ. まぁ, もはやどちらでも良いか. 日本語の情報少ないし.

MaquetteはHyperScriptなるものと同様らしい書きぶりで, 独自フレームワークもテンプレートも持たない.
VDOMという概念ができたころの雨後の筍の1つだったが, とりあえず今も生きているプロジェクトのようだ.
2016-10-02にリリースされ, 2017-02-14, 2021-03-10と続く. MITライセンス. 削りきった機能ゆえにgzip圧縮で3kb程度となる.

純粋javascriptであるのは嬉しいな. なにせ, 何も知らんからな.

コーディング履歴用repository作成. maquetteの他にaxiosとmodern-resetを導入.
手元では, scpでtiny core linux仮想環境に送り込む予定.

h('', {}, []) 左からタグ,属性,子要素か. これobjectにできるべ.

タグには#idと.classも入れられる.

maquette.createProjector() は配下のイベントを管理してくれるのであって, 値変化をみてくれるわけではない. 2つpj作って, 片方でclickのfunctionで値変更してたら, もう片方のpjには伝わってなかった.

inputで入力制限が効かない. ハンドラ割り当ての再描画で効かす間がないのだろうか.

とりあえずハンドラのなかでチェックしてしまえば, ことは足りるか.

createMappingのupdateCallbackが何するものかまるでわからん.

ここまで来ると, maquetteがどうと言うより, jsにそも触れていないことによる分からなさが勝るな.

inputで入力制限が効かないのは, 再描画中に新規でIDを作り直してしまっていたのが原因のようだ.
識別が固定になるように組んでやればまともにできた.

input file の イベントがoninputだった, onchangeでない.

10万行のArray.mapが遅いのは仕方ないと思える. しかし, 1万行でも20sかかるのはいかがなものか.

読み込みは10万行でも数瞬といったところ, 描画が遅いのか.

ページネーション考えるより先に, 削除を考えるか.

追加削除閲覧が揃った. 見た目を整えよう.

思いの外, 逆引きテーブル使い物になるな.

動作機能的にはほぼ完と言え...いや, 積みたい機能はある. が, 現状でも使えないわけではない.

途中からもはやMaquetteではなくなったな.
ひとまずは, 以下を型として使えばいいか.

1. const page = maquette.createProjector()でページ(ブロック)描画ルーチンを作る.
2. h('<タグやセレクタ>', {<属性>}, [<直系の子(h())やテキスト>])で要素(の塊)を作る.

• ある階層にアクセスの衝突(同一タグの連続, pやliとか)を起こさせないようにする.
  • 動きを持たなければ, 属性に key: this が単純. しかし, クリックとかを引っ掛けるならユニークidのほうが安定する.

3. page.append(<HTMLのノード, bodyとか>, <頂点のh()を返す関数>)を登録して描画登録する.

• 関数を登録する.

4. 関数はできるだけ, 事前定義したのを登録して使いまわしてやる.

• 内部で閉じるといちいち再定義が走るみたいでもたつく.

ついでにPWAになったような気がする.

https://td-shi.github.io/UtxViewer/　にて, UTX viewerとして公開.