前端后端开发：一站式解析开发流程与关键技术

一、引言

Web开发已经有近30年的历史，在Web发展的早期，并没有前端的概念，最初所有的开发工作都是由后端开发工程师完成的，随着业务越来越复杂，工作量逐渐增大，项目中可视化部分以及一些交互功能的开发逐渐从业务中分离出来，形成了前端开发。

2000 年左右，雅虎等公司开始设立前端工程师岗位，从 2005 年开始，正式的前端工程师角色被业界认可。到 2010 年，互联网开始全面进入移动时代，前端开发工作变得越来越重要，前端领域的技术发展也越来越快，各种新思想、设计模式、工具、平台飞速发展，对前端工程师的技能要求越来越高。此时国内各大互联网厂商也纷纷设立前端开发工程师岗位。

那么什么是前端工程师呢？这里我们可以把“前端”和“端”拆分开来理解。“前端”比较容易理解，相对于“后端”这个概念，而“端”的含义就不一样了，如下图所示：

广义上来说，凡是负责布局、排版、在客户端展示页面的工程师都可以称为前端工程师。不同的客户端使用不同的语言，包括：

由于浏览器是最古老、最著名的终端，因此使用JavaScript、HTML、CSS语言，负责在浏览器端显示页面的工程师被称为前端工程师。

2.入门阶段的《Web基础》2.1 Web三层结构

在 Web 1.0 信息共享时代，Web 发展的第一个阶段是静态技术阶段。在这个阶段，HTML 语言是 Web 向用户展示信息的最有效载体。此时常见的编写方式是将 HTML、CSS 和 JavaScript 代码混合到一个单独的文件中，命名为 index.html，并称之为网页。时至今日，仍然有很多网页将 HTML、CSS 和 JavaScript 代码写在一个文件中，但随着网页内容越来越复杂，将不同的代码写在一个文件中会使文件内容越来越臃肿，难以维护，因此就出现了 Web 三层结构的概念。Web 的三层结构如下图所示：

在同一个网页中，通过分离不同的代码层，可以让公共的代码模块在不同的项目中共享，减少代码冗余。当然，如何更合理地拆分不同的代码层，需要根据不同的项目具体分析，探索代码拆分的最佳方案，这里就不再赘述了。

2.2 DOM 和 BOM

在前端领域，DOM和BOM这两个概念非常重要。DOM是文档对象模型，将文档视为对象，主要处理网页内容的方法和接口；BOM是浏览器对象模型，将浏览器视为对象，与浏览器进行交互。两者关系如下：

BOM的核心对象是Window，例如访问屏幕物理分辨率的宽高如下：

// 屏幕物理分辨率的高 window.screen.height // 屏幕物理分辨率的宽 window.screen.width // 获取当前完整的url链接 window.location.href

DOM 最基础的对象是 document，它是 window 对象的一个​​属性，即 window.document。通过 document 对象可以获取 document 中的节点，也可以对节点进行操作。下面是一个简单的 document 对象树：

可以通过属性id获取a标签文档节点对象，如下

// 通过id为aLink属性获取标签a的文档对象 const eleDomObj = document.getElementById('aLink')

您也可以直接向 a 标签添加属性，如下所示：

const eleDomObj = document.getElementById('aLink')  eleDomObj.setAttribute('href', '******')

2.3 前端基础设施体系

上图主要展现了前端基础体系中前端开发人员需要熟悉的基础内容，前端基础体系中相关内容的实际细分或者扩充远不止上图中的总结。

3.“单页面应用、微前端”进阶阶段

3.1 AJAX 和单页应用程序

在Web 1.0阶段，服务器会返回整个页面或者文档，前端页面如果想获取后台数据，就必须刷新整个页面，用户体验非常不好。进入Web 2.0之后，动态网页逐渐发展起来，其中最重要的代表技术就是AJAX。AJAX允许客户端的JavaScript脚本为本地页面内容提供请求服务，然后动态刷新部分页面内容而不需要返回服务器，也就是更新浏览器中的文档对象，即DOM。在Web 2.0阶段，网站与用户的交互得到加强，网站内容基于用户提供，网站的很多功能也是由用户构建的，实现了网站与用户之间的双向交互沟通。

2004 年和 2005 年，Google 发布了两款重量级的 Web 产品：Gmail 和 Google Map，这两款产品都大量使用了 AJAX 技术。随着 AJAX 技术的流行，越来越多的网站使用 AJAX 来动态获取数据，这使得动态网页内容成为可能。加之当时 CDN 开始大量用于静态资源存储，于是出现了 SPA（Single Page Application，单页应用）。其大致模型如下图所示：

