これから先も戦えるサードパーティスクリプト

Transcript

1. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 1 これから先も戦える サードパーティスクリプト — 1/10に軽量化・柔軟な拡張性・互換性の担保 — 株式会社 プレイド 西村 優汰
2. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 2 本日の内容 本日の内容 • 2015 年リリース以来初となる計測タグも含めたサードパーティスクリプトの全刷新 • どんなところが課題だったのか • 課題に対して、この先戦っていくためにどう解決したのか
3. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 本日のテーマ 計測タグとは 移行のきっかけ サイズ軽量化 プラグイン化 計測タグの拡張性 まとめ 話すこと 󰗔 これから先も戦える サードパーティスクリプト
4. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 KARTEについて 一人一人に合わせた 顧客体験を提供 Webサイトの訪問者の行動を 顧客ごとにリアルタイムに解析 CX(顧客体験)プラットフォーム
5. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 5 計測タグとは Website <script src=”...”></script> (計測タグ) JavaScript 実行 解析 サーバー { "event_name": "view", "keys": { "api_key": "xxxxxx", "user_id": "user_B", }, "page": "https://plaid.co.jp/", ... } JavaScript (3rd Party Script)
6. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 6 計測タグとは Website <script src=”...”></script> (計測タグ) JavaScript 実行 解析 サーバー { "event_name": "view", "keys": { "api_key": "xxxxxx", "user_id": "user_B", }, "page": "https://plaid.co.jp/", ... } 今回話す対象 JavaScript (3rd Party Script)
7. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 7 計測タグとは 計測タグの主な責務 • 3rd Party Script を呼び出し、実行する 3rd Party Script の主な責務 • エンドユーザーの状態に応じた event data をサーバーに送信する • サーバーから返却された action (例えばポップアップなど) の描画
8. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 本日のテーマ 計測タグとは 移行のきっかけ サイズ軽量化 プラグイン化 計測タグの拡張性 まとめ 話すこと 󰗔 これから先も戦える サードパーティスクリプト
9. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 9 移行のきっかけ 旧計測タグと 3rd Party Script の構成 JavaScript (全プロジェクト共通) Website (Project A) CDN Website (Project B) Website (Project C)
10. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 10 移行のきっかけ 旧計測タグと 3rd Party Script の課題 ① • 3rd Party Script サイズの肥大化 ◦ 一部の Project にしか必要のない機能が存在 ◦ ブラウザの進化などにより不必要なコードの増加 ◦ サイトパフォーマンスの重要性 (Core Web Vitals ) • 3rd Party Script 上で動く KARTE プロダクトの増加 ◦ 当初、プロダクトは1つのみ ◦ Plugin として動かす仕組みがない • 計測タグ自体の拡張性の制限 ◦ 新規機能の開発に制限あり (後述)
11. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 11 移行のきっかけ 旧計測タグと 3rd Party Script の課題 ② • 3rd Party Script サイズの肥大化 ◦ 一部の Project にしか必要のない機能が存在 ◦ ブラウザの進化などにより不必要なコードの増加 ◦ サイトパフォーマンスの重要性 (Core Web Vitals ) • 3rd Party Script 上で動く KARTE プロダクトの増加 ◦ 当初、プロダクトは1つのみ ◦ Plugin として動かす仕組みがない • 計測タグ自体の拡張性の制限 ◦ 新規機能の開発に制限あり (後述)
12. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 12 移行のきっかけ 旧計測タグと 3rd Party Script の課題 ③ • 3rd Party Script サイズの肥大化 ◦ 一部の Project にしか必要のない機能が存在 ◦ ブラウザの進化などにより不必要なコードの増加 ◦ サイトパフォーマンスの重要性 (Core Web Vitals ) • 3rd Party Script 上で動く KARTE プロダクトの増加 ◦ 当初、プロダクトは1つのみ ◦ Plugin として動かす仕組みがない • 計測タグ自体の拡張性の制限 ◦ 新規機能の開発に制限あり (後述)
13. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 13 移行のきっかけ 新計測タグと 3rd Party Script で目指したこと • スクリプトサイズの軽量化 • プロダクトのプラグイン化 • 計測タグ自体の拡張性 • 3rd Party Script サイズの肥大化 ◦ 一部の Project にしか必要のない機能が存在 ◦ ブラウザの進化などにより不必要なコードの増加 ◦ サイトパフォーマンスの重要性 (Core Web Vitals ) • 3rd Party Script 上で動く KARTE プロダクトの増加 ◦ 当初、プロダクトは1つのみ ◦ Plugin として動かす仕組みがない • 計測タグ自体の拡張性の制限 ◦ 新規機能の開発に制限あり (後述)
14. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 本日のテーマ 計測タグとは 移行のきっかけ サイズ軽量化 プラグイン化 計測タグの拡張性 まとめ 話すこと 󰗔 これから先も戦える サードパーティスクリプト
15. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 15 スクリプトサイズ 軽量化 どれくらいスクリプトサイズを軽量化したのか 307 kb 25 kb 新 3rd Party Script (最小設定かつgzip圧縮前) 旧 3rd Party Script (gzip圧縮前) 軽量化により「ダウンロード時間の改善」「CPU時間の改善」
16. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 16 スクリプトサイズ 軽量化 軽量化するために行ったこと • Project ごとに JavaScript を作成 ◦ 全部入りの機能を分解して、Projectごとに機能を取捨選択できるように (後ほど詳しく説明) • Treeshaking や Dead Code Elimination を意識した開発 ◦ 詳しくは弊社社員の別発表資料にて 「バンドル最適化マニアクス at tsconf 」 (https://speakerdeck.com/mizchi/bandoruzui-shi-hua-maniakusu-at-tfconf) • Internet Explorer 対応をしない決定をした
17. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 17 スクリプトサイズ 軽量化 軽量化するために行ったこと • Project ごとに JavaScript を作成 ◦ 全部入りの機能を分解して、Projectごとに機能を取捨選択できるように (後ほど詳しく説明) • Treeshaking や Dead Code Elimination を意識した開発 ◦ 詳しくは弊社社員の別発表資料にて 「バンドル最適化マニアクス at tsconf 」 (https://speakerdeck.com/mizchi/bandoruzui-shi-hua-maniakusu-at-tfconf) • Internet Explorer 対応をしない決定をした
18. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 18 スクリプトサイズ 軽量化 新計測タグと 3rd Party Script の構成 JavaScript (Project A) Website (Project A) CDN Website (Project B) Website (Project C) JavaScript (Project B) JavaScript (Project C) Website (Project A) CDN Website (Project B) Website (Project C) JavaScript (全 Project 共通)
19. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 19 スクリプトサイズ 軽量化 Project ごとの bundle の仕組み JavaScript (Project A) Website (Project A) CDN Website (Project B) Website (Project C) JavaScript (Project B) JavaScript (Project C) JavaScrip t (共通) JSON Config (Project A) JSON Config (Project B) JSON Config (Project C) bundle bundle bundle Server
20. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 20 スクリプトサイズ 軽量化 どのように機能を取捨選択しているか rollup などで bundle terser で最適化 以下の 2つのコードを想定 • entry.js • features.js
21. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 21 スクリプトサイズ 軽量化 ProjectごとにJavaScriptを用意するデメリット JavaScript 本体の更新時に 全 Project の数だけJavaScript を生成し直す必要 1. デプロイ時間が長くなる → bundle の手法を最適化していくしかない... (rollup から esbuild で新しく作り直し試験中) → bundle をせず、Project ごとの config をそのまま文字列置換 (Projectごとの最適化はできない) 【bundle speed (50file)】rollup: 14276.82 msec, esbuild: 8.80 msec, 文字列置換: 0.17 msec 2. CDN の Invalidation の制限がある → CDN の cache 時間を 1 min と短めに設定
22. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 22 スクリプトサイズ 軽量化 ProjectごとにJavaScriptを用意するデメリット JavaScript 本体の更新時に 全 Project の数だけJavaScript を生成し直す必要 1. デプロイ時間が長くなる → bundle の手法を最適化していくしかない... (rollup から esbuild で新しく作り直し試験中) → bundle をせず、Project ごとの config をそのまま文字列置換 (Projectごとの最適化はできない) 【bundle speed (50file)】rollup: 14276.82 msec, esbuild: 8.80 msec, 文字列置換: 0.17 msec 2. CDN の Invalidation の制限がある → CDN の cache 時間を 1 min と短めに設定
23. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 本日のテーマ 計測タグとは 移行のきっかけ サイズ軽量化 プラグイン化 計測タグの拡張性 まとめ 話すこと 󰗔 これから先も戦える サードパーティスクリプト
24. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 24 他プロダクトの プラグイン化 会社のフェーズの変化 リリース当初 (2015年) 3rd Party Script プロダクト A ポップアップ 現在 様々なプロダクトを 3rd Party Script 上で動かす統一的な仕組みがなかった 3rd Party Script プロダクト A ポップアップ プロダクト C チャット プロダクト B FAQ
25. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 25 他プロダクトの プラグイン化 プラグイン化の要件 • Project によって 必要なプロダクトが違う • 3rd Party Script 本体とは別で開発される • 3rd Party Script 本体から情報を渡す必要 • プラグイン間のデータのやり取り ◦ プラグインが起動している保証なし
26. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 26 他プロダクトの プラグイン化 プラグイン化の実装 • Project によって 必要なプロダクトが違う → Project ごとに JavaScript を生成 (前述なので省略) • 3rd Party Script 本体とは別で開発される • 3rd Party Script 本体から情報を渡す必要 • プラグイン間のデータのやり取り ◦ プラグインが起動している保証なし シンプルに！ • dynamic import のみで解決 • シンプルな interface 規約 Pub/Subの仕組み
27. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 27 他プロダクトの プラグイン化 シンプルなインターフェース 計測タグ本体の呼び出し元 他プロダクトのインターフェース
28. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 28 他プロダクトの プラグイン化 プラグイン間のデータのやり取り • Pub/Sub の仕組みを採用 • Plugin は様々な Topic の Publisher, Subscriber を担う • Plugin 起動前の message も 受け取ることが可能 Topic A [msgA, msgC] Plugin A Plugin B Plugin C Publish “msgA” Publish “msgC” Subscribe TopicA [msgA, msgB]
29. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 本日のテーマ 計測タグとは 移行のきっかけ サイズ軽量化 プラグイン化 計測タグの拡張性 まとめ 話すこと 󰗔 これから先も戦える サードパーティスクリプト
30. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 30 計測タグの拡張性 旧計測タグの拡張性の課題 旧計測タグのイベントトラッキング関数 • 旧計測タグの場合、 tracker object に track method を事前に宣言する必要あり • track 以外の method を新しく使おうとすると、事前宣言用の script を書き換える必要あり → method 足すたびにお客様によるスクリプトタグの置き換えが必要 新しい method を容易に開発できない 事前宣言用の疑似スクリプト delete の method を足そうとすると
31. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 31 計測タグの拡張性 計測タグ自体の拡張性の改善 新計測タグのイベントトラッキング関数 • tracker object に function を生やす (第一引数が method 名) • method 名の定義は 3rd Party Script 内部で定義 お客様のタグ変更なく容易にmethod を追加可能 事前宣言用の疑似スクリプト
32. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 32 計測タグの拡張性 計測タグ変更によるデメリット • 計測タグ移行時に全てのイベントトラッキング関数を置き換える必要 ◦ 関数の数としては多く負担になる 互換用のスクリプトタグを作成 旧計測タグのインターフェースを新計測タグの上に実装
33. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 本日のテーマ 計測タグとは 移行のきっかけ サイズ軽量化 プラグイン化 計測タグの拡張性 まとめ 話すこと 󰗔 これから先も戦える サードパーティスクリプト
34. 　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 34 まとめ まとめ • 以下の点を主に考えながら、計測タグと3rd Party Scriptを全刷新 ◦ スクリプトサイズの軽量化 ▪ Project ごとに使う機能だけ bundle ◦ 他プロダクトのプラグイン化 ▪ シンプルに！　データのやり取りは Pub/Sub で ◦ 計測タグ自体の拡張性 ▪ method 名の定義を事前宣言 script 内でしない • これからの課題 ◦ Project ごとの JavaScript の bundle 速度の向上 ◦ スクリプトサイズを小さく保っていく仕組みや文化 ◦ 3rd Party Script 上にのる Product をガンガン開発