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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. iOSネイティブ版
    

    View Slide

19. iOSネイティブ版
    WebView
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide