Aurelia関連でいろいろと

Aurelia を触るにあたっての前提知識をいくつか。

ポリフィルなんぞ

Aurelia は ES6/7 で記述することを想定している（ES5 でもかける）。当然 ES6 は最新ブラウザでも動かないわけで、動くするようにするのが「Polyfill」だ。「Polyfilla」は商標名だ。
package manager（e.g. jspm） -> transpiler（e.g. babel）の多段構成になっていて、実装は選べる。Aurelia は現実解を jspm と設定している。

双方向バインディングなんぞ

Aurelia といえば Angular 代替と目されるわけで、つまり双方向バインディングなわけだ（誤）。
Aurelia での双方向バインディングの実現方式は適応性のあるもので、Object.observe、ゲッタ/セッタ、「汚いチェック」、あるいはオレオレ実装のうち最も効率の良いものを選択できる。
と、ここで出てくるのがO.oだ。ES7 プロポーザルで、Chrome などで実装取り込み済み。

Object.observe(obj, callback[, acceptList]);

実際には Aurelia で直接 O.o を記述することはない。HTML で View を書き、ES6 の Class で JS を書く。普通だ。侵襲性がなくてビューティフルだ。

ルーティングなんぞ

Routing を URL と処理のマッピングと定義する。Ember でも Angular でも Routing によってプログラムを構造化し、SPA の部分描画に資する。
Aurelia では JavaScript の配列で階層構造を表現する。

import {Router} from 'aurelia-router';

export class App {
  static inject() { return [Router]; }
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';
      config.map([
        { route: ['','welcome'],  moduleId: 'welcome',      nav: true, title:'Welcome' },
        { route: 'flickr',        moduleId: 'flickr',       nav: true },
        { route: 'child-router',  moduleId: 'child-router', nav: true, title:'Child Router' }
      ]);
    });
  }
}

感想

Aurelia は全体に ES6/7 で記述することによってシンプルでわかりやすい構造になっていると思う。実際にワークフローまわした場合には Polyfill が介在することでブラックボックス化は避けられない予感はある。