Roppongi.js #5Webpagetestから始める継続的パフォーマンス改善について発表してきました。

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

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

  • FirebaseはNode.js 6だった
    • 今はNode.js 8で動く
  • Firebase functionsは使われてないコンテナは停止する
  • 無料枠はGoogleのサービス間だけの通信
  • 有料枠に変えて解決

stencilがよさそうな話 by adwd118

スライド: stencil is yosasou

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

Conditional Types I/O by takepepe

スライド: 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で使ってる話 by shokai

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

  • ScrapboxにServiceWorkerを入れた
  • Google検索もService Workerを入れている
  • プログラマブルな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から始める継続的パフォーマンス改善 by azu

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

  • 継続的なパフォーマンス改善をするために継続的に計測する話
  • パフォーマンス改善と計測の関係
  • 合成モニタリングのサービスとしてのWebPagetestなどについて
  • 実際のパフォーマンス改善と計測結果の活用についてなど

Local State Management with Apollo Client by Kodai Nakamura

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

  • apollo-link-state
  • Wantedlyの毎週木曜日のFrontend Night勉強会

続・貢献できるOSSの探し方 by ohbarye

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

  • コントリビュータと利用者
  • 前回: "good first issues"ラベルを検索してリポジトリのIssueをまとめた
  • 今回: UIから検索できるようにした
  • monorepo構成
    • Frontendとサーバサイドを同じディレクトリにいれる
    • リポジトリが分散しないのでスターが分散しない
  • パフォーマンスが悪い
    • 複雑なGraphQLを投げているので重い