学习Vue之前-快速了解前端体系和前后端分离的演变史

前端体系

想要成为真正的互联网Java全栈工程师，前端是绕不开的一门必修课。
接下来我们就来认识前端、了解前端、掌握前端，为成为互联网Java全栈工程师而前进。

前端三要素

前端三要素为：

结构层（HTML）比较简单，省略。

表现层（CSS）

CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持。
它的主要缺陷如下：

因为这些缺陷导致我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为CSS 预处理器的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。
什么是CSS预处理器？
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。
简单来说就是：用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。
常用的CSS预处理器

行为层（Javascript）

JavaScript 一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
Native原生JS开发
原生JS开发，也就是让我们按照ECMAScript标准的开发方式，简称是 ES，特点是支持所有浏览器。ES 标准已发布如下版本：

从ES6开始每年发布一个版本，以年份作为名称，区别就是逐步增加新特性。
微软的标准：TypeScript
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格（C#、Delphi、 TypeScript 之父，.NET创立者）主导。

Javascript框架

jQuery

大家最熟知的Javascript库。优点是简化了 DOM 操作，缺点是DOM 操作太频繁，影响前端性能。在前端眼里使用它仅仅是为了兼容 IE6、7、8。

Angular

Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript 语法开发。对后台程序员友好，对前端程序员不太友好。最大的缺点是版本迭代不合理，如：1代 -> 2代，除了名字，基本就是两个东西，已推出了Angular6。

React

Facebook出品，一款高性能的 JS 前端框架。特点是提出了新概念虚拟 DOM用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率，缺点是使用复杂，因为需要额外学习一门JSX语言。

Vue

一款渐进式Javascript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。
其特点是综合了 Angular（模块化） 和 React（虚拟 DOM） 的优点。

Axios

前端通信框架。因为Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互，当然也可以直接选择使用jQuery提供的 AJAX 通信功能。

Javascript构建工具

前端需要掌握的后端技术

前端人员为了方便开发也需要掌握一定的后端技术，但Java 后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了Node.js这样的技术。
Node.js的作者已经声称放弃 Node.js（可能是因为架构做的不好再加上笨重的 node_modules让作者不爽了），并且开始开发全新架构的Deno。
既然是后台技术，那肯定也需要框架和项目管理工具，Node.js框架及项目管理工具如下：

UI框架

常用框架

iView

iView是一个强大的基于 Vue 的 UI 库，有很多实用的基础组件比ElementUI的组件更丰富，主要服务于PC界面的中后台产品。使用单文件的Vue组件化开发模式，基于npm + webpack + babel开发，支持ES2015（ES6）高质量、功能丰富、友好的 API ，自由灵活地使用空间。
官网地址： https://www.iviewui.com/

Github： https://github.com/TalkingData/iview-weapp

iview-admin： https://github.com/iview/iview-admin

备注：属于前端主流框架，选型时可考虑使用，主要特点是移动端支持较多。

ElementUI

ElementUI是饿了么前端开源维护的Vue UI组件库，组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。
官网地址：http://element-cn.eleme.io/#/zh-CN

Github：https://github.com/ElementUI/element-starter

vue-element-admin：https://github.com/PanJiaChen/vue-element-admin

备注：属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多。

ICE

飞冰是阿里巴巴团队基于React/Angular/Vue 的中后台应用解决方案，在阿里巴巴内部，已经有270多个来自几乎所有BU 的项目在使用。飞冰包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的中后台应用。
官网地址：https://alibaba.github.io/ice

Github：https://github.com/alibaba/ice

备注：主要组件还是以React 为主，截止2019年2月17日更新博客前对 Vue 的支持还不太完善，目前尚处于观望阶段。

VantUI

VantUI是有赞前端团队基于有赞统一的规范实现的Vue组件库，提供了一整套UI基础组件和业务组件。通过VantUI，可以快速搭建出风格统一的页面，提升开发效率。
官网地址：https://youzan.github.io/vant/#/zh-CN/intro

Github：https://github.com/youzan

AtUI

AtUI是一款基于Vue 2.x的前端UI组件库，主要用于快速开发PC网站产品。 它提供了一套npm + webpack + babel前端开发工作流程，CSS样式独立，即使采用不同的框架实现都能保持统一的UI风格。
官网地址：https://at-ui.github.io/at-ui/#/zh

Github：https://github.com/at-ui/at-ui

CubeUI

