フロントエンドモノリスについて

December 17, 2020

BaHo Advent Calendar 2020 17 日目担当の BaHo 猫 です。

今日はフロントエンドのソフトウェア設計についての話を軽く書きたいと思います。

フロントエンドモノリスとは

フロントエンドとバックエンドを分離し、アプリケーションのビュー全体を 1 つの SPA として扱っている構造。 バックエンドの量子にかかわらず、フロントエンドは 1 つに集約されるため、フロントエンドだけ見るとアーキテクチャ量子は 1。

最近よく見かける設計パターンで、Redux や MobX 等のストア管理ライブラリを利用してフロントエンド全体の値を一括管理している。 (ストアが 1 つしか作れないのは Redux の話だろと思うかもしれないが、ストアが分割されていてもデプロイ単位として構造に変化がないため、内部的にお互い依存していると考えている。)

フロントエンド設計が最近になってバックエンド(アプリケーション)設計から独立してきた背景として、アプリケーションに対してユーザセンタードな体験が求められるようになってきたからだ。 今までのサービスは、本当に提供したい性質だけに関心を当て、それを中心にすべての設計を実施していたが、上記の理由によってサービスが提供したい本来の性質とは異なる関心を持たなければいけなくなった。 それにより、ユーザセンタードな関心をフロントエンド側へ委譲することでバックエンドロジックはサービスが持つピュアな性質のみを関心事にできるようになった。

一方、最近はユーザ体験について多くの議論が行われ、元々は小さい関心のはずだったフロントエンドの関心が肥大しつつある。 肥大化した関心がフロントエンドに巨大なモノリスを打ち立てる日はそう遠くないのかもしれない。 少なくとも筆者の観測範囲では既にそのような事象が発生している。

結局何が言いたいのか

巨大な SPA を作るのはやめよう