Angular 2@Grand-Frontend-Osaka 2015 Summer

Slide 1

Slide 1 text

Angular 2 Aug 22, 2015 Grand-Frontend-Osaka 2015 Summer

Slide 2

Slide 2 text

@armorik83 • 奥野賢太郎はちさん • Webアプリケーションエンジニア • 9月から東京 • AngularJS歴 2年 • ng-kyoto代表

Slide 3

Slide 3 text

ng-kyoto

Slide 4

Slide 4 text

Qiita

Slide 5

Slide 5 text

Qiita

Slide 6

Slide 6 text

Qiita

Slide 7

Slide 7 text

Qiita

Slide 8

Slide 8 text

Qiita

Slide 9

Slide 9 text

Angular 2 使ったことある人？

Slide 10

Slide 10 text

https://ﬂic.kr/p/4hqh5f David Goehring / My What a Happy New Year!

Slide 11

Slide 11 text

話すこと 1. いまAngular 2はどうなっているのか 2. Angular 2の特徴・できること 3. AngularJS 1.xとの付き合い方 4. Googleの捉えている未来を予測

Slide 12

Slide 12 text

話さないこと • Angular 2 実務ノウハウ

Slide 13

Slide 13 text

1. いまAngular 2は  どうなっているのか

Slide 14

Slide 14 text

https://angular.io

Slide 15

Slide 15 text

進捗 • github.com/angular/angular • Angular 2 alpha.35 • ほぼ7日間隔でalphaリリース • AngularJS 2.0 とは呼ばれず、  Angular 2 for JavaScript となる

Slide 16

Slide 16 text

Highlight 2014.3 • 開発者ブログにて"AngularJS 2.0"という  記事が掲載 • "AngularJS 2 is a framework for  mobile apps." と明言 • AngularDartファースト・リリースから  約4ヶ月後のこと

Slide 17

Slide 17 text

• AngularJSリファレンス（通称、夕日本）発売 • 国内の書籍としてAngular 2が扱われた  のは初？ [要出典] • 本書のAngular 2像から現在までで、  けっこう変わった Highlight 2014.9

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

• 全AngularJSユーザを震え上がらせた  お騒がせ画像 • RIP $scope, ng-controller, etc. • Decorators構文を採用した AtScript を発表 Highlight 2014.10 ng-europe

Slide 20

Slide 20 text

• TypeScript 1.5にDecorators構文の  導入が決定 • AtScriptをやめ、 TypeScript での開発と発表 • [armorik83 Decorators] [検索]  以前詳しく書きました Highlight 2015.3 ng-conf

Slide 21

Slide 21 text

• Angular 2 alpha.14辺りから定期更新 • 順調にAngular 2 alpha開発中 • その間、こちらもなんとかリリース • AngularJS 1.4 • TypeScript 1.5.3 Highlight 2015.4 and now

Slide 22

Slide 22 text

2. Angular 2の  特徴・できること

Slide 23

Slide 23 text

Performance • AngularJS 1.xと比較して3-6倍の高速化 • フレームワークを用いず最速を意識してチューニングされた Baselineを基準として、Angular 2とAngularJS 1.xを計測

Slide 24

Slide 24 text

TypeScript • ECMAScript 2015ベース  過渡期なのでES6という呼称と混在 • Decorators構文 • 型付けによって  変換時に誤指定が  ないか検証 • IDEの支援が強い @Component({ selector: 'greet' }) @View({ template: 'Hello {{name}}!' }) class Greet { name: string; constructor() { this.name = 'World'; } } ※Babel, ES5でも記述できるように配慮されている

Slide 25

Slide 25 text

Component • @Componentは  1系でのDirective • 面倒なrestrictは  廃止 • カスタム要素用の@componentと、  カスタム属性用の@directiveで構築していく • すべてのDOMはShadow DOMとして生成される  ViewEncapsulationで設定可 @Component({ selector: 'greet' }) @View({ template: 'Hello {{name}}!' })

Slide 26

Slide 26 text

