batonjs

既存ページにダイナミズムを後付けする宣言的UIフレームワーク

batonjsは既存ページにダイナミズムを後付けする宣言的UIフレームワークです。
HTMLをクライアント側で作るのではなく、サーバ側で作ったHTMLにダイナミズムを後付けします。そうすることで次のような長所を得ました：

ダイナミックな部分だけをピンポイントでCSS風に記述
HTMLを専有しないので、jQueryなどDOMに変更を加えるライブラリと併用可能
設定上当然ですが、サーバー側言語を限定せず、ページの表示速度やSEOも良好

また、batonjsは次のような優れた特性も持っています：

高速ロード -- gzipで4kbと小さいのでロードが高速です
ワンストップ -- 他のライブラリ無しで様々なページを作れます
導入が楽 -- Node.js、babel、webpackなどが不要です
学びやすい -- Web標準の上に独自の概念を少し付け足しただけ
保守しやすい -- 枠組みに沿って書くだけで自然とコードが整理されます

概要

簡単なクリックカウントを例にbatonjsを見てみましょう。

<html>
  <body>
    <p>Count: <span id="count">0</span></p>
    <button id="button" type="button">Count Up</button>
  </body>
</html>

batonjsは既存のHTMLページにUI管理を後付けします。だからこの例でもHTMLは完全な形になっています。

import {baton} from '../asset/baton.esm.js'
const state = {count:0}
function show(state) {
  return {
    "#count": {
      innerText: state.count
    }
  }
}
document.getElementById('button').addEventListener('click', (ev) => {
  withState(state => ({count: state.count + 1}))
})
const withState = baton(state, show, document.body)

2行目でページの初期状態を定義しています。このオブジェクトは13行目でbatonjsを起動するのに使います。

3行目のshow関数は、ページ状態をUIに反映させる方法を指示する関数です。最新のページ状態を受け取り、それをUI宣言に変換して返却します。UI宣言とは、どのUIがどうであるべきかを表現したオブジェクトです。
5行目の#countはCSSセレクターで、6行目のinnerTextはDOM要素のプロパティ名です。この2行で、どのDOM要素のどのプロパティをどんな値にするか、を確かに指示できていますね。

11行目のwithStateはページ状態を更新するための関数です。withStateに渡したコールバック関数が新しいページ状態を返却すると、withStateはその状態をUIに反映させます。もちろん、その過程でshow関数が使われます。

13行目ではbatonjsを起動しています。batonjsを起動すると、状態を管理するためのwithStateが返却されます。

このように、CSSに似た書き方で動的なウェブページをプログラミングしていけるのがbatonjsです。

この例は、ライブサンプルに実際に動くものがあります。ライブサンプルには他にもたくさんの動くサンプルがあります。

インストール

CDNから

batonjsはインストールは必須ではありません。CDNから読み込むのが気楽でおすすめです。
あらかじめCDNからダウンロードしておき、自サーバーに配置することもできます。

ESモジュール形式

<script type="module">
import {baton} from 'https://cdn.jsdelivr.net/npm/@vividcolors/batonjs/asset/baton.esm.js'
</script>

UMD形式

<script src="https://cdn.jsdelivr.net/npm/@vividcolors/batonjs/asset/baton.umd.js"></script>
<script>
const baton = batonjs.baton
</script>

npmから

npmでインストールすれば、バンドルしたりTree Shakingしたりする余地があります。

$ npm install @vividcolors/batonjs

ESモジュール形式

import {baton} from '@vividcolors/batonjs'

CommonJS形式

const {baton} = require('@vividcolors/batonjs')

動作環境

Chrome最新版
Edge最新版
Firefox最新版
Chrome for Android最新版
iOS Safari最新版
Node.js v14以上

ライセンス

MIT