Skip to content

マイクロフロントエンドを読み終えた

Posted on:2023年1月28日

O’Reilly で出版されている書籍「マイクロフロントエンド」を読み終えたので、簡単に感想を書いておきます。

title

O'Reilly Japan - マイクロフロントエンド

DAZNでアーキテクトを務めた著者が、マイクロフロントエンドアーキテクチャの概念、長所と短所、導入のポイントなどを俯瞰的に説明します。プロジェクトに適したアーキテクチャをどのように見極めるべきかについ...

概要

マイクロフロントエンドの概要については、以下記事の表現が自分もしっくりきました。

自分の理解だと、フロントエンドを一定以上にスケールさせようとすると、レガシーの古いビルド境界や、コンウェイの法則によるチーム単位のコンポーネントが出てくる。 これらをメタに管理するシステムを作って、複数のビルドを協調させる試み。

https://mizchi.dev/202008052318-microfrontend-single-spa

もう少し追記すると、複数のフロントエンドアプリケーションを組み合わせて構成されるフロントエンドアーキテクチャのことです。
マイクロサービスアーキテクチャと同様に、複数のアプリケーションを組み合わせて構成することで、開発・運用・保守などの品質を向上させることを目的としています。

すでにマイクロサービスについてまとめられている記事もたくさんあるので、書籍を買う前にこちらで概要を把握するのも良いかもしれません。

title

フロントエンドエンジニアは Micro Frontends の夢を見るか | メルカリエンジニアリング

Mercari Advent Calendar 2018 の6日目はフロントエンドチームの @vwxyutarooo がお送りします。このタイトルが言いたくて Micro Frontends の記事を...

マイクロフロントエンド · マイクロフロントエンド入門

感想

本文中では、「垂直分割」「水平分割」といった考え方、それに対してどうアプローチをかけていくかなどが詳細に書かれています。
水平分割アーキテクチャで推奨されているモジュールフェデレーションのアプローチについては印象的でした。
書籍では webpack5 の Module Federation での実装方法なども詳細に書かれています。

title

Module Federation | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ...

ただし、本書籍で何度も表記がされていましたが、マイクロフロントエンドは銀の弾丸ではないということ。
メリットもあればデメリットも当然あり、アーキテクチャを考慮する上ではトレードオフの関係性がほぼ出てくるといっても過言ではないので、まずは PoC から始めてみることや、手掛けているサービスの性質やコンテキストを理解し、最適化を目指すのが良いとされています。
また小規模のサービスというより、中規模〜大規模のサービスで効果を発揮するので、むやみにマイクロフロントエンドの概念を取り入れるのは避けたほうが良いとされています。