Angular 2 betaリリース記念 Angularの5年とこれから JSer.info 5周年記念イベント Jan 16, 2016 @armorik83

JSer.info 5周年 おめでとうございます

• はちさん @armorik83 • 京都出身 • ChatWork株式会社
 フロントエンド・エンジニア • Angularユーザコミュニティ ng-kyoto代表 自己紹介

• AngularJSモダンプラクティス • Angular 2 Advent Calendar 2015オーナー • つわもの揃いの25記事
 5つ書いたのでヨロシク Qiita

• 私がAngularJSを触り始めたのは、2013年夏 • 「データバインディング」なんて言葉も知らなかったあの頃…


{{foo}}

と書けば表示される凄さ、快感 • フルスタック・フレームワークと喧伝されたAngularJS
 何よりの特徴は、テンプレートでの宣言的なデータバインディング データバインディングとAngular

• と言い切ると多方面から怒られそうですが フロントエンドの歴史はバインディングの歴史

• Ajax + jQueryをはじめとする、レスポンスを画面上に描画する技術 • JavaScriptの複雑化 • Backbone.js MVCアーキテクチャの提案 • 設計の提案は成されたが、双方向データバインディングは非搭載 • ものすごく薄い分、使用者の書き方に依存 • AngularJS 双方向データバインディング、module概念、DIの導入 • バインディングを裏で自動的に行いDirectiveとロジックを分離 • ちょうど5年前はAngularJS 0.9.9だった フロントエンドの歴史はバインディングの歴史

• 冗長なDirty Checkingが問題視される • 全てをwatchして回ることによるパフォーマンス性の問題 • 全てのDOMを逐次生成することで発生する描画コスト • AngularJS module単位で切ることによるロックインの懸念
 ES6 modulesのプロポーザルが出ていた頃とも被る • React 仮想DOMの採用、宣言的に記述するComponent • Fluxアーキテクチャの台頭 • ES6の勧告、TypeScriptの安定（1.7.5）といった、言語そのものの進化 • フロントエンド界隈はどんどん進む AngularJS 弱点の顕在化とReact

• 2015/12/15 Angular 2 beta.0リリース • @Input, @Outputという簡潔な2大API
 Component間のデータ、イベントのバインディングを整合化 • TypeScript前提、型保護と型アノテーションによるDI
 フロントエンドでもテストありきの設計を支援 • Change Detectionによるスマートな変更検知とパフォーマンスの追求
 AngularJS比で10倍高速(※)
 ※ AngularConnect 2015 資料より • ngAnimateや、スコープをComponent内に適用を限定できる
 Stylesといった、UI表現のためのAPI群 2016年 期待されるはAngular 2

·͞ʹ
 ͖Ε͍ͳAngular

• テンプレートの宣言的なアプローチはバグの原因を排除しているが、
 Angular 1で明らかになったことは、$scopeモデルが混乱したことだ l Angular 2: Musings on Framework Design Although the declarative approach to templates eliminated one source of bugs, one thing that became apparent with Angular 1 was that the scoping model was confusing. z Angular 2 Advent Calendar 2015に寄稿してくれたAngular開発チーム@btfordの記事より http://qiita.com/btford/items/364e42b883fc54d763cb

• 変更に対処するための最良の方法は、自身が書いたコードについて
 批判的に考えること • フレームワークレベルの抽象化のアイデアを具体化するとどうなりますか？ Angular 2: Musings on Framework Design The best way to address these changes is to think critically about the code you write. … What happens when you reify an idea into a framework-level abstraction? Angular 2 Advent Calendar 2015に寄稿してくれたAngular開発チーム@btfordの記事より http://qiita.com/btford/items/364e42b883fc54d763cb l z

自問自答を繰り返し
 成長したAngular

• Twitterなどで「互換性は無い」と言われている様子を散見 • たしかに大幅に設計が見直されて、大部分のAPIは共通していない • ただし、移行不可能・全くの別物というわけではない AngularJSとの互換性

• Twitterなどで「互換性は無い」と言われている様子を散見 • たしかに大幅に設計が見直されて、大部分のAPIは共通していない • ただし、移行不可能・全くの別物というわけではない • Angularチームは、本気でAngularJSユーザの2への移行を願っている • ngUpgrade • Angularの父Miško Hevery氏によるStrategies Draftから約半年 • かなりボリュームのある移行ドキュメントが既に公開されている • Angular 1.x内で部分的に2を適用、2内で1.xの資産を活用、両方可 AngularJSとの互換性

Angularが これから目指すところ

• sugarを導入して、独特なHTMLで表記できるAngular 2 • のような構文 • Change DetectionとJIT Parser + Reflectorの力技で解決している • Offline Compileというものも計画されており、これはJITの3倍高速 • ``; • be('div',[CA,'','attr1','value1'],['class1']);
 tt('some text'); • Angular2 Precompiled templates look very similar to `React.createElement` ― @basarat Offline Compiled Templates

• Universal • Isomorphicとも言われていた、ブラウザ・Node.jsの両方で動くJS • Angular 2はUniversalの思想で設計されている • これによりSSR (Server-side Rendering) が可能に • 通常のDOMRendererはDOMを返す • これをServerDOMRendererにすることで、HTML文字列を返す • ローディングパフォーマンスの改善のほか
 AngularJSの課題として大きかったSEO対応、プレビュー対応などが可能に Angular Universal

• Angular 2のほぼすべてのコードをWeb Workers上で実行するための
 試みも進んでいる • Benefitsは次の通り • Renderスレッドをブロックしないことによる高速化 • SharedWorker、複数のウインドウを跨いだ
 Angularアプリケーションの構築 • ネイティブなモバイル・アプリケーションに匹敵する
 モバイル上のパフォーマンス • ブラウザ不要で実行可能なテスト環境 Web Workers

• ChromeにVMを搭載させることが打ち切られたDart • Angular 2のマイクロタスクキュー Zone.js
 TypeScriptで利用可能になったDecorators構文 • これらがAngular 2に採用されたのは前身のAngularDartに
 由来している • Decorators構文に関しては現在Stage 1 • Dartの要素がESにプロポーザルとして挙げられる可能性は残っている • ちなみにO.oは取り下げられている AngularDartの存在と貢献

Webと共に
 Angularも進化する

• GitHub angular/angular
 https://github.com/angular/angular • Angular Weekly Meeting Notes • AngularConnect 2015
 http://angularconnect.com/ • Angular2 Info
 http://ng2-info.github.io/ • thoughtram Blog
 http://blog.thoughtram.io/ • VICTOR SAVKIN
 http://victorsavkin.com/ 情報源

• 2月下旬 AngularJSハンズオンTutor@都内 • 詳細は後日 • 3/5 土 frontend conference 2016@大阪梅田 • たぶんAngularJSとかフロント開発全般の話、実務寄りの予定 • 3/21 月祝 ng-japan 2016@品川・マイクロソフト • 調整中 • 4月末〜5月上旬 ng-kyoto Angular Meetup #4 • 会場選定中（京都・大阪） 宣伝

ありがとうございました @armorik83