回顾前端发展进化的过程，是一段特别有意思的历史。早期，其实并没有前端工程师这个角色，无论是否正式设立前端这个岗位，Web 开发工程师兼顾后台数据和用户端展现给用户呈现完整内容。随着业务日趋复杂加之移动互联网快速演进，现在 Web 的展现形式进入百花齐放时代。从传统 PC 内容展现、复杂富交互应用程序、移动设备上 m 版站点到结合 Native 的混合应用，单一的前端开发模式满足不了如此丰富的 Web 研发模式。
面对如此丰富的业务形态与用户终端设备的要求，笔者在美团所负责的业务包括对其他业务横向的了解，都针对不同场景，从业务特点、系统服务的用户、系统维护和团队成员情况等维度考量，采取了适合自身的前端开发模式。
早期的前端开发在整个 Web 研发中更像个装修工，仅负责用户端多终端的内容呈现（浏览器、Native 内 WebView），整个交互比较简单，所谓后端做菜，前端端盘子。而现在，内容呈现只是前端最基本要求，路由管理、鉴权和 SEO（前端服务端渲染让前端掌控更强）等都可以被纳入进来。为了能做好这些事，前端能控制的开发关键因素必定会进一步扩大。
上图为笔者总结的前端开发模式关键因素：置于最前的是框架选型，根据业务和团队实际情况，本着开发效率考量，选择适合的技术框架。处于框架之后，必定需要选择或者自建一套组件库。而测试是大型项目必不可少的一个环节，这块包含单元测试和自动化测试两块。不论工程大小，都会有工程化的理念在里面，不管简单的命令行自动化控制和工程相关的构建部署，还是使用专业构建工具 Gulp 或者 Webpack（也可以是结合使用）对项目进行全方位配置打包和最后的部署，都属于它的范畴。最后是项目上线之后的运行监控，主要包括性能和错误监控两块。
上述是一个成体系的开发关键因素，说是关键因素，但项目并非一定要所有方面都具备。不同的业务、不同的项目、甚至同一个业务项目处于不同的时期，这些关键因素也非一成不变。根据业务项目结合业务处于的时期，选择核心关键因素，快速进行开发，推动业务往前走是我们的最终目标。
简单并且给内部用户使用的后台系统，方便查看一些交易数据，查看方式固定，后续的变动不大，就不需要单测、运行监控甚至也不需要复杂的工程化理念。但是一个直接面向用户，纯移动端 H5 或者内嵌在移动端 App 内的项目，就必须所有方面都要兼顾到。
演进关键点：
按照正常思维来看，Web 内容都是单服务端（后端）生成的，要想优化前端开发模式，只能从服务端着手，去优化服务端的工程组织形式。由此衍生出来了优秀的服务端 MVC 架构，一定程度上分离了展现、数据和模型，提高了前端开发效率。
此外，内容拉取形式和浏览器展现形式也是开发模式演进的着力点。以下介绍的开发模式改进的关键点均来自这三个因素。
后端为主 MVC 模式，顾名思义，此模式主要改进的是后端工程架构组织形式，前端 HTML 等模版文件还是存放在后端服务端，CSS 和 JavaScript 可以根据实际情况选择是否存放在服务端还是 CDN 上。
主要包含以下几个要点：
Model：用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。
View：进行数据显示及处理用户端交互，前端工程主要在这块。
Ctrl：处理用户交互，负责转发请求，并对请求进行处理（向模型请求数据或发送数据）
如图所示，一个典型的基于 J2EE 的实例可以是：Model 用 JavaBean 来建模，View 用 JSP 来担任，Ctrl 就是 Servlet。基本上，熟悉任意一门后端语言的前端工程师亦或是了解前端相关技术栈的后端工程师都可以利用此模式快速构建起来一套系统。适合没有或是 缺乏专职前端工程师的团队快速构建一些中后台系统。在此模式中，前端相关技术栈要求不高，JavaScript 可以使用传统原生、jQuery 或者 Angular..结合 Bootstrap 处理样式，另外构建上可以使用 Gulp 把工作流建设起来，提高开发测试效率。
「前后端分离」并不是新的话题，早在 Node 出现之前，就有通过使用 Python 设立中间层来分离前后端。直到 Node 开始流行起来，前端工程师和 Node 天然熟悉的特点，让基于 Node 的前后端分离走向新的时代。
主要包含以下几个要点：
模版文件的存放，静态资源发布
路由及 Controller 的维护
Node 的服务和运维
以上为一个典型的基于 Node 的前后端分离架构：用户发送的请求首先经过 HLB（一款负载均衡解决方案）。然后是前端服务器 Node Server，可使用 PM2 来进行服务部署、进程监控和日志收集，另外，基于 Node 的 Web 框架 Express 或者 Koa 实现轻量的中间层，处理路由、Controllers 及视图的渲染。数据的获取在 Node 层或者用户端通过 RESTful 的 API 接口使用 JSON 格式交互。后端在这里只关注数据一层即可，完全实现了前后端分离。
由于增加了 Node 这一中间层，前端可完全掌握模版文件和路由，也可以做服务端渲染，有益于进行首屏渲染等页面加载方面的优化和 SEO。这些特点天然适合性能敏感的项目和强 SEO 项目，如移动端 H5 项目和 PC 端直接面向用户的项目。
此外，由于 Node 可操作数据库，这意味着前端也有了除 Web 缓存之后的自己的数据库，有非常大的可想象空间。能处理请求路由、有自己的 Controller、可以做服务端渲染、可结合使用数据库，这基本上意味着实现了前端主 R 的全栈开发。
如果用过 Hexo / Jekyll，相信对于静态页面就不会陌生，它们其实是一套发布系统，核心仅仅是把你的静态页面 Push 到 Github Pages 上去。然后用户访问的是静态页面，而非动态网页（PHP、JSP等），服务端在网页内容上不做任何事，仅仅就是返回给你原本的内容，所有动态内容全部终端实现。
那么，纯静态化前端开发模式，就是实现一套类似于 Hexo / Jekyll 的发布系统，匹配到类似于 GitHub Pages 的存储地。只要存储地稳定，前端不用关注进程、服务这一层的事。现在绝大多数运维都有能力构建一套云环境，并开发和开启静态网站托管。
以上是纯静态化前端开发工作原理图：用户发起的页面请求首先经过 Nginx 转发到静态资源托管地 Bucket。Bucket 通过配置查找并返回用户需要的静态页面，该过程没有任何动态内容，没有服务端渲染。用户端接受到静态页面，该静态页面具有前端 JavaScript 生成页面逻辑，通过 Ajax 请求并返回 JSON 格式数据，最后渲染真正完整的用户界面。
可以看到，这种开发模式也实现了前后端分离，严格意义来讲，是一种缺乏服务端渲染的前后端分离。JavaScript、CSS 和图标图片文件等静态资源都可以通过它来存取，也可以通过 CDN 进行承载。
不管使用哪种开发模式，技术覆盖的大体范围不会有很大变动。基础技术栈包括框架和组件库选型，这块考验的是业务理解结合团队情况的能力。调试不同项目需要覆盖的环境不一样，有浏览器（PC 和移动端）、移动设备（主要是 iOS 和 Android）WebView。构建现阶段最好是 Webpack 打包结合 Gulp 建设工作流。单测 Mocha 结合断言库 Chai 是不错的选择。发布和部署可利用 Gulp 结合公司情况定制。监控包含性能和错误两块，美团开源监控平台是个不错的选择。
| 选型 | 后端为主MVC | 基于NodeJS的前后端分离 | 纯静态化开发模式 |
|---|
| 优势 | 搭建简单、快速 | 前后端分离、前端范围扩大、控制力强 | 最小代价的前后端分离 |
| 不足 | 前后端没分离、需要整套搭建环境、本地开发不易 | 需要额外维护Node层、技术栈要求较高 | 缺乏服务端渲染、性能有所影响 |
| 适合 | 缺乏专业前端、前端变化不大项目 | 大型性能敏感项目 | 小型轻量项目、中后台系统 |
以上是总结的目前比较普遍的前端开发模式，前端这个圈子还在不断快速变化，前端开发模式的演进没有终点。整理和加强对现阶段各种开发模式的理解，有助于让我们从大处着眼项目中开发模式不合理之处，从细微处进行一步步改进。短期来看，前端开发模式演进稍微有所缓和，长期来看，随着技术更新换代，新的开发模式已经蓄势待发。让我们站在前人的肩膀上展望未来。
简历请投递至邮箱
FSP.FE@meituan.com
xulele@meituan.com
（简历邮件请标注来自公众号）
新美大智能支付终端团队
面向互联网开发从业者；
我们将分享团队技术文章，提供研发岗位招聘信息等。