CubeUI是滴滴团队开发的基于Vue.js实现的精致移动端组件库。支持按需引入和后编译，轻量灵活，扩展性强，可以方便地基于现有组件实现二次开发。
官网地址：https://didi.github.io/cube-ui/#/zh-CN

Github：https://github.com/didi/cube-ui/

Flutter

Flutter是谷歌的移动端UI框架，可在极短的时间内构建Android和iOS上高质量的原生级应用。Flutter可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且Flutter是免费和开源的。
官网地址：https://flutter.dev/docs

Github：https://github.com/flutter/flutter

备注：Google出品，主要特点是快速构建原生APP应用程序，如做混合应用该框架为必选框架。

Ionic

Ionic 既是一个CSS框架也是一个Javascript UI库，Ionic是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用Javascript MVVM框架和AngularJS/Vue来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。
官网地址：https://ionicframework.com/

官网文档：https://ionicframework.com/docs/

Github：https://github.com/ionic-team/ionic

mpvue

mpvue 是美团开发的一个使用Vue.js开发小程序的前端框架，目前支持微信小程序、百度智能小程序，头条小程序和支付宝小程序。 框架基于Vue.js，修改了的运行时框架runtime 和代码编译器compiler实现，使其可运行在小程序环境中，从而为小程序开发引入了Vue.js开发体验。
官网地址：http://mpvue.com/

Github：https://github.com/Meituan-Dianping/mpvue

备注：完备的Vue开发体验，并且支持多平台的小程序开发，推荐使用。

WeUI

WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含 button、cell、dialog、toast、article、icon 等各式元素。
官网地址：https://weui.io/

Github：https://github.com/weui/weui.git

注：以上知识点已将 WebApp 开发所需技能全部梳理完毕。

前后端分离的演变史

后端为主的MVC时代

为了降低开发的复杂度，以后端为出发点，比如：Struts、SpringMVC 等框架的使用，就是后端的 MVC时代。
以SpringMVC流程为例，其运行流程如下图所示。

优点
MVC 是一个非常好的协作模式，能够有效降低代码的耦合度，从架构上能够让开发者明白代码应该写在哪里。为了让 View 更纯粹，还可以使用 Thymeleaf、Freemarker 等模板引擎，使模板里无法写入Java代码，让前后端分工更加清晰。
缺点

注：在这期间（2005 年以前），包括早期的 JSP、PHP 可以称之为 Web 1.0 时代。

基于Ajax带来的SPA时代

2005年Ajax（Asynchronous JavaScript And XML，异步 JavaScript 和 XML，老技术新用法）被正式提出并开始使用 CDN 作为静态资源存储，于是出现了JavaScript 王者归来（在这之前JS 都是用来在网页上贴狗皮膏药广告的）的 SPA（Single Page Application）单页面应用时代。
Ajax的运行原理如下图所示。

优点
这种模式下，前后端的分工非常清晰，前后端的关键协作点是 Ajax接口。看起来是如此美妙，但回过头来看看的话，这与 JSP 时代区别不大。复杂度从服务端的JSP里移到了浏览器的 Javascript，浏览器端变得很复杂。类似 Spring MVC，这个时代开始出现浏览器端的分层架构，其架构如下图所示。

缺点

前端为主的MV*时代

这里的MV*模式主要指的是以下三种模式：

为了降低前端开发复杂度，涌现了大量的前端框架，比如： AngularJS 、 React 、 Vue.js 、 EmberJS 等，这些框架总的原则是先按类型分层，比如 Templates、Controllers、Models，然后再在层内做切分，如下图所示。

优点

缺点

Node.js带来的全栈时代

前端为主的 MV* 模式解决了很多很多问题，但如上所述，依旧存在不少不足之处。随着 Node.js 的兴起，Javascript 开始有能力运行在服务端，这意味着可以有一种新的研发模式，如下图所示。

在这种研发模式下，前后端的职责很清晰。对前端来说，两个 UI 层各司其职：

通过 Node.js，Web Server 层也是 Javascript 代码，这意味着部分代码可前后复用，需要 SEO 的场景可以在服务端同步渲染，由于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足，通过这种模式也能完美解决。
与 JSP 模式相比，全栈模式是一种向原始开发模式的回归，不过是一种螺旋上升式的回归。
基于 NodeJS 的全栈模式，依旧面临很多挑战：

小结

综上所述，不管是模式还是技术，没有好坏优劣之分，只有适合不适合。前后分离的开发思想主要是基于 SoC （关注度分离原则），以上提到的种种模式，都是为了让前后端的职责更清晰，分工更合理高效。