前端技术之大前端架构史话

昨天写了第一篇博客，万万没想到用了将近一个半小时，看来每天五篇的目标靠一晚上是不够的，要完成目标就必须挤时间。2019 年全年对于我个人而言在技术方面总体还是收入满满的，在接下来的几篇文章中我将主要讲一下在这一年里我对前端知识的理解和认识。

大前端和全栈

在讲解大前端的时候最容易和前端所谓的“全栈”混淆，包括知乎排名靠前的有关大前端的一些讨论也是模棱两可，不知所云，知乎有精品贴，我比较欣赏，但也有毫无价值的东西。这里我将详细讲解下到底什么是大前端，在理解大前端的时候首先要明确这个概念针对的是谁，不是前端工程师，而是后端开发者，大前端非“前端”，他出现的背景正是当下“一云多端”的现状，就像我在博客开始处贴的图片，在 CS 时代，客户端只有 PC，在 Web 石器化时代前后端处于混沌状态，前端只是艺术家创造个人艺术作品的形式，渐渐的出现了天生前后端分离的移动端，直到 Web 端也出现前后端分离，客户端呈现出多样化态势，这时候后端开发人员可能针对不同的端开发大量具有冗余业务的接口，后端开发人员面对的往往是 Android，IOS，H5 三方的开发人员，大前端的概念正是为了解决这种状况，所有的客户端无论你是 Android，IOS，还是 WEB 端，对于后端人员来说只有“大前端”，后端开人员无需针对特定的某一端进行开发，而仅仅是面向大前端进行开发。所以区别于“全栈”，大前端这个概念是针对后端开发人员的，全栈则不同，全栈指的是前端开发人员利用前端的编程语言进行后端，前端的开发设计。

前端架构演变史

前端架构的演变历史我曾经在我的一篇聊前后端分离的博客中讲到过，但有些技术细节没有讲到，接下来我将更详细的对前端架构的演变进行描述：第一个阶段石器时代，这个阶段的前端就是静态网页，用我之前的话来说就是一个可以共享的幻灯片，我们通过 html 这种特殊的文本格式定义好图文详情，然后通过浏览器实现图文资料的共享。第二个阶段后端 MVC 阶段：这个阶段我以 JavaWeb 举例就是 servlet+jdbc+jsp 的阶段，伴随着 JavaWeb 的发展出现了 SSM，SSH，服务端模板也有了 Velocity，FreeMark，Thymleaf 等等，这个时候的前端是高度耦合在服务端模板中的。第三个阶段前端半分离阶段：这个阶段往往浏览器首先请求 CDN 加载页面元素，然后通过 Ajax 异步请求后端数据，根据请求结果异步渲染页面，为什么叫办分离阶段呢?因为这个时候不完全是 SPA，还有其他的页面的路由仍然在后端，且应用的部署是动静分离式的部署方式，这个阶段好处是前端开发可以通过 mock 数据独立进行，缺点是不利于 SEO 以及移动端页面渲染，还有首页白屏问题。第四个阶段完全分离阶段：这个阶段的标志性事件就是 Node.js 的出现，这个时候后端路由交给 Node.js 来实现，后端只负责提供接口数据，既不参与页面路由也不参与页面数据渲染，Node.js 负责从后端拿到数据，接着对数据进行整合处理（BFF），最后通过模板将数据对页面填充，并根据浏览器的请求，将包含数据的页面返还给浏览器，也就是我们熟知的“中途岛”模式，至此前端迈向了步入全栈时代的坚实一步如上图：

聊聊 BFF

BFF 指的是为前端而存在的后端，需要特别强调的一点是这里各个端的应用都是 Web 应用（PC 端，移动端），和原生 App 没有任何关系，BFF 是连接后端和“大前端”的桥梁，对于后端而言 BFF 的出现使得后端业务下沉，接口复用性大大增强，后端的开发不用考虑前端适配，这样后端开发者的工作重心便主要放在了基础数据的业务逻辑实现上。对于前端开发来说，BFF 由前端开发者独立维护，BFF 在设计开发上可以领先后端一个版本以上，直接实现 MOCK 数据，后续再交由后端实现 MOCK 数据的替换，这样前端开发便不会受后端限制，形成前端拉动后端，及时满足客户需求的新的高效开发模式，总之 BFF 的出现完美的解决了 Web 多端的问题，是大前端开发最为有效，实用的实现方式。