HTML5 Conference に行ってきたメモ #html5j

2015年に引き続いて2016年も。
北千住もーちょっと近くならんかな・・ｗ

なんだかんだずっとホールにいました。

基調講演

W3C/Keio 中村さん

• 画像とか動画でおなじみHDR
  • HDRをWebから使えたら・・・？
  • こういう視点がこれから必要なのでは
• BigData, AI, IoTなどIT業界のBuzzWord
  • でもこれは、Internet・Webの上に成り立ってるもの
• WebはDistributed OSだ！（地球上の）
  • なので我々がふだん作ってるのは、OS上の資源
• W3Cの活動範囲の広さそこにつながるもの
  • TV（Hybridcast）、車、電子書籍
  • 車のインパネもWebに！（なるかも
  • e-PubとW3Cの統合
  • 縦書きCSS
  • Blockchain https://en.bitcoin.it/wiki/Block_chain のような分散システム
• IG (Interest Group)
  • WoT Servientアーキテクチャ

Increments 及川さん

• "HTML5"というキーワードはそろそろ・・
• ○○としてのWeb
• アプリケーションとしてのWeb
  • 各種Web○○API
  • ChromeApp -> ProgressiveWebApp
  • WebAssembly
• メディアとしてのWeb
  • スマホ時代
  • ニュースキュレーションアプリの隆盛はモバイルWebをサボった結果
  • そこでAMP
  • ただCMSや多数のシステムにまみれた既存企業では対応が難しい現実
• プラットフォームとしてのWeb
  • http/2
• 2016はWebを見直す年
  • Webは何度死んだと言われたか
  • Reinvest / Reinvent Web！

基調講演らしいエモいい話やった。

Reactの最新動向とベストプラクティス

Reactの最新動向とベストプラクティス // Speaker Deck

@koba04 せんせー！
会場のReactを業務で使ってる率はあんまいなかった。

• Reactの採用事例
  • 大きいところはあんまり増えてない・・？

Reactでつくるアプリケーション

• State -> View -> Func -> State -> ...
• 宣言的に状態を定義するだけ
• 更新差分はVirtualDOMで吸収

コンポーネントの作り方

• SFC(StatelessFunctionalComponent)
  • 基本的にはコレ
  • stateやlifecycleフックがない
• React.Component
  • Viewに関係ないならstateにいれなくていい
  • インスタンスプロパティでいい
• React.PureComponent
  • `shouldComponentUpdate`で`props/state`をShallowEqualで見てくれる
  • SFCの子への最適化も入るかも？
  • パフォーマンスチューニングの時に、計測した上で使えば
• createClass
  • 非推奨ーー
  • HOC(HigherOrderComponent)
  • https://github.com/acdlite/recompose
  • `props.children`に関数を渡して拡張するスタイルも

State管理

• 親コンポーネントで`state`を、子コンポーネントには`props`を
  • 親はReact.Component、子はSFC
• ただし親の`state`が大きくなるとつらい
• そこでReduxとか
  • 特にメモるようなことはなかった

テスト

• `shallowRender`すればNode環境でもテストできる
  • `refs`は使えない
• https://github.com/thejameskyle/react-test-renderer
  • 最近できた

その他

• eslint
  • https://github.com/yannickcr/eslint-plugin-react
• React Storybook
  • https://github.com/kadirahq/react-storybook
• DevTools
  • https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

この先

• コアは小さくなっていく
  • react / renderer
• 内部アルゴリズムの書き換え（Reconciler）
• 優先度をつけた差分検出

ReactはまぁReactという感じの話やった。

Service Worker Deep Dive

Service Worker Deep Dive - Google スライド

Service Wokerとは

• `navigator.serviceWorker.register()`
• ページのリクエストを横取りしたり
• ページが開かれてなくても通知したり

Push　Notification

• FCM(Firebase Cloud Messaging / 旧GCM)サーバーから
• C50から、Pushするpayloadにデータを載せられるように
  • https://github.com/web-push-libs/web-push
• C52から、 Voluntary Application Server Identificationでサーバー認証が簡単に
  • 事前登録いらず
  • https://tools.ietf.org/html/draft-thomson-webpush-vapid-02

Stream

• C52から対応
  • でもコードはそこまで楽にはなってない印象
  • むしろStreamを逐次返す処理の分だけコードは増える

Unified Media Pipeline

• https://developers.google.com/web/updates/2016/06/ump

Background Sync

• オンラインになったら○○
• ブラウザ落としてる間にfetch -> pushとか
  • UXとしては微妙なのでは・・

Foreign Fetch

• 他のサイトBから自サイトAへのリクエストを横取りできる
• `registerForeignFetch()`
  • `origin`と`scope`も指定できる
