为什么您的电商PWA需要BFF（上篇）

 

​服务于前端的后端可以在客户间共享API，

而不需要根据每个客户的具体需求进行调整……

BFF！！

……不是，我的意思不是Best Friends Forever（永远最好的朋友）。

我们科技界的人都喜欢用那些巧妙的、非原创的缩写，所以科技界已经把“BFF”劫持用来表示这个越来越受公认的高性能网络应用模式：服务于前端的后端—— Backend For Frontend，简称BFF，我们觉得这种缩写“重复利用”是很合理的。BFF可以真正成为您前端的最好的朋友，尤其是对于电商渐进式网络应用。

什么是BFF？                      

BFF最初是由SoundCloud创造的，它是应用堆栈中的一个离散层，单个客户端如React Progressive Web App（PWA）或本地移动应用可以有效地使用共享API，而不需要为每个客户优化这些API。在理想的电商架构中，PWA和本地移动应用都使用相同的核心API。从表面上看，这两个客户似乎非常相似，很容易让它们直接连接到核心API上，但这样做之后你会发现每个客户对API都有自己特定的需求。

举个例子，想想web应用客户和本地应用之间的区别。React PWA有URL，需要针对SEO的描述和页面标题，而移动应用则不需要。所有这些小需求加起来，很快你就会在API代码中发现很多这样的需求：

BFF可以在客户间共享API，而不需要根据每个客户的具体需求进行调整。BFF本质上管理API和客户之间的信息流，并提供许多运行和技术上的益处，包括加快开发速度、 网站速度 、安全性等等。

BFF提高团队速度                 

为本地应用和web应用提供独立的BFF使得每个团队在不改变核心API的情况下对应用进行自由迭代。 需要从某个网页上添加或删除数据以提高页面加载速度或添加新功能？如果需要改变核心API，在这个过程中移动应用可能会受损。如果web应用有自己的BFF，这种风险就能被消除，web和移动团队就可以独立开展工作。

用BFF加速A/B测试               

想要尝试一种新的体验，但是又需要变更API？如果没有BFF，就需要同时对前端和API进行A/B测试。如果移动和web团队都在进行A/B测试，会怎么样？API会处于什么状态？是否需要一个团队等待另一个团队？  

BFF通过给每个团队独立的空间来试验每个客户使用的数据，从而解决了这个问题。您可能还会发现，先在BFF中进行实验性的API变更，然后如果这个实验通过了A/B测试，再将它迁移到核心API中，这样会更方便。

BFF+SSR=SEO改进             

电商业务依赖于SEO。

爬虫和bot不能可靠地索引由JavaScript渲染的内容。希望您能说服您的SEO顾问，让他们相信一个以JavaScript为主的网站会对您的SEO有好处。唯一100%能确保网站被搜索和社交bot以及爬虫正确索引的方法就是交付好的老式的HTML。如果要在任何主流框架上——React、Vue或Angular——构建一个大量使用JavaScript的电商渐进式web应用，就需要在服务器上渲染页面，而BFF就是个完美场所。

构建一个既能处理服务端渲染（SSR）又能进行API垫片和编排的BFF是很困难的，所以有人选择使用单独的预渲染服务。服务端渲染即使做得好，也会很慢并且占用大量CPU资源(因此成本很高)。使用无头Chrome预渲染页面的完全独立的服务将会更慢并且占用更多资源，因为无头Chrome和BFF之间有额外的网络跃点，并且运行无头Chrome需要额外的资源。幸运的是，Layer0 以一种高性能、可扩展的方式为您处理所有问题，几乎不需要DevOps或维护。

用正确的web技术提高网站速度

在页面间导航的时候，React PWA的速度很快，但如果不进行一些重要的优化，在衡量首页加载时，它们可能比老式的多页应用APP更慢。不幸的是，对降低跳出率和提高搜索排名而言这是最重要的指标。谷歌的“速度更新”在其排名算法中优先考虑加载速度较快的移动网站。而使用的具体指标都与首页加载时间有关，这不是PWA的优势，除非采用SSR。

如果没有服务端渲染，浏览器就需要在屏幕渲染一个像素之前下载、解析并运行所有JavaScrip代码。没有 SSR 的 PWA 很难在模拟 3g 上实现低于 2.5 秒的首次有效渲染时间 (TTFMP) 。结合优秀的CDN，使用SSR的网站可以实现亚秒级的TTFMP时间，只需大约0.9秒甚至更快。

值得一提的是，虽然这种性能一直是用户体验和转化率的重要组成部分，对SEO来说也是至关重要的；换句话说，速度更快的网站不仅转化率更高，而且相比同样的关键词搜索到的较慢网站，还能说服谷歌给其更高的排名，并带来更多的流量。

（未完待续）

Limelight微信公众号：

Limelight官网：www.limelight.com

中文官网：www.limelightcn.com

或者通过Twitter、Facebook 和 LinkedIn关注我们。

Limelight简介

Limelight（纳斯达克股票代码：LLNW）是一家提供边缘解决方案的行业引领者，在全球范围内提供快速安全的数字体验。 在竞争日益激烈的市场中，我们提供强大的工具来优化、保护和交付客户宝贵的数字资产。从内容交付和AppOps到Jamstack应用架构和网络安全，通过全球专有网络和以客户为中心的专家团队，我们致力于帮助客户获得成功，在这方面我们拥有独特的优势。受到全球各大品牌青睐的Limelight诚邀您访问www.limelight.com、Twitter、Facebook和LinkedIn了解更多信息。