Angular2を書くためのAngularJSの書き方

Transcript

1. Angular2を書くための AngularJSの書き方（仮） トレタ開発部 吉田徹生
2. Aboutme 株式会社トレタ Twitter @teyosh FB teyosh
6. AngularJSを業務で使っている人？
7. Reactを業務で使っている人？
8. Backbone.jsを業務で使っている人？
9. jQueryを触ったことない人？
10. そうそうちなみに AngularJSとは呼ばずにAngularと呼 んでください
11. AngularJSに出会って •2012年某月某勉強会にてAngularJSに出 会った •2 way databindingに惚れて追いかけるよう になった •それまではMVCフレームワークとしては backboneを利用することが多かった
12. 2012年？
13. AngularJSがリリースされてもう4年
14. 4年前といえば
15. Windows 8 IE 10 iOS 6 Android 4.x OS X v10.8 Mountain Lion
16. Windows 10 Edge iOS 9.3 Android 6 OS X v10.11 El Capitan
17. Google Chrome 17 Firefox 3 Opera ES5
18. Google Chrome 49 Firefox 45 Vivaldi ES6
19. 4年間メジャーバージョンアップしていないのは むしろ遅い
20. Angular2のリリースは今年中を予定
21. AngularJS1.xのサポートは当分実施 1.4, 1.5
22. まだまだAngular1.xをやっても大丈夫
23. Angular1.5はAngular2へ移行するときに 労力が減るように機能が追加されていくと思います
24. AngularJSの特徴 •JavaScript •2way binding •Scope •Router •Directive •DI
25. Angular2の特徴 •TypeScript •1time binding •Property[] Event() attribute •Component •Component router •Typed DI
26. 2way binding
27. AngularJS 諦めてAngularJS1.2を利用し続けましょう
28. AngularJS AngularJS 1.5にアップデートしましょう
29. JavaScriptからTypeScriptへ
30. JavaScriptからTypeScriptへ • Angular2を開発する際にJavaScriptのスーパーセットAtScriptを一緒 に開発しようとしていた • 実態はAnnotation付きのTypeScriptである • しかし、同時の開発は難航、それよりもTypeScriptの開発スピードに ついていけなくなった • 2015年3月にTypeScriptがDecoratorを実装 • Angular2はAtTypeからPure TypeScriptに移行を発表
31. Angular2でアプリケーションを書くときは TypeScriptじゃないといけないのか？
32. 否！！ JavaScriptでもいいし Dartでもいいよ
33. TypeScriptの良いところ •型がある •モジュールインポートがある •仕様はしっかりしている •JavaScriptのスーパーセットである などなど、便利なものだから使おう
34. TypeScriptに関して AltJSの一つでコンパイルが必要
35. タスクランナー使ってますか？
36. Grunt • 最初に流行ったタスクランナー • GruntfileにconfigをJSONで書いていくスタイル • 仕様に則った方法だと簡単に書ける • 最近アップデートが無かったので心配でしたが2016年2月に1.0-rcが 発表されました
37. Gulp • GulpfileにJavaScriptを書いていくスタイル • 動きが認識しやすく人気 • 処理が非同期処理のため並列で動かせる場合は早い
38. Browserify • Requireなどの依存関係を解消 • タスクランナーとの相性がいい
39. webpack • アセットを生成する • TypeScriptのコンパイル • Sassのコンパイル • ビルド時に文字列への置換 • RequireなどcommonJSを使える
40. 準備もできたところで
41. Hello World
42. いつもと何かが違う・・・？
43. DirectiveからComponent •Angular2からComponentが登場 •それに合わせてAngularJS1.5からComponentが 追加 •Directiveをより簡単に生成できる
44. Directive Component bindings No Yes (binds to controller) bindToController Yes (default: false) No (use bindings instead) compile function Yes No controller Yes Yes (default function() {}) controllerAs Yes (default: false) Yes (default: $ctrl) link functions Yes No multiElement Yes No priority Yes No require Yes Yes restrict Yes No (restricted to elements only)
45. Directive Component scope Yes (default: false) No (scope is always isolate) template Yes Yes, injectable templateNamespace Yes No templateUrl Yes Yes, injectable terminal Yes No transclude Yes (default: false) Yes (default: false)
46. AngularJSって性能悪いんでしょ？ アプリケーションが大きくなっていったら modelの状態制御がわけわからん
47. 2way binding
48. Template View Model
49. 現在の状態を監視するのにオーバーヘッド が多く存在する Dirty check $digest loop
50. ModelからとViewから両方からの状態を制御する 2way bindingは人類には早すぎた
51. じゃあ、どうすればいいか・・・
52. 1way bindingへ Component Store Action
53. あれ？何かに似ている
54. Flux
55. Data List component Data Detail Component Data Detail Component Data Detail Component Data Store Service WEB API onDelete onChange
61. ちょっと動かしてみましょう
62. どのようなディレクトリ構造をすればいいかわからない
63. Component指向になったので
64. Component単位にまとめましょう
66. Testはどうすればいいのか？
67. Testをちゃんと書いている人？
68. Chai使いの人？
69. Power assert使いの人？
70. Jasmine使いの人？
71. Angular2ではJasmineが基本セットで考えられている
72. Routerについて
73. ngRoute
74. ui-router
75. New Router ComponentRouter
76. まとめ • TypeScriptをAngular1からでも使おう • タスクランナーを利用しましょう • Webpackやbrowserifyを利用しましょう • Directiveからcomponent • controller廃止 • Scope廃止 • 2way bindingを使用しない • component単位でファイルを整理