Angular 2.0

http://blog.angularjs.org/2014/03/angular-20.html

1 comment | 1 point | by noto 3年以上前 edited


noto 3年以上前 edited | ▲upvoteする | link

クライアントサイドの JavaScript フレームワークである AngularJS の公式ブログで Angular 2.0 の実装が始まったことがアナウンスされ、設計に関しての考え方、なぜ変更しようとしているか、詳細な変更点などについて述べてられています。Angular のもともと持っている特徴もおさえつつ説明されているので、Angular の復習にも良さそうです。

Angular 2 は mobile apps のためのフレームワーク (デスクトップにも利用できる)。data-binding、extensible (拡張可能な) HTML、テストのしやすさの重視については変わらない。

Angular 2 のすべての design docs は Google Drive で公開されている。このドキュメントでは、我々のアプローチの概要や設計方針が、個々の設計へのリンクとともに示されている。

注意: 我々はまだ Angular 2 の設計とプロトタイピングの段階にあり、これらのいくつかは異なった形で実現されたり、最終的なプロダクトにまったく含まれない可能性もある。

Designed for the future

Angular 2 の設計は、みなさんがこれを利用する頃、この世界がどのようになっているかを想定しながら行っており、特にモダンブラウザと ECMAScript 6 の利用をターゲットにしている。

  • モダンブラウザ: いつも自動的に最新バージョンにアップデートされるブラウザのこと。こういったブラウザを対象にすることで、Angular の利用・開発を難しくする hacks や workarounds を省略できる。今のところ、Chrome, FireFox,Opera, Safari と IE11 が含まれている。モバイルについては、Android のChrome, iOS 6+, Windows Phone 8+ と Firefox mobile がサポートされる予定。
  • ECMAScript 6+: Angular 2 のすべてのコードはすでに ES6 で書かれている。現在のところ ES6 はブラウザでは動作しないので、Traceur compiler を使って、動作する ES5 を生成している。開発者がもしアップグレードしたくなければES5 を利用し続けることも可能。

より速く (Faster)

  • より速い変更検知: Angular アプリケーションは DOM と JS オブジェクトの間の data-binding を利用して構築される。Angular アプリケーションのスピードは data-binding の基盤となる変更検知メカニズムに大きく依存する。Chrome M35 から利用できる Object.observe() を使うことでこれを改善する予定。
  • Instrumented (計測): 性能のもう半分はアプリケーション開発者の書くコードで決まる。アプリケーションで費やされる時間を高解像度 (high resolution) で計測するための仕組みを提供する予定。diary.js と呼ばれる新しい Angular-wide なロギングサービスを通して直接サポートされる。
  • Modular: Angular 1.0 をリリースした際は、この機能はオプショナルなパッケージだったが、モバイルデバイスでは大きく差が出る。$route をライブラリに分離した際おもしろいと思ったのは、革新的な代替モジュールがいくつか出てきたこと。性能とイノベーション実現のため、Angular のほとんどの部分を optional かつ代替可能 (replacable) で、他の Angular 以外のフレームワークでも利用できるものにすることをゴールにした。
  • 他の性能に関するトピック: デザインはまだないが、他の性能最適化も含める予定。事前に parse されたテンプレートを使った初期ロード改善から、なめらかでスムーズな 60 frames per second のアニメーションまで、完全に最適化されたユーザエクスペリエンスのために労力を注ぐ予定。

よりシンプルに (Simpler)

  • Dependency Injection (DI): DI は他のクライアントサイドフレームワークとの主要な差別化要素であり、アプリケーション内の連携 (wiring) コードの量を減らし、デフォルトでテストしやすくすることに貢献している。現状の実装より複雑性を減らしながら、できることを増やせると考えている。設定フェーズを減らし、命令的なスタイルのかわりに宣言的スタイルの ES6+ アノテーションを使ってシンタックスをシンプルにすることで、DI の複雑さを減らせる。DI を ES6 モジュールのロードと統合することで、より多くのことができるようになる。child injectors を通して我々の JS の一部を lazily-load できるようになる。
  • Templating and Directives: HTML に直接テンプレートを記述できることと、そのシンタックスを拡張できることは Angular のもっとも基本的な部分。バージョン 2 のテンプレートコンパイラーでは以下のような野心的なゴールを設定している。
    • directive API をシンプルにする
    • ウェブ標準を利用した他のコンポーネントとの統合
    • 性能改善
    • IDE のようなツールを利用して分析・バリデーションできるように

