ユーザー体験と編集体験を支えるビルドアーキテクチャ

Transcript

1. 　　｜　　© PLAID Inc. 2023.07.27　｜　Developers Summit 2023　｜ 1 ユーザー体験と編集体験を支える ビルドアーキテクチャ 株式会社プレイド 片居木 Developers Summit Summer 2023
2. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 2 片居木 誠 Makoto Kataigi Github : @mkataigi Twitter : @mkataigi 株式会社プレイド • アクションエディタ開発チームリード • 解析エンジンも作ってました • バックエンド好き 自己紹介 2023.07.27　｜　Developers Summit 2023　｜
3. 　　｜　　© PLAID Inc. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 3 2023.07.27　｜　Developers Summit 2023　｜ 株式会社プレイド 東京都中央区銀座6-10-1 GINZA SIX 10F 設⽴：2011年10⽉ 従業員：282名 ※2023年3⽉末時点 会社紹介
4. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 4 CX(顧客体験)プラットフォーム Webサイトの訪問者の⾏動を 顧客ごとにリアルタイムに解析 ⼀⼈ひとりに合わせた 顧客体験を提供 プロダクト紹介
5. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 5 アクション： ポップアップに限らない 様々な顧客体験 HTMLだけでなく JavaScriptによる動きも アクション システム連携 カウントダウン
6. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 6 アクションを WYSIWYGで編集する エディタ TypeScriptのコードも編集できる エディタ
7. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 本日のテーマ 7 ユーザー体験と 編集体験を支える ビルドアーキテクチャ ビルドの工夫 話すこと ビルドアーキテクチャと ユーザー体験と編集体験 ビルドを両立させる工夫
8. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 本日のテーマ 8 ユーザー体験と 編集体験を支える ビルドアーキテクチャ ビルドの工夫 話すこと ビルドアーキテクチャと ユーザー体験と編集体験 ビルドを両立させる工夫 🏻
9. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. webサイト 解析サーバ アクションストレージ(CDN) <script src="https://cdn-edge.karte.io/01234 5678/edge.js"></script> 実行 コード 9 今日の話の前提：配信アーキテクチャ 過去データ 1. イベント送信 　　　例) 閲覧 2. アクション情報返却 例) https://bs.karte.io/action/foobar/index.js 3. アクションのコード取得＆実行
10. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. 編集 ソース KARTE Actionエディタ ビルドサーバ 10 今日の話の本題：ビルドアーキテクチャ 実行 コード アクションストレージ(CDN)
11. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. 編集 ソース KARTE Actionエディタ ビルドサーバ 11 今日の話の本題：ビルドアーキテクチャ 実行 コード アクションストレージ (CDN) 実行コード生成 build on Server 1. エディタで編集するとソースコードが 変更される 2. 保存すると、ソースコードがサーバに 　 送られ、実行できるコードに変換 3. 実行コードをストレージ（CDN）に保存
12. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. 編集 ソース KARTE Actionエディタ ビルドサーバ 12 今日の話の本題：ビルドアーキテクチャ 実行 コード アクションストレージ (CDN) 実行コード生成 build on Server 1. エディタで編集するとソースコードが 変更される 2. 保存すると、ソースコードがサーバに 　 送られ、実行できるコードに変換 3. 実行コードをストレージ（CDN）に保存 サーバ上で1回だけビルド 多くのエンドユーザーのブラウザ上で実行される ビルド時間がかかっても良いので 実行速度を優先したい
13. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. 編集 ソース KARTE Actionエディタ ビルドサーバ 13 今日の話の本題：ビルドアーキテクチャ 実行 コード アクションストレージ(CDN) 実行コード生成 build on Server プレビュー用 build on Browser 1. エディタで編集するとソースコードが 変更される 2. 変更がプレビューに 反映される
14. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. 編集 ソース KARTE Actionエディタ ビルドサーバ 14 今日の話の本題：ビルドアーキテクチャ 実行 コード アクションストレージ (CDN) 実行コード生成 build on Server プレビュー用 build on Browser 1. エディタで編集するとソースコードが 変更される 2. 変更がプレビューに 反映される エディタでの編集するたびにプレビューが更新される 編集者の思考の妨げにならないようにしたい 実行速度より ビルド時間を優先したい
15. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. 編集 ソース KARTE Actionエディタ ビルドサーバ 15 今日の話の本題：ビルドアーキテクチャ 実行 コード アクションストレージ(CDN) 実行コード生成 build on Server プレビュー用 build on Browser ビルド時間最適化 実行速度最適化
16. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 16 TypeScriptやその他ソースコードを ブラウザで実行可能な状態にすること ビルド 用語定義 • TypeScript のトランスパイル • npmなどからのパッケージの取得 • バンドル（ファイルをまとめる） • minify • その他最適化 今回はrollup.jsを利用
17. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 17 配信毎に変わるコード （ビジュアルなど） Action SDK アクション共通で使うコード エディタで編集 SDKとして分離 （npmに登録してる）
18. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 18 SDKのビルドは CIでのコマンドラインでのビルド Action SDK コードを分離することで、 事前にビルドできる SDKのビルドも､実行用と プレビュー用で分けている ‧
19. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. npmなど プレビュー SDK 事前build ビルド時間最適化 実行 コード 実行コード生成 build on Server プレビュー用 build on Browser 実行速度最適化 編集 ソース SDK ソース 実行SDK 19 サイト エディタ プレビュー コード ビルドフロー全体 毎回編集されるコード さまざまなアクションで共通で使われるコード
20. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 20 アクションの サイト上での実行速度と エディタでのビルド時間を 両立するための ビルドアーキテクチャ 本日のテーマ 話すこと ビルドの工夫 ビルドアーキテクチャと ユーザー体験と編集体験 ビルドを両立させる工夫 🏻
21. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. npmなど プレビュー SDK 事前build ビルド時間最適化 実行 コード 実行コード生成 build on Server プレビュー用 build on Browser 実行速度最適化 編集 ソース SDK ソース 実行SDK 21 サイト エディタ プレビュー コード ビルドフロー全体
22. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 22 実行速度 ≒ スクリプトのサイズ ポイント：いかにスクリプトのサイズを小さくできるか 実行 SDK 事前build 実行コード生成 build on Server 実行 コード 実行速度最適化 編集 ソース SDK ソース 実行コード生成ビルド方針
23. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 23 tree-shakingで削除される 実行コード生成ビルドの工夫-1 実行 SDK 事前build 実行コード生成 build on Server 実行 コード 実行速度最適化 編集 ソース SDK ソース 実行コード生成のビルドでは rollup.js は 基本的な使い方をしている rollup.js の tree-shaking で不要なコード を削除している
24. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 24 SDKの工夫-1 実行 SDK 事前build 実行コード生成 build on Server 実行 コード 実行速度最適化 編集 ソース SDK ソース 実行コード生成のビルドするときに tree-shaking しやすいようにしておく exports を分割することで､ importの 単位を細かくする
25. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 25 SDKの工夫-2 実行 SDK 事前build 実行コード生成 build on Server 実行 コード 実行速度最適化 編集 ソース SDK ソース 実行コード生成のビルドするときに tree-shaking しやすいようにしておく 実行時に不要なコードを分離しやすい コードを書く
26. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 26 アクションのViewにSvelteを使うことで、 事前にビルドできるようにし、 重い実行時ランタイム不要で実行できるようにしている 実行コード生成ビルドの工夫-2 実行 SDK 事前build 実行コード生成 build on Server 実行 コード 実行速度最適化 編集 ソース SDK ソース
27. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 27 以前のアクションでは、vue.jsを 活用していた pros：Web標準のHTML風な記法で記載できるため、 　　　非エンジニアにも書きやすい cons：ランタイムが必要で実行時に重い Svelteが今回の要件にマッチ 同じくWeb標準のHTML風な記法で書ける ランタイム不要で事前ビルドできるので軽量
28. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 28 HTML, Style, Scriptも分離しているので、 WYSIWYGエディタを作る上でも 編集しやすかった 余談... この後のプレビュービルド時にも活用してる
29. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 29 • tree-shakingされて､コードが削減されやすいようにする • Svelteを使って､実行時ランタイムを削減する 実行コード生成ビルドの工夫まとめ 実行 SDK 事前build 実行コード生成 build on Server 実行 コード 実行速度最適化 編集 ソース SDK ソース
30. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. npmなど プレビュー SDK 事前build ビルド時間最適化 実行 コード 実行コード生成 build on Server プレビュー用 build on Browser 実行速度最適化 編集 ソース SDK ソース 実行SDK 30 サイト エディタ プレビュー コード ビルドフロー全体
31. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 31 ビルド時間を早くするには､ いかに不要な変換を減らせるかがポイント プレビュー SDK 事前build プレビュー用 build on Browser 実行 コード ビルド時間最適化 SDK ソース 編集 ソース プレビュービルド方針 • ビルドするためのコード自体もブラウザにロードが必要 • なるべくサイズの小さいビルドパッケージ＆rollup pluginを利用する
32. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 32 プレビュービルドの工夫-1 プレビュー SDK 事前build プレビュー用 build on Browser 実行 コード ビルド時間最適化 SDK ソース 編集 ソース プレビュー用ビルドでは全更新ではなく､差分更新できるようにしたい SDKでは後工程で差分更新できるように するための対応を入れる
33. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 33 SvelteのHydration機能を活用して､ コンポーネントの表示を高速化 Hydration • Fetch: サーバー上でコンポーネントを HTML にレン ダリングする • Render: その HTML がクライアントに送信され、ブ ラウザでレンダリングされる • Load: アプリケーション内のコンポーネント用の JavaScript を読み込む • Hydrate: それらのロジックをブラウザでレンダリン グされている HTML に接続していく ※ 通常はSSRで使われる プレビューSDKのビルド時にHydrationの 設定が必要
34. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 34 SDKの工夫 プレビュー SDK 事前build プレビュー用 build on Browser 実行 コード ビルド時間最適化 SDK ソース 編集 ソース SvelteのHydrationを使ってプレビューの UIコンポーネントを差分更新させる • プレビューSDKはHydrationの設定を入れた状態でビルドしておく
35. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 35 プレビュービルドの工夫-1 プレビュー SDK 事前build プレビュー用 build on Browser 実行 コード ビルド時間最適化 SDK ソース 編集 ソース プレビューを差分更新にする 描画開始までにかかる時間 (66.7ms)を短縮
36. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 36 プレビュービルドの工夫-2 プレビュー SDK 事前build プレビュー用 build on Browser 実行 コード ビルド時間最適化 SDK ソース 編集 ソース 不要な処理はしない minifyはしない
37. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 37 プレビュービルドの工夫-3 プレビュー SDK 事前build プレビュー用 build on Browser 実行 コード ビルド時間最適化 SDK ソース 編集 ソース ビルド処理自体のコードサイズが小さいを処理を使う • TypeScriptのトランスパイルには sucrase を利用 https://www.npmjs.com/package/sucrase • @rollup/plugin-json ではなく､ブラウザのJSON.parser/JSON.stringify を利用する
38. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 38 プレビュービルドの工夫-4 プレビュー SDK 事前build プレビュー用 build on Browser 実行 コード ビルド時間最適化 SDK ソース 編集 ソース npm の多くのパッケージは ESM 対応されておらず、 ブラウザ上で利用しようとすると変換が必要 • ESM対応をするproxyサービス経由でパッケージを取得する ※ ブラウザではCommonJSのパッケージが動かない 例) esm.sh / skypack
39. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 39 • SvelteのHydrationを使って差分更新 • 余計な処理は実行しない • ブラウザJSの標準関数を使う • ESM対応のパッケージProxyからパッケージを取得 プレビュービルドの工夫まとめ プレビュー SDK 事前build プレビュー用 build on Browser 実行 コード ビルド時間最適化 SDK ソース 編集 ソース
40. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 40 アクションの ブラウザでの実行速度と エディタでの編集速度を 両立するための ビルドアーキテクチャ 本日のテーマ 話すこと ビルドの工夫 ビルドアーキテクチャと ユーザー体験と編集体験 ビルドを両立させる工夫 🏻
41. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 41 • パッケージバージョンのズレが原因 • Svelteの破壊的変更もあった 2つのビルドを運用する工夫-1 課題 実行時とプレビュー時で挙動に違いが...
42. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. 42 ビルドサーバ build package I/F for プレビュー I/F for 実行コード 編集 ソース build package I/F for プレビュー I/F for 実行コード エディタ プレビュー コード サイト 実行可能 コード 2つのビルドを運用する工夫-1 ビルド処理を 単一パッケージにまとめる • ライブラリバージョンを揃える • 環境ごとの設定用に2つのI/Fを用意
43. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 43 2つのビルドを運用する工夫-2 • 実行時は実行時SDK､プレビュー時はプレビューSDKを 使えるようにしたい • Hydration版はSDKもビルドが別になる 課題 SDK内のimport先が違う...
44. 2023.07.27　｜　Developers Summit 2023　｜　 　　｜　　© PLAID Inc. 44 2つのビルドを運用する工夫-2 plugin-aliasを活用 • aliasを使い、ビルドプロセスによっ て、読み込むパッケージ・SDKを切 り替えてしまう • 開発用のSDKの切り替えもできるよ うになった
45. 2023.07.27　｜　Developers Summit 2023　｜ 　　｜　　© PLAID Inc. 45 実行用の実行速度優先のビルド • tree-shakingとSvelteの活用 まとめ プレビューのビルド時間優先のビルド • 差分更新＆不要な処理はしない build packageの共通化で 2つのビルドプロセスを効率よく運用 • パッケージの共通化とSDKの切り替え アクションの ブラウザでの実行速度と エディタでの編集速度を 両立するための ビルドアーキテクチャ