AngularJS
Angular2

NG-CONF 2016の雑な覚え書き

More than 3 years have passed since last update.

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

同上