🧊

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

今年もいってきたので。

JRが安定の電車遅延で基調講演はすべりこみだったのでメモなし。

Nintendo SwitchとWeb

資料はたぶんこない

SNSと写真撮影NG = 聞いた内容は公開しないで・・ってこと・・よね？
なので、メモは取ったけどココには書きません。

大規模運用で見えるWebプロトコルの理想と現実、そして今後

大規模運用で見えるWebプロトコルの理想と現実、そして今後 #html5j #html5j_b

Yahoo!のproxy

AOSSL

  • ドメインが1000以上あった
  • ドメインの統合などを進めていった
  • 要件
  • 処理性能と電力消費のバランス
  • HTTP/2にもした
  • とある日の1時間のリクエストを見てみた
  • 56%はHTTP/2
    • 対応できてないのはWin7 IE11, Win 8.1のIE11など・・
  • 今はEV SSL対応
  • 2017年の稼働率は100％！
    • それでも年間50分くらいは落ちる

deploy

  • chef enterprise x screwdriver

HTTP/2の現実

  • HTTP/1.1の欠点
    • 1Req 1TCP接続
    • ブラウザは6本くらいしか同時接続できないので後は詰まる
  • HTTP/2は速い？
    • 大きめのファイル（1．5MBの動画）は確かに速くなってる
    • ただHTTP/2対応ブラウザ = 速いブラウザなのでそのせいの影響も・・？
    • 小さいファイル（11KBの画像）はほとんど変わらん
  • サーバー側からみると、よくわからん
  • クライアントからはどうか
    • DOMCLまでの時間はほぼ変わってない
    • プロトコルだけ変えてもそんなに効果はないと思われる
  • 新規接続 vs 再接続の割合
    • HTTP/2: 1:9
    • HTTP/1.1: 4:6
    • サーバー負荷は下がってる
  • 結局どうだったの
    • 導入で大したトラブルはなかった
    • 効果があったかはこれからやっていくところ

TLSの現実

  • TLS1.0がまだ5％くらいいる
  • ECDHE-RSA-AESが70％くらい
    • NIST-P256
  • 落とし穴
    • ドメイン抜け漏れ・typoなどがリスク
    • OSのアップデートで挙動が変わったり
    • 認証局側の事件・事故

TLS1.3 / QUIC

  • 常時TLS時代
  • TSL1.2の負債
  • モバイル時代に配慮した性能の向上などが必要
  • TLS1.3
    • 仕様はほぼ完了
    • Chromeはフラグを立てると使える
    • 後方互換に難あり？

QUIC

  • UDP上でTCP, TL, HTTP/2の一部を実現する
  • インターネット全体の7％が既に
  • Googleの性能評価をみると
    • 8％表示が早くなった
    • 遅いところが速くなった

今後

  • TLS1.2は枯れたが1.3とQUICはそうはいかない
  • エイヤで試すのではなくちゃんと土台を用意して

Yahoo!では一緒にtcpdumpしたい人を募集していますだそうですｗ

詳解 WebRTC

詳解 WebRTC · GitHub

またも写真撮影NGだそうで。
まあ↑のリンクに書いてある内容そのままだったのでメモいらないかと。

React v16 and beyond React Fiber

React v16 and beyond React Fiber // Speaker Deck

React v16

  • 1年ぶりのメジャーアップデート
    • v15.6からはスムーズにアップデートできるはず
  • ライセンスがMITに
  • 文字列や配列がコンポーネントとして返せるように
    • 配列は引き続き`key`をつける必要あり
    • JSXでサポートされるかも・・？
  • `componentDidCatch()`で子のエラーを拾えるように
    • エラーが起きると`ReactDOM.render()`したルートからunmountされる（拾ってなかったら
  • `ReactDOM.createPortal()`
    • モーダルとかの表示用に、別の場所に`ReactDOM.render()`しなくてよくなる
  • RollupでFlatにビルドされるように
    • ファイルサイズが削減
    • 内部モジュールは直接参照できなくなる
  • SSR
    • 独立したRendererに
    • StreamRendering
    • `ReactDOM.render(SSRされたやつ)`の代わりに、`ReactDOM.hydrate()`
    • ReactElementの単位でチェックされるように（v15までは全部使う or 全部捨てるだった
  • ホワイトリストにない属性もDOMに反映されるように
  • Map / Set / rAFが必須に

Fiberとは

  • コアアルゴリズム（の再実装
  • 既存の再帰 x 同期レンダリングは重い・遅い
  • UIのレスポンス性を改善するもの
  • Scheduling
    • `requestIdleCallback`での時間ベース
    • Sync, Task, High, Low, OffScreenといった優先度ベース
  • Fiber = Componentの単位
  • LinkedList
    • ルートからレンダリングしている途中でも、どこからでも中断・再開できる
  • Begin -> Complete -> Commitのフェーズ
    • `componentDidMount()`はBegin, `componentDidUpdate()`はCommitのように
    • Beginは非同期にレンダリングされる場合、複数回起こりうる
  • ただこれらの非同期レンダリングは、v16のデフォルトでは有効ではない
    • 試すことはできる
  • CustomRenderer
    • Consoleに吐くコンポーネントとか、`say()`で動くVoiceRendererとか作れる
    • preactとかinfernoみたいに自作しなくても差し替えられる！
  • WASMで書き換えられる未来もあるかも

v17待ちかなー。

The State of Web Components

資料は見つけたら

Web Components

  • HTML + CSSで作るつらさ
    • スコープがない
    • 再利用しにくい(+ JS)
    • 仕組みがないので意識するしかない
  • Shadow DOM / Templates / HTML Imports / Custom Elements
    • HTML Imports は ES Modulesへ
  • 1. Shadow DOM
    • Shadow DOM
    • スコープを区切るもの
    • `shadowRoot`を生成し、その中に影響範囲を留める
    • `el.attachShadow({ mode: 'open' })`
  • 2. Custom Elements
    • Custom Elements
    • 独自のHTML要素をつくる
    • `connectedCallback()`などライフサイクルメソッドが使える
  • Shadow DOMとCustom Elementsを組み合わせることで、scopedなコンポーネントに
  • 3. Templates
    • いままで`display: hidden`で用意したり、`script type:text`内に書いたりしてたアレ
    • HTML Standard
  • 4. ES Modules
    • HTML Importsがお亡くなりになった
    • HTML Modulesなる動きもあるが果たして・・
    • ES6 Modules in Depth

関連Topics

さすがのわかりやすさやった・・・！

おわりというかぼやき

こういうカンファレンスの撮影NGとSNS禁止って、何を意味してるの・・？

  • 内容をインターネットに放流しないでってこと？
  • 顔出しNGってこと？
  • 撮影音うるさい・まぶしいからやめてってこと？
  • スライド内に著作物があるからだめよ（メモはいいよ）ってこと？

はっきりせんし、いろいろ類推するのも面倒やし、なにもしないのが一番ええやろってことで、今回は、そういうの聞くと一切メモを残さないスタンスでいきました。