今回の記事について

マイクロフロントエンドにおいてどのような技術が使われているかを実例を交えながら紹介します。
2018年時点で実現方法は以下の2択。

ifameを使う方法
Web Components(Custom Elements)を使う方法

ただ、2019年に掲載されたMicro Frontends によれば、

Server-side template composition
Build-time integration
Run-time integration via JavaScript

の3つが追加されていた。
この３つの中で推奨されていたのがRun-time integration via JavaScriptだった。

今回は

ifameを使う方法
Web Components(Custom Elements)を使う方法
Run-time integration via JavaScript

を紹介します。

残りの

Server-side template composition
Build-time integration

は次回以降に紹介します。

また、マイクロフロントエンドの実現方法もしくはMicro Frontendsにも載っています。

iframeを使う方法

概要

条件に応じてsrc属性を更新する方法。

長所

わかりやすい
スタイルやグローバル関数が干渉しない

短所

ほかの手法と比べて描画が遅い
柔軟性が低い

ソースコード例

<html>
  <head>
    <title>Feed me!</title>
  </head>
  <body>
    <h1>Welcome to Feed me!</h1>

    <iframe id="micro-frontend-container"></iframe>

    <script type="text/javascript">
      const microFrontendsByRoute = {
        '/': 'https://browse.example.com/index.html',
        '/order-food': 'https://order.example.com/index.html',
        '/user-profile': 'https://profile.example.com/index.html',
      };

      const iframe = document.getElementById('micro-frontend-container');
      iframe.src = microFrontendsByRoute[window.location.pathname];
    </script>
  </body>
</html>

（Micro Frontendsより）

実例

Spotifyが以前ifameを用いてマイクロフロントエンドに取り組んでいた。（現在はすべてReact Reduxに移行）

Web Components(Custom Elements)を使う方法

概要

React,Angular,Vue.jsなどで作られたSPA に対してそれぞれ Custom Elements を媒介に Micro Frontends を載せることができる。
各フレームワークの対応状況は Custom Elements Everywhere というサイトで確認することができる。Reactは100％対応できていない項目がある。

長所

HTMLの標準技術で実現できる
ブラウザの対応状況も改善され、IE以外のブラウザではほぼ対応している

短所

フレームワークの対応状況が良くはない

ソースコード例

React内でWeb Componentsを使う場合

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
  }
}

Web Components内でReactを使う場合

class XSearch extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    const name = this.getAttribute('name');
    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
  }
}
customElements.define('x-search', XSearch);

プレーンなHTMLを使う場合

フロントエンドエンジニアは Micro Frontends の夢を見るかの「Micro Frontends の実現方法」に書かれています。

Run-time integration via JavaScript

概要

各マイクロサービスのコンポーネントを描画する関数を<script>で読み込み、
条件に応じて動的に画面描画する方法。

長所

柔軟
コンポーネントが修正されても、コンテナアプリケーションのビルド・デプロイは不要

短所

バンドルが重複しやすい

ソースコード例

<html>
  <head>
    <title>Feed me!</title>
  </head>
  <body>
    <h1>Welcome to Feed me!</h1>

    <!-- These scripts don't render anything immediately -->
    <!-- Instead they attach entry-point functions to `window` -->
    <script src="https://browse.example.com/bundle.js"></script>
    <script src="https://order.example.com/bundle.js"></script>
    <script src="https://profile.example.com/bundle.js"></script>

    <div id="micro-frontend-root"></div>

    <script type="text/javascript">
      // These global functions are attached to window by the above scripts
      const microFrontendsByRoute = {
        '/': window.renderBrowseRestaurants,
        '/order-food': window.renderOrderFood,
        '/user-profile': window.renderUserProfile,
      };
      const renderFunction = microFrontendsByRoute[window.location.pathname];

      // Having determined the entry-point function, we now call it,
      // giving it the ID of the element where it should render itself
      renderFunction('micro-frontend-root');
    </script>
  </body>
</html>

参考

次回

Web Components(Custom Elements)を使う方法を詳しく