Almin.js

AlminはClient-side DDD/CQRSをしやすい構造を作ることを目的にした – いわゆるステート管理ライブラリです。

Almin 0.14.0でperformance.markベースのプロファイルを取れるようになりました。 これにより、AlminのUseCaseやStoreといったそれぞれの処理にどれぐらいかかっているかを開発者ツールのタイムラインで見ることができます。

DevTool timeline

performance.markはUser Timing Level 2で標準化されている方法なので、後述するようにReactやVueなどのライブラリと組み合わせた状態も見ることができます。 performance.markについては次の記事でも書いています。

使い方

Contextを作成する際にperformanceProfileオプションを有効にするだけです。

const appContext = new Context({
    dispatcher: new Dispatcher(),
    store: yourStoreGroup,
    options: {
        strict: true,
        performanceProfile: true
    }
});

このオプションを有効にした状態で実際のウェブサイトにアクセスして、次のステップでみることができます。

  1. performanceProfileオプションを有効化
  2. ウェブサイトを開く
  3. 開発者ツールの”Performance”タブを開きRecordを押す
  4. Recordを停止する
  5. User TimingというラベルにAlminのイベントが表示される

実際にパフォーマンスプロファイルをタイムラインで見ている様子です。

この動画ではReactの?react_perfと組み合わせたものをタイムライン表示しています。

動かしているサンプルはショッピングカートのコードです。

Vue + Almin

ReactだけではなくVueもperformance.markベースのパフォーマンスオプションをサポートしています。

Vue + Alminで書いたサンプルを作ったので、次のリポジトリで試すことができます。

Vue + Almin

VueのパフォーマンスプロファイルはVueによるViewの更新(renderやpatch)に関する情報がタイムラインにでます。 Alminのパフォーマンスプロファイルは、UseCaseの実行、StoreGroup/Storeの更新、StoreからのState取得に関する情報がタイムラインにでます。

Alminが現在サポートしているメトリクスについては次のドキュメントで公開しています。

Metrics

このVue + Alminのサンプルプロジェクトは、Vue + Vuexで書いたものをAlminに変換して作ったので、そのときはDiffは次のPull Requestで見ることができます。

おわりに

Reactの?react_perfのように、?almin_perfをクエリに付けた時だけプロファイルを取りたい場合は次のように設定すればできます。

またパフォーマンスプロファイルのコードは、オプション値関係なくproductionビルドすると消えるようになっています。

// ?almin_perf をつけるとプロファイルが取れる
const context = new Context({
    dispatcher: new Dispatcher(),
    store: new StoreGroup({
        counter: new CounterStore()
    }),
    options: {
        strict: true,
        performanceProfile: /[?&]almin_perf\b/.test(location.href)
    }
});

Alminはロガーなどを外部実装するためのライフサイクルイベントのAPIも公開しています。 almin-loggerやalmin-devtoolsはこちらを使っていますが、それとは別にオプションを追加したのはパフォーマンスプロファイルはAlmin内部的な状態を出す可能性があるからです。 そのため、Publicなものはライフサイクルイベントとして、内部的な状態のダンプデータはperformanceProfileのみで出すようにしています。

Alminのパフォーマンスプロファイルについて詳しくは次のドキュメントに書いています。