<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>BFF on Saiga</title>
    <link>http://localhost:1313/tags/bff/</link>
    <description>Recent content in BFF on Saiga</description>
    <generator>Hugo</generator>
    <language>zh-cn</language>
    <managingEditor>wuwenzen@outlook.com (wuwj)</managingEditor>
    <webMaster>wuwenzen@outlook.com (wuwj)</webMaster>
    <lastBuildDate>Sat, 19 Sep 2020 00:00:00 +0000</lastBuildDate>
    <atom:link href="http://localhost:1313/tags/bff/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>给前端加一层 BFF：Node 中间层的第一步</title>
      <link>http://localhost:1313/posts/2020-09-19-node-bff-intro/</link>
      <pubDate>Sat, 19 Sep 2020 00:00:00 +0000</pubDate><author>wuwenzen@outlook.com (wuwj)</author>
      <guid>http://localhost:1313/posts/2020-09-19-node-bff-intro/</guid>
      <description>&lt;p&gt;写前端写久了，你大概率遇到过这些场景：&lt;/p&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;同一个页面要调 3～4 个后端服务，字段名都不一样。&lt;/li&gt;&#xA;&lt;li&gt;为了兼容多个客户端（H5、小程序、App），接口被搞得非常「通用」，前端要做一堆字段转换。&lt;/li&gt;&#xA;&lt;li&gt;某些数据其实可以缓存，但后端坚持不做，只能前端自己「临时记一下」。&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;p&gt;这个时候，很多团队会在前后端之间加一层 &lt;strong&gt;BFF（Backend For Frontend）&lt;/strong&gt;。&lt;/p&gt;&#xA;&lt;p&gt;这篇文章以一个小例子来说明：什么是 BFF、为什么要用、第一步怎么做。&lt;/p&gt;&#xA;&lt;hr&gt;&#xA;&lt;h2 id=&#34;1-什么是-bff&#34;&gt;1. 什么是 BFF？&lt;/h2&gt;&#xA;&lt;p&gt;一句话解释：&lt;/p&gt;&#xA;&lt;blockquote&gt;&#xA;&lt;p&gt;&lt;strong&gt;BFF 是介于前端和后端业务服务之间的一层「适配器」，为特定前端提供定制化接口。&lt;/strong&gt;&lt;/p&gt;&#xA;&lt;/blockquote&gt;&#xA;&lt;p&gt;传统架构：&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-text&#34; data-lang=&#34;text&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;浏览器 / 小程序  ---&amp;gt;  各个后端服务&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;引入 BFF 后：&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-text&#34; data-lang=&#34;text&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;浏览器 / 小程序  ---&amp;gt;  BFF  ---&amp;gt;  各个后端服务&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;BFF 做的事情包括但不限于：&lt;/p&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;聚合多个后端接口；&lt;/li&gt;&#xA;&lt;li&gt;做一些轻量的业务组合逻辑；&lt;/li&gt;&#xA;&lt;li&gt;做权限校验、请求限流；&lt;/li&gt;&#xA;&lt;li&gt;做缓存（比如热门数据）；&lt;/li&gt;&#xA;&lt;li&gt;为不同客户端做「视图模型」适配。&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;p&gt;常用技术栈：Node.js + Koa/Express/Nest 等。&lt;/p&gt;&#xA;&lt;hr&gt;&#xA;&lt;h2 id=&#34;2-一个具体例子用户资产概览&#34;&gt;2. 一个具体例子：用户资产概览&lt;/h2&gt;&#xA;&lt;p&gt;假设我们有一个前端页面「用户资产总览」，需要展示：&lt;/p&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;用户基本信息（来自 &lt;code&gt;user-service&lt;/code&gt;）；&lt;/li&gt;&#xA;&lt;li&gt;用户账户列表（来自 &lt;code&gt;account-service&lt;/code&gt;）；&lt;/li&gt;&#xA;&lt;li&gt;用户最近 5 笔交易（来自 &lt;code&gt;trade-service&lt;/code&gt;）。&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;h3 id=&#34;21-没有-bff-时的做法&#34;&gt;2.1 没有 BFF 时的做法&lt;/h3&gt;&#xA;&lt;p&gt;前端直接请求多个后端服务：&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-ts&#34; data-lang=&#34;ts&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;GET&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;user&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;-&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;service&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;api&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;user&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;profile&lt;/span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;GET&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;account&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;-&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;service&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;api&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;account&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;list&lt;/span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;GET&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;trade&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;-&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;service&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;api&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;trade&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;latest&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;?&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;limit&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#ae81ff&#34;&gt;5&lt;/span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;前端需要：&lt;/p&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;处理不同的返回格式；&lt;/li&gt;&#xA;&lt;li&gt;做错误合并处理（任何一个接口失败都要考虑）；&lt;/li&gt;&#xA;&lt;li&gt;处理多次往返延迟。&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;hr&gt;&#xA;&lt;h3 id=&#34;22-有-bff-后的做法&#34;&gt;2.2 有 BFF 后的做法&lt;/h3&gt;&#xA;&lt;p&gt;前端只请求 BFF：&lt;/p&gt;</description>
    </item>
  </channel>
</rss>
