#devfest16 に行ってきた

先週の日曜日にDevFest Tokyo 2016に行ってきた．聞きたいセッションが多くて絞り込むのが大変だった．TensorFlowでの機械学習のセッションも気になっていたけれど，今回はWeb技術系中心にまわってみた．聞いたセッションのメモや感想をまとめておく．（確実で正確な情報はリンク先のスライドを読むのがよいです．）

Modern CSS: architecture, future specs and build flow

スライド
CSSもソフトウェアの一部．適当に書いていてはいけない．
CSSは書くのは簡単だけど全部グローバルスコープなので衝突して壊れる．
抽象化・構造化できないのが問題で，色々な解決策が提唱されてきた．... OOCSS (Object Oriented CSS)とかBEM (Block, Element, Modifier) とか
CSSの最新仕様で，できるようになること
- flexbox: display: flexが付いている要素がFlexコンテナで，その子要素たちがFlexアイテム．FlexコンテナとFlexアイテムが持つプロパティを意識して，それぞれ何を制御するのかを理解しておく．
- CSS Custom Property (Cascading Variables): ハードコーディングを極力避けることができる．正方形の.iconを定義したい場合は，以下のように書ける．

:root {
    --squareSize: "48px";  /* 変数として振る舞う */
}

.icon {
    width : var(--squareSize, "30px");  /* 第二引数はデフォルト値 */
    height: var(--squareSize, "30px");
}

Firebaseのススメ（仮）/ はじめてのFirebase Analytics

スライド / スライド
前者は「Firebaseリアルタイムデータベース」の話で，後者は「Firebase Analytics」の話．
データ形式をJSONで持つNoSQLデータベース．データはネストしないで持ったほうが良い．
複数端末間で，リアルタイムでデータベースの内容がSyncされる．
Realtime Database SDK を入れておくだけで準備完了．CLIツールはnpm一発で入る．REST APIもある．
デモを見たところ，ウェブアプリの場合はscriptタグにconfig書いて，initAppするだけで動いていた記憶がある．簡単そう．
Firebase Analyticsは基本的な解析ツールを利用するだけなら無料．収集したデータをBigQueryと連携して解析すると有料．
いまのところリアルタイムサマリーがないようなので，アプリのアクセス解析はFirebase Analytics と Google Analytics を合わせて使うのがよい．

Web Components 2016 & Polymer v2

スライド
HTML, CSS, JavaScriptを再利用することの難しさを解決する技術
最初のCSSのときと同様，HTML，CSS名前空間にスコープがないことが問題．
既存のWeb技術を組み合わせて再利用可能なコンポーネントを作る．Component Driven Development．
“Web Component”: Custom Elements, Shadow DOM, HTML Imports, Templates
- Shadow DOM v0 -> v1, Custom Element v1
- Shadow Rootは1つまで
- Shadow Hostになれる要素の制限追加
- Shadow Rootは，v0では常にopenedであったが，v1からは opened / closed を選択できる．（生成時に必須指定）．closed を選択した場合は，Shadow Rootを生成した時点で返される参照を失ったら以降は取得参照できない．⇒ サードパーティのComponentなどからShadow Rootを守れる．この方法で実装されているHTML要素の例が<video>要素．
- コード例を含めて解説された資料: http://hayato.io/2016/shadowdomv1/
- Insertion Pointsの変更．これまで<content>と記述していたものが<slot>に置き換わる．また，挿入時はslot要素のname属性の完全一致で判断する．
- カスタムエレメントを作るときの新しい宣言方法．HTMLElementをextendsするかたちで作れるようになった．これは昔試したことがあって，そのときも，従来法のdocument.registerElementするやつより自然な感覚で良いと思えた．そのときの記事，そのときのコード
Polymer v2 Preview!
- Shadow DOMとCustom Elementsをフルサポート!!
- カスタムエレメントを作るときの新しい宣言方法．Polymer.Elementをextendsするかたちでつくれる．
- 正式にv2が出たら本格的に触りたい．