WYSIWYGウェブページビルダーを支える技術とSever Driven UIへの拡張

JSConfJP 2024 Track D

Transcript

1. 1 WYSIWYGウェブページビルダーを支える技術 とSever Driven UIへの拡張 JSConf JP 2024 Sponsor session Mercari,Inc
2. 2 Merpay, Inc 
 Growth Platform Frontend 
 @togami 

3. 3 EGP Pagesとは Table of content EGP Pagesの仕組み Server Driven UIへの拡張 02 03 01
4. 4 EGP Pages
5. 5 Engagement Platform(EGP) • 内製のマーケティングツール ◦ ポイント/クーポン management ▪ インセンティブの配布 ▪ Push通知の送信 ◦ キャンペーンの作成 ◦ EGP Pages ▪ LPの作成、公開 • メルカリグループ全体の共通基盤(USを除く)
6. 6 EGP Pages • LP作成のためのWYSIWYGエディタ • コンポーネント ◦ Text ◦ Image ◦ Layout ◦ ItemList ◦ Lottie ◦ Entry Button ◦ 全28種類 • 条件付きレンダリング
7. 7 • 月間トータル5000万PV • 月によっては100を超えるLPが公開 EGP Pages
8. 8 Team • FE + PM • Tech Stack ◦ React ◦ Next.js ◦ @reduxjs/toolkit ◦ MUI ◦ FireStore ◦ など
9. 9 サンプルの制作 WEB MOBILE(Webview)
10. 10 Layoutコンポーネント
11. 11 名前を設定
12. 12 Textの値を設定
13. 13 モバイル向けのコンテンツを追加
14. 14 WHENを追加 条件をテンプレートから追加
15. 15 WHENを追加
16. 16 エミュレーション
18. 18 条件をテンプレートから追加
19. 19 Deep linkの設定
20. 20 その他機能 • 各種アクション ◦ Logの設定 ◦ アプリへの遷移 • APIのコール&開発中のレスポンスモック • Dark/Lightモード • 多言語対応 EN zh-TW
21. 21 アーキテクチャ
22. 22 アーキテクチャ FireStore
24. 24 Web => そのまま描画 Mobile => Webviewで描画
25. 25 Performance
26. 26 一つ一つの要素 => schemaに沿ったjson エディタ
27. 27 親子関係を保持
29. 29 Styling • tailwindを付与する GUIラッパー • tailwindでできることは基本何でもできる 2-way conversion
30. 30 Native Bridge • Webview ⇔ Mobile間で双方向通信がしたい ◦ カスタムURLスキーム ▪ 単方向 ▪ セキュリティリスク有 • Onix(内製Native Bridge) ◦ Channel Messaging APIを利用した双方向通信をサポート ◦ OS, versionによるAPIの差分を吸収 ◦ Channel Messaging APIをサポートしていないバージョンの場合 Deep linkへfallback ◦ 今後はFlutterへも対応
31. 31 技術的課題 • 同時編集ができない ◦ 編集中の上書きが発生 • Yjsを利用した実装を検討中 ◦ https://github.com/yjs/yjs
32. 32 運用課題 • あくまでLPというドメインに特化したエディタ • Webアプリのような複雑なすぎるものは作れない/手間がかかる ◦ APIコールと条件分岐が多いもの ◦ 特殊なイベントハンドラが必要なもの ◦ エンジニアからすると「これコード書いた方が早くない🤔」となりがち
33. 33 運用課題 • EGP Pagesでできることが増える => 要件が複雑になっていく • 個々の要求を都度実装していくと裏側がどんどんカオスに。。
34. 34 運用課題 ❌ エンジニアなしで完結するNocodeツールを目指す ⭕ エンジニアと非エンジニアが効果的に共同作業できるツールを目指す • For non-engineers ◦ UIウィジェット • For engineers ◦ コンポーネントのEncapsulation ◦ KV pairのコンフィグ
35. 35 Server Driven UI
36. 36 Server Driven UIとは • サーバーからUIの構造とデータを一緒に返却してクライアントでレンダリン グする手法 • Airbnbの記事で有名 ◦ https://medium.com/airbnb-engineering/a-deep-dive-int o-airbnbs-server-driven-ui-system-842244c5f5
37. 37 Server Driven UIとは
38. 38 前提 • 各プロダクトのtech stack ◦ Mercariアプリ => Swift および Kotlin ◦ Mercari shops, はたらくタブ => アプリ内Webview ◦ Mercari Hallo => Flutter ◦ Mercari Web => Web
39. 39 メリット • 迅速な機能リリースが可能 ◦ サーバー側の変更でUIを更新できるため、アプリのアップデートを待 たずにリリースできる • クライアント側の実装を簡素化できる • クロスプラットフォームの一貫性を保ちやすい ◦ iOS, Android, Flutter, Web • Nativeで描画するため Webviewと比べてパフォーマンスが良い
40. 40 EGP Cards
41. 41 Card UI Protocol • JSONベースの仕様 ◦ Tree Node ◦ Style ◦ Event handler • クロスプラットフォーム UIを記述
42. 42 Card UI Protocol
44. 44 Cross Platform Rendering • JSONを元にネイティブの UIとして描画
46. 46 まとめ • EGP Pagesとは ◦ WYSIWYGウェブページビルダー ◦ エディタで編集、最終的にはstaticなhtmlを配信 ▪ Web => そのまま描画 ▪ Mobile => Webview経由で描画 • EGP Pagesの仕組み ◦ エレメントはschemaに沿ったjsonの塊。再帰的にreactで描画 ◦ Tailwindでスタイリング • Server Driven UI ◦ EGP cards ◦ EGP Pagesのエディタの仕組みを流用 ◦ Protocolに沿ったjsonを元にネイティブのUIとして描画