1.简介Web开发至今已有近30年的历史。在web兴起的初期，并没有前端的概念。最初所有的开发工作都是由后端开发工程师完成的。随着业务越来越复杂，工作量逐渐加大，项目中可视化部分和一些交互功能的开发工作逐渐从业务中分离出来，形成前端开发。2000年前后，雅虎等公司开始设立前端工程师职位。从2005年开始，正式的前端工程师角色得到了业界的认可。到了2010年，互联网开始全面进入移动时代，前端开发的工作变得越来越重要。前端领域的技术发展也越来越快，各种新的思想、设计模式、工具和平台都在飞速发展，对前端工程师的技能要求也越来越高。此时，国内各大互联网厂商也纷纷设立前端开发工程师岗位。那么什么是前端工程师呢？这里我们可以拆分“前”和“端”来理解，“前”比较容易理解，相对于“后”的概念，“端”有不同的含义，如下图：广义上讲，所有负责在终端进行页面布局、排版、展示的工程师都可以称为前端工程师。不同的终端使用不同的语言，其中：浏览器端，IOS端使用JavaScript、HTML、CSS语言开发，Android端使用Swift或Objective-C语言开发，微信端使用Java语言开发，使用小程序开发由于浏览器是最古老也是最著名的一端，所以会在浏览器端使用JavaScript、HTML和CSS语言来展示页面的工程师被称为前端工程师。二、入门阶段——Web基础1、Web三层结构在Web1.0信息共享时代，Web发展的第一个阶段是静态技术阶段。现阶段，HTML语言是Web向用户展示信息最有效的载体。这时候常见的一种写法是将HTML、CSS、JavaScript代码混合到一个单独的文件中，命名为index.html，称之为网页。现在还有很多网页把HTML、CSS、JavaScript代码写在一个文件里，但是当网页内容越来越复杂的时候，在一个文件里写不同的代码会让文件内容越来越臃肿并且难以维护，所以出现了web三层结构的概念。网页的三层结构如下图所示：结构层：HTML标签，它们相互结合构成网页的基本结构；表现层：CSS，为标签添加样式，比如标签的颜色、大小、位置等；行为层：JavaScript用于实现网页的特效，在script标签中可以动态修改页面。在同一个网页中，将不同层的代码分开，这样可以在不同的项目中共享通用的代码模块，减少代码冗余。当然，如何更合理地拆分不同层的代码，需要根据不同的项目具体分析探索代码拆分的最佳方案，这里不再赘述。2.DOM和BOMDOM和BOM的概念在前端领域非常重要。DOM是文档对象模型，将文档作为一个对象，主要处理网页内容的方法和接口；BOM即浏览器对象模型，将浏览器视为一个对象，与浏览器进行交互。方法和接口。两者关系如下：BOM的核心对象是Window，比如访问屏幕物理分辨率的宽高，如下：//屏幕物理分辨率的高度window.screen.height//屏幕物理分辨率的宽度window.screen.width//获取当前完整的url链接window.location.hrefDOM的基础对象是document，是window对象的属性，即窗口.文档。您可以通过文档对象获取文档中的节点，并对节点进行操作。下面是一个简单的文档对象树：可以通过属性id获取一个标签的文档节点对象，如下//通过id作为aLink属性获取标签a的文档对象consteleDomObj=document.getElementById('aLink')也可以直接给a标签添加属性，如下：consteleDomObj=document.getElementById('aLink')eleDomObj.setAttribute('href','******')3.前端基础系统上图主要展示了前端开发作为front-end中的基础系统，需要熟悉基础内容。前端基础系统相关内容的实际细分或扩展远不止上图的总结。三、进阶阶段——单页面应用和微前端1、AJAX和单页面应用在Web1.0阶段，服务器会返回整个页面或文档，前端页面需要刷新整个页面才能获取后台数据，非常糟糕的用户体验。进入Web2.0后，动态网页逐渐发展起来，最重要的代表技术就是AJAX。AJAX允许客户端JavaScript脚本对部分页面内容提供请求服务，然后在不返回服务器的情况下动态刷新部分页面内容，也就是更新浏览器中的文档对象，也就是DOM。Web2.0阶段加强了网站与用户的交互。网站的内容由用户提供，网站的许多功能也由用户构建，实现了网站与用户的双向交互。2004年和2005年，谷歌发布了两款重量级的Web产品：Gmail和GoogleMap，都大量使用了AJAX技术。随着AJAX技术的普及，越来越多的网站使用AJAX动态获取数据，使得动态网页内容成为可能。另外，当时CDN开始广泛用于静态资源存储，于是SPA（SinglePageApplication单页应用）出现了。Application），一般模式如下图所示：如上图所示，在网页初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完毕，SPA不会因为用户的操作而重新加载或跳转页面。而是通过路由机制实现HTML内容的转换，UI与用户的交互，避免页面重载。这样一来，SPA的优势在于：前后端分离开发：前后端职责分离，结构清晰，前端进行交互逻辑，后端-end负责数据处理。单页Web应用可以与RESTful协议一起使用，通过RESTAPI提供接口数据，并使用AJAX异步获取数据；良好的交互体验：可以提升页面切换体验，用户在访问应用页面时不会频繁切换浏览页面，避免不必要的跳转和重复渲染。单页面应用开发模式，实现了前后端分离，使得整个业务系统架构清晰，可以独立开发和测试。但是，当中后台单页应用有多个不同的子模块，并且子模块之间有相对独立和完整的功能系统时，一旦子功能模块越来越多，整个单页应用会变得很大很肿。开发和维护成本将大大增加。如果在这种场景下仍然采用SPA模型进行开发，那么项目后期的维护将变得难以想象。这时，微前端的概念应运而生。2.微服务和微前端提到微前端，就离不开微服务。后端同学应该对微服务非常熟悉了。微服务允许通过松散耦合的代码库扩展后端架构。每个代码库负责自己的业务逻辑，并公开一个API，每个都可以独立部署，并且每个都由不同的团队拥有和维护。它带来的好处是：将一个庞大的单体拆解成多个子服务，大大降低了开发复杂度；任务边界清晰，各子服务独立开发，不同服务可由不同开发人员并行开发，提高开发效率；更细粒度的增强模块化过程，更高的可维护性和可读性；每个微服务都可以独立部署和发布，使自动化CI（持续集成）/CD（持续交付）成为可能。微前端的思想是在前端引入微服务架构，主要应用于浏览器端。其核心是将Web应用拆解，最终将不同的子系统或子模块聚合成一个完整的应用。早期也可以通过iframe嵌套实现多个独立的功能模块集成在一个应用中，目前客服领域一站式工作台的架构：如图上图中，红色部分是通过iframe嵌入方式集成到工作台中的。通过iframe嵌套的方式，一站式工作台遇到了很多问题。主要问题如下：agent协助创建工单模块，一线客服的切换频率和操作流程非常快，不同模块之间通过postMessage消息进行通信时存在延时，工单已序列化；工单详情使用频率很高，每次打开都需要重新加载静态资源，渲染效率低，用户体验比较差；一线客服通常会打开多个带有工单详情或订单详情的iframe。过多的iframe会占用大量浏览器内存，导致消息发送延迟，影响用户的首次响应时间。基于以上问题，目前客服领域的一站式工作台架构正在利用微前端的设计思想进行重构和优化，如下图所示：通过上图，每个单独的功能模块拆分成不同的子应用，比如工单工作台是一个子应用，热线服务是一个子应用。不同的子应用程序独立运行，互不影响。子应用程序共享主应用程序的资源。无需每次都重新加载静态资源。每个子应用都可以独立发布和部署。4、高阶阶段——向全栈转型在Web技术兴起的漫长时期，前端开发工程师要想开发服务端代码，就必须学习JAVA或PHP等后端语言。自2009年，Node.js兴起后，JavaScript开始可以在服务端运行。很多以前需要后端工程师使用传统后端语言的工作，理论上都可以由前端工程师在Node.js打造的运行环境下使用JavaScript来完成。这时候全栈开发工程师逐渐被业界认可。自从Node.js兴起以来，前端领域凭借其高性能和易部署等特点涌现出许多明星项目，比如BFF和前端工程实践。1、什么是BFFBFF，即BackendForFrontend（为前端服务的后端），即服务端在设计API时会考虑前端的使用，直接在服务端处理业务逻辑，也称为作为用户体验适配器。BFF只是一种逻辑分层，而不是一种技术。BFF的出现为前端应用提供了业务服务调用的聚合点。它屏蔽了复杂的服务调用链，让前端专注于需要的数据，而不是底层提供这些数据的服务。想象如下场景：一个页面需要向服务A、服务B、服务C发送请求，在页面中使用不同的服务返回值渲染不同的组件模块，也就是一个请求很多的场景在一页上。此时，每次访问页面需要3次请求。同时，为了保证Android、iOS和Web的不同需求，我们需要针对不同的平台编写不同的API接口，每当值发生变化时，需要在各个客户端（Android、iOS、Web）上分别实现).这样的成本显然是相当可观的。而当我们有了BFF层之后，就不需要考虑系统后端的迁移了。后端的任何更改都可以在BFF层中修改。具体如下：如上图所示，加入BFF层，原本每次访问发送3个请求，变成一个请求，BFF层会提前聚合多个服务的数据返回给前端。备注：以上只是一个简单的例子来说明BFF分层的好处。在实际复杂的业务场景中，BFF的设计会复杂很多。2.前端工程实践前端工程主要是基于Node.js开发的。Node.js适合开发前端方向的各种工具。例如包管理工具npm集成了各种工具模块，包括各种前端预编译工具、构建工具、脚手架、命令行工具等。其主要应用场景如下图所示：5.前后鼓励--总结前端不要局限于html、css和javascript，需要了解服务器和数据库相关知识，以便在复习的时候配合后端的技术方案，我们可以提出一些合理的解决方案建议；前端需要理解数据，控制数据以外的业务逻辑，不能只关注页面的展示；后端需要了解前端相关的知识，考虑页面渲染需要什么样的数据结构，所以在设计RESTAPI时，可以输出合理的数据结构给前端渲染页面；后端需要有一定的前端技能。前端完成对素材库的组件化输出后，后端可以根据素材库的业务组件完成页面构建。提高研发效率。以上只是从多年前端开发的角度出发，阐述后端同学需要了解的相关内容。前端实际内容远不止文中描述的，移动端、布局布局、Hybrid、小程序、PWA、Serverless等。前端技术领域，任重而道远，我会上下搜索。希望本文能给后端开发同学带来一些帮助和启发，也能让前端开发同学对前端知识有更好的了解。6.参考文档淘宝宇博项目后端开发所需的前端知识触发Web前后端研发模型讨论WEB开发简史，从Web1.0到Web1.0的发展历程Web3.0《科普》前端工程师简史JavaScriptDom和Bom微前端架构初探及我的前端技术盘点狼叔：Node全栈给前端带来更多可能文/Bill关注事物的科技，做最时尚的科技人！
