Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

pixivのフロントエンド開発のこれまでとこれから / The evolution and f...

yto (60°)
October 17, 2024

pixivのフロントエンド開発のこれまでとこれから / The evolution and future of pixiv’s frontend development

リリースから17年を迎える pixiv のフロントエンドにはこれまで、 Smarty, Vue.js, React, Next.js の4つの実装が存在してきました。この混沌とした世界を Next.js に統一するこれまでの取り組み、対面した課題、今後の展望についてお話しします。
2024/9/20 pixiv DEV MEETUP 2024 にて発表 https://conference.pixiv.co.jp/2024/dev-meetup

yto (60°)

October 17, 2024
Tweet

More Decks by yto (60°)

Other Decks in Technology

Transcript

  1. 話すこと 1. pixivのフロントエンドのこれまで • PHP の世界に React / Vue.js が入り、

    Next.js の世界ができるまで 2. pixivのフロントエンドの現在 • Next.js 化プロジェクトの進行と得られた恩恵 3. Next.js化プロジェクトの課題 4. pixivのフロントエンドのこれから ※説明のため、意味が大きく変わらない範囲で話が簡略化されている箇所があります。
  2. • デプロイフローの改善 ◦ before: ロックをとって手動ビルドしてデプロイ ◦ after: MR をマージしたら CI

    が自動でデプロイ • ビルド時間の改善 ◦ before: 本番ビルド 〜10分、開発ビルド 〜1分 ◦ after: 本番ビルド 〜5分、開発ビルド 〜5秒 コードベースに改善を入れやすくなった
  3. 課題1: 3つの世界が4つの世界に • Class Component を Function Component に全て書き換え •

    表紙画像生成の状態の持ち方を整理 →時間をかけて完璧な実装を目指すより、まずは 移行を終わらせることを目指したほうが良い 小説投稿画面 Next.js 移行時の反省
  4. 課題2: pixiv内の他ページとの遷移 Next.js で新規実装されたページ ↔ React / Vue.js で実装 されたページが非

    SPA 遷移になる • 遷移・ブラウザバックに時間がかかる • 遷移前後の状態が保たれない
  5. 課題2: pixiv内の他ページとの遷移 ホーム ( ) で作品を眺める → 続きが気になって作品ページ ( ) に飛ぶ →

    読み終わってブラウザバックすると作品の 並びが変わり、スクロール位置もリセット pixivの「ホーム」タブ実装時の課題
  6. 課題3: ページサイズの増加と表示速度の低下 Next.js 化したページでは • TTFB (Time to first bite)

    が悪化 • LCP (Largest Contentful Paint) が改善 しており、初期に移行していた要素数の少ないページでは 恩恵のほうが大きかった
  7. END