今回の記事について
マイクロフロントエンドにおいてどのような技術が使われているかを実例を交えながら紹介します。
2018年時点で実現方法は以下の2択。
- ifameを使う方法
- Web Components(Custom Elements)を使う方法
ただ、2019年に掲載されたMicro Frontends によれば、
- Server-side template composition
- Build-time integration
- Run-time integration via JavaScript
の3つが追加されていた。
この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%対応できていない項目がある。
長所
短所
- フレームワークの対応状況が良くはない
ソースコード例
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)を使う方法を詳しく