Angularの5年とこれから

JSer.info 5周年記念イベントにて発表した資料です。

Transcript

1. Angular 2 betaリリース記念 Angularの5年とこれから JSer.info 5周年記念イベント Jan 16, 2016 @armorik83
2. JSer.info 5周年 おめでとうございます
3. • はちさん @armorik83 • 京都出身 • ChatWork株式会社
 フロントエンド・エンジニア • Angularユーザコミュニティ ng-kyoto代表 自己紹介
4. • AngularJSモダンプラクティス • Angular 2 Advent Calendar 2015オーナー • つわもの揃いの25記事
 5つ書いたのでヨロシク Qiita
5. • 私がAngularJSを触り始めたのは、2013年夏 • 「データバインディング」なんて言葉も知らなかったあの頃…
 <p>{{foo}}</p>と書けば表示される凄さ、快感 • フルスタック・フレームワークと喧伝されたAngularJS
 何よりの特徴は、テンプレートでの宣言的なデータバインディング データバインディングとAngular
6. • と言い切ると多方面から怒られそうですが フロントエンドの歴史はバインディングの歴史
7. • Ajax + jQueryをはじめとする、レスポンスを画面上に描画する技術 • JavaScriptの複雑化 • Backbone.js MVCアーキテクチャの提案 • 設計の提案は成されたが、双方向データバインディングは非搭載 • ものすごく薄い分、使用者の書き方に依存 • AngularJS 双方向データバインディング、module概念、DIの導入 • バインディングを裏で自動的に行いDirectiveとロジックを分離 • ちょうど5年前はAngularJS 0.9.9だった フロントエンドの歴史はバインディングの歴史
8. • 冗長なDirty Checkingが問題視される • 全てをwatchして回ることによるパフォーマンス性の問題 • 全てのDOMを逐次生成することで発生する描画コスト • AngularJS module単位で切ることによるロックインの懸念
 ES6 modulesのプロポーザルが出ていた頃とも被る • React 仮想DOMの採用、宣言的に記述するComponent • Fluxアーキテクチャの台頭 • ES6の勧告、TypeScriptの安定（1.7.5）といった、言語そのものの進化 • フロントエンド界隈はどんどん進む AngularJS 弱点の顕在化とReact
9. • 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
10. ·͞ʹ
 ͖Ε͍ͳAngular
11. • テンプレートの宣言的なアプローチはバグの原因を排除しているが、
 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
12. • 変更に対処するための最良の方法は、自身が書いたコードについて
 批判的に考えること • フレームワークレベルの抽象化のアイデアを具体化するとどうなりますか？ 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
13. 自問自答を繰り返し
 成長したAngular
14. • Twitterなどで「互換性は無い」と言われている様子を散見 • たしかに大幅に設計が見直されて、大部分のAPIは共通していない • ただし、移行不可能・全くの別物というわけではない AngularJSとの互換性
15. • Twitterなどで「互換性は無い」と言われている様子を散見 • たしかに大幅に設計が見直されて、大部分のAPIは共通していない • ただし、移行不可能・全くの別物というわけではない • Angularチームは、本気でAngularJSユーザの2への移行を願っている • ngUpgrade • Angularの父Miško Hevery氏によるStrategies Draftから約半年 • かなりボリュームのある移行ドキュメントが既に公開されている • Angular 1.x内で部分的に2を適用、2内で1.xの資産を活用、両方可 AngularJSとの互換性
16. Angularが これから目指すところ
17. • sugarを導入して、独特なHTMLで表記できるAngular 2 • <foo-component [value]="foo" (click)="onClick()"> のような構文 • Change DetectionとJIT Parser + Reflectorの力技で解決している • Offline Compileというものも計画されており、これはJITの3倍高速 • `<div attr1="value1" class="class1">some text</div>`; • be('div',[CA,'','attr1','value1'],['class1']);
 tt('some text'); • Angular2 Precompiled templates look very similar to `React.createElement` ― @basarat Offline Compiled Templates
18. • Universal • Isomorphicとも言われていた、ブラウザ・Node.jsの両方で動くJS • Angular 2はUniversalの思想で設計されている • これによりSSR (Server-side Rendering) が可能に • 通常のDOMRendererはDOMを返す • これをServerDOMRendererにすることで、HTML文字列を返す • ローディングパフォーマンスの改善のほか
 AngularJSの課題として大きかったSEO対応、プレビュー対応などが可能に Angular Universal
19. • Angular 2のほぼすべてのコードをWeb Workers上で実行するための
 試みも進んでいる • Benefitsは次の通り • Renderスレッドをブロックしないことによる高速化 • SharedWorker、複数のウインドウを跨いだ
 Angularアプリケーションの構築 • ネイティブなモバイル・アプリケーションに匹敵する
 モバイル上のパフォーマンス • ブラウザ不要で実行可能なテスト環境 Web Workers
20. • ChromeにVMを搭載させることが打ち切られたDart • Angular 2のマイクロタスクキュー Zone.js
 TypeScriptで利用可能になったDecorators構文 • これらがAngular 2に採用されたのは前身のAngularDartに
 由来している • Decorators構文に関しては現在Stage 1 • Dartの要素がESにプロポーザルとして挙げられる可能性は残っている • ちなみにO.oは取り下げられている AngularDartの存在と貢献
21. Webと共に
 Angularも進化する
22. • 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/ 情報源
23. • 2月下旬 AngularJSハンズオンTutor@都内 • 詳細は後日 • 3/5 土 frontend conference 2016@大阪梅田 • たぶんAngularJSとかフロント開発全般の話、実務寄りの予定 • 3/21 月祝 ng-japan 2016@品川・マイクロソフト • 調整中 • 4月末〜5月上旬 ng-kyoto Angular Meetup #4 • 会場選定中（京都・大阪） 宣伝
24. ありがとうございました @armorik83