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

Yahoo!のproxy

• 一般的な構成
  • ヤフーの画像配信システム（CDN）の紹介 - Yahoo! JAPAN Tech Blog
• 2010年
  • Disk I/O不足
  • HDD -> SSD
• 2011年
  • 帯域が不足
  • NW強化・DC追加
• 2013年
  • pushスパイク問題
  • Yahoo!内でのトラフィック
• 2015年
  • SSL CPU不足
  • システム入れ替え
  • AOSSL対応

AOSSL

• ドメインが1000以上あった
• ドメインの統合などを進めていった
• 要件
  • 4,000,000rps
  • 400Gbps
  • これを冗長化
• 処理性能と電力消費のバランス
• 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％くらいいる
  • Win7 IE.., Android 4.x 標準ブラウザ...
• 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したい人を募集していますだそうですｗ

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待ちかなー。

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

• Web Components sandbox
• ブラウザーサポート
  • Chrome と Safariは4つともOK（つまりモバイルはほぼOK）
  • Firefoxは一部対応中
  • Edgeはお察し
• YouTubeがWeb Componentsを採用した
  • が、Shadow DOMは使ってない様子
  • Polymer -> webComponents.js
• アクセシビリティ
  • 通常のHTMLを書くときと一緒
  • WAI-AREAとか`inert`属性とか
• パフォーマンス
  • コンポーネントは`script`でロードするのでHTTP/2とか
  • `type=module`は`defer`されちゃうので、最適化は必要かも？
• レンダリング
  • LightDOMとShadowDOMの差
  • 大差はないと思うが、ブラウザに委ねられる
  • Reactなどからも通常の要素と同じように使える
  • VirtualDOMのように差分描画は自分で
  • GitHub - PolymerLabs/lit-html: HTML template literals in JavaScript

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