SPEEDAでマイクロフロントエンド開発をして学んだこと

SPEEDAでいくつかのマイクロフロントエンド開発を行ってきました。
その中で、モノリスでの開発との違いやマイクロフロントエンドで開発するコツなどを学んできたので共有します。

Transcript

1. SPEEDAで マイクロフロントエンド開発 をして学んだこと 2022/09/27 冨田直希 UB Tech Vol.3
2. 目次
3. どうしてマイクロフロントエンドを導入したの？ どうやって実現しているの？ どんなマイクロフロントエンドがあるの？ 良かったこと・開発上の注意点 今後のSaaS Product Teamのマイクロフロントエンド 01 02 03 04 05 3 目次
4. SPEEDAが マイクロフロントエンド を採用した理由
5. SPEEDAがマイクロフロントエンドを採用した理由 5 もっと、リリース頻度を上げたかった もう、モノリスに機能追加したくなかった ・SPEEDAは膨大な機能をもち、回帰テストを含めリリース作業に2, 3日かかる ・多くのフィードバックを得るにはリリース頻度の向上が不可欠 ・Wicketと呼ばれるJavaのフレームワーク(2005年のフレームワーク)で作られている ・もっと機能開発をシンプルにしたかった SPEEDAがマイクロフロントエンドを採用した理由 フロントエンドを新しい技術で開発したかった ・新しい技術を取り入れることを大切にしている ・React.js, Vue.jsなどが盛んに取り入れられている状況に乗りたかった
6. SPEEDAでの マイクロフロントエンドの 実現方法
7. SPEEDAが採用した方法は 実はアンチパターン マイクロフロントエンドの実現方法はいくつかありますが、 SPEEDAでは、一般的にアンチパターンと言われる<iframe> を使っています。 Web Components非対応のIEにも対応する必要があったため です。 おことわり 7
8. まずはこちらをごらんください https://naoki-tomita.github.io/microfrontend-sample/m onolith/ SPEEDAで使っているさまざまなテクニックを取り入れた サンプルとなっております リポジトリ:https://github.com/naoki-tomita/microfrontend-sample サンプル 8
9. 実現方法 9 iframeでアプリケーションを埋めるだけ パラメータは基本はクエリで渡す ・モノリスでクエリとして 「color=%23CBBDE3」を渡している ・マイクロフロントエンドでは、location.search で取り出すことができる 実現方法　iframe編 基本はiframeでアプリケーションを埋め込んでいるだけ
10. 実現方法 10 クエリが長すぎる場合はpostMessageで渡す 実現方法　iframe編 IE11ではURLに使用できる文字長が2083文字に制限されてしまう data属性にパラメータを付与しておいて、postMessageするようにする
11. 実現方法 11 クエリが長すぎる場合はpostMessageで渡す 実現方法　iframe編 window.addEventListener↑より先に↓postMessageが実行されたら・・・？
12. 実現方法 12 postMessageで渡すタイミングは要調整 実現方法　iframe編 ・
13. 実現方法 13 postMessageで渡すタイミングは要調整 実現方法　iframe編 ・
14. 実現方法 14 postMessageで渡すタイミングは要調整 実現方法　iframe編 ・
15. 実現方法 15 コンテンツの高さが変わったことをモノリスに通知する 実現方法　iframe編 ・iframeは自分で高さを調整する機能がない - モノリス側が中のコンテンツに合わせて高さを設定しないといけない モノリスが高さを調整しないとマイクロフロントエンドが切れてしまう
16. 実現方法 16 コンテンツの高さが変わったことをモノリスに通知する 実現方法　iframe編 ・マイクロフロントエンドは定期的に高さをチェックして変化があればpostMessageする ・モノリスは高さメッセージが送られてきたら、iframeの高さを調整する
17. 実現方法 17 タイトルを変更したりモノリスにメッセージを送る 実現方法　iframe編 ・高さと同様にpostMessageを使う
18. デモ https://naoki-tomita.github.io/microfrontend-sample/m onolith/#iframe もう一度見てみる 18
19. 実現方法 19 カスタムエレメントを埋めるだけ パラメータは属性で渡す ・サンプルでは「color=#CBBDE3」と渡している ・マイクロフロントエンド側ではgetAttribute(“color”)で取得できる 実現方法　Web Components編 カスタムエレメントで作ったアプリケーションを表示しているだけ
20. 実現方法 20 モノリスに何かを渡す場合はCustomEventを使う 実現方法　Web Components編 ・マイクロフロントエンドで独自のイベントを定義してdispatchEventする ・モノリスではクリックイベントなどと同様にイベントを受けることができる
21. デモ https://naoki-tomita.github.io/microfrontend-sample/m onolith/#webcomponents もう一度改めて見てみる 21
22. どんなマイクロフロントエンドが あるのか
23. どんなマイクロフロントエンドがあるのか どんなマイクロフロントエンドがあるのか 23 • 8プロジェクト + α（開発中の機能もあります） ◦ 大半は1プロジェクトにつき、5画面以上ある ◦ Web Componentsはそのうち1プロジェクトのみ ▪ IEがなくなったのでようやく採用できました 🎉 • 2017年以降に開発された新規機能は全てマイクロフロントエンドを採用 • Angular Dart, Angular, Vue.js, Svelte, litなどを採用
24. どんなマイクロフロントエンドがあるのか どんなマイクロフロントエンドがあるのか チャート機能 ・Vue.js + TypeScript ・Flashで作られたチャート機能をHTML5で置き換えるプ ロジェクト ・さまざまな画面に埋め込まれている ・SPEEDAだけでなく、アナリストが記事を書くエディ ターにも埋め込まれている 24
25. マイクロフロントエンドを採用して よかったこと/開発上の注意点
26. よかったこと 26 好きなフレームワークが使える モノリスに触れるのは必要最低限 ・Vue.jsやSvelte、Angular Dartなどさまざまなフロントエンドフレームワークを選択できる - 技術選定の幅が広がった ・現在は、マイクロフロントエンドを埋め込む部分や、メニューの実装のみ マイクロフロントエンドにしてよかったこと
27. よかったこと 27 ちいさなアプリケーションは開発しやすい リリースを好きなタイミングで行える ・小さいので複雑度が低く、開発しやすい ・ダメなら作り直せばよいという心理的ハードルの低さ ・機能やマイクロサービス単位でリリース可能になった ・SPEEDA全体で見ると、毎日何らかのリリースが行われている マイクロフロントエンドにしてよかったこと デザイナーがデザイン修正できる ・SPEEDAをローカルで環境構築しようとすると複雑 ・そもそも生半可のPCではメモリが足りなくて起動できなかったりする ・マイクロフロントエンドだけなら環境構築も比較的簡単
28. 開発時の注意点 28 画面の高さを設定するのがちょっと大変 SPAではなくMPAになる ・デモで説明した通り、iframeでは画面の高さの調整が必要 ・Web Componentsは必要ない ・SPEEDAでは画面のURLを共有・お気に入りに保存できることを大切にしている ・マイクロフロントエンドをSPAにするとモノリス側のURLが変わらない ・マイクロフロントエンドをMPAにして、モノリスのURLを変えるようにしている 開発時の注意点 ページのタイトルを変更するのがちょっと大変 ・モノリス側に影響を与えるような処理はpostMessageを使わなければいけない <iframe> <iframe>
29. 開発時の注意点 29 画面全体を使うデザインが使えない ・iframe外にスタイルを当てられない ・postMessageで頑張ればできるかも・・・？ 開発時の注意点 <iframe>
30. 結果発表 30 もっと、リリース頻度を上げたかった もう、モノリスに機能追加したくなかった 上がった。週に1度しかリリースできなかったところから、1日に何度もリリースを行うようになり ました。 バグ修正は一部あるものの、モノリスに新規機能を追加することは無くなりました。マイクロフロン トエンドを埋め込むためのコードを書く程度となりました。 結果 フロントエンドを新しい技術で開発したかった Vue.js, Svelte, Angular, Angular Dart, litなど、さまざまなフレームワークを用いてフロントエンド 開発を行っています。
31. SaaS Product Teamの マイクロフロントエンドの これから
32. マイクロフロントエンドのこれから 32 Web Componentsでやっていく プロダクト間でマイクロフロントエンドを共有していきたい iframeしか選択できない時代は終わりました。Web Componentsであればiframeの使いづらい部分 もカバーできることが多いので、Web Componentsに移行していきたいです。 プロダクト内や社内で使うCMSでマイクロフロントエンドを共有し、部品として利用してきまし た。これをプロダクト間に広げ、新たな機能やプロダクトの立ち上げをもっと早くできるようにして いきたいと考えています。もしかするともっと先には外部の方にマイクロフロントエンドを利用して もらうということもあるかもしれません。 マイクロフロントエンドのこれから 既存の機能をマイクロフロントエンドで置き換えていきたい 既存の機能はまだまだモノリスに埋まったままのものが多く、修正するとなると大変な面も多いで す。ですが、マイクロフロントエンドで置き換えられればもっとフットワーク軽く改善のサイクルを 回していくことができます。
33. ご清聴ありがとうございました 33 UZABASE

