BFF (Backends For Frontends) [Web開発]

BFF (Backends For Frontends)

参考：

BFF (Backends For Frontends) 超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由 | ＠IT

マイクロサービスアーキテクチャにおける API コールの仕方と HTML レンダリング – Qiita

概要

• モノリシック ⇔ マイクロサービス (バックエンドの分割)
• フロントエンド (ブラウザ / ネイティブアプリ) ⇄ BFF (SSR / API の集約) ⇄ バックエンド (API / データベース)

参考：

APIGateway パターンと BFF | koukiblog

BFF (Backends For Frontends) の話 | Keepdata Blog

マイクロサービスの思想から捉える Backends for Frontendsとその類似パターン | FiNC Tech Blog

マイクロサービスの思想から捉える Backends for Frontendsとその類似パターン| Speaker Deck

BFF に取り組む開発者たちが語る「UIT#3 The “Backends for Frontends” sharing」| LINE ENGINEERING

アプリケーションサーバーアーキテクチャの歴史

• ブラウザ + モノリシックな Web アプリ (1990年代半ば〜)
• ネイティブアプリ + モノリシックな API サーバー (2007年〜)
• SPA + モノリシックな API サーバー (2007年〜)
• SPA / ネイティブアプリ + マイクロサービス (2011年〜)
• BFF (2015年〜)

参考：

トレンドは優れた UX と SPA・BFF！ 急成長企業の最新フロントエンド開発を体験しよう | CodeZine コードジン

ユースケース

• API ゲートウェイ
• SSR (Server Side Rendering)
• セッション管理
• ファイルアップロード
• WebSocket / SSE (Server Sent Events) / ロングポーリング

参考：

BFF (Backends For Frontends) の5つの便利なユースケース | ＠IT

アンチパターン

• スパースコミュニケーション (開発チーム間のコミュニケーション不足)
• ファットフロント (フロントエンドの役割が過大になる)
• ビッグバンジョイント (全ての機能をいきなり全部結合して起こる不具合)

参考：

BFF (Backends For Frontends) 実践における3つのアンチパターンと、その回避策 | ＠IT

BFF Antipattern | Speaker Deck

Flowtype による型マネジメント (内部設計)

• Gateways
• Presenters
• UseCases
• Controllers
• Domain (Entities)

参考：

BFF の設計と flowtype – Qiita

DDD + Clean Architecture + UCDOM Full版 | Speaker Deck

uber-web/thrift2flow: Converts Thrift specs into Flow JavaScript type definitions – GitHub

yayoc/swagger-to-flowtype: Generate Flow types from swagger file – GitHub