NG-CONF 2016の雑な覚え書き

Angular界隈における年に1度のお祭りイベント、[ng-conf](https://www.ng-conf.org/)。今年(2016年)は5/4~5/6にSalt Lake Cityで開催されました。
現地には行っていませんが、[ng-conf extend Tokyo](http://ng-sake.connpass.com/event/29136/)というイベントに参加し、1日目と3日目のSessionをpublic viewing的に眺めてきたので、その覚え書きです。

## 1日目(5/4)

### Keynote
[動画](https://www.youtube.com/watch?v=gdlpE9vPQFs&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=6)

Angular2の性能の話や周辺エコシステムの話など。聴きながら触ってみたい！と思ったのは下記：

* [Augury](https://augury.angular.io/) AngularJS 1.xでいうところのBatarangle的なツール. 後述.
* [Angular CLI](https://cli.angular.io) Angular2の雛形プロジェクトや、componentのscaffoldingをしてくれたりするツール。後述. 
* [NativeScript 2.0](https://www.nativescript.org/ng-conf) Mobile向けのプラットフォームであるNativeScriptの2.0についてアナウンスがありました。

### An Angular 2 Force Awakens
[動画](https://www.youtube.com/watch?v=WAPQF_GA7Qg&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=2)

Angular Coding Styleと言えばのJohn PapaのSession。と言ってもAngular2のtutorialであるHero Listのライブコーディングが殆ど。

Style Guideについては[https://angular.io/docs/ts/latest/guide/style-guide.html](https://angular.io/docs/ts/latest/guide/style-guide.html)のリンクを見ようね、程度でした。

### Angular 2's Fresh Approach to Style
[動画](https://www.youtube.com/watch?v=J5Bvy4KhIs0&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=1)

Angular2の `@Component` におけるview encapsulationの話。
Angular2はWeb ComponentのShadow DOMをエミュレートしてくれるお陰で `:host` のようなWeb Componentと併用するCSSセレクタも含めて、(WebComponentが使えないブラウザであっても)利用可能。

### Typescript: Angular 2's Secret Weapon
[動画](https://www.youtube.com/watch?v=e3djIqAGqZo&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=3)

[TypeScript](http://www.typescriptlang.org/)の宣伝のようなSession。tsserverを知っていたお陰で「おっ」と思う話もあったけど、あまり新しい発見は無かったです。

### Angular 2 Universal Patterns
[動画](https://www.youtube.com/watch?v=TCj_oC3m6_U&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=5)

Angular2でServer-Side-Renderingするためのモジュール、[angular-universal](https://github.com/angular/universal)についてのSession。
機能的には既知の内容([Angular2のServer Side Renderingに触れてみる](http://qiita.com/Quramy/items/8389e14fa480f9edeaf7)で結構厚めに書きました)でしたが、SSRでProgressive Web AppにおけるApp Shellを静的に出力しておき、preboot(これもangular-universalの機能)でシームレスにApp ShellとContentの橋渡しをする話は新鮮でした。

### Adjusting the Dials in the Circuits of the Human Brain with Deep Brain Stimulation
[動画](https://www.youtube.com/watch?v=IEMLGrKJeK0&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=4)

Angularどころか、JavaScriptともWebとも全く関係のないSession。主にというか、延々脳疾患の話。このSessionの最中は「何が起こってるのか理解できない」的なtweetでTLが荒れてて面白かった。以上。

### Routing
[動画](https://www.youtube.com/watch?v=d8yAdeshpcw&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=9)

少し前まで"alt-router"と呼ばれていたAngular2のrouterの話。
(今は"deprecated-router"とされている)以前のRouterとの大きな違いとして、Lazy Loadingに対応しているとのこと。

Lazy Loadingの場合、以下のように書くらしい。

```ts
@Routes([
  {path: 'simple', component: 'simpleCmp'},
  {path: 'user/:name', component: 'UserCmp'}
])
class TeamCmp implements OnActivate {
  routerOnActivate(segment: RouteSegment, tree: Tree<RouteSegment>) { ... }
}
```

Lazy Loadingの場合、Route定義の時点では下層ComponentとなるClassはimport出来ていないため、`component` キーの中身は文字列で定義しておき、Routing時にこの文字列がSystem.jsで解決されて動的にローディングされるとのこと。

### Components, Components, Components!...and Angular 1.5
[動画](https://www.youtube.com/watch?v=AMwjDibFxno&index=8&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

タイトルが示す通り、AngularJS 1.5から利用可能になった `angular.module(...).component` にまつわるお話。また、1 way bindingやComponent Routerについても触れています。

### Look Deeply Into Your App with Augury formerly known as Batarangle
[動画](https://www.youtube.com/watch?v=b1YV9vJKXEA&index=10&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

[Augury](https://augury.angular.io/)というChrome Extensionの紹介Session。
Componentの情報を参照できる他、その場で値の書き換えができたりする。
AngularJS 1.xでいうところのBatarangleに相当するツールです。僕自身はBatarangleを途中から一切使わなくなったのですが、Batarangleで出来ていたことは大概できそう。

### The ng-show: Angular 2
[動画](https://www.youtube.com/watch?v=aSFfLVxT5vA&index=11&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

ng-showと言ってもAngularJSに存在しているDirectiveとは全く無関係。

何かに役立つような内容では無いけれど、ネタとして非常に面白いので是非観た方が良いよ、としか言えません。

### Angular Material: Titanium Octopus
[動画](https://www.youtube.com/watch?v=rRiV_b3WsoY&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=12)

Angular2でMaterial DesignのUIを提供してくれるライブラリ、[material2](https://github.com/angular/material2)のお話。 なお、タイトルの"Titanium Octopus"とはmaterial2のコードネームのことらしい。
material2のコアコミッタでもあるKara姐さんがライブコーディングしてくれたのですが、コードの中身よりも彼女のコーディングスピードがとても速くて驚きました。


### Testing all your Tasks
[動画](https://www.youtube.com/watch?v=DltUEDy7ItY&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=13)

テストの話かと思いきや、半分は[Zone.js](https://github.com/angular/zone.js/)の概念の説明でした。10分程度で簡潔にZone.jsの話をしてくれるので、その部分だけとっても視聴する価値があると思います。

後半はAngular2のアプリをテストする際にZone.jsがどのように役立っているかというお話。説明で使われていたレポジトリは[こちら](https://github.com/juliemr/ngconf-2016-zones)。
e2eテストで`ngZone.onStable`を利用して「非同期が完了したタイミング」を取得する例なども紹介していましたが、こちらは上記のレポジトリには含まれていないようでした。

### Functional Reactive JavaScript- Let's stop the Conversational Remorse!
[動画](https://www.youtube.com/watch?v=mmWCuSxSXeY&index=15&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

関数型プログラミングやObservableについての基礎知識の紹介Session(にしか見えなかった)。Angularの話はほぼゼロでした。

### Rockin' 'Round The Docs
[動画](https://www.youtube.com/watch?v=hAA6rk71ZqI&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=14)

Angular2のドキュメンテーションについて。[https://angular.io](https://angular.io)のドキュメンテーションはgithubで管理されてるから、気になるとこあったらPR頂戴ね、的なこと言ってた。

### Sharing Code Between Web and Native Apps
[動画](https://www.youtube.com/watch?v=R3nyG2xtzeQ&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=16)

Angular2を使って、Web AppとNativeScriptによるMobile Appでコードを再利用しよう、という話。

残念ながらSessionの内容に相当するレポジトリは紹介されませんでしたが、ライブコーディングの画面を見た限りだと以下の仕切りだったようです。

* ServiceはNativeScript, Webで共通のものを使う
* Component, Template, CSSはNativeScriptとWebで別々のものを用意する

僕はNatviveScriptを触ったことは無いですが、完全に同じコードでなくとも、Web Appと同じようにMobileアプリの開発が出来る、でも充分魅力だと思いますが、どうなんでしょ？(というのも、NativeScript以外にも、Ionic2もあれば、React Nativeもあれば、はたまたProgressive Web Appも選択肢としてある時代に、どれに乗っかるのが良いのやら、という気持ちではあります)

どうでもいいけど、このSessionは全体的に小芝居掛かってたせいか、眠い頭で聴いてると少しイラっとしてしまいました...

### Generative Art in Angular 2
[動画](https://www.youtube.com/watch?v=vsl5O4ps7LE&index=17&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

[teropa.info/chime](http://teropa.info/chime) というGenerative VisualizationのWeb AppをAngular2で作ったというお話。

「Web Audio APIの`AudioContext`をどのようにAngular2で扱うか」という普段あまり聞かないようなネタから、音源の発生からエフェクトの発生までを単方向データフローで実装し綺麗にObservableを使ったりなど、とても見応えのある内容でした。

対応するレポジトリは多分[ここ](https://github.com/teropa/windchimes)と思われるので、後日にじっくり読んでみようと思っています。

### Progressive Web Apps
[動画](https://www.youtube.com/watch?v=wLWVASD0dvU&index=18&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

1日目のトリはAngular Mobile TeamによるProgressive Web AppのSession。以下の3テーマを語ってくれています。

* Instant loading: App Shellで実現
* Offline: Service Workers
* Installable: Web App Manifest

initial loadingを高速化する為の工夫として、アプリケーションをApp Shellと動的なContentに分割して考え、先にAppShellだけ表示しておきユーザーの離脱を防ぐというパターンがあります。
面白いと思ったのは、App Shell自体もAngular2として記述しておき、ビルド時にangular-universalを用いて静的なhtmlとして出力してしまえ、という部分です(angular-universalのSessionでも少し触れられていましたね)。

さらに生成したApp ShellをService Workersでも返せるようにしておけば、より高速な初期ロードが実現できる、という話もありました。

最後に [Angular Mobile Toolkit](https://github.com/angular/mobile-toolkit) の紹介がありました。AngularCLIと連動させる(`ng new --mobile`) でmanifestの生成がされる他、App ShellやService Workerの作成の手助けをしてくるようです。
実際にToolkitを使って[https://github.com/angular/issue-zero/](https://github.com/angular/issue-zero)のアプリを作ったとのことですので、このレポジトリも読み込みたいと思ってます。
というのも、少しチラ見したのですが、UIはangular2-material, BaaSにfirebase(angularfire2), [ngrx/store](https://github.com/ngrx/store)によるRedux風アーキテクチャ, angular-universalを組み込んだビルドフローというAngular2フルコースです。絶対読み応えあるに決まってる。

## 2日目(5/5)
Keynoteはあったのですが、聞いてないです...


## 3日目(5/6)
### Typescript
[動画](https://www.youtube.com/watch?v=dzPjBWLdGz0&index=22&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

またもTypeScriptのSession。1日目と同様、それほど目新しい話はありませんでしたが、最後に少しだけTypeScript2.0の話をしてくれました。
TypeScript2.0の話が知りたいのであれば、[BuildでのAnders HejlisbergのSession](https://channel9.msdn.com/Events/Build/2016/B881)を観た方が良い気がしますが...

個人的に「ん？」って思ったのは、"Path mapping"について"awesome if you use JSPM" と但し書きが付いていた部分でしょうか。
現状の僕の理解では、Path mappingはtsconfig.jsonでより柔軟にモジュールの配置場所を指定できる、というだけで、JSPMが生成するconfig.jsとは別モノという認識なんですが、本当だろうか？

### Promises are probably older than you
[動画](https://www.youtube.com/watch?v=24FzHoAVC10&index=20&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

タイトルが示す通り、Promise(正確にはその源流であるFuture Pattern)は40年近く前に誕生しており、そこから今日におけるES2015のPromiseが出来るまでの変遷を紹介してくれました。
Angularらしい部分と言えば、話の途中にAngularJS 1.xの$qがちらっと紹介される程度で、基本的には歴史のお勉強、といった感じでした。

### Pipe Hype
[動画](https://www.youtube.com/watch?v=joSHg-4ZBZ8&index=19&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

Angular2のPipeのSession。Developer Guideの[PIPES](https://angular.io/docs/ts/latest/guide/pipes.html)と大体一緒。

### Multi Slot Transclusion
[動画](https://www.youtube.com/watch?v=59IY2MIl5u0&index=21&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

AngularJS 1.5とAngular2でMulti Transcludeが実現できるよ、という内容のSession。

### Animations
[動画](https://www.youtube.com/watch?v=Hr4IKlr9mhg&index=23&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

ng-conf時点ではまだmergeされていないが、新しいAnimation機構の話。

Angular2ではWeb Animation APIをベースとしたAnimationが検討されており、AngularチームでWeb Animation APIのpolyfillも作成中とのこと。

Sessionで紹介されていた内容は[https://github.com/matsko/ng-conf-demos](https://github.com/matsko/ng-conf-demos)のレポジトリに格納されています。
Sessionの内容と上記のレポジトリを覗いた感じ、相当色々な事が出来そうな印象を受けました。というか、とてもじゃないけどここで一言で紹介できるレベルじゃない。
一例でいうと、CSS TransitionやKeyframeをprogramatic にinlineで扱うこともできれば、stylesheetに書いてあるclassやkeyframeをAnimationのStateとして取り込むことも出来る、等。

腰を据えてじっくりレポジトリのコードを読もうと思います。

### Learn Clingon
[動画](https://www.youtube.com/watch?v=wHZe6gGI5RY&index=24&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

"Clingon"って一体何のこと？って思ったら"CLI ng on"とStar trekのKlingonを掛けたネタでした。知るか、そんなん。

内容は[angular-cli](https://cli.angular.io)の紹介でした。

angular-cliはAngular2プロジェクトや各種コード(componentやservice等)のgeneratorです。 こいつで生成したprjにはテスト(unit, e2e)が最初から含まれているなど、至れり付くせりな印象です。
難点を挙げるとすると、ember-cliというあまり聞き慣れないビルドツールに依存しているため、カスタマイズが難しそうな点でしょうか。
また、少し触ってみた感じ、`ng new` によるプロジェクトのscaffoldは結構時間が掛かります(主に`npm i`の部分)。

### Angular 2 for the rest of us
Angular2はZone.jsとかObservableとか色々出てくるけど怖くないよ！的な内容でした。

### React Native
[動画](https://www.youtube.com/watch?v=yDbaihb1eIs&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=25)

[angular2-react-native](https://github.com/angular/react-native-renderer)のSession。アーキテクチャは若干異なるものの、一日目のNativeScriptのSessionと似た印象を受けました。
あと、この辺りは大分眠気がヤバかったため、殆ど頭に入ってきていない。。。

### Reactive Programming, changing the world at Netflix, Microsoft, Slack and beyond!
[動画](https://www.youtube.com/watch?v=yEeDbHvg1vQ&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=27)

前半はObservable(というかrxjs)がどのようなものか、という説明、後半でNetflixやMicrosoft, Slackで実際にどのように使われているか、という紹介でした。
大半はAngularと関係の無い話でした。

### Async data patterns with AngularFire
[動画](https://www.youtube.com/watch?v=oLG5TXLeuHQ&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=28)

引き続きObservableの話ですが、こちらはAngular2に即した内容です。
FirebaseのAngular2 clientである[angularfire2](https://angularfire2.com/api/)についての紹介でした。

angularfire2では、下記のように書くことでFirebaseに格納されているデータをObservableとして扱える、というのが主眼です。

```ts
@Component({
  template:`
    <ul>
      <li *ngFor="#question of questions | async">
        {{question.text}}
      </li>
    </ul>
  `
})
class App {
  questions:Observable<Question[]>
  constructor(af:AngularFire) {
    // Get an observable of a synchronized array from <firebase-root>/questions
    this.questions = af.list('/questions');
  }
}
```

僕はFirebaseもAngularFireも触ったことは無いんですが、リモートに存在しているデータをObservableとして取ってきて、テンプレート中でAsync Pipe使う、という部分は参考にできそうと考えています。
[Falcor](https://github.com/Netflix/falcor)とか[Relay](https://facebook.github.io/relay/)みたいなData Fetching LibraryをAngular2と組み合わせる時にも使えるんじゃないだろうか。

### Unhappiness at Work
[動画](https://www.youtube.com/watch?v=cGnU3GaALOQ&index=29&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

このSessionも全くAngular関係ないやつです。エンジニアとして幸せに働くために心がける事、という内容です。

### Demystifying Decorators
[動画](https://www.youtube.com/watch?v=Drt0S6rrZ9I&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=30)

Angular2ではTypeScriptのDecoratorsが多用されますが、一体Decoratorsって何をしてるの？を解説してくれます。
Decoratorsがどんなコードにdesugarされるのかに興味がある人は観たらよいかも。

### Becoming an Angular 2 Contributor
[動画](https://www.youtube.com/watch?v=a_GOe6reTnU)

[http://www.ng-contrib.org/](http://www.ng-contrib.org/)を見ましょう。以上。

### Reactive Angular2 with ngRx
[動画](https://www.youtube.com/watch?v=mhA7zZ23Odw&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=31)

[ngrx/store](https://github.com/ngrx/store) というAngular2でRedux風のアーキテクチャを実現するためのLibraryの紹介でした。
このLibraryは2015年にはもう存在していたらしいのですが、僕は全然知りませんでした...

ngrx/sroreはReducerから生成されるStateをObservableとして受けとれる、というのが最大の特徴でしょう。データストアからのデータ生成をStreamとして表現する、という点では先ほどのangularfire2とも似ていますね。

ngrx/storeのサンプルは[https://github.com/ngrx/angular2-store-example](https://github.com/ngrx/angular2-store-example)に格納されているので、これもじっくり読んでみたいレポジトリの仲間入りです。

### It's Just a Textbox, What Could Go Wrong?
上記のngrx/storeについて, @laco0416 と色々話が盛り上がってしまったため、このSessionは全く聞いてなかったです。多分、Angular2のformの話と思われ。

### Automated Angular 2 Style Checking with Codelyzer
*同上*

### Enhancing performance without steroids
*同上*