本文正在参加「金石计划 . 瓜分6万现金大奖」
这一讲，我将从前端发展的演进历史，带来了解现代化开发的方向。在了解完这段历史之后，相信你能够认识到 Vue 在前端框架中的地位。
前端框架的发展历史可能也会让你感触很多。因为每一个上网的人，或多或少都会 感觉到前端网页在这些年发生了很多的变化，这是一种切身的、直观的体会。我们都能感 觉到网页在设计模式、渲染等等地方的变化，而这种种变化的背后，其实都可以放到前端 框架的演变历史中来解释。
前端发展历程
前端发展至今，大致可以把它分类 6 个具有代表性的阶段：原始时期、浏览器之争、Ajax 时代、JQuery 时代、后 JQuery 时代以及大前端时代。
1990 年，诞生了第一款 Web 网页，当时 Web 网页只是实现了简单的文本显示和超链接，是以 HTML 为基础。
到了 1992 年的时候，网页终于可以实现放图片的功能，但是图片是需要提前使用图片处理工具进行处理。
1993 年，第一款正式的浏览器 Mosaic 浏览器诞生了，它在可视化方面使得浏览器更加的界面友好。
1994 年是非常关键的一年， PHP（超文本预处理器） 脚本语言被开发出来，开启了数据嵌入模板的 MVC 模式，实现了将数据内容动态的嵌入到 HTML 代码中，该技术随后也影响了 JSP 和 ASP 技术。同年，网景公司推出了第一款商业浏览器，即 Navigater。网景公司在前端的历史上有着举足轻重的地位，它不仅推出了第一款商业浏览器，同时它也是前端开发里面的创造者和前端的标准的推动者。同年，W3C 组织成立，它致力于统一网页的制作标准。
1995 年，这个爱搞事的网景公司，拜托一位 Brendan Eich 工程师，但愿开发出一个相似 Java 的脚本语言，用来提高浏览器的展现效果，加强动态交互能力。结果，据说大佬十来天就把这个脚本语言开发出来了，并且功能非常强大。起初这个脚本语言的名字叫做 Mocha，后来又叫做 LiveScript，最后为了蹭 Java 的热度，改名为 JavaScript。这样就渐渐造成了前端的雏形：HTML 为骨架，CSS 为外貌，JavaScript 为交互。
JavaScript 和 Java 没有任何关系，但吸收了 C++ 和 Java 等语言一些优点。JavaScript 推出的目标是为了达到更快的开发效率，但同时也存在着不够严谨这个非常严重的缺点，比如它没有类型的区别，因而后续的TypeScript 等技术都是为了弥补 JavaScript 语言的不足。
1994 年到 2005 年，各个厂家纷纷将自家的浏览器涌入市场，和玩具、火狐和空浏览器都进行了一场斗争，其中比较出名的就是微软和网景之间的斗争。我们都知道 Windows 操作系统是微软的摇情树，微软其实刚开始是看不上浏览器这块市场，但后来看到网景公司的浏览器市场相当的好，也决定进军这块领域。
但是网景公司有先的优势，当时已经占据了差不多 90% 多的市场份额。微软当年也是使用一些手段，比如把浏览器和自家的操作系统进行捆绑销售。然后网景公司倒闭，浏览器战争以微软的IE大获全胜而告终。
IE 浏览器独霸一方，此时，IE 浏览器开发的大佬并没有重视 W3C 制定的开发标准，并且迭代速度也变得越来越慢，存在很多的安全漏洞，导致用户体验非常不好。
2004 年，ECMA 公司基于网景公司推出了火狐浏览器。
2009 年，谷歌推出了 Chrome 浏览器。Chrome 浏览器一经推出，凭借优秀的性能和网络安全在市场上获得了很大的成功。
2012 年之后，Chrome 浏览器取代 IE 浏览器，成为了浏览器市场的霸主。
在1996年到 1999 年这几年之间，网景公司决定将 JavaScript 提交给国际标准化组织 ECMA。期间诞生的 CSS 语言，实现了全面内容和样式的分离。
2000 年，CSS3 标准发布。
2005 年到 2009 年，这一时期最为显著的技术是谷歌推出的 Ajax。相对于 Web1.0 时代的静态网页纯内容展示，Web2.0 时时代的特点是动态网页富交互、前端处理数据，它可以在不刷新页面的情况下更改局部网页的内容。Ajax 这个技术让我们可以异步的获取数据并且刷新页面，从此前端不再受限于后端的模板，这也宣告了 Web2.0 时代正式到来。 至此，前端工程师也正式作为一个独立工种出现。
这个技术可以使前端对数据有了更多的主动权，不再完全依附于后端，即对数据进行处理。
2009 年到 2016 年，我们迎来了 JQuery 的时代。JQuery 是跨浏览器、跨平台的 JavaScript。使得 DOM 操作、BOM 操作以及 Ajax 操作变得更加的简单。其中，链式操作是 JQuery 特色之一，这个时期各路大神纷纷入场，各显神通。
2012 年到 2016 年是属于后期 JQuery 时代，这个时期各个前端框架脱颖而出，JQuery 逐渐退出历史舞台。
后期 JQuery 时代，人们开始思考模块化和体进化，以提高前端代码的复用率和可维护性。CommonJs 和 AMD 就是在这个时期推出的前端模块化标准。
2015 年推出了 ECMAScript2015，也是我们现在所说的 ES6，同年 HTM5 也发布了。
这个时期的兴起有 Node.js、Angular.js、React.js 以及 Vue.js。
Node.js 实现原理是 Chrome 浏览器的底层技术。Node.js 应用非常的广泛，比如 NPM 包管理器、Webpack 打包工具、Express 和 Koa 框架。
2016 年到现在，也就是我们现在所说的大前端时期，这个时期前端技术不再局限于 PC 端或者移动端，而是你将它的范围拓宽到了小程序以及部分后端业务当中。
Angular.js、React.js 以及 Vue.js 这三大框架得到了广泛应用，同时也推出了各自的移动端框架。也正是它们的出现，JQuery 的时代渐渐退去。
这三大框架实现了数据和视图自动同步，更大程度上提高了前端的开发效率。
Node.js 的诞生，使得 Web 工程师能够开发服务端的能力。它真正的核心是给了前端工程师操作文件系统的能力。
Node.js 不仅可以用来写服务端任务，而且可以实现各种脚手架，各种打包器。Node.js 让 Web 开始变成一个越来越工程化，也使得前端的门槛变得更高。
微信小程序解决的是 APP 的快速开发和迭代，它产自国内，有自己的一套开发工具，是移动端市场快速发展的产物。
微信小程序最大的好处是，不需要做设备适配，只要微信能运行小程序即可。
前端三大框架
现在，你可能会问自己现在哪个 JavaScript 框架更适合学习？React、Angular 以及 Vue 都是目前市场比较热门的框架。
下面，我们就讨论这三者之间的区别，并尝试选择在你项目中学习和使用哪个框架。它们几乎可以互换使用来构建前端应用程序，但它们并非 100% 的相同，因此，比较它们并了解它们的差异是有意义的。
React 不强制执行特定的项目结构，正如你从下面的官网的 “Hello World”示例中看到的那样子，你只需要几行代码即可开始使用 React。
import React,{Component} from 'react';
class App extends component {
render(){
return (
<div className="App">
<h1>Hel1o wolrd </h1>
</div>
);
}
}
export default App;
React 可以用作 UI 库来呈现元素，而无需强制执行特定的项目结构，这就是为什么它不是严格意义上的框架。
React Elements 是 React 应用程序的最小构建块，它们比 DOM 元素更加强大，因为 React DOM 确保在发生变化时有效地更新它们。
组件是更强大的构建块，它定义了要在整个应用程序中使用的独立且可重用的部分，并且接受称为 props 的输入并生成元素，然后显示给用户。
React 基于 JavaScript，但它主要与 JSX 结合使用，JSX 是一种语法扩展，允许你创建同时包含 HTML 和 JavaScript 的元素。
许多前端应用程序依赖全局状态管理来存储信息，例如谁登录和其他用户设置，最受欢迎的 JavaScript 状态管理项目是 Redux。
大多数开发人员使用 Redux 的官方 React 绑定，由 Redux 团队维护。
由于 React 的流行，查找输入组件和即用型元素非常容易，它们都只是从谷歌或 GitHub 搜索。
React 生态系统还包括 React Native，它允许你从用 React 编写的单个代码库构建原生 iOS 和 Android 应用程序。因此 React 也可以成为使用 Web 技术构建移动应用程序的绝佳选择。
React 是 MERN 技术栈的一部分，其中包含 MongoDB、Express.js、React 和 Node.js。这种组合的好处在于单语言 JavaScript 为整个应用程序提供动力。
React 通过官方的 ReactDOMServer 包支持服务端渲染。对于虚拟机，你可以使用一个流行的第三方工具，即 React Virtualized。
在其最基本的使用例中，React 是三个框架中最简单的，那是因为你只需要导入库，然后你就可以开始用几行代码编写你的 React 应用程序。但除了 “Hello World”示例之外，大多数 React 应用程序都是基于组件，并且不只是在页面上呈现一些元素。
一些开发人员对 React 感到奇怪和困难的一件事是学习 JSX 是一条单行道。其实你也可以使用原始 JavaScript，但由于大多数 React 开发人员使用 JSX，因此学习它几乎是不可避免的。
这使得 React 的学习变得困难的主要因素，但除此之外，对于了解 JavaScript 和 了解 Web 开发概念的开发人员来说，它是一个易于学习的库。
Angular 框架最初的框架是一个 MVC（模型-视图-控制器） 框架。但在 Angular2 中，与 MV* 模式没有严格的关联，因为它也是基于组件。
Angular 中的项目被结构化为模块、组件和服务，每个 Angular 应用程序至少有一个根组件和一个跟模块。Angular 中的每个组件都包含一个模块、一个定义应用程序逻辑的类和元数据（装饰器）。
组件的元数据告诉 Angular 在哪里可以找到它，需要创建和呈现其视图的构建块。
Angular 模块是使用 HTML 编写的，但也可以包含带有特殊指令的 Angular 模板语法，以输出反应数据和渲染多个元素等。
组件使用 Angular 中的服务来委派业务逻辑任务，例如获取数据和验证输入。它们是 Angular 应用程序的一个独特部分。虽然 Angular 不强制使用它们，但强烈建议将应用程序构建为一组可以重用的不同服务。
Angular 是在 TypeScript 中构建的，因此建议使用它以获得最无缝的体验，但也支持纯的 JavaScript。
对于 Angular 中的状态管理，你可以使用 NgRx 项目，它受到 Redux 的启发，但它是专门为 Angular 创建的。
与 React 一样，你可以将许多现成的组件导入到你的项目中，Angular 稍微有所不同，Angular Material 项目中有很多官方组件。这是 Google 的一个官方项目，为 Angular 应用程序提供的 Material Design 组件。
你可以使用 NativeScript 在 Angular 中构建跨平台的移动应用程序，它也支持 vue，但对 Angular 的支持更加成熟和稳定。
Angular 是著名的 MEAN 技术栈的一部分，它将 Angular 与 MongoDB、Express.js 和 Node.js 结合在一起。与 MERN 技术栈类似，它的前端和后端都完全依赖于 JavaScript。
Angular 有官方的 SSR（Server-Side Rendering）Angular Universal 包，以及用于虚拟滚动和高效渲染大型列表的官方组件。
Angular 是三者中最为复杂的项目结构，而且由于它是一个成熟前端框架，它依赖更多的概念。
除了组件，Angular 还支持模块和服务，它希望你以特定的方式编写和设计代码库，使你的项目在扩展时易于维护。
至于语法，由于 Angular 最适合使用 TypeScript，因此，在构建 Angular 项目时了解 TypeScript 非常重要。
与 Vue 一样，你还必须熟悉类似 HTML 的语法，以便你可以开始使用 Angular 编写新的 UI 功能。
许多开发人员认为 Angular 对于普通开发人员来说是最难学习，因为他更复杂并且依赖于 TypeScript。
Vue.js 核心库只关注 View 层，被称为渐进式框架，因为你可以使用官方第三方包（例如 Vue Router 或 Vuex）扩展它的功能，将其变成一个实际的框架。
尽管 Vue 与 MVVM（Model-View-ViewModel）模式没有严格关联，但它的设计部分受到 MVVM 的启发。
使用 Vue，你将主要在 ViewModel 层上操作，以确保允许框架呈现最新视图的方式处理应用程序数据。
Vue 的模板语法可以让你创建 Vue 组件，它结合了 HTML 和特殊的指令的特殊性。尽管也支持原始 JavaScript 和 JSX，但是模板语法是首选。
Vue 中的组件很小，自包含，可以在整个应用程序中重用。
具有 .vue 扩展名的单个文件组件（SFC）包含 HTML、CSS 和 JavaScript，因此所有相关代码都驻留在一个文件中。
SFC 是在 Vue.js 项目中组织代码的推荐方式，尤其是大型项目。需要 Webpack 或者 Browserify 等工具将 SFC 转换为 JavaScript 代码。
尽管 Vuex 可以在 Vue 中使用，但没有官方绑定。但这不应该让你担心，因为 Vuex 是专门为 Vue 应用程序设计的官方状态管理库。
除了与 Vue 很好地集成之外，使用 Vue 的开发人员工具也很容易调试。
在 Vue 的早期，很难找到现成的组件，随着社区的发展，你可以使用各种输入组件和高级元素来加快开发速度。
对于移动应用程序开发，有一个名为 Weex 的项目，Weex 是阿里巴巴开发和使用，但不如 React Native 成熟和强大，更重要的是，由于该项目是在中国的开发和使用较多，因此很难找到英文文档和问题解决方案。 Vue 和 Laravel 集成得很好，这就是为什么它们经常一起使用。
Laravel 提供了完整的 JavaScript 和 CSS 脚手架，以支持在新项目中使用 Vue。
Vue 以及官方 SSR 包也支持服务器端渲染。此外，你还可以使用构建在 Vue 之上并支持 SSR 的 Nuxt.js 框架。
不幸的是，Vue 中的虚拟化选项并不是那么的强大。Vue 的设置比 React 复杂一些。
你可以将它用作库来定义可以在整个 HTML 中使用的组件，但与 React 类似，这不是大多数项目的构建方式。
大多数 Vue 项目都会有一个名为 App.vue 的根组件和一些用于显示各种内容的子组件。
说到语法，唯一要学的新内容就是 Vue 的模板语法，如何你熟悉 HTML，就很容掌握用于条件渲染和列表渲染的 v-if 和 v-for 等基本指令，即使对于初学者来说也很容易理解。
此外，Vue 的单文件组件将所有前端代码保存在一个地方，便于组织新项目。
Vue 是最容易学习，因为它的简单和直观的语法。
Angular、React 和 Vue 都在非常活跃的开发中，它们定期发布新版本并维护现有版本。由于每种情况下，当前的支持级别都很高，因此你可以安全的使用这些框架中的任何一个。
需要注意的是，Angular 的增长速度没有以前那么快，而 Vue 最近开始，似乎增长了很多。
如前所述，我们现在无法预测哪些框架会长期保持相关性，但每个项目背后都有一个很棒的社区，并且在不断发展。
以上是解释架构差异，分解每个架构的优势和劣势，并且在使用的地方进行比较。
总结
学完本章节，相信你对前端发展又一个全面的认识。
我们在进入一个新框架之前，有几点需要考虑：
-
首先，你团队的经验可能选择新技术时的决定性因素。
-
其次，你必须考虑你所在地区可用的人才，以便你可以为你的项目聘请开发人员。
-
最后，当涉及到项目本身时，复杂性和范围也会影响你对框架的选择。通过合理考虑所有关键差异，希望你可以决定哪个框架是最适合你的目标和需求的前端框架。
