What's new in Angular 4 - パステル色な日々

お久しぶりですpatelIncです
Angular 4のリリースが迫ってきました🎉
今日は調べたことをまとめようと思います

pastelinc.github.io

先日開催された ng-kyoto meetup #5 にてオーガナイザーとして登壇してきた内容の振り返りとなります
スライドは文字少なめの構成にしたのでスライドと合わせてこの記事でAngular 4のことについて振り返っていただければと思います

Angular 4リリースに際してAngularプロジェクトがより安定したリリースを続けていくための方法として取り入れた3つのポリシーについてまずお話します
後からAngular 4の新しいところをCHANGELOG.mdにかかれていた内容に沿ってお伝えしようと思います

SemVerポリシーの導入

一つ目にAngularは2016年9月にSemantic Versioningポリシーを採用しました
SemVerについてはスライドにリンクがありますので御覧ください

すべてバージョン番号に意味を追加すること
アップグレードの理由がわかる
安全にバージョンを上げることができる

SemVerポリシーの導入は以上のような方法で安定を提供します

Time-based Release Cycles

二つ目に図の通りパッチバージョンを週に1回、マイナーバージョンをメジャーバージョンのリリース後3ヶ月間、それに下位互換性のあるメジャーバージョンをリリースします
メジャーバージョンは6ヶ月に1回リリースされます。早い!!!

Deprecation Policy

最後にAPIの廃止ポリシーが定められました
AngularJSからAngular 2のバージョンアップのときに苦労された方も多いかもしれません
Breaking Changesは大きな混乱を招きますが必要なことです
Angular 4からはこれを前もって非推奨であることを開発者に知らせることである程度備えることができるように配慮してくれます

リリースノートで廃止予定を発表
推奨されていないAPIを引き続きサポートしてくれて、更新には6か月以上の猶予があります

peer dependencies なライブラリ (バージョンを決め打ちで使っているもの) TypeScriptやRxJSやZone.jsなどの更新もSemVerのポリシー対象として扱われます
Angularアプリケーションに対するBreaking Changesでないのであればマイナーチェンジで更新もありえます

以上がAngular 4からの安定したリリース体制です
次に新しいところについてお伝えします

New View Engine

この変更がAngular 4のメインの変更だと思います
この変更は前提知識としてAOTコンパイラやTree Shakingの知識が必要です
これらの事情を省いて説明すると新しいView Engineになったのでよりファイルサイズを小さくできるようになりましたということです
AOTコンパイルについて知らない方は一度スライドでも最後に紹介している @Quramy さんの資料をご覧ください

qiita.com

docs.google.com

ここからは少し詳しく説明してみます
AngularはAOT (Ahead of time) コンパイラを提供することでbootstrap時のコンパイルの手間を大きく軽減してくれました
さらにGoogleではClosure Compilerを使うことで大幅にテンプレートサイズを小さくできていました
しかし問題としてClosure Compilerを使うことはお手軽ではなくGoogle外のユーザーにとって大きなハードルがありました
しかも最近の新しいフレームワーク (inferno.js) はAngularと同様もしくはそれ以上のパフォーマンスを発揮してテンプレートのサイズがもっと小さいものになりました
そこでAngularチームはView Engineを見直すことにしました

AngularはView Engineを定義することでDOMノードとディレクティブインスタンスを何度も反復して作成しています
AOTコンパイラはたくさんのView Engineのコードを生成します (ngfactoryファイル)
今回のチューニングではこのView Engineとして生成されるコードがより小さくなるように見直されました

驚くべきはClosure Compiler無しでおよそ3分の一までテンプレートサイズを削減できたことです
しかし131,040のバインディングのChange Detectionを計測すると従来よりも1.5倍の時間がかかり20倍のメモリを消費します
これに関してはOnPushコンポーネントを使って一部をダーティチェックレンダリングするのが良さそうです
今後OnPushをより簡単に扱える仕組みを用意することを課題に挙げていました

`*ngIf` 構文の拡張

