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

by berlysia

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

誰 - berlysia （べるりしあ、と読む） - 株式会社ドワンゴ在籍教育事業のWebフロントエンド担当 - Webフロントをやる人 - Webフロントのためにいろいろやる人

Slide 3

Slide 3 text

お久しぶりの人はお久しぶり - 昨年は個人でトークしてました - 今年は会社の枠でお話しします - 昨年の話を知らなくてももちろん大丈夫ですが、実は同じコードベースの話です

Slide 4

Slide 4 text

おしながき - 誰に向けて話すか - 「マイクロフロントエンド」の簡単な確認 - ドワンゴ教育事業の事例を紹介 - このマイクロフロントエンド事例の特徴 - この事例で活躍する通信手段

Slide 5

Slide 5 text

誰に向けて話すか - マイクロフロントエンドにふんわり関心がある人 - 流行りのライブラリを使わなくてもマイクロフロントエンドの形にはなります - これでもマイクロフロントエンドの嬉しさと苦しさはあります - マイクロフロントエンドを実践している人 - 一事例としてご笑納ください

Slide 6

Slide 6 text

「マイクロフロントエンド」の確認 https://micro-frontends.org/

Slide 7

Slide 7 text

「マイクロフロントエンド」の確認 https://micro-frontends.org/ マイクロサービスで得たいこと - デプロイ単位の独立 - デプロイ頻度の向上 - コードベース・技術選択の独立 - 捨てやすい、変えやすい - 自律した組織による意思決定 - 組織的にも疎結合 - サービス境界によるレジリエンス - 障害の範囲が狭められる

Slide 8

Slide 8 text

Slide 9

Slide 9 text

「マイクロフロントエンド」の確認モノリスフロントエンドモノリスフロントエンドマイクロサービスマイクロサービスマイクロサービスフロントエンドマイクロサービスマイクロサービスマイクロサービスマイクロフロントエンドマイクロサービスこうでもいいしこうでもいいしこうでもいいでしょマイクロフロントエンドマイクロサービスマイクロサービス

Slide 10

Slide 10 text

「マイクロフロントエンド」の確認マイクロサービスで得たいこと（再掲 - デプロイ単位の独立 - デプロイ頻度の向上 - コードベース・技術選択の独立 - 捨てやすい、変えやすい - 自律した組織による意思決定 - 組織的にも疎結合 - サービス境界によるレジリエンス - 障害の範囲が狭められるマイクロフロントエンドマイクロサービスマイクロフロントエンドマイクロサービスマイクロサービスフロントエンドマイクロサービスマイクロサービスマイクロサービス

Slide 11

Slide 11 text

Slide 12

Slide 12 text

オンライン学習サービス『N予備校』 - 双方向参加型の生授業 - コメントやアンケート、挙手の機能で授業に参加 - アーカイブ機能で見逃しても安心 - 完全オリジナル教材 - 300以上のコース、多彩な教材 - 大学受験からプログラミング、クリエイター講座まで - フォーラム - 質問掲示板で疑問を解消 - 他の受講者の質問に答えたり、講師の方が答えることも

Slide 13

Slide 13 text

オンライン学習サービス『N予備校』生徒数日本一の通信制高校『N高等学校』『S高等学校』でも利用 - 高校卒業のための日々の学習から、定期試験にも使います - 単位が認定される学習を、『N予備校』のシステム上で行っています

Slide 14

Slide 14 text

どのようにマイクロフロントエンドなのか

Slide 15

Slide 15 text

どのようにマイクロフロントエンドなのか

Slide 16

Slide 16 text

どのようにマイクロフロントエンドなのか

Slide 17

Slide 17 text

どのようにマイクロフロントエンドなのか iframe

Slide 18

Slide 18 text

iOSネイティブ版

Slide 19

Slide 19 text

iOSネイティブ版 WebView

Slide 20

Slide 20 text

バックエンドとのざっくり関係図各ホストアプリケーション N予備校のマイクロサービス - ドワンゴ教育サービス開発者ブログ APIゲートウェイマイクロサービス群教材マイクロサービス教材フロントエンド

Slide 21

Slide 21 text

