Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
マイクロサービスにおけるWeb APIスキーマの管理 ─ GraphQL、gRPC、OpenAPIの特徴と使いどころ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
マイクロサービスにおけるWeb APIスキーマの管理 ─ GraphQL、gRPC、OpenAPIの特徴と使いどころ マイクロサービスにおける通信方式の選択について、おおた（ota42y）さんが、GraphQL・gRPC・OpenAPIといった主なWeb APIスキーマの管理の利点と使い分けを解説します。 近年流行しているマイクロサービスアーキテクチャにおいては、「どういった通信方式を選ぶか」が開発の効率やサービスの信頼性、パフォーマンスを大きく左右します。この記事では、GraphQL・gRPC・OpenAPIそれぞれの利点と適切な使い分けについて解説します。 マイクロサービスにおけるWeb API管理の重要性 Schema First DevelopmentとWeb API 人ではなくプログラムが処理できるよう管理する Web APIのインタフェース定義手法の比較 OpenAPI ─ R
GraphQL を利用したアーキテクチャの勘所 / Architecture practices with GraphQL
iCARE Dev Meetup 20 で発表した資料です #icare_meetup p.7,8,61 https://graphql.org/ p.18 https://twitter.com/a_suenami/status/1379270185207484417 p.33 [SQLQL - Qiita](https://qiita.com/yancya/items/4b7979d83cbf6af9b819) p.33 https://twitter.com/onk/status/912491093127598080 p.35 [【エンジニアブログ】ダイニーのエンジニアリング3カ条｜dinii（ダイニー）公式｜note](https://note.com/dinii/n/n9be778bd7da3) p.36 [Smart UI パターンが再評価される世界 - id:onk のはてな
サーバーサイドからみたGraphQL Serverlss Meetup#19 2021/03/31 に行われた Serverlss Meetup#19 で上記のタイトルで登壇してきました。サーバーサイドの話をしようと思ったけどGraphQLの解決している話をしようと思ったらクライアントの事もかなりはいってしまったので記事のタイトルは変えました。 以下内容です。記事の最後に資料を書くにあたって参考になった資料のリンクを置いてます。 GraphQL and me この1年書いたQiita記事 GraphQLの特徴を分解する ~API インターフェース・Universal BFF・API Gateway~ GraphQLはサーバーサイド実装のベストプラクティスとなるか GraphQLの全体像とWebApp開発のこれから 今回話す事 そもそもGraphQLはなんで作られたのか、何を解決しようとして
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
技術部の青木峰郎です。 去年までは主にデータ分析システムの構築を担当していましたが、 最近はなぜかレシピサービスのサービス開発をやっています。 今日は、そのサービス開発をする過程で導入したBFF（Backends for Frontends）であるOrchaについて、 導入の動機と実装の詳細をお話しします。 Orcha導入にいたる経緯 まずはOrcha導入までの経緯、動機からお話ししましょう。 最初のきっかけは、わたしが去年から参加しているブックマークのようなサービスの開発プロジェクトでした。 このプロジェクトの実装のために新しいmicroserviceを追加することになったのですが、 そのときにいくつかの要望（制約）がありました。 1つめは、撤退するとなったときに、すぐに、きれいに撤退できること。 2つめが、スマホアプリからのAPI呼び出し回数はできるだけ増やしたくない、という要望です。
SPA+SSR+APIで構成したWebアプリケーションのセッション管理 - Pepabo Tech Portal
カラーミーショップ サービス基盤チームのkymmtです。この記事では、サーバサイドレンダリングするシングルページアプリケーションとAPIサーバからなるWebアプリケーションのセッション管理方法について紹介します。 アプリケーションの構成 構成の概要 今回は例としてEC事業部で提供するカラーミーリピートをとりあげます。構成としては、Railsで作られたAPIサーバ1と、Vue.jsで作られたシングルページアプリケーション(SPA)からなります。また、SPAはExpressが動くフロントエンドサーバでサーバサイドレンダリング(SSR)します。APIサーバはSPAかフロントエンドサーバだけが呼び出します。各ロールはサブドメインが異なります。 APIサーバでセッションIDを持つCookieを発行し、Redisを用いてセッション管理します。また、APIサーバへのセッションが有効なリクエストはフロント
BFFとは Backend for Frountendの略で、UI/UXを向上させる目的でフロントエンド専用のサーバーを用意したアークテクチャパターンです。 Webアプリケーションサーバーは下記の処理を行います。 リクエストを受ける DBからデータの取得・更新 ページを構築 (これはクライアントですることも) ページ or データの返却 このうち、「DBからデータの取得・更新」とそれ以外をフロントエンドとバックエンドの役割に明確にわけます。 BFFの役割となるサーバーをクライアントをWebサーバーの間に設け、「リクエストを受ける」と「ページ or データの返却」、場合によっては「ページの構築」をここで処理します。 こうすることで、これまでリクエストというUX関わる部分をフロントエンドエンジニアの責務に移行することができます。 ページの構築をクライアントではなくサーバーで行う場合、これもBB
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、映像サービスプロダクト本部の浜田（@narirow）です。 GYAO!では最近トップページの大規模な変更が行われました。本記事では映像サービスのバックオフィスを含む大規模な構成変更と、その成果として得られたスケーラビリティ・ページの表示速度の向上についてをお話しします。 GYAO!のトップページの特徴 映像サービスであるGYAO!のトップページは、豊富なラインアップの中から作品を厳選して掲載しています。有名作品をただ並べるだけではなく、レコメンデーションやターゲティングの技術を使って、閲覧者の趣向にあった作品を一覧しています。大量の画像が表示されていることに加え、縦に長いページ構成となっています。 課題と解決のアプロー
Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
こんにちは。今期から Web フロントエンド領域で黒帯を務めることになりました伊藤（@koh110）です。 普段は情報システム本部に所属しチャットなど内製基盤の開発・運用をしつつ、Node.js 言語サポートチームとしてサーバサイド TypeScript の活用や、SSR（Server Side Rendering）、BFF（Backends For Frontends）のチューニング支援なども行っています。 ヤフーには Node.js と JavaScript の言語サポートチームがあります。Node.js サポートチームは主にバックエンドとして、JavaScript サポートチームはフロントエンドとして、それぞれ JavaScript をサポートしています。 今日は黒帯特集ということで、ヤフーの中で Node.js がどうやって活用されているのかをフロントエンド開発の体制と絡めてお話し
メルカリ Shops での NestJS を使った GraphQL Server の実装 | メルカリエンジニアリング
ソウゾウの Software Engineer をやっています、@mookjp です。 8/10 の記事「メルカリShopsの技術スタックと、その選定理由」では、メルカリ Shops のアーキテクチャについて、その全体像を紹介しました。 この記事では、そのうちの BFF（Backend for Frontend） レイヤとして用意した GraphQL サーバについて、NestJS を使った実装例を交えて紹介します。 GraphQL とは GraphQL サーバ周辺の構成 NestJS とは GraphQL Module NestJS で Code First なスキーマ定義をする Object types の定義 Query と Mutation の定義 GraphQL スキーマの生成 スキーマの Breaking Change （破壊的変更）を防ぐ DataLoader を使って Bat
グラフモデルとSoEとGraphQL / TECH STAND #7 GraphQL 2022/03/03 に行われた stand.fmさん主催の TECH STAND #7 にて上記のタイトルで登壇しました。 今回の内容は GraphQLの採用を検討するにあたって、RESTとの違い、BFFとの違いをデータの観点から言語化したかった Hasuraが良いという意見と, Apolloやgraphql-ruby, gqlgenなどのハンドライティングなGraphQLが良いという意見の違いがどこから生まれているかの考察がしたかった データ指向アプリケーションデザイン(2017年リリース)にSoEやGraphQLへの言及がないため, 今だとこういう内容が書かれているんじゃないかという考察がしたかった をモチベーションに調査・検討しました。 発表のハイライトはこちらです。 以下発表内容です。一部発表時
Clean Architectureを採用したBackend For Frontendの開発とこれまでの所感 - LIFULL Creators Blog
こんにちは。テクノロジー本部のyoshikawaです。好きなLinux DistributionはManjaro Linuxです。 今回はレガシー化が進むLIFULLのメインサービスの開発効率の向上とコードベースの健全性の確保をすべく、Clean Architectureを採用しバックエンドを刷新している取り組みについて紹介させていただきます。 なお、Clean Architecture自体の説明および解説は本記事では行いません。 背景：歴史あるバックエンドの刷新 アプローチ：新たなアーキテクチャと共創 採用したアーキテクチャ・技術 Clean Architectureを採用した理由 TypeScriptを採用した理由 LoopBackを採用した理由 Clean Architectureの実践 レイヤー分け：例の図と新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企業とマッチングします。ユーザーサクセス (キャリア)面談も実施。
この記事は、Merpay Tech Openness Month 2023 の7日目の記事です。 はじめに こんにちは。メルコイン Payment Platform チームの @sapuri です。 メルコインではマイクロサービスアーキテクチャを採用しており、お客さまによりアプリの操作が行われると、それぞれのマイクロサービスを横断してリクエストが処理されます。 メルコインの Payment Platform は、お客さまの残高の管理や各種帳簿の作成などの決済事業のための基盤となる仕組みを提供しています。 そのなかで、Payment Service は決済トランザクションを管理するサービスとして、下位層のサービスが提供する各種決済手段を利用して、上位層のサービスが共通して利用できる決済 API を提供しています。 この記事ではマイクロサービスアーキテクチャにおける分散トランザクション管理の課
はじめに はじめまして、ホットペッパービューティーコスメ（以下HPBC）にてフロントエンドエンジニアとして学生アルバイトをしている柏です。 Webサービスで普遍的にもとめられる指標にパフォーマンスがあります。素早く表示されるWebサービスはユーザー体験が良く、コンバージョンや直帰率などにも関係があると言われています。HPBCでは、チーム一丸となってパフォーマンスの改善に継続的に取り組んでいます。 6週間のアルバイト期間で、HPBCのBFF(Backend for Frontend)の性能改善に取り組ませていただき、結果としてレスポンスタイムを200ミリ秒程度短縮することができました。本記事では、その取り組みをテーマに計測を通してパフォーマンスのボトルネックを発見する方法、そして開発の速度を落とさずそれらを解消することについて、ご紹介します。 目次 HPBCの構成と課題 Cloud Trac
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くらいまで膨れ
室見川“Web フロントエンド”の悲しみと明るい未来という記事を読みました。 これについては全く同感です。 next.js が vercel を提供して CDNからサーバーサイドでの処理までをワンストップに提供しているとか、 firebase がクライアントサイドでの SDK と Cloud Functions をなるべく一貫した体験で提供しようとしていることとか、あるいは今話題の React Server Component とかについて、フロントエンドの最前線がいったいどのような苦しみにあるか、理解できる人は実はあまり多くないのではないか、と僕は思っている。 それは何かといえば、絶望的なまでのサーバーサイド/バックエンドへの忌避感だ。https://anond.hatelabo.jp/20210105164149 というのも、これは私達がvte.cxを提供してからずっと感じていた課題だ
TypeScript_BFF
モノリスからの脱却に向けた 物流システムリプレイスの概要紹介 / Towards Decentralized Logistics System Replacement from Monolithic Structure
監視されているウェブ閲覧の足跡、ブラウザ拡張機能で対策を
監視されているウェブ閲覧の足跡、ブラウザ拡張機能で対策を2020.09.20 21:0022,829 David Nield - Gizmodo US ［原文］ （ 佐藤信彦/Word Connection JAPAN ） みなさんも経験ありますよね。通販サイトである商品を眺めたら、行く先々で同じ商品の広告がこれでもか、これでもか、と表示され続けたことが。ウェブ閲覧パターンに応じた動作をしてくれることは便利な反面、行動が追跡されているかと思うと、もう少し自分でコントロールしたくなります。 インターネットの世界に1歩足を踏み入れると、あっという間に行動が追跡され始めるでしょう。大抵の場合、追跡している者の正体や目的は見当もつきません。ありがたいことに、ウェブ閲覧行動というプライバシーを保護するのに、ちょうど良いツールがあります。誰が何のためにつけ回しているのかを白日の下にさらけ出せるブラウザ
Inside Frontend 2019
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
JJUG CCC 2019 Springの登壇資料です。 http://www.java-users.jp/ccc2019spring/#/sessions/7fbef8cc-bf8d-4855-8534-c7fca118fb1d
研修生が開催したTech Talk「今後の業務で皆に役立ちそうな技術」ベスト4を紹介します! | BLOG - DeNA Engineering
2020.07.21 新卒研修振り返りレポート 研修生が開催したTech Talk「今後の業務で皆に役立ちそうな技術」ベスト4を紹介します! by Naoto Ishida Kenichi Ebinuma Takuto Sato Yuto Teruya Yaya Watanabe 20新卒エンジニア研修を終えた渡部椰也です。 この記事では、先日まで行われていたエンジニア研修にて行った Tech Talk と呼ばれる勉強会についてご紹介します！ 今後の業務で皆にとって役立ちそうな話題であること 縦横のエンジニア社員とのつながりを作るという目的のもと、各現場のエンジニアに事例をヒアリングしながら資料を作ること Tech Talk では、これらを条件にトークの内容を考え、新卒エンジニア24名がプレゼンを行いました。 テーマ一覧をみてみると、多種多様なテーマが集まっていることが分かると思います。
フロントエンドに型の秩序を与えるGraphQLとTypeScript | Wantedly Engineer Blog
こんにちは。Wantedly Visit の Product Squad で Frontend Engineer をしている原 (chloe463)です。 Product Squad では主に Wantedly Visit の Web 版の新規機能開発やリニューアルを行っています。 本記事では、つい先日リリースされた募集作成画面の開発で導入したGraphQLサーバーの開発について紹介します。 ・より集中して作成しやすく：作成ステップを分割・より完成形をイメージしながら作成しやすく：ステップごとにモバイル版プレビュー画面が表示・カバー画像設定をより手軽に：アップロード後にガイドラインに合うようにトリミング可能に。また、モバイルアプリ、デスクトップ、ソーシャルで表示された際のプレビューが可能に・募集作成のTipsが閲覧可能に：一部作成ステップに対応したサポートコンテンツへのリンクが表示 TL;
全体の概要 基本的なAPI結合 基本的にはフロント(Next.js)からaxios等を利用して、サーバー側のAPIエンドポイントに対して直接リクエストを送る構成かと思います。 今回紹介するNext.jsのAPI Routesを中間APIとして挟んだ場合 今回紹介する構成は下記のようになっています。 この構成にするメリット・デメリットは後の章で解説をしていきます。 この記事の対象者 フロントエンド初級者から中級者 Next.jsのAPI Routesの基本を学びたい人 セキュリティーを考慮したAPI通信手法について知りたい人 Next.jsのAPI Routesを中間APIとして挟むメリット セキュリティーが強化できる ログの管理ができる APIエンドポイントの抽象化 セキュリティーが強化できる Next API Routesを中間APIとして挟むことで、外部から直接本体のAPIにアクセスさ
Routing: API Routes | Next.js
API RoutesExamples Basic API Routes API Routes Request Helpers API Routes with GraphQL API Routes with REST API Routes with CORS Good to know: If you are using the App Router, you can use Server Components or Route Handlers instead of API Routes. API routes provide a solution to build a public API with Next.js. Any file inside the folder pages/api is mapped to /api/* and will be treated as an API
Amazon Web Services ブログ Backends for Frontends パターン このブログでは、Backend for Frontend パターンを実装し、マイクロサービスがドメインの集約の Mutation に関するイベントを発生させたときにリアルタイムの視覚的な更新を提供することによって、ユーザーインターフェース（UI）でのエンドユーザーの顧客体験を向上させる方法について説明します。 提案されたソリューションは、2 つのパターンを組み合わせたものです。1) Backends for Frontends (BFF) パターンでは、アプリケーションが 1 つの汎用 API バックエンドを持つ代わりに、ユーザー体験ごとに 1 つのバックエンドを持ちます。2) Publisher-Subscriber (pub/sub) パターンでは、マイクロサービスが送信側と受信側を
bff.md
bff.md BFF について 参考資料 Sam Newman - Backends For Frontends マイクロサービスの思想から捉える Backends for Frontendsとその類似パターン BFF's cosmos in FOLIO sec at uit BFF（Backends For Frontends）超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由 (1/2)：マイクロサービス/API時代のフロントエンド開発（1） - ＠IT BFF（Backends For Frontends）の5つの便利なユースケース：マイクロサービス/API時代のフロントエンド開発（2） - ＠IT BFF @ SoundCloud | ThoughtWorks Sam Newman - Backends For Frontends wrote in 2
はじめに 次のような方を対象にしています。 BFFアーキテクチャの通信の流れを知りたい BFFサーバの役割、メリットを実感したい BFFサーバで行うGraphQLとRESTのプロトコル変換の手法を知りたい この記事で取り扱わないこと Next.js、NestJS、GraphQLの基本的な文法や環境構築の解説 BFFの役割 本稿での説明は割愛させていただきます。 こちらの記事が非常に勉強になりました。 API合成 プロトコル変換 クライアント最適化 エッジ機能 サーバーサイドレンダリング（SSR） 本稿ではそのなかでもプロトコル変換に焦点を当て、解説していきます。 実現したいこと 通信の流れ
特定のフロント エンド アプリケーションやインターフェイスによって使用される個別のバックエンド サービスを作成します。 このパターンは、複数のインターフェイスのために 1 つのバックエンドをカスタマイズすることが非効率な場合に役立ちます。 このパターンは、Sam Newman が初めて説明しました。 コンテキストと問題 アプリケーションは、当初デスクトップの Web UI 用に導入される場合があります。 通常、バックエンド サービスは、その UI に必要な機能を提供するために、並行して開発されます。 アプリケーションのユーザー ベースが増えてくると、同じバックエンドとやりとりする、モバイル アプリケーションが開発されます。 その結果、バックエンド サービスは、デスクトップとモバイルの両方のインターフェイスの要件に対応する、汎用的なバックエンドになります。 しかし、モバイル デバイスの機能は
マイクロサービスアーキテクチャでよく利用される、APIGatewayパターンとBFFについて調べたのでメモ なぜAPIGateway? マイクロサービスアーキテクチャでシステムを構築する場合、複数のサービスを組み合わせる形でシステムが構築される。 たとえば、ECサイトの商品詳細を表示するために、商品情報サービス、レコメンデーションサービス、レビューサービスを利用する必要がある、ということ。この場合アプリケーションの実装によっては並行リクエストを行うのが難しかったり、モバイルアプリケーションの場合は帯域の問題も発生する。（その他にもいろいろあるが割愛） そこで、アプリケーションとサービスの間にAPIGatewayというレイヤーを追加することで問題を解決する。 APIGatewayの実装 単純な場合はこの図のようになって、全てのアプリケーションからのリクエストを１つのAPIGatewayで受け
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GraphQLが解決する問題とその先のユースケース
メルカリShops のフロントエンド | メルカリエンジニアリング
モダンBFFを活用した既存APIサーバーの再構築 - クックパッド開発者ブログ
SSR / SSGの理解を一段深ぼる: BFFアーキテクチャ
GYAO!トップページの表示パフォーマンス改善 〜 GraphQLアーキテクチャへの移行
ヤフーのフロントエンドと Node.js の関係性
データ指向アプリケーションデザインから見るGraphQL
流行りのBFFアーキテクチャとは？｜Offers Tech Blog
ニコニコ生放送 WebフロントエンドのKubernetes移行ハンドブック 2022
Backends For Frontends（BFF）はじめました - ZOZO TECH BLOG
メルコイン決済基盤における分散トランザクション管理 | メルカリエンジニアリング
計測・検討・対処のプロセスでWebサービスのパフォーマンスを改善する
大規模サービスのBFFサーバーをKubernetesに移行した記事で書いていないこと
React Server Componentsは再びIsormorphicの夢を見るか
BFF and Developer Experience
Next.jsのAPI Routesを中間APIとして使う方法
Backends for Frontends パターン | Amazon Web Services
Next.js + NestJSでBFFアーキテクチャを実装してみる
フロント エンド用バックエンドのパターン - Azure Architecture Center
APIGatewayパターンとBFF - koukiblog