如上图所示，网页初始化时会加载相应的 HTML、JavaScript 和 CSS。页面一旦加载完成，SPA 就不会因为用户操作而重新加载或跳转页面，而是利用路由机制来实现 HTML 内容的变换以及 UI 与用户的交互，避免重新加载页面。SPA 的优势有以下几点：

单页应用的开发模式实现了前后端分离，使得整个业务系统架构清晰，可以单独开发和测试。但是当后端单页应用有多个不同的子模块，且子模块之间又有相对独立完整的功能体系时，一旦子功能模块增多，整个单页应用就会变得非常庞大臃肿，开发和维护成本就会大大增加。如果在这种场景下依然采用SPA模式，项目后期的维护将变得难以想象。这时候，微前端的概念就应运而生了。

3.2 微服务和微前端

说到微前端，就少不了微服务。后端的同学应该对微服务非常熟悉。微服务允许通过松耦合的代码库来扩展后端架构。每个代码库负责自己的业务逻辑并暴露一个 API。每个 API 都可以独立部署，由不同的团队拥有和维护。好处有：

微前端的思想是将微服务架构引入前端，主要应用于浏览器端。其核心是将 Web 应用拆开，最终将不同的子系统或子模块聚合成一个完整的应用。早期也可以使用 iframe 嵌套的方式将多个独立的功能模块整合到一个应用中，如目前客服领域一站式工作台的架构图所示：

如上图，红色部分是通过iframe嵌入的方式集成到工作台中的，通过iframe嵌入的方式，一站式工作台遇到了很多问题，主要问题如下：

基于以上问题，目前正在利用微前端的设计理念对客服领域一站式工作台架构进行重构和优化，如下图所示：

通过上图，将各个单独的功能模块拆分成不同的子应用。例如工单工作台为子应用，热线服务为子应用。不同子应用独立运行，互不影响。子应用共享主应用的资源，无需每次重新加载静态资源。各个子应用可以独立发布部署。

4. 高级阶段：“向全栈转型”

在 Web 技术兴起的很长一段时间里，前端开发者如果想开发服务端代码，就必须学习 JAVA 或者 PHP 等后端语言。自 2009 年 Node.js 兴起以来，JavaScript 开始可以在服务端运行。很多以前需要后端工程师使用传统后端语言才能完成的工作，在 Node.js 打造的运行环境中，前端工程师使用 JavaScript 理论上都可以完成。此时全栈开发者也逐渐得到了业界的认可。自 Node.js 兴起以来，凭借其高性能、易部署等优势，在前端领域涌现出了很多明星项目，比如 BFF、前端工程化的实践等。

4.1 什么是 BFF

BFF，全称 Backend For Frontend，意思是服务端在设计 API 的时候会考虑前端的使用，直接在服务端处理业务逻辑，又称为用户体验适配器。BFF 只是逻辑上的分层，并不是一项技术。BFF 的出现为前端应用调用业务服务提供了一个聚合点，屏蔽了复杂的服务调用链，让前端可以专注于需要的数据，而不用关注提供这些数据的底层服务。

设想如下场景：一个页面需要向服务 A、服务 B、服务 C 发送请求，不同的服务返回值用于渲染页面中不同的组件模块，也就是一个页​​面有很多请求，此时每次访问该页面都需要发送 3 个请求。同时为了满足 Android、iOS、Web 不同的需求，需要针对不同平台编写不同的 API 接口，每当值发生变化时，我们需要在每个客户端（Android、iOS、Web）上单独实现，这个成本显然是比较高的。当我们有了 BFF 层，就不需要考虑系统后端的迁移了，后端的变化在 BFF 层做相应的修改即可，如下：

如上图所示，随着BFF层的加入，原本每次访问三个请求缩减为一个请求，BFF层会提前把多个服务的数据聚合起来，返回给前端。

注：以上只是简单举例说明BFF分层的好处，实际复杂的业务场景会让BFF的设计变得复杂很多。

4.2 前端工程化实践

前端工程化主要基于 Node.js 开发，适合开发各种前端工具，例如包管理工具 npm 集成了各种工具模块，包括各种前端预编译工具、构建工具、脚手架、命令行工具等，其主要应用场景如下图所示：

5. 事前事后互相鼓励——总结

以上只是以多年前端开发经验的角度，讲解了后端同学需要了解的相关内容，实际前端内容远不止文中介绍的这些，例如移动端、布局排版、Hybrid、小程序、PWA与Serverless等等都属于前端技术领域，路漫漫其修远兮，吾将上下而求索。希望本文能给后端开发同学带来一些帮助和启发，也能让前端开发同学对前端知识有更深入的了解。

参考文件：

*文：毛元军

关注德物科技，每周一、三、五18:30更新技术资讯

如果觉得文章对你有帮助的话，欢迎评论、转发、点赞哦~