<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ankit Singh</title>
    <description>The latest articles on DEV Community by Ankit Singh (@ankitsinghmyself).</description>
    <link>https://dev.to/ankitsinghmyself</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3888214%2Fd9877ba0-694c-409a-9893-b94a6ec5bb46.png</url>
      <title>DEV Community: Ankit Singh</title>
      <link>https://dev.to/ankitsinghmyself</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ankitsinghmyself"/>
    <language>en</language>
    <item>
      <title>Backend for Frontend (BFF), I Ignored It… Until My System Forced Me</title>
      <dc:creator>Ankit Singh</dc:creator>
      <pubDate>Mon, 20 Apr 2026 16:12:55 +0000</pubDate>
      <link>https://dev.to/ankitsinghmyself/backend-for-frontend-bff-i-ignored-it-until-my-system-forced-me-1fp8</link>
      <guid>https://dev.to/ankitsinghmyself/backend-for-frontend-bff-i-ignored-it-until-my-system-forced-me-1fp8</guid>
      <description>&lt;p&gt;I'll be honest.&lt;/p&gt;

&lt;p&gt;For a long time, I thought BFF is just another "system design buzzword".&lt;/p&gt;

&lt;p&gt;Something people use in interviews to sound smart.&lt;/p&gt;

&lt;p&gt;In real work?&lt;br&gt;
Didn't feel needed.&lt;/p&gt;

&lt;p&gt;Then system grew… and things started breaking in ways I didn't expect.&lt;/p&gt;
&lt;h2&gt;
  
  
  How It Actually Starts
&lt;/h2&gt;

&lt;p&gt;At beginning, everything is simple:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;One frontend (React / Next.js)&lt;/li&gt;
&lt;li&gt;One backend&lt;/li&gt;
&lt;li&gt;APIs look clean&lt;/li&gt;
&lt;li&gt;Life is good&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then product evolves:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Web app&lt;/li&gt;
&lt;li&gt;Mobile app&lt;/li&gt;
&lt;li&gt;Admin panel&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Still same backend.&lt;/p&gt;

&lt;p&gt;That's where slow problems start.&lt;/p&gt;
&lt;h2&gt;
  
  
  Real Problem (Not Theoretical)
&lt;/h2&gt;

&lt;p&gt;Single backend -&amp;gt; multiple frontends = &lt;strong&gt;compromise everywhere&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Example API: /user/profile&lt;br&gt;
Response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;address&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;preferences&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;orderHistory&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;notifications&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;featureFlags&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Reality:&lt;br&gt;
Mobile → needs only name + notifications&lt;br&gt;
Web → needs most of it&lt;br&gt;
Admin → needs different subset&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What we do?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Send everything&lt;/li&gt;
&lt;li&gt;Filter in frontend&lt;/li&gt;
&lt;li&gt;Add conditions in UI&lt;/li&gt;
&lt;li&gt;Duplicate logic&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now frontend is doing backend work.&lt;br&gt;
And code starts feeling heavy.&lt;/p&gt;
&lt;h2&gt;
  
  
  Where BFF Comes In
&lt;/h2&gt;

&lt;p&gt;Not one backend for all.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[ Web ]    --&amp;gt; [ Web BFF ] 
[ Mobile ] --&amp;gt; [ Mobile BFF ] --&amp;gt; [ Core APIs ]
[ Admin ]  --&amp;gt; [ Admin BFF ]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Each frontend talks to it's own layer.&lt;/p&gt;

&lt;p&gt;Simple idea, big impact.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Changed For Me
&lt;/h2&gt;

&lt;p&gt;After using BFF, few things became very clear.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;No More Over-fetching&lt;/li&gt;
&lt;li&gt;Frontend Became Cleaner&lt;/li&gt;
&lt;li&gt;Fewer API Calls&lt;/li&gt;
&lt;li&gt;Teams Stop Blocking Each Other&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Important Part (Most People Skip)
&lt;/h2&gt;

&lt;p&gt;BFF is useful, but not always.&lt;br&gt;
&lt;strong&gt;Don't use it if:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Only one frontend exists&lt;/li&gt;
&lt;li&gt;APIs are already simple&lt;/li&gt;
&lt;li&gt;No performance issue&lt;/li&gt;
&lt;li&gt;Small team
Otherwise, you're just adding extra layer for no reason.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Final Thought
&lt;/h2&gt;

&lt;p&gt;You don't start with BFF.&lt;/p&gt;

&lt;p&gt;You reach a point where:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Frontend is messy&lt;/li&gt;
&lt;li&gt;APIs don't fit use-cases&lt;/li&gt;
&lt;li&gt;Teams are blocked
And then BFF stops being "optional".&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It becomes obvious.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Curious how others are solving this - feel free to share your approach in the comments.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>webdev</category>
      <category>productivity</category>
      <category>javascript</category>
      <category>api</category>
    </item>
  </channel>
</rss>
