Roppongi.js #5 で「Webpagetestから始める継続的パフォーマンス改善」について話してきた

スポンサーLT: Firebase + Nuxt.js

スライド: stencil is yosasou

Stencil
- WebComponentとかのフレームワーク
Angularっぽいシンタックス
npm init で初期設定をできる
- Release v6.1.0 · npm/npm
Custom Elementsを使うフレームワーク
標準のCustom Elementsでできないこと
- 属性に関数をわたせない
  - Stencilは属性に関数を渡せる
- 属性にオブジェクトを渡せない
  - Stencilは属性にオブジェクトも渡せる
Prerendering
- ルーティングも持っている
- ルーティングに対応するHTMLを生成できる
Context
- レンダリングのモードはisServerという値を見ればわかる
- CSRとSSRでの分岐ができる

スライド: Conditional Types I/O - Speaker Deck

ReduxとTypeScriptについて
ActionとRedux
ReducerはすべてのActionを知っている必要はあるかどうか
takefumi-yoshii/redux-aggregate: The tiny ~550b DX helper for Redux with Inferred types
- Pure FunctionのマップからActionsを作成する
creatAggregate()
- pure functionをラップした関数の第一引数にpayloadを渡す
このredux-aggregateの型定義をどうやってるかについて
<INPUT> = mutation
ReturnType<T> の定義
関数の引数(1,2)を取り出す型A1<T>の定義
オブジェクトのkeysのDiffを取って、オブジェクトのtypoがないかを型チェックする

スライド: ServiceWorkerをproductionで使ってる話 - 橋本商会

ScrapboxにServiceWorkerを入れた
Google検索もService Workerを入れている
- オフラインで検索ページが開ける
- The web: state of the union (Google I/O ’18) - YouTube
プログラマブルなProxy
- CacheがHItしたら、Requestする代わりにキャッシュを返す
- Responseがどこから来たものか判別できない
マウスオーバーしたときにprefetchしている
ServiceWorkerのライフサイクル
- クライアントで動いてるバージョンと異なる場合があるかもしれない問題
Sentryでエラーを検知する
マウスオーバーでprefetchしてるのでリクエストが増えた
- 遅い回線の人にはやらないようにした
- fetchの速度を計測してる(Network information APIはChromeにない)
SPAの初期表示に必要な部分だけcacheしてみた
- HTML/JS/CSS/font/画像だけ
Service Workerを入れた問題
- SWを使った時にpublic wifitでのログイン画面を検知できない問題
まとめ
- SWはプログラマブルなproxy
- 間違えると24時間サービスが開かなくなる場合がある

スライド: Webpagetestから始める継続的パフォーマンス改善

スライド: Local State Management with Apollo - Speaker Deck

スライド: 続・貢献できるOSSの見つけ方 / How to find “Good First Issues” part 2 - Speaker Deck