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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です