Fork me on GitHub

2017-10-17のJS: Vue 2.5.0、E2Eテストフレームワーク、GlimmerのBinary Template

Edit on GitHub 編集履歴を見る

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ファイルのパース時間やファイルサイズは起動時間のボトルネックの一つとなっています。
(特にモバイルデバイスでは影響が大きいです)

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

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


ヘッドライン


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でコンソールに出力された内容を取得できるようになるなど


Announcing TypeScript 2.6 RC | TypeScript

blogs.msdn.microsoft.com/typescript/2017/10/12/announcing-typescript-2-6-rc/

TypeScript ReleaseNote

TypeScript 2.6 RCリリース。
--strictFunctionTypesの追加、// @ts-ignoreでのエラーを抑制するコメントをサポート、--localeでCLIの多言語対応、tsc --watchの速度改善など


Release v2.5.0 Level E · vuejs/vue

github.com/vuejs/vue/releases/tag/v2.5.0

Vue ReleaseNote

Vue 2.5.0リリース。
errorCaptured hookでのエラーハンドリングができるように、TypeScriptの型を改善(破壊的変更)、v-on.exact modifierを追加など


ESLint v4.9.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2017/10/eslint-v4.9.0-released

ESLint ReleaseNote

ESLint 4.9.0リリース。
--fixでdry-run実行を行う--fix-dry-runオプションの追加など


Eloquent JavaScript Third Edition

eloquentjavascript.net/3rd_edition/

book JavaScript news

Eloquent JavaScripの第三版のCrowdfundingが開始された


ProseMirror 1.0

marijnhaverbeke.nl/blog/prosemirror-1.html

JavaScript editor library ReleaseNote

ProseMirror 1.0リリース。
ProseMirrorはよりよいWYSIWYG-styleのエディタを実装できるコアライブラリで、ProseMirror自体は特定のドキュメント形式には依存していないことが特徴。
1.xからは安定版とRFCプロセスによる開発を行うという話


Release v3.7.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v3.7.0

webpack ReleaseNote

webpack v3.7.0リリース。
CommonChunkPluginプラグインにdeepChildrenオプションを追加を追加、ES modulesのchunk graphのリファクタリングでパフォーマンスの改善など


アーティクル


Ember.js - Glimmer.js Progress Report

emberjs.com/blog/2017/10/10/glimmer-progress-report.html

JavaScript article

Glimmer.jsについてのステータスについて。
タグが<Button />のようにCapitalスタイルとなるように、要素のプロパティと属性を@で区別できるように、Portalのサポート。
テンプレートをバイナリにするBinary Templatesのサポート予定やSSRについて


Cypress.io | JavaScript End to End Testing | Cypress is now public beta

www.cypress.io/blog/2017/10/10/cypress-is-now-public-beta/

testing browser library

E2EテストフレームワークのCypressがオープンソースとして公開された。


Dependency Inversion with Redux-Thunk & Typescript – Dave L. – Medium

medium.com/@david.losert_73564/dependency-inversion-with-redux-thunk-typescript-e09cebabdc1f

redux testing article

redux-thunkのthunk.withExtraArgument(deps)を使って依存関係逆転の原則(DIP)を適応する方法について


What's New In DevTools (Chrome 63)  |  Web  |  Google Developers

developers.google.com/web/updates/2017/10/devtools-release-notes

Chrome debug article

Chrome 63の開発者ツールについて。
AuditsパネルにSynkDBを使った脆弱性情報の表示、Workspaces 2.0、remote debuggingが複数のクライアントの同時接続に対応など


NPM Task Running Techniques – Netscape – Medium

medium.com/netscape/npm-task-running-techniques-15fe5b697f15

npm console Tools article

npm-run-allを使ったnpm-run-scriptsの実行管理やwait-onを使ったサーバが起動するのを待ってからコマンドを処理する方法など


Node.js - a tale of two bugs

dev.to/mikeralphson/nodejs---a-tale-of-two-bugs-18c

node.js issue performance article

Node.jsで7.x以降にパフォーマンスリグレッションを見つけ、どのようにデバッグし問題を特定したかについて。
原因としてはV8のError.captureStackTraceのリグレッションであり、Node.js 8.7.0で修正される予定。


スライド、動画関係


The productive developer guide to React

www.slideshare.net/mauricedb/the-productive-developer-guide-to-react-80642342

React slide

Reactを使った開発についてのスライド。
入門的な内容でReactの利点/問題点、create-react-appやRedux、ルーティング
などについて


サイト、サービス、ドキュメント


GoogleChrome/confluence: Service and API for Web API Confluence: Metrics for web platform health

github.com/GoogleChrome/confluence

browser WebPlatformAPI

各ブラウザの特有のAPIの数や削除したAPIの数、Shipに失敗したAPIの数、ベロシティなどを可視化してくれるサイト


ソフトウェア、ツール、ライブラリ関係


dt-fe/number-precision: 🚀1K tiny & fast lib for doing addition, subtraction, multiplication and division operations precisely

github.com/dt-fe/number-precision

JavaScript library

浮動小数点数同士の演算を行うライブラリ


SpireTeam/whitelister: Simple, basic filtering and validation tool for Node.js.

github.com/SpireTeam/whitelister

JavaScript library

依存がないフィルタリング/バリデーションライブラリ。
デフォルトでは結果をPromiseで返し、syncメソッドで同期的に処理できる。
ルールに違反した場合はカスタムエラーを投げるようになっている


planttheidea/fast-equals: A blazing fast equality comparison, either shallow or deep

github.com/planttheidea/fast-equals

JavaScript library

deep-equal、shallow-equalを行うライブラリ。


書籍関係


Atomic Design by Brad Frost

atomicdesign.bradfrost.com/

GUI CSS book

Atomic Designについての書籍


この記事へ修正リクエストをする
JSer.info Slackに参加する