• ただしレスポンスを差し替えると、CORSに引っかかる
• ただしC54以降でフラグが必要な実験機能

登録方法

• `navigator.serviceWorker.register()`だけでなく
• HTTPのLink headerでも
• link要素でも
• ただしC54以降でフラグが（ｒｙ

Origin Trails

• 実験機能を特定のオリジンで一定期間使ってもらおうという試み
• https://github.com/jpchase/OriginTrials
• フォームで申請するとトークンがもらえて、それを埋め込むと新機能が使えるように！

その他

• AppCache
  • ServiceWorker使おう
• DevTools
  • 開いてる間は、ServiceWorkerが停止しないように

SW、SafariがiOSで載せてくれるのは何時になるのかー。

The First Step to Angular 2

The First Step to Angular 2 by laco

Angular 2とは

らこパイセンのありがたいお話。

• Web標準との親和性
  • まだ標準になってないのも多いけどな！
• テンプレートへのデータバインディングは、`[prop]`
  • `[class.foo]` -> `class="foo"`
  • `[style.width.px]` -> `style="width: xxpx"`
• イベントは`(click)="onClick"`
• 100000check / 10msで高速に差分チェックするハイパフォーマンス
• フルスタック & 公式の周辺機器も豊富
• TypeScript
  • 型もあるし補完も強いし
  • 型をコンストラクタの引数に渡すだけでDIされる

基本のAPIたち

• @Component
  • コンポーネントの組合せでアプリができあがる
  • `styles`は他のコンポーネントに影響しない
• @Input
  • 親からデータを受け取るときに
• @Output
  • 親にイベントを飛ばす
• @Directive
  • 要素の拡張
• @Pipe
  • データの拡張

アーキテクチャ

• Application
• Platform
  • ブラウザなのか、サーバーなのか、Workerなのか
• Module
  • compiler, injector
• Component

Router

• いろいろありましたが、Router v3
  • RxjsでURLの変更がObservable
• ルートは`path: component`で宣言的に定義
• ``と``で使う

`tsc`も速くなったらしいし、さわってみてもいいかな・・？って一瞬思ったけど、やっぱり正式にリリースされて安定してからでいいかな・・ｗ

Webパフォーマンス最前線

資料は見つけたら

ハイパフォーマンスWebUI

• モバイル時代でアプリのように振る舞うWeb
• サイトの要件によって、RAILでも重視するポイントが違う
• 描画処理をCPU -> GPUへ
• `translateZ(0)`は諸刃
• `will-change`も必要な時にだけ指定するように！
• rAFでアニメーションの処理

スクロール

• C41からスクロール最適化の取り組みがあった
• `img`要素の`lazyload`属性というのがIE11, Edgeでは使える
• `throttle()`で間引こうとしたりしてきた
• `IntersectionObserver`
  • https://wicg.github.io/IntersectionObserver/

Task最適化

• `requestIdleCallback()`
  • JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside
  • まだ全然Chromeでしか使えないけども
• 昔は`setImmediate()`というものもあってだな・・

結論、CPUよりGPU使え（ここ2、3年くらいずっと同じこと言ってる気がするけど

Progressive Web Apps の導入基礎

資料は見つけたら

ホームに追加

• Webはアプリより横流れしやすい
• 簡単3ステップ
  • manifestファイルの用意
  • `link rel="manifest"`
  • `navigator.serviceWorker.register()`
• https://developer.mozilla.org/en-US/docs/Web/Manifest
• プロンプトの表示タイミングも調整可能
  • `beforeinstallprompt`イベント

Push通知

• 便利だけどもOFFにする方法もわかりやすくすべき
• `registration.pushManager.getSubscription()`してトークンを
• `push`イベントで受ける
  • 通知をクリックした = `notificationclick`イベント
• サーバーでそのトークンに向けてpush
• 通知のPayloadにデータが載せられるのはC50から
  • それまでは都度内容をサーバーに確認する

Offline Cache

• 表示速度が4倍に！
• SWのlifecycle
  • Installing
  • Installed(Waiting)
  • Activating
  • Activated
  • Redundant
• Cache API
  • https://developer.mozilla.org/ja/docs/Web/API/Cache
• オフラインキャッシュの扱いについて詳しい
  • https://jakearchibald.com/2014/offline-cookbook/
• App Shellアーキテクチャ
  • App Shellを構築する | Web Fundamentals - Google Developers
• Activedのタイミングで古いCacheは消すなど
  • Installingで消しちゃうと、その後のステップで必要になるかもしれない

繰り返しになるけど、iOSで使えたらやるのになー・・。