Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 Merpay, Inc 
 Growth Platform Frontend 
 @togami 


Slide 3

Slide 3 text

3 EGP Pagesとは Table of content EGP Pagesの仕組み Server Driven UIへの拡張 02 03 01

Slide 4

Slide 4 text

4 EGP Pages

Slide 5

Slide 5 text

5 Engagement Platform(EGP) ● 内製のマーケティングツール ○ ポイント/クーポン management ■ インセンティブの配布 ■ Push通知の送信 ○ キャンペーンの作成 ○ EGP Pages ■ LPの作成、公開 ● メルカリグループ全体の共通基盤(USを除く)

Slide 6

Slide 6 text

6 EGP Pages ● LP作成のためのWYSIWYGエディタ ● コンポーネント ○ Text ○ Image ○ Layout ○ ItemList ○ Lottie ○ Entry Button ○ 全28種類 ● 条件付きレンダリング

Slide 7

Slide 7 text

7 ● 月間トータル5000万PV ● 月によっては100を超えるLPが公開 EGP Pages

Slide 8

Slide 8 text

8 Team ● FE + PM ● Tech Stack ○ React ○ Next.js ○ @reduxjs/toolkit ○ MUI ○ FireStore ○ など

Slide 9

Slide 9 text

9 サンプルの制作 WEB MOBILE(Webview)

Slide 10

Slide 10 text

10 Layoutコンポーネント

Slide 11

Slide 11 text

11 名前を設定

Slide 12

Slide 12 text

12 Textの値を設定

Slide 13

Slide 13 text

13 モバイル向けのコンテンツを追加

Slide 14

Slide 14 text

14 WHENを追加 条件をテンプレートから追加

Slide 15

Slide 15 text

15 WHENを追加

Slide 16

Slide 16 text

16 エミュレーション

Slide 17

Slide 17 text

17

Slide 18

Slide 18 text

18 条件をテンプレートから追加

Slide 19

Slide 19 text

19 Deep linkの設定

Slide 20

Slide 20 text

20 その他機能 ● 各種アクション ○ Logの設定 ○ アプリへの遷移 ● APIのコール&開発中のレスポンスモック ● Dark/Lightモード ● 多言語対応 EN zh-TW

Slide 21

Slide 21 text

21 アーキテクチャ

Slide 22

Slide 22 text

22 アーキテクチャ FireStore

Slide 23

Slide 23 text

23

Slide 24

Slide 24 text

24 Web => そのまま描画 Mobile => Webviewで描画

Slide 25

Slide 25 text

25 Performance

Slide 26

Slide 26 text

26 一つ一つの要素 => schemaに沿ったjson エディタ

Slide 27

Slide 27 text

27 親子関係を保持

Slide 28

Slide 28 text

28

Slide 29

Slide 29 text

29 Styling ● tailwindを付与する GUIラッパー ● tailwindでできることは基本何でもできる 2-way conversion

Slide 30

Slide 30 text

30 Native Bridge ● Webview ⇔ Mobile間で双方向通信がしたい ○ カスタムURLスキーム ■ 単方向 ■ セキュリティリスク有 ● Onix(内製Native Bridge) ○ Channel Messaging APIを利用した双方向通信をサポート ○ OS, versionによるAPIの差分を吸収 ○ Channel Messaging APIをサポートしていないバージョンの場合 Deep linkへfallback ○ 今後はFlutterへも対応

Slide 31

Slide 31 text

31 技術的課題 ● 同時編集ができない ○ 編集中の上書きが発生 ● Yjsを利用した実装を検討中 ○ https://github.com/yjs/yjs

Slide 32

Slide 32 text

32 運用課題 ● あくまでLPというドメインに特化したエディタ ● Webアプリのような複雑なすぎるものは作れない/手間がかかる ○ APIコールと条件分岐が多いもの ○ 特殊なイベントハンドラが必要なもの ○ エンジニアからすると「これコード書いた方が早くない🤔」となりがち

Slide 33

Slide 33 text

33 運用課題 ● EGP Pagesでできることが増える => 要件が複雑になっていく ● 個々の要求を都度実装していくと裏側がどんどんカオスに。。

Slide 34

Slide 34 text

34 運用課題 ❌ エンジニアなしで完結するNocodeツールを目指す ⭕ エンジニアと非エンジニアが効果的に共同作業できるツールを目指す ● For non-engineers ○ UIウィジェット ● For engineers ○ コンポーネントのEncapsulation ○ KV pairのコンフィグ

Slide 35

Slide 35 text

35 Server Driven UI

Slide 36

Slide 36 text

36 Server Driven UIとは ● サーバーからUIの構造とデータを一緒に返却してクライアントでレンダリン グする手法 ● Airbnbの記事で有名 ○ https://medium.com/airbnb-engineering/a-deep-dive-int o-airbnbs-server-driven-ui-system-842244c5f5

Slide 37

Slide 37 text

37 Server Driven UIとは

Slide 38

Slide 38 text

38 前提 ● 各プロダクトのtech stack ○ Mercariアプリ => Swift および Kotlin ○ Mercari shops, はたらくタブ => アプリ内Webview ○ Mercari Hallo => Flutter ○ Mercari Web => Web

Slide 39

Slide 39 text

39 メリット ● 迅速な機能リリースが可能 ○ サーバー側の変更でUIを更新できるため、アプリのアップデートを待 たずにリリースできる ● クライアント側の実装を簡素化できる ● クロスプラットフォームの一貫性を保ちやすい ○ iOS, Android, Flutter, Web ● Nativeで描画するため Webviewと比べてパフォーマンスが良い

Slide 40

Slide 40 text

40 EGP Cards

Slide 41

Slide 41 text

41 Card UI Protocol ● JSONベースの仕様 ○ Tree Node ○ Style ○ Event handler ● クロスプラットフォーム UIを記述

Slide 42

Slide 42 text

42 Card UI Protocol

Slide 43

Slide 43 text

43

Slide 44

Slide 44 text

44 Cross Platform Rendering ● JSONを元にネイティブの UIとして描画

Slide 45

Slide 45 text

45

Slide 46

Slide 46 text

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として描画