「マイクロフロントエンド」の確認（再掲モノリスフロントエンドモノリスフロントエンドマイクロサービスマイクロサービスマイクロサービスこうでもいいしこうでもいいしこうでもいいでしょフロントエンドマイクロサービスマイクロサービスマイクロサービスマイクロフロントエンドマイクロサービスマイクロフロントエンドマイクロサービスマイクロサービス

Slide 22

Slide 22 text

教材周りのイメージ図 Webフロントエンドマイクロサービスマイクロサービスマイクロサービス API Gateway 教材マイクロ何かマイクロサービスマイクロサービスマイクロサービス API Gateway 教材マイクロフロントエンド教材マイクロサービスリリース当初リリース2年後 Webフロントエンド分離

Slide 23

Slide 23 text

なぜこうなったか - 「マイクロフロントエンド」を知っていたとは考えにくい - マイクロフロントエンドという言葉が知られたのは 2016年末らしい - N予備校のリリースは 2016年4月 - 日本で最初に盛り上がったのが 2018年？ - ここだけを扱う専門チームがあったわけでもない - 当初はバックエンドの管理、じきにフロントエンドの持ち物となる - かつては機動力を要求される部分ではなかった - サービスの要求に対する技術的アプローチの結果ではないか - Web/iOS/Androidから同じ教材が使えて、同じ体験ができるようにしたかった - WebViewから使うことを前提にすると、 Webのときもiframeにすればやることは同じ - テキストとして自由度の高い Webページが書けるので、諸々良い感じに封じ込めたい

Slide 24

Slide 24 text

Slide 25

Slide 25 text

この事例の特徴『マイクロフロントエンド』（Luca Mezzalira 著、嶋田健志訳）を参考に整理基本的な評価は、同書の水平分割でiframeを使うパターンに近い - デプロイ可能性 - モジュール性 - 簡素性 - テスト容易性 - パフォーマンス - 開発者体験 - スケーラビリティ - 全体管理

Slide 26

Slide 26 text

この事例の特徴 1/4 デプロイ可能性 - フロントエンド同士の関係においては全く問題がなかった - コミュニケーション部分を変更しない限り心配がないモジュール性 - 視覚的にiframeの枠を絶対に超えてこない安心感は大きい - ブラウジングコンテキストが別なので、後始末も気楽 - 教材として入稿されたものを再生する関係にあるが、全体が教材の質に影響されにくい

Slide 27

Slide 27 text

この事例の特徴 2/4 簡素性 - iframeやWebViewとの通信部分はかなり問題になった - iframeの寸法管理も工夫が必要 - iframeの中身にあわせてiframeの寸法を調節したかったりする - ドメインの特殊性ゆえに特に問題になったが、 iframeじゃなかったらもっと大変だったテスト容易性 - E2Eテストはスマホもあるのでコストが高い。やってない - iframeのマイクロフロントエンドだから難しいということはなかった

Slide 28

Slide 28 text

この事例の特徴 3/4 パフォーマンス - iframeを10個20個と開くと重いので、必要ないものはunloadしたい - ログイン前提なのでインデックスされない問題は気にならない開発者体験 - マイクロフロントエンド単体で完結する限りは全く困難はない - ホストアプリケーションと結合しての動作確認やテストは困難を極める - Webだけならまだよいが、 iOS/Androidとの結合はかなり困難 - しかしWebViewで実装されていなかったら、それこそ困難であったろう

Slide 29

Slide 29 text

この事例の特徴 4/4 スケーラビリティ - マイクロフロントエンド実装としては完全に静的で、問題なし全体管理 - 別チーム管理のホストアプリケーションと連携して何かをやる、は結構大変 - できるだけ避けようとしてしまうくらいに大変 -

Slide 30

Slide 30 text

この作りは実際どうか今のところ成功していると言ってよい - 綺麗に教材というコアサブドメインを切り出せているから - 互いを気にせず、連携手段とレイアウトのことだけ守っていればよい - 教材のことを全然知らなくてもホストアプリケーションの開発ができる大規模なリファクタリングもその後経験した - ホストアプリケーションの存在を意識せずにリファクタリングできた - 連携手段を維持していればよいので、守るべきことも明確だった

Slide 31

Slide 31 text

自然発生ゆえにマイクロフロントエンドの自覚がなかったからか、境界を乱すコードはあった - iframeの中をいじってしまっていたり - iframeの中のイベントを外からpreventDefaultしていたり - マイクロフロントエンド側の動作と調整しながら直す必要があり、これがあると大変 - iframeではないパターンであっても、こういうことをやってはいけない

