架构 | 前后端分离与前端工程化

前言

1. 本文将用最言简意赅的语言阐述前后端分离与前端工程化，并解答一些认知误区。
2. 前后端分离和前端工程化经历过一个漫长甚至畸形的发展过程，在近两年的具体实施形式又发生了急速突变。
   本文作为基础的普及，仅描述最为主流和常规的方案。
3. 本文主要面向无前后端开发经历的读者，故有意省略细节。
4. 想要直观，快速效果本文，建议本地创建一个vue-cli项目，进行对照查看

前后端分离

核心

前后端分离会连带一套全新的前端后生态，但其核心改动就是，前端部分从后端的server page(如jsp,asp,php）中抽离出来，成为独立的web工程。而后端的末端为web service接口，末端仅专注于数据提供。
分离以后，前端项目将单独部署到HTTP服务器上，一般使用ngix。分离后的请求流程为前端请求ngix，ngix请求后端应用服务器，应用服务器响应路径原来返回。

吴小胖的漫画直观地反映了当前WEB项目的主流前后端框架。

对开发行为和职责的直接影响

1. 开发过程中不再存在静态页面与server page的来回转换，前后端在开发场景上完全解耦。
2. 由于前端项目的完全独立，前端成为独立团队，需要对前端项目的需求，开发和上线全权负责。
3. 由于与后端controller层脱离，前端需要独立进行前端页面的跳转（路由），权限控制的处理

前端工程化

所谓前端工程化，无论使用哪种具体的框架，vue/react/angular脚手架,都是基于webpack的开发模式，webpack是基于node的前端资源打包器，它负责整个项目的编译，打包，并充当开发时的本地服务器。
所谓编译，就是把浏览器不认识的文件和资源一律转变为原子的js,html和css，打包就是对编译后的资源做去冗余，压缩，按照你设定的文件结构进行整合，形成可以部署的web项目。
而webpack-dev-server则充当开发时的本地服务器，其本质是一个集成若干预配置和开发者自定义配置的node服务器。

本地代理与ngix反向代理

前后端分离以后，本地开发和项目上线后的跨域问题是不可避免的。在开发环境下，配置webpack的proxyTable，对请求进行本地代理，简而言之就是，本地请求代理地址，代理地址实际指向应用服务器实际地址；当项目部署到ngix上后，在web项目的产品配置和ngix上也要做类似的操作，使web项目的请求指向ngix，ngix做反向代理。

node是什么，有什么特点，与前后端分离，前端工程化的关系

首先，明确node是什么，node就是脱离了浏览器环境的V8引擎，更直白点说，是可以运行在服务器上的JavaScript 运行环境。
有了node，你就可以在服务器上跑JavaScript脚本了。
尽管为了更好地服务于服务器端场景，Node的V8引擎与浏览器端存在差异，但这并不影响Node环境继承了传统JavaScript的核心特点——单线程异步非阻塞与事件驱动。
而作为一个服务器脚本环境，node本身与前后端分离没有任何直接关系。使用node做服务器端，可以使用jade/pug等后端模板引擎写前端页面，如此开发，结果仍是一个单体工程。
node与前后端分离，前端工程化的关系实属间接。
前端工程化基于webpack，webpack基于node，而工程化的前端项目则是前后端分离后的前端部分。

node,npm，package.json与webpack

npm是node附带的包管理工具，无论是开发服务器端工程，或是工程化前端项目，我们都使用npm进行包的下载与依赖管理，package.json是项目的包与模块管理清单，内里记录了项目的基本信息，执行脚本，开发环境依赖包，生产环境依赖包等信息，
注意，npm仅仅是包管理工具，项目的最终编译，打包仍需webpack进行处理，webpack打包时，会参考package.json的生产环境依赖包，将其打包到最终项目中，至于其他冗余依赖，非必要依赖则不会被打包到最终产品中

vue,vue-cli,webpack

vue只是一个mvvm，以数据驱动为主导思想的view层解决方案，区别于原生JS与JQuery的DOM驱动，它只是一个js库，不是框架，与jquery地位和定位相同，可以在传统开发中使用，并不只有工程化场景可以使用vue。
vue-cli是基于vue的工程化框架，本质是预配置webpack项目模板。一个常见的vue前端工程的基本技术栈组成为vue-cli+ vue+vue-router+vuex+axios+任一基于vue实现的UI框架，如element，vue-antd等。

ES6,node和vue

ES6即ECMAScript2015,是标志Javascript现代化的重要语法标准版本，但需要注意的是，我们常说的ES6，包括但不限于2015，实际指的是从2015年往后已经被现代浏览器支持的JS语法特性。
ECMAScript可与JAVA/JDK做类比，两者之间主要区别在于，js无需本地运行环境，js依托浏览器或node。这也意味着，ECMAScript的某一版本，某一特性是否可行，取决于特定版本的浏览器或Node是否支持该特性。
node虽然是前端现代化开发的基石，但因为node的诞生远早于ES6的发布，故Node有自己的一套实现，如在模块导入导出上使用commonJS,区别于ES6 module。Node至今仍未完全支持ES6语法，必要时需要使用babel进行转义。
vue自2.0版本以后，就极力贴靠ES6，并推荐开发者，尤其是在使用vue-cli进行开发时，使用ES6语法。
实际上，当前主流的三大框架都有自己的一套JavaScript语法：angular+typescript，react+typescript/ES5+ES6,vue+ES6.

结语

本文讲述的是最常规的前后端分离与前端工程化架构，实际上，node中间件+PC端SSR+移动端跨平台开发正在替代常规的前后端分离+无差别SAP+hybrid模式.
但技术终归是服务于需求的，选择怎样的架构，因场景，因团队而异。适合适用就是最好的，能得到甲方认可，能有市场占有量的产品就是好产品。工作安安心心，快快乐乐就是好工作。前沿技术和好产品，好工作并没有直接关联。