NG-CONF 2016の雑な覚え書き #Angular

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

1日目(5/4)

Keynote

動画

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

Augury AngularJS 1.xでいうところのBatarangle的なツール. 後述.
Angular CLI Angular2の雛形プロジェクトや、componentのscaffoldingをしてくれたりするツール。後述.
NativeScript 2.0 Mobile向けのプラットフォームであるNativeScriptの2.0についてアナウンスがありました。

An Angular 2 Force Awakens

動画

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

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

Angular 2's Fresh Approach to Style

動画

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

Typescript: Angular 2's Secret Weapon

動画

TypeScriptの宣伝のようなSession。tsserverを知っていたお陰で「おっ」と思う話もあったけど、あまり新しい発見は無かったです。

Angular 2 Universal Patterns

動画

Angular2でServer-Side-Renderingするためのモジュール、angular-universalについてのSession。
機能的には既知の内容(Angular2のServer Side Renderingに触れてみるで結構厚めに書きました)でしたが、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

動画

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

Routing

動画

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

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

@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

動画

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

Look Deeply Into Your App with Augury formerly known as Batarangle

動画

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

The ng-show: Angular 2

動画

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

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

Angular Material: Titanium Octopus

動画

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

Testing all your Tasks

動画

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

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

Functional Reactive JavaScript- Let's stop the Conversational Remorse!

動画

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

Rockin' 'Round The Docs

動画

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

Sharing Code Between Web and Native Apps

動画

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

動画

teropa.info/chime というGenerative VisualizationのWeb AppをAngular2で作ったというお話。

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

対応するレポジトリは多分ここと思われるので、後日にじっくり読んでみようと思っています。

Progressive Web Apps

動画

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

2日目(5/5)

Keynoteはあったのですが、聞いてないです...

3日目(5/6)

Typescript

動画

またもTypeScriptのSession。1日目と同様、それほど目新しい話はありませんでしたが、最後に少しだけTypeScript2.0の話をしてくれました。
TypeScript2.0の話が知りたいのであれば、BuildでのAnders HejlisbergのSessionを観た方が良い気がしますが...

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

Promises are probably older than you

動画

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

Pipe Hype

動画

Angular2のPipeのSession。Developer GuideのPIPESと大体一緒。

Multi Slot Transclusion

動画

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

Animations

動画

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

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

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

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

Learn Clingon

動画

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

内容はangular-cliの紹介でした。

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

動画

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

Reactive Programming, changing the world at Netflix, Microsoft, Slack and beyond!

動画

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

Async data patterns with AngularFire

動画

引き続きObservableの話ですが、こちらはAngular2に即した内容です。
FirebaseのAngular2 clientであるangularfire2についての紹介でした。

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

@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とかRelayみたいなData Fetching LibraryをAngular2と組み合わせる時にも使えるんじゃないだろうか。

Unhappiness at Work

動画

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

Demystifying Decorators

動画

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

Becoming an Angular 2 Contributor

動画

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

Reactive Angular2 with ngRx

動画

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

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

ngrx/storeのサンプルは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

同上