JSer.info #353 - Vue 2.5.0がリリースされました。

以前から予告(Upcoming TypeScript Changes in Vue 2.5 – The Vue Point – Medium)されていたTypeScript向けの型が改善されています。
また、React 16で導入されたError BoundariesのようにエラーをキャッチすることができるerrorCapturedというhookが追加されています。

E2EテストフレームワークであるTestCafe v0.18.0がリリースされています。

Angularに対応するtestcafe-angular-selectorsの追加やt.getBrowserConsoleMessagesというAPIが追加されています。
t.getBrowserConsoleMessagesはテストを実行したブラウザのコンソールに吐き出された情報を取得することができるAPIで、ライブラリなどが実行時にdeprecated warningを出した情報を取得してテストを落とすなどに利用できます。

{
    error: ["Cannot access the 'db' database. Wrong credentials.", '...'], // error messages
    warn: ['The setTimeout property is deprecated', '...'],                // warning messages
    log: ['[09:12:08] Logged in', '[09:25:43] Changes saved', '...'],      // log messages
    info: ['The application was updated since your last visit.', '...']    // info messages
}

同じくE2EテストフレームワークであるCypressがOSSとして公開されています。
CypressはTime Travelなどデバッグのしやすさ、Automatic waitingなどを機能を持つE2Eテストフレームワークです。
また、同じ名前のサービスでもあるcypress.ioのダッシュボードと連携できます。

Ember.js - Glimmer.js Progress Reportという記事では独立して利用できるようになったテンプレートエンジンのGlimmerの今後について書かれています。

タグが<Button />のようにCapitalスタイルで書くように変更、要素のプロパティと属性を@で区別できるように、Portalのサポートなど変更点が紹介されています。
その中で、将来的にBinary Templatesと呼ばれる仕組みを導入することについて書かれています。

Glimmerは、テンプレートのコンパイラとランタイムという2つの役割を持っています。
今回の変更でテンプレートを(最終的に)バイナリとして出力し、ランタイムはバイナリを読み込んでDOMを組み立て表示できるようにするという話が書かれています。

Glimmer's Optimizing Compiler | Chad Hietala | Pulse | LinkedInという記事ではそのGlimmer VMの仕組みについて書かれています。

現在のGlimmer はテンプレートをJSON形式にコンパイルし、ランタイムでOpcodeと定数を表現したテンプレート情報を作り、この情報を元に実際のDOMを構築します。

テンプレート:

<h1>Hello World</h1>

コンパイラーがテンプレートをJSON形式の中間表現(IR)にします。
（現在のGlimmer VMがコンパイルするのは、このJSON表現までです）

[
  ["open-element", "h1", []],
  ["text", "Hello World"],
  ["close-element"]
]

ランタイムでJSONを読み込み、Opcodeと定数で表現したテンプレート情報を作ります。

// OpCode
const Program = [25, 1, 0, 0, 22, 2, 0, 0, 32, 0, 0, 0]
const ConstantsPool = {
  strings: [... ‘h1’, ‘Hello World’]
  ...
}

最後にランタイムがテンプレート情報を元にDOMを組み立てます。

APPEND_OPCODES.add(Op.OpenElement, (vm, { op1: tag }) => {
  vm.elements().openElement(vm.constants.getString(tag));
});

将来のGlimmer のBinary Templateでは、コンパイラがテンプレートをバイナリ形式(.gbxというファイル形式)へとコンパイルします。
ランタイムはバイナリをArrayBufferで読み込んでテンプレート情報を作り、DOMを組み立てるようになるため、ファイルサイズやパース速度などが改善されるかもしれません。
一方、HTMLやJavaScriptにはバイナリを埋め込むことができないため、バイナリファイルをlink rel=prefetchやHTTP/2 Pushなどで先に読み込む工夫も合わせて必要になります。

多くのテンプレートエンジンはJSONやJavaScript形式にテンプレートをコンパイルします。
ウェブアプリのサイズが大きくなってきた現在では、JavaScriptファイルのパース時間やファイルサイズは起動時間のボトルネックの一つとなっています。
（特にモバイルデバイスでは影響が大きいです）

JavaScript Start-up Performance – reloading – Medium

これに対して、バイナリ形式のファイルを使うことでパース時間やファイルサイズを小さくすることができます。
このアプローチとしてWebAssemblyやECMAScriptのStage 1 ProposalであるBinary ASTなどがあります。

GlimmerのBinary Templateはユーザーランドでこのバイナリのアプローチを実践しようとしていると言えると思います。

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

TestCafe v0.18.0 Released - Angular Selectors, Using Multiple Reporters, etc | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v0-18-0-released.html

testing E2E ReleaseNote

TestCafe v0.18.0リリース。
Angular Selectorのサポート、出力に複数のreporterを指定できるように、FirefoxとChromeでクリーンなプロファイルを使うように、t.getBrowserConsoleMessagesでコンソールに出力された内容を取得できるようになるなど