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
同上