AngularDart最新動向ヘッドライン


AngularDart(AngularのDartバージョン)の最新動向の紹介です。主要なトピックは網羅できているはず。

## Version

AngularDartの現在のversionは2.2.0です。GitHub上では2.3.0がプレリリースされています。TypeScript版AngularからForkした後、両者のversionにはもはや関係はなく、変更内容も同期していません。
マイナーバージョンアップで破壊的変更が入っているので特にSemverに従っているわけでもないです。
2.0のAPIをなるべく維持しつつ、内部構造を大幅に変更、というかかなりの部分がいちから作りなおされてきています。
近いうちに再度、今後のロードマップを公開するようです(Gitterチャット情報)。

## Template Compilerの作り直し

パフォーマンス向上とペイロードの削減のため、ランタイムでのリフレクション(dart:mirror)を前提として動作するコードをすべて捨て、代わりにTemplate Compilerをpackage:sourcegenベースで完全に作り直しています。

## ComponentState Mixin

試験段階ですが、新たにComponentState(Mixin)が追加されました。
ReactまたはFlutterのようにsetState()関数を使用して、dirty checkingを使用せずにstateをviewに反映します。
サンプルコードは、[このテストコード](https://github.com/dart-lang/angular2/blob/master/test/core/change_detection/component_state_test.dart)を見るのが一番分かりやすいでしょう。

他にも、Change Detectionのさらなる効率化を達成するための変更が[計画されています](https://github.com/dart-lang/angular2/issues/169)。

## NgTestBed

試験段階ですが、Componentのテスト用としてNgTestBedが新たに実装されました。([サンプル](https://github.com/dart-lang/angular2/blob/master/test/common/forms/accessor_test.dart))

[ドキュメント](https://docs.google.com/document/d/1IuiCQt6m5GJxgDZYJTkfK1b5Va0CazQAQH1-wm18Acs/edit?ts=57e2bc06#)

## Router

TS版の古いバージョンのものをそのまま運用中。ドキュメントももはや整備されているとは言い難くやや辛い状況。Routerを書き直すプロジェクトが進行中とのこと。TS版に追随するものになるのかどうかなど詳細は不明です。

## DI

AngularDartから独立したpackageにしてserverなどでも利用可能にする計画のようです。
[https://github.com/dart-lang/angular2/issues/16](https://github.com/dart-lang/angular2/issues/16)


## TypeScript版とのAPIの非互換性

Rendererが削除されたり、TemplateRefにparameterがまだなかったりComponent Inheritanceが（まだ？）なかったりComponentResolverのresolveComponent()が非同期だったり、NgPluralが削除されてpackage:intlの使用が推奨されたり等々、forkしただけあって大小のAPI互換性がTypeScript版からすこしずつ離れていきそうです。
破壊的変更は[CHANGELOG](https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md)で確認しましょう。
RxJS関連のコードは、Dart版ではコアライブラリであるdart:asyncのStream、およびpackage:stream_transformersを使うのが無難です。
RxJSのAPIをDart版でもできるだけ使いたい場合は、[RxDart](https://github.com/frankpepermans/rxdart)を自己責任で使うのが良さそうです。

## DDC（未）サポート

DDCとは、[DartコードをリーダブルなES2015コードに高速に変換するコンパイラ](https://www.youtube.com/watch?v=oH6czEQwHdE&index=4&list=PLOU2XLYxmsILKY-A1kq4eHMcku3GMAyp2)です。DartiumでなくChromeやFirefoxなどのモダンブラウザで快適にデバッグできると宣伝されています。Google内部のAngularDart製開発プロジェクトではすでに導入済みとのこと。
AngularDartにとって次の最大のマイルストーンと言ってよいでしょう。
現段階でも、[個人でDDCでのbuildに挑戦](https://github.com/dart-lang/bazel)できるようです。（試していません）

## Language Service

TypeScript版でAngular Language Serviceというものが開発されていますが、Dart版にも同様のプロジェクトがあります。
[https://github.com/dart-lang/angular_analyzer_plugin](https://github.com/dart-lang/angular_analyzer_plugin)
いままではAngularのTemplate文字列部分は静的解析の対象にはならなかったので、リファクタリング漏れなどのくだらないバグが発生しがちでしたが、これが完成してDart Analysis Serverとの統合が果たされれば開発効率が大きく向上するでしょう。

## Angualr Components

TypeScript版の公式material component集としてangular/material2プロジェクトが走っていますが、Dart版でそれに相当するプロジェクトがangular2_componentsになります。
[https://github.com/dart-lang/angular2_components](https://github.com/dart-lang/angular2_components)

Google内部の製品開発で実際に使用しているmaterial componentsのオープンソース版という位置づけで、100種類以上存在するそうですが、オープンソース版はまだそんなに種類がなく、Preview Releaseと称しており、あまり活発なコミットがないのがすこし気がかりです。

なお、[TypeScript版ではAngular Materialとは独立してflex-layoutがリリース](https://github.com/angular/flex-layout/wiki)されましたが、Dart版は今のところ公式にレイアウト機能をリリースする予定はないようで、コミュニティの有志が取り組むことが期待されます。

## サーバーサイドレンダリング(SSR)について

パフォーマンスの向上を優先するため、v2.2.0において抽象化層であるRendererは除去されました。これからはdart:htmlを直接利用します。

SSRに関してはコミュニティの有志が取り組むことが期待されます（二回目）。 [Template AST](https://github.com/dart-lang/angular_ast)をangularから独立したpackageに抽出してくれたので、実装はおそらくそんなに難しくはないのではないでしょうか。

個人的にはSSRよりも最小構成ですばやく起動つつ主要コンテンツをリクエストして表示し、残りのモジュールは遅延ロードするようなアーキテクチャのほうに可能性を感じます。ServiceWorkerやHTTP2の進化に乗りたい。

## ドキュメンテーション

angular.ioのコンテンツが[https://webdev.dartlang.org/angular/guide](https://webdev.dartlang.org/angular/guide)に転載されており、dart-lang/angular2のpubspec.yamlにもwebdev.dartlang.orgのほうがhomepageとして指定されているので、どうやらそちらに移行する流れのようです。
また、[https://angular.io/docs/dart/latest/api/](https://angular.io/docs/dart/latest/api/)がwebdev.dartlang.orgにリダイレクトされています。


# 主な情報源
[Dart公式ブログ](http://news.dartlang.org/) (今のところAngularDart単体のブログはなくここで更新情報が紹介されています)
[AngularDart ドキュメント](https://webdev.dartlang.org/angular/guide) (angular.ioから移行？)
[AngularDart リポジトリ](https://github.com/dart-lang/angular2) (忙しければCHANGELOGだけ見れば良い)
[Angular2 Gitter](https://gitter.im/dart-lang/angular2) (ここがたまり場となって活発に議論がされてる)
[Dart Developer Summit 2016](https://www.youtube.com/playlist?list=PLOU2XLYxmsILKY-A1kq4eHMcku3GMAyp2) (1日目のテーマはAngularDart中心)