自然発生した実装パターンに、マイクロフロントエンドと名がつきました / JSConf JP 2022

Transcript

1. 自然発生した実装パターンに マイクロフロントエンドと 名がつきました @berlysia / JSConf JP 2022
2. 誰 - berlysia （べるりしあ、と読む） - 株式会社ドワンゴ在籍 教育事業のWebフロントエンド担当 - Webフロントをやる人 - Webフロントのためにいろいろやる人
3. お久しぶりの人はお久しぶり - 昨年は個人でトークしてました - 今年は会社の枠でお話しします - 昨年の話を知らなくてももちろん大丈夫ですが、 実は同じコードベースの話です
4. おしながき - 誰に向けて話すか - 「マイクロフロントエンド」の簡単な確認 - ドワンゴ教育事業の事例を紹介 - このマイクロフロントエンド事例の特徴 - この事例で活躍する通信手段
5. 誰に向けて話すか - マイクロフロントエンドにふんわり関心がある人 - 流行りのライブラリを使わなくても マイクロフロントエンドの形にはなります - これでもマイクロフロントエンドの嬉しさと苦しさはあります - マイクロフロントエンドを実践している人 - 一事例としてご笑納ください
6. 「マイクロフロントエンド」の確認 https://micro-frontends.org/
7. 「マイクロフロントエンド」の確認 https://micro-frontends.org/ マイクロサービスで得たいこと - デプロイ単位の独立 - デプロイ頻度の向上 - コードベース・技術選択の独立 - 捨てやすい、変えやすい - 自律した組織による意思決定 - 組織的にも疎結合 - サービス境界によるレジリエンス - 障害の範囲が狭められる
8. 「マイクロフロントエンド」の確認 https://micro-frontends.org/ マイクロサービスで得たいこと - デプロイ単位の独立 - デプロイ頻度の向上 - コードベース・技術選択の独立 - 捨てやすい、変えやすい - 自律した組織による意思決定 - 組織的にも疎結合 - サービス境界によるレジリエンス - 障害の範囲が狭められる えっ、フロントは？
9. 「マイクロフロントエンド」の確認 モノリス フロント エンド モノリス フロント エンド マイクロ サービス マイクロ サービス マイクロ サービス フロント エンド マイクロ サービス マイクロ サービス マイクロ サービス マイクロ フロント エンド マイクロ サービス こうでもいいし こうでもいいし こうでもいいでしょ マイクロ フロント エンド マイクロ サービス マイクロ サービス
10. 「マイクロフロントエンド」の確認 マイクロサービスで得たいこと（再掲 - デプロイ単位の独立 - デプロイ頻度の向上 - コードベース・技術選択の独立 - 捨てやすい、変えやすい - 自律した組織による意思決定 - 組織的にも疎結合 - サービス境界によるレジリエンス - 障害の範囲が狭められる マイクロ フロント エンド マイクロ サービス マイクロ フロント エンド マイクロ サービス マイクロ サービス フロント エンド マイクロ サービス マイクロ サービス マイクロ サービス
11. おしながき - 誰に向けて話すか - 「マイクロフロントエンド」の簡単な確認 - ドワンゴ教育事業の事例を紹介 - このマイクロフロントエンド事例の特徴 - この事例で活躍する通信手段
12. オンライン学習サービス『N予備校』 - 双方向参加型の生授業 - コメントやアンケート、挙手の機能で授業に参加 - アーカイブ機能で見逃しても安心 - 完全オリジナル教材 - 300以上のコース、多彩な教材 - 大学受験からプログラミング、クリエイター講座まで - フォーラム - 質問掲示板で疑問を解消 - 他の受講者の質問に答えたり、講師の方が答えることも
13. オンライン学習サービス『N予備校』 生徒数日本一の通信制高校『N高等学校』『S高等学校』でも利用 - 高校卒業のための日々の学習から、定期試験にも使います - 単位が認定される学習を、『N予備校』のシステム上で行っています
14. どのようにマイクロフロントエンドなのか
15. どのようにマイクロフロントエンドなのか
16. どのようにマイクロフロントエンドなのか
17. どのようにマイクロフロントエンドなのか iframe
18. iOSネイティブ版
19. iOSネイティブ版 WebView
20. バックエンドとのざっくり関係図 各ホスト アプリケーション N予備校のマイクロサービス - ドワンゴ教育サービス開発者ブログ APIゲートウェイ マイクロサービス群 教材マイクロサービス 教材フロントエンド
21. 「マイクロフロントエンド」の確認（再掲 モノリス フロント エンド モノリス フロント エンド マイクロ サービス マイクロ サービス マイクロ サービス こうでもいいし こうでもいいし こうでもいいでしょ フロント エンド マイクロ サービス マイクロ サービス マイクロ サービス マイクロ フロント エンド マイクロ サービス マイクロ フロント エンド マイクロ サービス マイクロ サービス
22. 教材周りのイメージ図 Webフロントエンド マイクロ サービス マイクロ サービス マイクロ サービス API Gateway 教材 マイクロ 何か マイクロ サービス マイクロ サービス マイクロ サービス API Gateway 教材 マイクロ フロント エンド 教材 マイクロ サービス リリース当初 リリース2年後 Webフロントエンド 分離
23. なぜこうなったか - 「マイクロフロントエンド」を知っていたとは考えにくい - マイクロフロントエンドという言葉が知られたのは 2016年末らしい - N予備校のリリースは 2016年4月 - 日本で最初に盛り上がったのが 2018年？ - ここだけを扱う専門チームがあったわけでもない - 当初はバックエンドの管理、じきにフロントエンドの持ち物となる - かつては機動力を要求される部分ではなかった - サービスの要求に対する技術的アプローチの結果ではないか - Web/iOS/Androidから同じ教材が使えて、同じ体験ができるようにしたかった - WebViewから使うことを前提にすると、 Webのときもiframeにすればやることは同じ - テキストとして自由度の高い Webページが書けるので、諸々良い感じに封じ込めたい
24. おしながき - 誰に向けて話すか - 「マイクロフロントエンド」の簡単な確認 - ドワンゴ教育事業の事例を紹介 - このマイクロフロントエンド事例の特徴 - この事例で活躍する通信手段
25. この事例の特徴 『マイクロフロントエンド』（Luca Mezzalira 著、嶋田 健志 訳）を参考に整理 基本的な評価は、同書の水平分割でiframeを使うパターンに近い - デプロイ可能性 - モジュール性 - 簡素性 - テスト容易性 - パフォーマンス - 開発者体験 - スケーラビリティ - 全体管理
26. この事例の特徴 1/4 デプロイ可能性 - フロントエンド同士の関係においては全く問題がなかった - コミュニケーション部分を変更しない限り心配がない モジュール性 - 視覚的にiframeの枠を絶対に超えてこない安心感は大きい - ブラウジングコンテキストが別なので、後始末も気楽 - 教材として入稿されたものを再生する関係にあるが、全体が教材の質に影響されにくい
27. この事例の特徴 2/4 簡素性 - iframeやWebViewとの通信部分はかなり問題になった - iframeの寸法管理も工夫が必要 - iframeの中身にあわせてiframeの寸法を調節したかったりする - ドメインの特殊性ゆえに特に問題になったが、 iframeじゃなかったらもっと大変だった テスト容易性 - E2Eテストはスマホもあるのでコストが高い。やってない - iframeのマイクロフロントエンドだから難しいということはなかった
28. この事例の特徴 3/4 パフォーマンス - iframeを10個20個と開くと重いので、必要ないものはunloadしたい - ログイン前提なのでインデックスされない問題は気にならない 開発者体験 - マイクロフロントエンド単体で完結する限りは全く困難はない - ホストアプリケーションと結合しての動作確認やテストは困難を極める - Webだけならまだよいが、 iOS/Androidとの結合はかなり困難 - しかしWebViewで実装されていなかったら、それこそ困難であったろう
29. この事例の特徴 4/4 スケーラビリティ - マイクロフロントエンド実装としては完全に静的で、問題なし 全体管理 - 別チーム管理のホストアプリケーションと連携して何かをやる、は結構大変 - できるだけ避けようとしてしまうくらいに大変 -
30. この作りは実際どうか 今のところ成功していると言ってよい - 綺麗に教材というコアサブドメインを切り出せているから - 互いを気にせず、連携手段とレイアウトのことだけ守っていればよい - 教材のことを全然知らなくてもホストアプリケーションの開発ができる 大規模なリファクタリングもその後経験した - ホストアプリケーションの存在を意識せずにリファクタリングできた - 連携手段を維持していればよいので、守るべきことも明確だった
31. 自然発生ゆえに マイクロフロントエンドの自覚がなかったからか、境界を乱すコードはあった - iframeの中をいじってしまっていたり - iframeの中のイベントを外からpreventDefaultしていたり - マイクロフロントエンド側の動作と調整しながら直す必要があり、これがあると大変 - iframeではないパターンであっても、こういうことをやってはいけない
32. おしながき - 誰に向けて話すか - 「マイクロフロントエンド」の簡単な確認 - ドワンゴ教育事業の事例を紹介 - このマイクロフロントエンド事例の特徴 - この事例で活躍する通信手段
33. マイクロフロントエンド間の連携 理想を言えば…… - 個別のマイクロフロントエンドを表示して終わりたい しかし現実には…… - 〇〇をしたときに、別のマイクロフロントエンドの表示を変えたい コンポーネントでならよく慣れた道具が使えたが、 iframeではイベントバスやpub/subのような道具が欲しくなる この事例では、WebViewも対応がいる
34. iframeを使った場合の連携手段 - URLのクエリパラメータ - DOMイベント - window.postMessage - BroadcastChannel - Channel Messaging API
35. URLのクエリパラメータ - みなさんご存じクエリパラメータ - iframe/WebViewのマイクロフロントエンドに初期値を与えるのに有用 - 初期値が与えられればよいのなら、もっとも簡素に使える
36. DOMイベント - sameoriginなiframeで、双方向のやり取りができる - dispatchする側はバブリングさせてもよいかもしれない
37. window.postMessage - crossoriginなiframeともやり取りできる - 悪意のあるサイトからのメッセージも受け取りうるので注意がいる
38. BroadcastChannel - sameoriginのウィンドウなどの間で共有する名前付きチャンネル - 複数のタブ間での連携みたいな使い方の方がよさそう
39. Channel Messaging API - 一対のMessagePortを生成し、 片方をpostMessageでtransferする - 対象のコンテキストと 通信路を開くようなイメージ - iframeとWebViewを使うなら 個人的に推し
40. WebViewを使った場合の連携手段 - URLのクエリパラメータ - 同様なので省略。WebViewの初期化時に情報を与えられる - カスタムURIスキーム - (Android)WebView#createWebMessageChannel() - (iOS, WKWebView)WKUserContentController
41. カスタムURIスキーム - カスタムURIスキーム - ページ遷移をホスト側で listenして、ページ遷移自体は起こさない - iOSでもAndroidでも、結構古くても動く - WebViewからホストアプリケーションへの一方通行
42. WebView#createWebMessageChannel() - Androidのみ - Channel Messaging APIと同じような使い勝手 - WebView側のページはほぼ透過的に実装できる - Structured Cloneアルゴリズムには対応していないので JSON文字列にする - 双方向にやり取りできる
43. WKUserContentController - iOS, WKWebViewのみ - WebViewからホストへの単方向のみ - 下記のような関数が生えて呼ぶとホスト側で受け取れる - ホスト側からWebViewへは evaluateJavaScript するしかない……？ - そのための受け口を WebView側の実装に用意する必要がある - もっといい方法あったら教えてほしいです
44. 話したこと - ドワンゴ教育事業の『N予備校』 自然発生したマイクロフロントエンドの事例を紹介した - サービスの要求に技術面でこたえようとした結果と思われるも 結果的に綺麗なコアサブドメインの単位になっていた - マイクロフロントエンドの理想的な分割単位を満たしていた！ - iframe/WebViewで組み合わせるマイクロフロントエンドにおける 実用的なフロントエンド間連携手段を紹介した
45. We are hiring ドワンゴ教育事業では、 未来の当たり前の教育を作るメンバーを募集しています 少しでも興味を持っていただけたら、 カジュアル面談や、本日のスポンサーブースでもお話ししましょう 本日のブースに設置しているアンケートにお答えいただいた方限定で N予備校の有料コンテンツを来年2月末まで利用できるよう用意しています
46. 未来の「当たり前」の教育をつくる Vision / Mission ほんの少し先の未来、 ネットで学ぶときに「当たり前」とされるようなサービスを創るのは、 私たちにしかできない。 日々そう考えて企画開発しています。 それは教育の「当たり前」を変えること。 この前人未到の挑戦に、加わってみませんか。