🧊

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

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

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

基調講演

W3C/Keio 中村さん

  • 画像とか動画でおなじみHDR
    • HDRをWebから使えたら・・・?
    • こういう視点がこれから必要なのでは
  • BigData, AI, IoTなどIT業界のBuzzWord
    • でもこれは、Internet・Webの上に成り立ってるもの
  • WebはDistributed OSだ!(地球上の)
    • なので我々がふだん作ってるのは、OS上の資源
  • W3Cの活動範囲の広さそこにつながるもの
  • IG (Interest Group)

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

State管理

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

テスト

この先

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

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

Service Worker Deep Dive

Service Worker Deep Dive - Google スライド

Service Wokerとは

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

Push Notification

Stream

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

Background Sync

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

Foreign Fetch

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

登録方法

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

Origin Trails

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

その他

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

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

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
  • @Input
    • 親からデータを受け取るときに
  • @Output
    • 親にイベントを飛ばす
  • @Directive
    • 要素の拡張
  • @Pipe
    • データの拡張

アーキテクチャ

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

Router

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

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

Webパフォーマンス最前線

資料は見つけたら

ハイパフォーマンスWebUI

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

スクロール

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

Task最適化

結論、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

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