Dependency Injection • AngularJS 1.xの解説記事などで  やたらと強調されていたDI • 1系と比べて、テストがだいぶ書きやすくなる • DIコンテナっぽさが強くなった var injector = Injector.resolveAndCreate([ Car, Engine, Tires, Doors ]); var car = injector.get(Car); ͕͜͜ৄ͍͠ http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html

Slide 27

Slide 27 text

Change Detection • $digestによるDirty Checkを廃止 • 変更のあった箇所のみ描画を更新 • ReactのVirtual DOMに似た、高速化のための工夫といえばイメージしやすいか  （原理は異なる）

Slide 28

Slide 28 text

One-time Binding • Change Detectionが採用されたので  基本的には2 way bindingではなくなっている • テンプレートに明示的に記述することで  再現可能

Slide 29

Slide 29 text

Template • Angular 2のパーサのお陰で  Templateにはsugarをたくさん使える

Hello {{name}}

Pause

Slide 30

Slide 30 text

Template • {{}} はAngularJS 1.x系でおなじみになったもの • [] は属性値が式として評価される  （逆に[]無しだと文字列） • () はイベントへのバインド  (click)はonclickという意味 • [()] は2 way binding  onchange + bind expr.とイメージすればよい

Slide 31

Slide 31 text

Template • 慣れない？ sugar無しでも書けます！

Hello {{name}}

Pause

Hello {{name}}

Pause

Slide 32

Slide 32 text

Template • ここへきて突如アンケートが開始 • [Angular 2 Developer Survey] [検索] • 回答しよう！ https://docs.google.com/forms/d/1BSHEMqR-1fkG0_edLiOQql7nbNT7Z8aHVxMJok1ljgo/viewform

Slide 33

Slide 33 text

Pipes • Pipesは重要なAPI • AngularJS 1.x系にあるFilterの後継と  イメージすると近い {{ dateObj | date }} // output is 'Jun 15, 2015' {{ dateObj | date:'shortTime' }} // output is '9:43 PM' {{ dateObj | date:'mmss' }} // output is '43:11'

Slide 34

Slide 34 text

Pipes • Pipesは重要なAPI • AngularJS 1.x系にあるFilterの後継と  イメージすると近い • だが真価はそこではなく、AsyncPipeによって  ObservableやPromiseまで扱えるところ • すでにサードのOSSとして、RxJS Streamを  組み合わせる試みも起こっている

Slide 35

Slide 35 text

Router • サード製ui-routerから本家が影響を受けて開発 • New RouterComponent Router • pathに対して紐付けるRoot Componentを指定 router.config([ {path: '/', component: IndexComp, as: 'index'}, {path: '/user/:id', component: UserComp, as: 'user'}, ]); link to user component

Slide 36

Slide 36 text

alpha • 骨格は完成していると見てる • 幾度ものBREAKING CHANGESを経てきて  そろそろbetaを見据えて、落ち着いてきたか • でも細かいところでイライラすることは、まだ多い  a25からa35で色々改善されているので、今後も良くなってほしい • 趣味でなら使い始めてOK

Slide 37

Slide 37 text

3. AngularJS 1.x  との付き合い方

Slide 38

Slide 38 text

の前に大反省会

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

44/100 ❌

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

70/100

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

87/100 ⭕

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

92/100 ⭕

Slide 47

Slide 47 text

Angular 2を  意識しなかった頃の方が高得点※ ※自己採点、得点はアバウトです

Slide 48

Slide 48 text

AngularJS どんどんやろう • やっていいです！ • 続けてください！ • 少なくとも、年内にAngular 2移行案件は  起こさなくていい • 年内にAngular 2 stableが来るかさえ不明

Slide 49

Slide 49 text

言語選択 • ES2015, TypeScriptへの引っ越しは  そろそろ考えてよい時期 • 新規部分から採用してみるのもアリ • CoffeeScriptは減少傾向  いまからの新規採用は、よほどRubyエンジニアが多くない限り  しなくていい

Slide 50

Slide 50 text

• http://www.slideshare.net/teppeis/effective-es6 • https://speakerdeck.com/koba04/whats-happening-in-frontend-now • https://html5experts.jp/vvakame/16241/

