挨拶
どもども龍ちゃんです。ミーティングで知らない単語が出来ると困惑しますよね。エンジニア界隈だと略語が良く出てきますが、それが聞いたことのある略語だけども絶対違うってなるとますます困惑しますよね。
今回は、BFF（Backend For Frontend）について調べてざっくりとまとめてみました。BFFと聞くと「Best Friend Forever」が先に出てきてしまします（いい言葉ですね）。サクッと読めて「BFFﾁｮｯﾄﾜｶﾙ」を目指して解説していきます。
実装で採用する前にざっくりと調べてみました。それでは初めて行きましょう。
Backend For Frontend：BFF
BFFとは設計パターンです。詳細に表すなら「フロントエンドのために用意するバックエンドと通信することを前提としたバックエンド」となります。イメージとしては、以下を見ていただければと思います。
プロダクトではフロントエンドにReact＋Typescriptの構成を採用しています。表示用のデータと取得データが異なる場合ではデータ整形コードを用意する必要があり、複数のAPIを使用する場合ではAPIごとにルールが異なるりその分コーディングの必要が出てきます。「取得データがそのまま表示用データになればいいのに」という想いをかなえるのがBFFです。
BFFを採用するとクライアントはBFFとのみAPI通信を行います。BFFでデータ整形まで行った状態でクライアントに返答することで、クライアントでは取得したデータをそのまま表示することが可能になります。また複数のバックエンドに問い合わせる際も、クライアントはBFFにのみアクセスをするのでURLも通信のデータ規範も1つで良くなります。
名前にもある通り、フロントエンドのためのバックエンドですのでフロントエンドエンジニアが担当する方が合理的です（合理的の使いどころです！）。だってレスポンスの型を決めてうれしいのもフロントエンドですもん。
では、メリットとデメリットをまとめて行きます。
BFF メリット：デメリット
ここではBFFのメリットとデメリットについて説明していきます。プロダクトにはまだ採用していないので、使ってからのリアルな意見は伝えることができませんが、調べた情報をまとめておこうと思います。
メリットとしては以下にまとめました。
- フロントエンドとバックエンドの業務分離の明確化
- レスポンスをフロント用に成形することでの処理の簡略化
- バックエンド要因による依存が減るので開発体験が向上（バックエンドの差異吸収）
- キャッシュの一元化
やはり、データ整形処理を書く必要がないというのは大きなメリットになると思います。また、BFFでデータ整形を行うのでフロントの定義とバックエンドの定義両方を見て、BFFを設計することでフロントとバックエンドの差異を吸収することができます。差異については、フロント定義が「name」のストリングがバックエンド定義では「displayName」であることは多くあります。これをBFFで紐づけることでフロント定義に丸め込むことができます。また、BFFでダミーデータを作っておけばフロントは開発に注力することができます。キャッシュについては、あまり僕が理解をしていないのですがCookieなどサーバー側でのキャッシュの管理で見る場所が一つになるので楽になるかと思います。
デメリットとしては以下にまとめました。
- 開発・運用コストが増加する（通信量の増加や遅延の可能性もあり）
- BFFが止まればすべてが止まる
- BFFのデプロイが必要
- コードの冗長化（APIだけでもよくない？という瞬間）
デメリットを見るとつらいのでラフに書いてみました。フロントとバックそれぞれに加えてBFFを作る必要があるので、開発・運用コストが増大するのはもちろんですね。フロントエンドエンジニアはフロント部分とBFFのコーディングが必要になります。加えてアクセスを一元化するので、BFFが止まればフロントはデータ取得ができなくなります。この辺は本番サービスであれば対策が必要になりますね。また、BFFだけでなくBFFがアクセスするバックエンドが止まった際にどうするかという議論も必要になってくるかと思います。
最後のコードの冗長化ですが、こちらはフロント定義とバック定義の差異があまりない場合などでは、コード上で処理を挟み込む必要がないので冗長なコードを作成することになります。
終わりに
正直、BFFを採用したプロダクトを扱ったことないので実務上のメリットはわかりません。ですが、知らない単語をそのままにしたらわからない状態で変わらないのでまとめてみました。調べていくとフロントエンドの担当分野のようなので、採用して使ってみたいと思います。最近の流行だとフロントエンドの担当分野が広がっているような気がしています。
使用してから感じたメリットデメリットはもう少しお待ちください。終了次第ブログにまとめて行きたいと思います。
これからも実務で分からない単語が出てきたらブログにまとめていきます。
前回はAPIについてまとめたので置いておきます。
今回まとめるのに使用したサイトは以下になります。
- BFFとはなんなのか？
- 流行りのBFFアーキテクチャとは？｜Offers Tech Blog157
- Backends For Frontends（BFF）はじめました
- 新規開発においてBFF(Backend for Frontend) を採用すべきか
