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

Slide 1

Slide 1 text

Angular2を書くための AngularJSの書き方（仮）トレタ開発部吉田徹生

Slide 2

Slide 2 text

Aboutme 株式会社トレタ Twitter @teyosh FB teyosh

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

AngularJSを業務で使っている人？

Slide 7

Slide 7 text

Reactを業務で使っている人？

Slide 8

Slide 8 text

Backbone.jsを業務で使っている人？

Slide 9

Slide 9 text

jQueryを触ったことない人？

Slide 10

Slide 10 text

そうそうちなみに AngularJSとは呼ばずにAngularと呼んでください

Slide 11

Slide 11 text

AngularJSに出会って •2012年某月某勉強会にてAngularJSに出会った •2 way databindingに惚れて追いかけるようになった •それまではMVCフレームワークとしては backboneを利用することが多かった

Slide 12

Slide 12 text

2012年？

Slide 13

Slide 13 text

AngularJSがリリースされてもう4年

Slide 14

Slide 14 text

4年前といえば

Slide 15

Slide 15 text

Windows 8 IE 10 iOS 6 Android 4.x OS X v10.8 Mountain Lion

Slide 16

Slide 16 text

Windows 10 Edge iOS 9.3 Android 6 OS X v10.11 El Capitan

Slide 17

Slide 17 text

Google Chrome 17 Firefox 3 Opera ES5

Slide 18

Slide 18 text

Google Chrome 49 Firefox 45 Vivaldi ES6

Slide 19

Slide 19 text

4年間メジャーバージョンアップしていないのはむしろ遅い

Slide 20

Slide 20 text

Angular2のリリースは今年中を予定

Slide 21

Slide 21 text

AngularJS1.xのサポートは当分実施 1.4, 1.5

Slide 22

Slide 22 text

まだまだAngular1.xをやっても大丈夫

Slide 23

Slide 23 text

Angular1.5はAngular2へ移行するときに労力が減るように機能が追加されていくと思います

Slide 24

Slide 24 text

AngularJSの特徴 •JavaScript •2way binding •Scope •Router •Directive •DI

Slide 25

Slide 25 text

Angular2の特徴 •TypeScript •1time binding •Property[] Event() attribute •Component •Component router •Typed DI

Slide 26

Slide 26 text

2way binding

Slide 27

Slide 27 text

AngularJS 諦めてAngularJS1.2を利用し続けましょう

Slide 28

Slide 28 text

AngularJS AngularJS 1.5にアップデートしましょう

Slide 29

Slide 29 text

JavaScriptからTypeScriptへ

Slide 30

Slide 30 text

JavaScriptからTypeScriptへ • Angular2を開発する際にJavaScriptのスーパーセットAtScriptを一緒に開発しようとしていた • 実態はAnnotation付きのTypeScriptである • しかし、同時の開発は難航、それよりもTypeScriptの開発スピードについていけなくなった • 2015年3月にTypeScriptがDecoratorを実装 • Angular2はAtTypeからPure TypeScriptに移行を発表

Slide 31

Slide 31 text

Angular2でアプリケーションを書くときは TypeScriptじゃないといけないのか？

Slide 32

Slide 32 text

否！！ JavaScriptでもいいし Dartでもいいよ

Slide 33

Slide 33 text

TypeScriptの良いところ •型がある •モジュールインポートがある •仕様はしっかりしている •JavaScriptのスーパーセットであるなどなど、便利なものだから使おう

Slide 34

Slide 34 text

TypeScriptに関して AltJSの一つでコンパイルが必要

Slide 35

Slide 35 text

タスクランナー使ってますか？

Slide 36

Slide 36 text

Grunt • 最初に流行ったタスクランナー • GruntfileにconfigをJSONで書いていくスタイル • 仕様に則った方法だと簡単に書ける • 最近アップデートが無かったので心配でしたが2016年2月に1.0-rcが発表されました

Slide 37

Slide 37 text

Gulp • GulpfileにJavaScriptを書いていくスタイル • 動きが認識しやすく人気 • 処理が非同期処理のため並列で動かせる場合は早い

Slide 38

Slide 38 text

Browserify • Requireなどの依存関係を解消 • タスクランナーとの相性がいい

Slide 39

Slide 39 text

webpack • アセットを生成する • TypeScriptのコンパイル • Sassのコンパイル • ビルド時に文字列への置換 • RequireなどcommonJSを使える

Slide 40

Slide 40 text

準備もできたところで

Slide 41

Slide 41 text

Hello World

Slide 42

Slide 42 text

いつもと何かが違う・・・？

Slide 43

Slide 43 text

DirectiveからComponent •Angular2からComponentが登場 •それに合わせてAngularJS1.5からComponentが追加 •Directiveをより簡単に生成できる

Slide 44

Slide 44 text

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)

Slide 45

Slide 45 text

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)

Slide 46

Slide 46 text

AngularJSって性能悪いんでしょ？アプリケーションが大きくなっていったら modelの状態制御がわけわからん

Slide 47

Slide 47 text

2way binding

Slide 48

Slide 48 text

Template View Model

Slide 49

Slide 49 text

現在の状態を監視するのにオーバーヘッドが多く存在する Dirty check $digest loop

Slide 50

Slide 50 text

ModelからとViewから両方からの状態を制御する 2way bindingは人類には早すぎた

Slide 51

Slide 51 text

じゃあ、どうすればいいか・・・

Slide 52

Slide 52 text

1way bindingへ Component Store Action

Slide 53

Slide 53 text

あれ？何かに似ている

Slide 54

Slide 54 text

Flux

Slide 55

Slide 55 text

Data List component Data Detail Component Data Detail Component Data Detail Component Data Store Service WEB API onDelete onChange

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

ちょっと動かしてみましょう

Slide 62

Slide 62 text

どのようなディレクトリ構造をすればいいかわからない

Slide 63

Slide 63 text

Component指向になったので

Slide 64

Slide 64 text

Component単位にまとめましょう

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Testはどうすればいいのか？

Slide 67

Slide 67 text

Testをちゃんと書いている人？

Slide 68

Slide 68 text

Chai使いの人？

Slide 69

Slide 69 text

Power assert使いの人？

Slide 70

Slide 70 text

Jasmine使いの人？

Slide 71

Slide 71 text

Angular2ではJasmineが基本セットで考えられている

Slide 72

Slide 72 text

Routerについて

Slide 73

Slide 73 text

ngRoute

Slide 74

Slide 74 text

ui-router

Slide 75

Slide 75 text

New Router ComponentRouter

Slide 76

Slide 76 text

まとめ • TypeScriptをAngular1からでも使おう • タスクランナーを利用しましょう • Webpackやbrowserifyを利用しましょう • Directiveからcomponent • controller廃止 • Scope廃止 • 2way bindingを使用しない • component単位でファイルを整理