Chapter 09無料公開

Client Side Composition

okmttdhr
okmttdhr
2020.12.14に更新

次は、Client Side Compositionというパターンですが、その前に、Fragmentsという概念について説明します。

Fragmentsとは

Fragmentsとは、Micro Frontendsにおける、ページを構築するひとつの要素のことです。

上記は micro-frontends.org から拝借していますが、これらの色の違う要素のひとつひとつがFragmentsとなります。

パット見これは、Micro Frontendsという名前のイメージにかなり近いのではないでしょうか。

Fragmentsは、単なるUIコンポーネントというよりは、ビジネスドメインとして意味のある要素です。上の例では、Team Product、Team Checkout、Team Inspireでわかれており、開発チームやデプロイも別、それぞれが、ビジネスとして意味を持つ垂直分割になっています。

また、Fragmentsは、それ単体ではアプリケーションではないため、どこかに結合レイヤーが存在する必要があります。上の例では、Team Productが「商品詳細ページ」のオーナーとなっており、他のFragmentsを組み合わせています。これから説明するClient Side Compositionは、それらの結合パターンのひとつです。

FragmentsはMicro Frontendsのライブラリによって呼び方が異なっていたりします。例えば、PodiumではPodlets、OpenComponentsではComponents、PuzzleJsやTailorではFragmentsです。本書では、前述したような概念をFragmentsと呼ぶことにします。

Client Side Compositionとは

Client Side CompositionはFragmentsを結合するパターンのひとつで、その名の通り「Client SideでFragmentsを組み合わせる」アーキテクチャです。

HTML、CSS、JavaScriptを用い、ランタイムでFragmentsを描画します。いくつか具体例を見てゆきましょう。

Web Components

Web Componentsを使用するパターンです。

以下のようなマークアップを利用者側で用意し、読み込んだFragments側のJavaScriptがUIを描画します。

<my-fragment></my-fragment>
class MyFragment extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h1>Hello world</h1>`;
  }
}
    
customElements.define('my-fragment', MyFragment);

Framework Specific

なんらかのフレームワークやライブラリを使用するパターンです。Web Componentsの場合とあまり変わりませんが、例えば、Reactであれば、以下のようなマークアップに対してFragmentsを描画することができます。

<div id="app"></div>
const MyFragment = () => <h1>Hello, world</h1>;
React.render(<MyFragment />, document.getElementById('app'));

ライブラリを使う場合

Client Side Compositionを可能にするライブラリはいくつかありますが、その多くがApp Shellの中でFragmentsを使うようなスタイルを取っています。Fragmentsの開発効率のために、CLIなどを提供するものもあります。

メリット・デメリット

Client Side CompositionはシンプルなMicro Frontendsです。いずれも、マークアップとJavaScriptを読み込むだけでどこでも使うことができますし、慣れ親しんだWeb標準の技術で実現できるので安心感もあります。(Web Componentsに関してはSSRをするためのスタンダードな方法がないので、将来的にSSRをしたいのであれば採用しづらいというデメリットはあります)。

しかし、FCPやTTIが大きくなりがちなので、Lazy loadなどパフォーマンスへの考慮が必要になってきます。また、それぞれのFragmentsがフレームワーク等を使用する場合は、バンドルサイズに気をつける必要もでてきます。そのような細かいことをカバーするのに、App Shellレイヤーを提供するライブラリも考慮に入れるケースもあるでしょう。

まとめ

Client Side CompositionというCompositionパターンをみました。ランタイムでの結合は理解がしやすく、フロントエンドエンジニアにも馴染みやすい手法だと思います。