「Frontrend Vol.12 - サービスの誕生と成長」に参加しました

勉強会メモ

frontrend.connpass.com

  • Frontrendへの参加は今回で2回目。前回は補欠だっため配信で参加でした。
  • 今回もFRESHで配信されてるので今からでも映像を見ることができます

https://freshlive.tv/tech-conference/220141freshlive.tv

フルコンポーネント化へ。進化を続けるアメブロの道

背景

  • 2016/1〜アメブロフロントエンドリニューアル
  • SpringMVC/Freemarker -> React
  • アメブロは常に進化している
    • 進化しないのは死んでいるということ

コンポーネント化のメリット

  • 高凝集、低結合
  • 独立しているので機能の追加削除が容易
  • 再利用性(やりすぎは注意)

コンポーネント化に用いる技術

  • Reactを採用
  • その他採用したライブラリやアーキテクチャ
    • React
    • Redux
    • react-router
    • AtomicDesign
    • CSS Modules
    • Webpack
  • LazyLoad
    • ページが長く全てSSRするのはパフォーマンス気になる
    • スクロールする度に動的に先のコンテンツを表示

CSS分割

  • CSSも必要なものだけ読み込む
  • CSS Modulesを採用
  • 課題
    • 外部cssの扱い
    • SSR対応
  • 最適なライブラリを自分たちで作った?

github.com

  • styleもスクロールする度に必要なものをstyleタグに追加
    • unusedなCSSの割合を減らせた

子供向けプログラミング学習サービスQUREOの開発裏話

  • 株式会社Applibot QUREOプロジェクト 鈴木康弘さん(@yasuiro）

QUREO

  • サービス
    • 子供向けのプログラミング学習サービス
    • コードを書くわけではなくGUIでブロックを組み立てながら開発する感じ
  • コンセプト
    • 簡単で/おもしろく/学べる

qureo.jp

ブロックプログラミング

  • Blockly
    • google製
    • ビジュアルプログラミング用のライブラリ
    • ブロックで構築したプログラムをいろいろな言語で出力できる

ブロックで構築したプログラムをブラウザ上で実行させたい

  • js差し込む？
    • 差し込んだjs消すの大変
  • js-interpreter
    • カスタム定義メソッドの実行ハンドリングがしにくい
  • 独自で言語を作る
    • 時間がなく実現せず
  • scratch-blocksとscratch-vm
    • scratch-blocks
      • Blocklyがベースになっている
    • scratch-vm
      • scratch-blocksをブラウザで動かす
    • Blocklyから文字列のjsを吐き出す必要がなくなりセキュリティ面でも安心

github.com github.com

  • 最終的に
    • block
      • scratch-blocks
    • vm
      • scratch-vm
    • renderer
    • audio
      • tone.js

画像同士の衝突判定

  • 要件
    • 透過部分は衝突させたくない
    • ユーザが作った絵を使えるようにする予定
    • 縦横比は維持したい
  • 事前に判定領域のパスを持っておく?
    • ユーザが作った画像で対応できない
  • ピクセル単位で判定
    • 重そう
    • 矩形でぶつかったらそこだけ切り抜いて(ブロードフェーズ)それに対してピクセル判定(ナローフェーズ)
      • それでも重い
  • 前処理&判定エリア簡略化
    • 画像を正方領域に分割
    • 各領域内の透過ピクセルの比率で衝突判定の対象とするか決める
    • 判定領域を正方でなく円にする

AbemaTVはただのSSRじゃねえんだよ

  • 株式会社AbemaTV 久保田翔太さん(@kubosho_)
  • 株式会社AbemaTV 加藤賢一さん(@ktknest)

AbemaTVのSSR化

  • 既存のSPAをSSR化した
  • 既存の設計やライブラリをほとんど変えずにSSR化した

なぜSSRした

  • ユーザにとって意味のあるコンテンツを速く表示したかった
  • SEOのため

SSRした効果

  • サービス名や番組名で検索したときに上位に出やすくなった
  • First Meaningful Paint Timeも速くなった

SSR化でハマったところ

  • もともとSSR化を想定せず作っていた
    • windowやlocalstorageを触ってるところでエラー
  • SSRとCSRで描画に差異があった
    • SSRできないものはcomponentDidMountで対応

SSR化まとめ

  • SSR効果あった
  • SPA + SSRなら最初からやったほうが効率的
    • 途中からは大変

以前のAbemaTVとCDN

  • GCP使ってる
  • GCPのCDNを使ってた
    • CloudCDN

今のAbemaTVとCDN

  • デスクトップとモバイルで異なるHTMLやCSSを返したい
  • Fastlyを採用
    • インスタントパージ
      • キャッシュ即削除
    • Varnishベースで柔軟なカスタマイズ
    • HTTP/2 Server Push

結果

  • キャッシュヒット率平均90%以上

今後

  • より細かい分類によるキャッシュ最適化
    • 課金プランごとに振り分けるとか
  • ブラウザごとの配信JS最適化
  • 切り戻し手段の再考