野次馬エンジニア道

野次馬な気持ちでプログラミングをあれこれと綴ります

Angular2.0とAngular1.Xからの移植について

f:id:notta55:20160327000332j:plain

3月21日に品川のマイクロソフトの本社で開かれた

ng-japan - The Angular conference in Tokyo, Japan (2016/3/21)

に参加。自分がチェックしたかった内容は

  • Angular2.0
  • Angular1.Xからの移植

非常に有益な話がたくさん聞けたので大変満足。セッションをピックアップすると

Session Slide
Angular2の失敗しない始め方 / 稲富 駿 Slide
Progressive Web Apps / 浅井 智也 Slide
Angular2を書くためのAngularJSの書き方 / 吉田 徹生 Slide
ngUpgradeと移植戦略 / 奥野 賢太郎 Slide
Angular1.4で作られた自社マイクロサービスを2へマイグレーション / 林 優一 Side

特に圧巻だったのが、Angular2の失敗しない始め方 / 稲富 駿のセッション。スライドは必見。

Angular2.0

Platform

AngularDartとかもあって、AngularがAngularJS=>Angularとなったのは知っていたがロードマップとして、サーバーサイドでも動く構想があることは知らなかった。

f:id:notta55:20160327000801p:plain

Full Stack Angular 2 – Jeff Whelpley and Patrick Stapleton - YouTube

Angular1.Xでは色々なコンセプトがあって覚えることが多いが初心者(自分)でも簡単にアプリを作ることが可能。一方Angular2.0ではWebのフロントエンド技術の革新に合わせて新しいJavaScriptのライブラリや言語の仕様を先行して取り入れるような発想になっている。

Polyfilの積極活用

それを表すのが下記のようなライブラリの活用。将来的にブラウザにネイティブに実装されるのを見越して大胆に外部のものを使っている。

  • SystemJS モジュールの動的ロード
  • RxJS - Obserbableのため
  • Zones - 変更検知のため - $scope.apply()不要。

コンポーネントでの開発

Angular1.Xでdirectiveを使ってコンポーネント化して開発をしていたが、Angular2では完全に置き換えられていることにまず驚く。WebComponentを先取りしたPolymerやとaltJSでclassでキーワードでコンポーネントで開発できる素地があるなかでここまで大きく変更されているとは思っていなかった。

Angular2.0では「TypeScript推奨」と会場でも度々言われていたが、それはAngular2が@Decoratorsのようなアノテーションの機能の型チェックを前提としたものだからのようだ。データバインディングのところの記述が汚くなりがちなので、宣言的に記述すれば可読性とメンテナンス性は明らかに向上する。

パフォーマンス向上

双方向データバインディングが画期的な仕組みだった一方で、dirty checkingとして知られるパフォーマンスの問題があった。Angular2では、DOMの変更の検知が 100000 checks / ~10ms と非常に高速。この変更検知のためのコードは現状は最初に動的生成しているらしい。今後これがデプロイ前に生成されその分高速化される見込み。

非同期処理がRxJSへ

内部でRxJSを利用。Promiseは基本的に一度切りの処理だが、RxJSはイベントのシーケンスを処理することが可能。これは決定的に大きな違い。

1.Xからの移植

移植の困難さを図解した下記の図が非常に参考になる(ngUpgradeと移植戦略 / 奥野 賢太郎 のスライドから引用)。距離が遠いほど移植は困難。

f:id:notta55:20160327000809p:plain

ngUpgradeは端的に言うとは2.0のなかで1.0の動作をエミュレーションして移植を容易にする機能のことのようだ。会場ではAngular1.5+TypeScriptで開発をしてAngular2.0に備えるという人がまだまだ多いように感じた。

まとめ

スピーカーの人も熱のある人が多く非常にいいイベントでした。変化の激しいWebのフロント周りですが、特定のフレームワークを学ぶだけではなく、言語の仕様とかインパクトのあるライブラリなどは広くチェックし続ける必要があると感じた。