技術部の青木峰郎です。 去年までは主にデータ分析システムの構築を担当していましたが、 最近はなぜかレシピサービスのサービス開発をやっています。 今日は、そのサービス開発をする過程で導入したBFF（Backends for Frontends）であるOrchaについて、 導入の動機と実装の詳細をお話しします。 Orcha導入にいたる経緯 まずはOrcha導入までの経緯、動機からお話ししましょう。 最初のきっかけは、わたしが去年から参加しているブックマークのようなサービスの開発プロジェクトでした。 このプロジェクトの実装のために新しいmicroserviceを追加することになったのですが、 そのときにいくつかの要望（制約）がありました。 1つめは、撤退するとなったときに、すぐに、きれいに撤退できること。 2つめが、スマホアプリからのAPI呼び出し回数はできるだけ増やしたくない、という要望です。
Webサービスの初期開発とマイクロサービス・BFF Microservices Meetup vol.5 (API Gateway & BFF) 2017/3/30 @FiNC
BFFとは Backend for Frountendの略で、UI/UXを向上させる目的でフロントエンド専用のサーバーを用意したアークテクチャパターンです。 Webアプリケーションサーバーは下記の処理を行います。 リクエストを受ける DBからデータの取得・更新 ページを構築 (これはクライアントですることも) ページ or データの返却 このうち、「DBからデータの取得・更新」とそれ以外をフロントエンドとバックエンドの役割に明確にわけます。 BFFの役割となるサーバーをクライアントをWebサーバーの間に設け、「リクエストを受ける」と「ページ or データの返却」、場合によっては「ページの構築」をここで処理します。 こうすることで、これまでリクエストというUX関わる部分をフロントエンドエンジニアの責務に移行することができます。 ページの構築をクライアントではなくサーバーで行う場合、これもBB
BFF（Backends For Frontends）超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由
BFF（Backends For Frontends）超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由：マイクロサービス/API時代のフロントエンド開発（1）（1/2 ページ） マイクロサービス/API時代のフロントエンド開発に求められる技術の1つBackends For Frontends（BFF）について解説する連載。初回は「超入門」としてBFFの概要や事例を中心に紹介する。 本連載「マイクロサービス/API時代のフロントエンド開発」では、今注目のBackends For Frontends（BFF）について数回にわたって解説します。初回である今回は「超入門」としてBFFの概要や事例を中心に紹介します。第2回はBFFの作り方について、第3回はBFFを使ったフロントエンド開発者主導のマイクロサービス／API化の手順について解説します。 想定読者は、Webア
BFF/SSRの話
Mercari Web / Frontend meetupで話した BFF/SSR の話です。
BFF（Backends For Frontends）の5つの便利なユースケース：マイクロサービス/API時代のフロントエンド開発（2） マイクロサービス/API時代のフロントエンド開発に求められる技術の1つ、Backends For Frontends（BFF）について解説する連載。今回はBFFの代表的なユースケースを5つ紹介します。 マイクロサービス/API時代のフロントエンド開発に求められる技術の1つ、Backends For Frontends（BFF）について解説する本連載「マイクロサービス/API時代のフロントエンド開発」。前回の「BFF（Backends For Frontends）超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由」では連載初回ということで、BFFの概要を紹介しました。 まだBFFは何をするサーバなのか分かりにくい面もあるかと思
Microservices Meetup で話した step by step BFF の話です。
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。2022 年 2 月入社でそこまで日が経っていないので、今回は社内の技術スタックではなく、今後社内でも検討されるかもしれない「BFF」について触れていきたいと思います。BFF（Backend For Frontend）導入することで得られるメリット/デメリット、GraphQL を用いた技術スタック事例など紹介していますので、ぜひ参考にしてもらえればと思います。 BFF とは？ BFF とは、Backend For Frontendの略称で、「フロントエンドとバックエンドの中間に配置され双方の複雑な処理を緩和させる責務を持つアーキテクチャ設計パターン」のことです。これだけだと分かりづらいので簡単にまとめると、「バックエンドの API
はじめに こんにちは。EC基盤本部SRE部プラットフォームSREの三神です。 2021年3月18日、ZOZOTOWNは大規模なリニューアルをしました。その中でも、コスメ専門モールのZOZOCOSMEと、ラグジュアリー&デザイナーズゾーンのZOZOVILLAを同時にオープンし、多くの反響をいただきました。 今回のリニューアルではBackends For Frontends（以下、BFF）にあたるZOZO Aggregation APIを構築しています。本記事ではZOZOTOWNが抱えていた課題とBFFアーキテクチャを採用した理由、またZOZO Aggregation API構築時に発生した課題と解決法についてご紹介します。 ZOZO Aggregation APIのサービスメッシュについてはこちらの記事でご紹介していますので合わせてご覧ください。 techblog.zozo.com BFFと
NestJSでスケーラブルなBFFを構築。メルカリShopsエンジニアがGraphQL活用のリアルを語る【技術選定の裏側：GraphQL編 vol.2】 | IT/Webエンジニアの転職・求人サイトFindy – GitHubからスキル偏差値を算出
ハイクラスエンジニア向け転職・求人サイト。自社開発のWeb企業の求人多数！GitHub登録をすると、IT/Web企業とマッチングします。ユーザーサクセス (キャリア)面談も実施。
LINE株式会社 古田 大志 京都開発室 / 出前館マーチャント部 クーポンサービス チームリード 2023.9.12「モジュラモノリス徹底解剖vol.2〜実践者から学ぶLunch LT〜」の登壇資料です https://findy.connpass.com/event/293748/
BFF（Backends For Frontends）実践における3つのアンチパターンと、その回避策
BFF（Backends For Frontends）実践における3つのアンチパターンと、その回避策：マイクロサービス/API時代のフロントエンド開発（終） マイクロサービス/API時代のフロントエンド開発に求められる技術の一つ、Backends For Frontends（BFF）について解説する連載。最終回は筆者の経験に基づいて、3つのBFFアンチパターンと、その回避策を紹介します。 実案件にBFFを複数回導入した筆者の経験に基づいて原因と回避策を解説 マイクロサービス/API時代のフロントエンド開発に求められる技術の一つ、Backends For Frontends（BFF）について解説する本連載「マイクロサービス/API時代のフロントエンド開発」。前回はBFFに関する5つのユースケースを紹介しました。 BFFはアーキテクチャのパターンの一種ですが、どんなときでも当てはまるものではあ
RustでProtocol BuffersからGraphQL BFFを自動生成してみた知見 | Wantedly Engineer Blog
Wantedlyでインターンをしている遠藤です。インターンのタスクとして「RustでProtocol BuffersからGraphQL BFFを自動生成する」という技術検証を行ったので、その知見を共有したいと思います。 今回の技術検証で作成したツールのソースコードはここにあります: EXPERIMENTAL] Generate GraphQL schema and gateway from Proto definitions. Licensed under either of Apache License, Version 2.0 or MIT license at your option. Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in
GraphQLの特徴を分解する ~API インターフェース・Universal BFF・API Gateway~ - Qiita
GraphQLはWeb APIを構築するためのとても強力なアプリケーション（仕様）ですが、多面的な特徴を持つためにすぐに理解しづらいところがあるのかなと思ってます。そのためこれまでにいくつか記事を書いてきました。 GraphQLはサーバーサイド実装のベストプラクティスとなるか GraphQLの全体像とWebApp開発のこれから 今回もGraphQLの解説になりますが、今回は特徴を整理し、手短に見ていきたいと思います。GraphQLの理解につながれば幸いです。 GraphQLの特徴を３つに分ける GraphQLの特徴を分けると大きく3つに分かれると考えます。(プラスでエコシステム） APIインターフェスとして Universal BFFとして API Gatewayとして (エコシステム) それぞれ見ていきます。 APIインターフェースとしてのGraphQL GraphQLの最も目立つ部分で
【追記情報】 2022/06/15 09:00 誤字修正 + cdkk8sについて言及 先日、ハンドブックを公開しました。 ここではKubernetes上で稼働させた実績値としての記録が紹介してあります。が、逆に紹介していないものもたくさんあります。検証が済んでいないもの、時間的制約から導入できなかったものなど、不完全な情報を紹介しようと思います。 したがって、何も保証するための裏付けはないので「そういうことも検討してたんだなぁ」ぐらいで読んでもらえると嬉しいです。元記事もぜひ読んでみてください。 nodejsのDocker Imageの軽量化 Docker Imageを作る際、多くの場合Image内にnode_modulesを含んだ状態でイメージを作成しています。Nodejsのベースイメージが60〜100MBくらいあるのに対して、ビルド後のイメージサイズは200MB〜1GBくらいまで膨れ
2019/03/12 : Node学園 33時限目 https://nodejs.connpass.com/event/122297/
TypeScript_BFF
モノリスからの脱却に向けた 物流システムリプレイスの概要紹介 / Towards Decentralized Logistics System Replacement from Monolithic Structure
概要 株式会社FiNC主催による、マイクロサービスに関する勉強会です。 今回は、「API Gateway & BFF (Backends for Frontends)」がテーマとなります。 # テーマについて API Gateway … 毎回サブのテーマを変えておりますが、今回は API Gateway & BFF (Backends For Frontends) をテーマにしました。これらがどんなものかは、特に前半2つの早川さん・古川さんの資料にも多く触れられていますので、初見の方はぜひご参照ください。 ご登壇していただいたのは、以下の四人の方々です。 早川さん (twitter: charlier_shoe, 日本オラクル株式会社)古川さん (twitter: yosuke_furukawa, 株式会社リクルートテクノロジーズ, Node.js日本ユーザーグループ代表)高松さん (tw
とりあえず第一回として、iOS / Android のための BFF (Backends for Frontends) を作りたくなったときに、どういう技術で作るかを考えてみます。第二回があるかは未定。 そもそもBFFって何という方のために、手前味噌ですが自分の登壇資料をあげておきます。 言語とフレームワークの選定まず、いくつか観点を列挙する。 静的型付け or 動的型付け できれば静的型付けのが良いと思う。 iOS / Android が静的型付け言語を利用しているので、スイッチングコストが少ない。 あと、たぶんそんなに頑張ってテスト書かない(書くのが難しい)ので、極力型レベルでバグを検知したい。要はBackendのAPIをstubしないとテスト書けないんだけど、せっかくテストをしてもstubが間違ってると意味がないので、そこの(叩くAPIの型の)信頼性はどちらにしろ担保しなきゃいけない
DMM GAMESのプラットフォームリプレイスを支えるBackends For Frontends (BFF) の裏側 - DMM inside
Single NodeのDocker Swarmを利用してオンプレミスにデプロイされるGraphQLサーバを安全にローリングアップデートさせている話
Inside Frontend 2019
whoami @qsona (Twitter, GitHub, Qiita) Node.js developer FiNC 2016/2 〜 Ruby, Rails / MySQL love microservices! Microservices Meetup 主催 昨日3/30に開催: vol.5 (API Gateway & BFF) BFF とは? Backends for Frontends の略 クライアントとバックエンドの中間にサーバを置き、フロントエンド寄りの処理を行う Microservicesの文脈で語られることが多い 昨日の会長のスライド step by step BFF GraphQL とは? クエリー型 Web API RESTful API において問題になりがちな点をカバーしている 仕様として定められている (RESTfulはあくまでAPI設計の指針) Nod
2022/06/13に「ニコニコ生放送 WebフロントエンドのKubernetes移行ハンドブック 2022」を公開しました。本発表ではハンドブックの内容とともに、WebフロントエンドにおけるKubernetesへの移行と運用がどのようなものか紹介します。 Playground
BFF、Storybook、TypeScript、App Center、Sentry――Web開発者によるReact Native開発、運用のポイント
こんにちは、リクルートテクノロジーズが開発している、B2Bのスマートフォンアプリ『Airシフト メッセージ用アプリ』（以下、メッセージアプリ）でフロントエンドの開発を担当している辻です。Webフロントエンドエンジニアだけで行っている開発の裏側を明かす連載「Webフロントエンドエンジニアだけでスマホアプリ開発」。今回は、開発を円滑に進めるに当たっての技術的な工夫を紹介します。 React Nativeを活用したアーキテクチャ面の工夫 API再利用のためのBFFアーキテクチャ メッセージアプリでは、AirシフトのWeb版のAPIを再利用するために、「Client Adapter Pattern」を参考にBFF（Backends For Frontends）を導入しています。 一般的なWebアプリ開発においては、BFFの責務としてサーバサイドレンダリングを取り入れているのはよくあることだと思いま
2017/03/30に行われた Microservices Meetup vol.5 (API Gateway & BFF) の発表資料です。 Ruby on RailsでBFFを構築した際の知見についてご紹介致します。
2018/06/07 に発表した BFF アンチパターンの話です。
BFF @ SoundCloud
Our friends at SoundCloud embarked on a journey a few years ago that changed their system and moved it from a monolithic Rails application towards an ecosystem of microservices. One thing that worked particularly well for them during that project is the BFF pattern, Backends for Frontends. Their BFF usage and the success story behind it may help other teams; so we decided to write it up. We hope y
BFFとは 名前の通り、フロントエンドのためのバックエンド（サーバ）です。フロントエンドのためにAPIをコールしたり、HTMLを生成したりするサーバ 2000年代前半のWebアプリは、HTMLが主体で動きがシンプルだった。しかしWebアプリが技術進化で複雑化するにつれて フロントエンド側にクライアントごとの要求に応えるためのサーバを配置してバックエンドのAPIサーバとの橋渡し役とするアーキテクチャが開発されるようになりました。 BFFの役割 BFFはフロントとバックエンドの姿勢・方針が乖離している場合に仲介役となることができる [メリ] バックエンドアプリの仕様が完全に固まっていて変更が難しい場合や、バックエンドとフロントが完全に別チームで開発される場合には「バックエンド側での対応が難しいから、フロント側の開発者がBFFを設け、そこで対応する」ことができる [デメ/思ったこと] フロントと
株式会社FOLIOのフロントエンドエンジニアをしています、諸見里です。 この記事はFOLIOアドベントカレンダー7日目の記事です。昨日の記事はバズらせてサーバーを落とすことで有名な弊社CDOの超心に刺さってイヤでも印象に残るプレゼンの方法でした。それほどバズらずサーバーは落ちなかったようです。 会社のアドベントカレンダーということで、今回はFOLIOのBFF(Backend For Frontend)でのflowtypeの活用と、アーキテクチャについて書きます。 BFF & Microservices FOLIOのシステムは、Scalaを中心としたマイクロサービスで構成されています。そして、それらのサービスをクライアント向けに束ねるために、Node.jsで書かれたBFF(Backend For Frontend)を置いています。例えばWebアプリ用のBFFなら、各サービスからデータを集めて
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
JJUG CCC 2019 Springの登壇資料です。 http://www.java-users.jp/ccc2019spring/#/sessions/7fbef8cc-bf8d-4855-8534-c7fca118fb1d
introduction HonoにはRPCの機能があり、routerで定義している情報（引数とか型とか）を他のファイルで簡単に利用することができます。 この記事では、そのRPCの機能とNextを組み合わせて、HonoをNextのBFFとして使用する組み合わせについて紹介していきたいと思います。 まず、今回作成した２つのサンプルのリポジトリを紹介します。 以下の２つのリポジトリのコードを用いて説明するので、もし興味があればクローンして色々試してみて下さい。 next-hono-webはshadcn/uiのコンポーネントをお借りして作成したサンプルのダッシュボードに対して、一部の値を動的に設定するよう変更を加えたものです。 next-hono-backendはとてもシンプルで、next-hono-webで使用するサンプルデータを返すよう定義されています。 next-hono-backend側
FOLIO のBFFと秩序の話
もう少しでAlt Confの為にアメリカに出発なので少し緊張してきたiOSアプリエンジニアのかっくん(@fromkk)です。 少し前にリリースした機能で、APIサーバーでもクライアントサイドでもロジックを実装しない中間層として BFF を構築・リリースしました。 BFFとは BFFはBackend for Frontendと呼ばれ、クライアントの為のサーバー環境を指します。(決してBest friend foreverでは無いので間違えない様に気をつけましょう) BFF環境を構築する事で、これまでのAPIサーバーはよりRESTに徹する事ができ、APIからのレスポンスを画面に表示する為の整形ロジックをBFFに任せる事で、iOS/Android/Webそれぞれで同じ整形ロジックを利用する事が出来る様になります。 経緯 何故BFF環境を構築するに至ったかと言うと、過去に画面に表示する情報をサーバ
プロジェクトマネージャーとは BFF である｜ぴかし
FOLIO で フロントエンドチームリーダー 兼 プロジェクトマネージャー (PJM) をしている @pika_shi です．PJM としては，おまかせ投資 を今年の春から見ていて，11 月にようやくローンチしました． フロントエンドとプロジェクトというと，性質の違う 2 つのものを見ていると思われるかもしれません．自分も当初はそう思っていたのですが，時が経つにつれ，プロジェクトマネージャーの責務は BFF のアナロジーで考えられる ことに気づきました．今回はその話について書いてみようと思います． BFF (Backends for Frontends) はじめに，BFF について軽くふれておきます．FOLIO のシステムは 20~30 のマイクロサービスで構成されており，その前段に，これらをクライアントに適した形でアグリゲートする BFF を置いています．現在，Web 用の BFF と，
11月30日に放送されためざましテレビのココ調で紹介された「女子高生流行語大賞2016」が話題になっています。さあ、あなたはいくつ知ってる？ チョベリバとか入ってないんですか？（真顔） 渋谷・原宿の女子高生386人にアンケートした今年使うようになった言葉から認知度の高かったベスト10。以下、解説を含めご紹介。 1位：【卍（まんじ）】写真を撮るポーズと掛け声、ヤンチャな人に対して「あの人卍だよね」と使う、テンションが上がったとき などの3つの意味 2位：【よき】良いねという意味で使う言葉 3位：【○○まる】柔らかい印象をつける かわいさを増す効果 ※句点のこと 4位：【アモーレ】同性の“親友”に使う感謝の言葉「ありがとうアモーレ」 5位：【はげる】毛が抜けそうなほどうれしいという意味 6位：【マ！？】マジ！？の略 7位：【BFF】Best Friends Forever「いつまでも友達だよ」
BFF（Backends For Frontends）超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由
BFFは、フロントエンドエンジニア、バックエンドエンジニアのどちらが担当するのか BFFは、クライアント側を担当するフロントエンドエンジニアが開発を担当することが多いです。BFFはサーバであるため、バックエンドエンジニアが開発すると思われることもありますが、UIを構築、操作する手助けをするサーバであるため、フロントエンドエンジニアの担当領域になります。 BFFアーキテクチャでは、バックエンドエンジニアはAPIを基本として、リソースを管理するのが担当領域になります。 BFFを作る具体的な方法に関しては、次回の「BFFの作り方」で詳細に解説します。 BFFのアーキテクチャパターンにするとき、しないとき BFFのアーキテクチャパターンには、「フロントエンド専用のサーバを設けることでUIを構築しやすくする」効果と、「フロントエンドとバックエンドの境界を設けてアーキテクチャのレイヤーを分割することで
安倍首相の“トランプ接待”が欧米メディアで嘲笑のネタに！ コルベアも「アベがトランプにBFFメッセージ」と皮肉 - 本と雑誌のニュースサイト／リテラ
安倍首相の“トランプ接待”が欧米メディアで嘲笑のネタに！ コルベアも「アベがトランプにBFFメッセージ」と皮肉 ようやくトランプ米大統領のアジア歴訪が終わるが、この間、日本のマスコミは日本政府の“おべっか外交”を持ち上げまくり、韓国や中国と比べてどれだけ安倍首相による“おもてなし”が素晴らしかったかばかりを強調してきた。 しかし、今回のトランプの訪日での安倍首相がやったことといえば、むしろ世界に恥をさらすようなものだった。世界中で批判され、軽蔑されているトランプ大統領にしっぽをふり、「武器を買え」と迫られれば「買います」と丸呑み、接待では、トランプとそっくりな反知性。無教養ぶりを見せつけた。 だが、日本のマスコミはそうした安倍首相のとほほな失態を全く報道しない。たとえば、本サイトでも紹介した安倍首相の“バンカー転倒事件”についてもそうだ。5日のトランプとのゴルフで、安倍首相がスタスタと先へ
BFFとはなんなのか？ - Qiita
仕事で複数のバックエンドから一つのクライアントと疎通するような構成の可能性があり、BFFが使えるかもということで調べてみました。 対象者 BFF(backend for frontend)の概要を知りたい方 どういったメリット、デメリットがあるかを整理したい方 概要 BFF(backend for frontend)とは簡単にいうと、クライアントとバックエンドの中間に位置し双方の複雑性を吸収するような作られたサーバーのことです。雑に書くとこんな感じです。 これが必要になった、背景はクライアントの端末の種類が増加したことそれに伴うロジックの増加です。 例えばweb,スマホ版web,スマホアプリ、デスクトップアプリなど複数のクライアントが登場し、それぞれにメッセージやコンテンツの出しわけを実装しようとすると、クライアント側のコードが複雑化し、冗長なコードを書かざる追えない状態になります。 そう
Microservice Meetup #5 参加ブログ1(step by step BFF) - desi-gneer(designer_engineer)
Inside FrontEndに引き続き、ブログ書く枠で参加させて頂きました。 今回で5回目となるMicroservice meetupですが、中々都合がつかず、 個人としては今回が初めての参加になります。 microservices-meetup.connpass.com 目次 目次 発表項目 step by step BFF 1 BFFとは 2 BFFが担う役割 1 API Aggregation 2 Session Management 3 (Server Side) Rendering 4 File Upload 5 WebSocket / LongPolling / SSE(Server Sent Events) Cache 3 BFFが生まれた背景 4 BFFの利用事例(Twitter,Netflix,RecruitTech) 1 Twitter 2 Netflix 3 Rec
FacebookやNetflixなど、著名なサービスを提供し成功を収めている企業は、最新のフロントエンド開発技術をいち早く取り入れ、優れたUX（User Experience）を実現しています。加えて昨今では、ビジネスニーズにすばやく対応できるクラウドネイティブな開発が求められます。技術が激しく移り変わるフロントエンド分野で、最先端の開発はどのように実現できるでしょうか。富士通のWebアプリ開発ツール「K5 Playground」の開発チームによる本連載では、Reactなどを使ったモダンなアーキテクチャをベースに、チャットボットやSNS連携アプリなど、さまざまなWebアプリを「数10分で」開発できるようになることを目標とします。第1回では、Webアプリの変遷とトレンドをサクッと追いつつ、現在はどのようなWebアプリを開発すべきか、構造や手法を考えてみましょう。 顧客との接点としてのUX～成
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダンBFFを活用した既存APIサーバーの再構築 - クックパッド開発者ブログ
Webサービスの初期開発とマイクロサービス・BFF
SSR / SSGの理解を一段深ぼる: BFFアーキテクチャ
BFF（Backends For Frontends）の5つの便利なユースケース
step-by-step BFF
流行りのBFFアーキテクチャとは？｜Offers Tech Blog
Backends For Frontends（BFF）はじめました - ZOZO TECH BLOG
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
大規模サービスのBFFサーバーをKubernetesに移行した記事で書いていないこと
Yahoo!ニュースにおけるBFFパフォーマンスチューニング事例
Microservices Meetup Vol.5 (API Gateway & BFF) を開催しました
モバイルエンジニアのためのBFF入門 (1) 技術選定の軸｜qsona
BFF and Developer Experience
Node.js + GraphQLでBFFを作った話 - Qiita
ニコニコ生放送におけるWebフロントエンドBFFサーバーのKubernetes移行事例の紹介
Railsで作るBFFの功罪
BFF Antipattern
BFF(Backend For Frontend)のメリット/デメリットと導入の是非について
BFFの設計とflowtype - Qiita
Next as Frontend + Hono as BFF という組み合わせの提案
BFF's cosmos in FOLIO sec at uit
iOSエンジニアがBFF環境を構築しました #bff - Tech Blog
「卍」「はげる」「BFF」 女子高生流行語大賞2016が発表されたけど理解できなくてつらみ
トレンドは優れたUXとSPA・BFF！ 急成長企業の最新フロントエンド開発を体験しよう