<ng-template #loading>Loading...</ng-template>
<div *ngIf="userObservable | async; else loading; let user">
  {{ user.name }}
</div>

ng-japan代表の@laco0416さんがブログですでに解説されているので御覧ください

blog.lacolaco.net

ngIfによる条件付けと、その条件により制御されるテンプレートを分離
これまでは真の場合と偽の場合にそれぞれ逆の条件のngIfが必要
ngIfに渡された式の評価結果をローカル変数にアサインできる

`@angular/animations` 爆誕

@angular/animations がコアモジュールから分離しました
必要な場合だけ利用するようにしましょう
アニメーションが必要なライブラリをインストールすると自動でインストールされるようになるはずです (e.g. Material)

TypeScript 2.1に更新

AngularのベースラインのTypeScriptバージョンが1.8から2.1にバージョンアップしました
これによりngcコマンドの実行が早くなりました
加えてTypeScript compilerの最適化とより良いエラーの恩恵が受けられるようになりました

StrictNullChecks

TypeScript 2.1 が利用できるようになったことでTypeScriptのStrictNullChecksに準拠しました
つまり、必要に応じて、プロジェクトでStrictNullChecksを有効にすることができます

let foo = undefined;
foo = null; // NOT Okay

interface Member {
  name: string,
  age?: number
}

getMember()
  .then(member: Member => {
    const stringifyAge = member.age.toString() // Object is possibly 'undefined'
  })

undefinedを割り当てるのかNullを割り当てるのかが厳密になります

Angular Universal

Universalの数カ月分の作業成果がコミットされています
ドキュメントが出るようなので寝て待ちましょう
先行して確認したい方には次のリポジトリをおすすめいたします

github.com

Flat ES Modules (Flat ESM / FESM)

FESMは、パブリックAPIのみをエクスポートするESMです (example file)
これはTree Shaking時に生成されるファイルのサイズを小さくしてくれます
今のところRollupもしくはClosure Compilerが対応していてWebpackは未対応です

WebpackはTree Shakingに対応したのでは？と思っていたのですが実は他のツールと比較するとまだ完全ではなさそうです
これはAngularの開発者でもあるIgorさん (@IgorMinar) が言及していました

@danbucholtz @TheLarkInn you'll need rollup or closure compiler for that. Hopefully webpack will support it in the future.
— Igor Minar (@IgorMinar) 2017年2月26日

@danbucholtz fixing this is what @TheLarkInn and friends are working on.
— Igor Minar (@IgorMinar) 2017年2月26日

要するにファイルに7つのシンボルが含まれ、1つだけがインポートされると、Tree Shakingの時に7つのシンボルがすべて取り込まれるからです
おそらく他のツールは本当に必要なものしかビルドしないようになっているのだと思います

ES2015 Builds

試験的な取り組みとしてFESMをES2015の形式で提供します
試したい方はpackage.jsonの “es2015"プロパティを解決するように設定してください

調べている最中に知ったこと

NG-BEのIgorさんの公演を見て

Googleのサービス(Google Map…etc.)上で一度テストされてから提供される
WebpackやSystemJSは最高のソリューションではないと思っている
だからGoogleでは独自のカスタムローダーを使ってビルドしている
SystemJSはデモアプリに最適
Angular Dartとはすでに開発路線が別れており別物と思ったほうが良い
APIを統一しようとかそういう思想はない

Tsickle/Clutz

TsickleはTypeScriptのClosure annotated JavaScriptを生成し、ClutzはClosure annotated JavaScriptからTypeScript定義ファイルを生成します。一緒に使用すると、クロージャ互換のコードベースでTypeScriptを使用することができ、その逆も可能らしいです

まとめ

Angularは安定したバージョンアップができるように環境を整備した
Angular 2からAngular 4のバージョンアップならお手軽にできそう
New View Engineをはじめとする努力でより高速にアプリケーションを提供できるようになった

スライドにあるようにこの2つが所感です
リリースサイクルについては見守るしかできませんがAngular界隈が活気づきそうですね