Slide 51

Slide 51 text

AngularJS 1.4 • ng-controllerは減らしていく • controller as構文は必須 • $scopeは、まだ使ってもよい  ただし徐々にcontroller asやbindToControllerも採用し、$scopeを減らしていく || 減らす意義を  理解することがベター • ES2015, TypeScriptにすると、特に恩恵が大きい

Slide 52

Slide 52 text

AngularJS 1.5 Plan • angular.module().component()  が検討されている • 『AngularJSモダンプラクティス』で述べた手法のラップに近い • Angularの父 Miško Hevery氏が  Strategy Draftの作成に携わっているので、  採用の可能性がある

Slide 53

Slide 53 text

AngularJS 1.x Plan • AngularJS 1.xでもDecorators構文を使えるように  というプランも実際Issuesで起こっていた • いまのところ採用は無さそうな印象  （結局1 to 2で書き直しが発生するのでメリットが少ない） • OSSでこれを頑張っているサードがいて  公式が支援の意向を出しているので  今後採用になるかも？  （Routerでいう、ui-routerのようなサードの存在）

Slide 54

Slide 54 text

Angular 2 ブラウザ • 下記のブラウザを対象にCIが回っている • Chrome (Desktop + Mobile) • Android 4.1.x • Safari (Desktop + Mobile) • Firefox • Edge • IE 11, 10, 9

Slide 55

Slide 55 text

ngUpgrade • https://github.com/angular/ngUpgrade • Angular 1 module.component() Helper • Guides and Best Practices • Angular 1 to Angular 2 Upgrade Strategy Draft • 今後、移行に関する知見を集積させるためのrepo • 現在のAngularJS採用と今後が不安な方は  ここにあるいくつかの資料を検討材料に使えます

Slide 56

Slide 56 text

正直なところ • AngularJS 1.xからAngular 2へは  アップデートというより移植に近いです • Angular 2移行が今から本気なら、ロックインを  意識して抽象レイヤーを育てておくとよさそう • 「だったら  [ React | Riot | Mithril | Aurelia | Cycle ] 行くわ…」 • これもやむを得ない（Angular 2を気に入ってくれたら嬉しい）

Slide 57

Slide 57 text

4. Googleの捉えている未来を予測

Slide 58

Slide 58 text

実は、まだ伏せていることがあって

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

• Angular 2 Roadmap Update • by Igor Minar, Brad Green, Miško Hevery Highlight 2015.7 Angular U

Slide 61

Slide 61 text

Event Loop

Slide 62

Slide 62 text

Worker

Slide 63

Slide 63 text

Worker

Slide 64

Slide 64 text

ೋ૧ࣜ?

Slide 65

Slide 65 text

Mobile

Slide 66

Slide 66 text

Mobile NativeScript React Native

Slide 67

Slide 67 text

Server-side Rendering

Slide 68

Slide 68 text

Material + ngAnimate

Slide 69

Slide 69 text

Milestones Angular 2 ships when? Alpha February Website preview March First migration @ Google May Beta ? Next Milestones Finish Core API Sugaring Docs Perf+ Migration Support Animate CLI Material Design Server Render Native ? Web Workers

Slide 70

Slide 70 text

事実― • Google社内では2,000のアプリケーションが  AngularJSによって構築されている • AngularJSは、社内フレームワークのOSS化という側面がある • Angular 2 alpha.30辺りから  ngAnimateやMaterialの整備にリソースを割くようになってきた • Angular 2はWorker利用やMobile Nativeを意識

Slide 71

Slide 71 text

事実を基にした推測と妄想 • AppleがOS Xでフレームワーク "Cocoa"を採用しているように  「Googleのフレームワーク」を意識しているのではないか • ngAnimateやMaterialとの親和性を重視している姿勢は  Reactや他の有象無象フレームワークと視線が異なって見える • React Nativeとの協調や、Angular 2 for Dartの存在などから、  Angularを単なる「JavaScriptフレームワーク」として  位置付けていないのではないか