Upgrade to Pro — share decks privately, control downloads, hide ads and more …

【PIXIV MEETUP 2023】ピクシブ決済基盤のフロントエンドを改善していく話

yamashooooo
September 29, 2023
610

【PIXIV MEETUP 2023】ピクシブ決済基盤のフロントエンドを改善していく話

yamashooooo

September 29, 2023
Tweet

Transcript

  1. フロントエンドについて • Scala/Play Framework + テンプレートエンジン (twirl) • 基本VanillaJS(少しだけjQuery) •

    Storybook(htmlが2重管理されてる) • Tailwind CSSを使用した弊社デザインシステム • メンテナンスが滞っている
  2. 改善できそうな課題 • テストが充実していない • 型安全でない(TypeScriptでない) • 命令的UIによる可読性 • フロントエンドとバックエンドが密結合 •

    統一されたデザインに対してUIが再利用されていない • Storybookとテンプレートエンジンの親和性が低い
  3. 改善できそうな課題 • テストが充実していない • 型安全でない(TypeScriptでない) • 命令的UIによる可読性 • フロントエンドとバックエンドが密結合 •

    統一されたデザインに対してUIが再利用されていない • Storybookとテンプレートエンジンの親和性が低い
  4. 改善できそうな課題 • テストが充実していない • 型安全でない(TypeScriptでない) • 命令的UIによる可読性 • フロントエンドとバックエンドが密結合 •

    統一されたデザインに対してUIが再利用されていない • Storybookとテンプレートエンジンの親和性が低い 脱テンプレートエンジン コンポーネント管理(TSX)
  5. 改善できそうな課題 • テストが充実していない • 型安全でない(TypeScriptでない) • 命令的UIによる可読性 • フロントエンドとバックエンドが密結合 •

    統一されたデザインに対してUIが再利用されていない • Storybookとテンプレートエンジンの親和性が低い 脱テンプレートエンジン コンポーネント管理(TSX)
  6. 改善できそうな課題 • テストが充実していない • 型安全でない(TypeScriptでない) • 命令的UIによる可読性 • フロントエンドとバックエンドが密結合 •

    統一されたデザインに対してUIが再利用されていない • Storybookとテンプレートエンジンの親和性が低い テンプレートエンジン上で コンポーネント管理(TSX)
  7. function Counter() { const [value, setValue] = useState(0); const increment

    = useCallback(() => { setValue(value + 1); }, [value]); return ( <div> Counter: {value} <button onClick={increment}>Increment</button> </div> ); }
  8. 改善できそうな課題 • テストが充実していない • 型安全でない(TypeScriptでない) • 命令的UIによる可読性 • フロントエンドとバックエンドが密結合 •

    統一されたデザインに対してUIが再利用されていない • Storybookとテンプレートエンジンの親和性が低い テンプレートエンジン上で コンポーネント管理(TSX)
  9. 改善できそうな課題 • テストが充実していない • 型安全でない(TypeScriptでない) • 命令的UIによる可読性 • フロントエンドとバックエンドが密結合 •

    統一されたデザインに対してUIが再利用されていない • Storybookとテンプレートエンジンの親和性が低い テンプレートエンジン上で Preactを使った コンポーネント管理(TSX)
  10. 環境構築 リリースまでの流れ 既存機能A リプレイス 新機能A レガシー リプレイス バグ修正 新機能A リプレイス

    VRT 導入 新機能B 作成 リリース リリース リリース リリース 予定 断続的リプレイス LP作ったり