Slide 32

Slide 32 text

Slide 33

Slide 33 text

マイクロフロントエンド間の連携理想を言えば…… - 個別のマイクロフロントエンドを表示して終わりたいしかし現実には…… - 〇〇をしたときに、別のマイクロフロントエンドの表示を変えたいコンポーネントでならよく慣れた道具が使えたが、 iframeではイベントバスやpub/subのような道具が欲しくなるこの事例では、WebViewも対応がいる

Slide 34

Slide 34 text

iframeを使った場合の連携手段 - URLのクエリパラメータ - DOMイベント - window.postMessage - BroadcastChannel - Channel Messaging API

Slide 35

Slide 35 text

URLのクエリパラメータ - みなさんご存じクエリパラメータ - iframe/WebViewのマイクロフロントエンドに初期値を与えるのに有用 - 初期値が与えられればよいのなら、もっとも簡素に使える

Slide 36

Slide 36 text

DOMイベント - sameoriginなiframeで、双方向のやり取りができる - dispatchする側はバブリングさせてもよいかもしれない

Slide 37

Slide 37 text

window.postMessage - crossoriginなiframeともやり取りできる - 悪意のあるサイトからのメッセージも受け取りうるので注意がいる

Slide 38

Slide 38 text

BroadcastChannel - sameoriginのウィンドウなどの間で共有する名前付きチャンネル - 複数のタブ間での連携みたいな使い方の方がよさそう

Slide 39

Slide 39 text

Channel Messaging API - 一対のMessagePortを生成し、片方をpostMessageでtransferする - 対象のコンテキストと通信路を開くようなイメージ - iframeとWebViewを使うなら個人的に推し

Slide 40

Slide 40 text

WebViewを使った場合の連携手段 - URLのクエリパラメータ - 同様なので省略。WebViewの初期化時に情報を与えられる - カスタムURIスキーム - (Android)WebView#createWebMessageChannel() - (iOS, WKWebView)WKUserContentController

Slide 41

Slide 41 text

カスタムURIスキーム - カスタムURIスキーム - ページ遷移をホスト側で listenして、ページ遷移自体は起こさない - iOSでもAndroidでも、結構古くても動く - WebViewからホストアプリケーションへの一方通行

Slide 42

Slide 42 text

WebView#createWebMessageChannel() - Androidのみ - Channel Messaging APIと同じような使い勝手 - WebView側のページはほぼ透過的に実装できる - Structured Cloneアルゴリズムには対応していないので JSON文字列にする - 双方向にやり取りできる

Slide 43

Slide 43 text

WKUserContentController - iOS, WKWebViewのみ - WebViewからホストへの単方向のみ - 下記のような関数が生えて呼ぶとホスト側で受け取れる - ホスト側からWebViewへは evaluateJavaScript するしかない……？ - そのための受け口を WebView側の実装に用意する必要がある - もっといい方法あったら教えてほしいです

Slide 44

Slide 44 text

話したこと - ドワンゴ教育事業の『N予備校』自然発生したマイクロフロントエンドの事例を紹介した - サービスの要求に技術面でこたえようとした結果と思われるも結果的に綺麗なコアサブドメインの単位になっていた - マイクロフロントエンドの理想的な分割単位を満たしていた！ - iframe/WebViewで組み合わせるマイクロフロントエンドにおける実用的なフロントエンド間連携手段を紹介した

Slide 45

Slide 45 text

We are hiring ドワンゴ教育事業では、未来の当たり前の教育を作るメンバーを募集しています少しでも興味を持っていただけたら、カジュアル面談や、本日のスポンサーブースでもお話ししましょう本日のブースに設置しているアンケートにお答えいただいた方限定で N予備校の有料コンテンツを来年2月末まで利用できるよう用意しています

Slide 46

Slide 46 text

未来の「当たり前」の教育をつくる Vision / Mission ほんの少し先の未来、ネットで学ぶときに「当たり前」とされるようなサービスを創るのは、私たちにしかできない。日々そう考えて企画開発しています。それは教育の「当たり前」を変えること。この前人未到の挑戦に、加わってみませんか。