34. 34 はじめに 私はSPEEDAでいくつかのプロジェクトを渡り歩きながらマイクロフロント エンドの開発を行ってきました。その中で感じた、モノリシックなアプリ ケーションの開発との違いを紹介します。半ば工場見学のような気持ちで見 ていただければと思います。
35. まずはこちらをごらんください https://naoki-tomita.github.io/microfrontend-sample/m onolith/ SPEEDAで使っているさまざまなテクニックを取り入れた サンプルとなっております リポジトリ:https://github.com/naoki-tomita/microfrontend-sample サンプル 35
36. どんなマイクロフロントエンドがあるのか どんなマイクロフロントエンドがあるのか ニュース機能 ・初マイクロフロントエンド ・データパートナーからもらっているニュースを検索でき る機能 ・AngularDart ・もともとモノリス上に作られていた機能をマイクロフロ ントエンド + マイクロサービスでリプレースした ・ニュース検索機能は、他の機能からも部品として使われ ている 36
37. どんなマイクロフロントエンドがあるのか どんなマイクロフロントエンドがあるのか トレンド、R&D、FlashOpinion、etc... 2019年以降に作られたさまざまな機能たち。 37
38. どんなマイクロフロントエンドがあるのか どんなマイクロフロントエンドがあるのか ニュースフィード ・Web Componentsで構築したプロジェクト ・litというWeb Components nativeなフレームワークを採 用 38
39. 開発時の注意点 39 E2Eテストがちょっと複雑になる ・SPEEDAではSelenide(WebDriver)を使ってE2Eテストを書いている ・iframe内を操作するにはiframeにフォーカスしないといけない/iframe外を操作するにはモノリス にフォーカスしないといけない ・Web Componentsの場合はShadow DOMを通じてエレメントを操作しないといけない 開発時の注意点 プロダクトの全体的なデザインの修正が大変 ・マイクロフロントエンド全てのスタイルを修正しなければならない ・開発中のマイクロフロントエンドなら担当チームにお任せできるが、開発してないものは難しい ・デザインを統一できるCSSフレームワークのようなものがあればいいかも
40. iframe or Web Components 40 iframeとは？ ・Webページ内に別のWebページを埋め込むことができる技術 ・Google Map、YouTube、Twitterのタイムラインなど、埋め込んで表示できるウィジェットで利 用されていることが多い Web Components（カスタムエレメント）とは？ ・独自のHTMLタグを定義できる ・利用側はJSをロードしてHTMLタグを埋め込みたいところに書くだけでよい 以下のような記述でランダムに画像を表示するコンポーネントが表示されます。 iframe? Web Components?