より多くの機能 (More capable)

  • Touch animations: 指を利用してリストをスクロールする、カルーセル (回転式の選択インタフェース) の利用、スワイプしてリスト要素を削除するなど、ユーザはタッチ前提の利用パターンに慣れている。しかし、現状下記のような問題があるため、first-class サポートを提供する予定。

    • カルーセル、無限スクロールの現在の実装は、コアを共有しておらず、冗長でさまざまなアプローチが存在している。
    • 古いブラウザや現行ブラウザの一部がサポートしていないということもあり、現在の実装の多くはネイティブスクロールイベントを利用する手段を提供していない。
  • Router: 最初の Angular router はごく限られたシンプルなケースを扱うように設計されており、Angular が成長するにつれて、徐々に機能が追加されてきた。しかし、基礎となる設計は大幅な拡張に適していない。多くのアプリケーションフレームワークについて router 実装を調べており、もっとも幅広く、さまざまなアプリケーションに対応可能なシンプルでかつ拡張可能な route を提供できると考えいている。特にサポートしたいと考えているものには以下が含まれる:

    • state-based routing
    • 認証・権限機能の統合
    • ビューの状態維持、特にモバイルで必要とされている
  • Persistence (永続化): 多くの開発者はサーバからのデータ、ブラウザのローカルで保持されるデータを扱うために、Angular の簡素な $http より抽象度の高い方法を求めている。モバイルアプリはサーバへの接続を試しつつ「常にオフライン」モードでも動く必要がある。RESTful サービスは $resource で提供されるより多くの機能を必要とする。途切れないストリームモデルが必要な場合もあれば、バッチでアップデートできるデータもある。新しい永続化レイヤでは、こういったケースのためのきれいな構造を提供し、現在共通的に必要とされるものを取り込んでいく。

Q&A

  • いつ完成するの? → 未定。design docs を投稿したばかりだが、すでに多くのモジュールのプロトタイピングを始めている。DI と Zone.js は利用できるようになってきている。すべての作業は GitHub 上で行われ、週次ミーティング議事録もとっているので、追跡可能。
  • Angular 1.x アプリケーションは Angular 2 に移植できそうか? → 開発中なので正直なところわからない。想像するに移植はかなりかんたんだと思うが、移植作業自体が不要とはならないのではないか。作業の多くは ES6 の恩恵を得る部分と関わると推測する。テンプレートはほとんどが同じで、残りの部分は機械的な置換でいけるだろう。コントローラもかんたんに移植できるはず。もっとも検討が必要なのはモジュールとディレクティブの利用部分。
  • Angular 2 は PhoneGap や Ionic Framework のようなモバイル技術を置き換えるものか? → No. Angular は従来通り単なるコアフレームワークである。モバイルに最適化された CSS/JS コンポーネントとして Ionic のようなライブラリや、app packaging とネイティブ API アクセスのための PhoneGap のようなツールが、今までどおり欲しいと思うことはあるだろう。
  • Angular 2 は AngularDart とどのように関係するのか? → AngularJS を Dart 言語に移植する際は、今まで学んだことをすべて利用して Angular の新しいバージョンをビルドしている。改善されたディレクティブの概念やシンタックス、クラス/アノテーションベースの DI のような、このドキュメントで議論されている改善点の多くは、そちらにもすでに含まれている。実装はバージョン 2 で到達するものにはまだなっていないが、これから提供されるもののすばらしいプレビューになっている。AngularJS 2 を構築するにともなって、AngularDart もアップグレードしていく予定なので、Dart 言語を好む人たちも JS の人たちと同様にその利点を楽しめる。我々のゴールは言語の選択によらずひとつのフレームワークを提供することだ。
Back