前端技术分享--前端发展脉络
以过往技术的发展，来看待每项技术引入的原因和所解决的问题。这种做法的意义无疑是巨大的。因此，今天在这里和大家对前端发展脉络进行一个梳理。希望我们能从历史当中对前端技术的发展有一个更清晰的认识，也对现在我们使用的技术有一个更深刻的思考。
石器时代
前端技术的发展，从一开始就脱离不了另一项技术的发展。也就是我们朝夕相处的浏览器。最早的一款浏览器是网景公司于1994年推出的NCSAMosaic浏览器。而浏览器最开始的功能，也只能浏览一些静态网页。就好像一个能浏览网络上word的word阅读器。可能这也就是web中document这个对象最初的含义。
毫无疑问这个时候是最最原始的时候，最最初创的时期。
动态页面时期
一个新的时期的到来一定是有一项新技术的诞生，也一定是解决了上一个时代的一些问题。
那么在之前我们有什么样的问题呢？
一切的一切都是静态的，没有流动的数据，只有不变的文本。
可能更直白地说，比如你有一千种产品，每个产品又有四中颜色型号。那么你就需要写4X1000个文档。OK然后需求变了，你的产品售价打折，然后你又得修改这4X1000个文档把价格改回来。
在这些痛点的激励之下1994年PHP出现了，之后有涌现了如：JSP，ASP等一大批数据模板技术。通过将数据嵌套到文档当中，当浏览器向服务器请求页面时动态的生成结果页面。从而使web的世界从静态迈向了动态。
而也正是这种数据模板的模式，使得MVC模式开始崭露头角。通过Model数据层，Controller控制层，View显示层的分层来解耦程序。也正是这种分层，使得web当中出现了模糊的分工情况。也有了前端这一概念的出现。
这一时期的工作模式大概是：由前端编写页面，再由后端代码读取模板，替换变量最后渲染出结果页面。或者对界面美观度要求不高时，后端代码一把梭了。
JSP等技术的出现也有其相关的时代背景，时至今日依然有不少公司依然在使用JSP技术(其中就包括我们自己公司)。对于一些小的项目，使用JSP依然是一种迅速开发的好选择。但是随着需求的增加，他也会产生一些缺点令人难以接受。
1、 前后端耦合。
随着项目需求的变多变大。功能代码和视图代码依然部分耦合在一起，对后期运维造成困难。
2、 用户体验差。
JSP即使解决了数据变动的问题，但是依然每次数据变动都需要重新加载整个页面。这也意味着用户每次出现一点改动都会看到页面刷新一次。同时移动端的出现，更使这一点得到了放大。
3、技术栈混杂
单一开发模式Java开发人员难以开发出美观的页面，而前端切图后端读取模板。则大大加大了流程的复杂性，也拉长了项目周期。
而正是这些令人难以接受的缺点，促使技术人员不断推陈出新。也出现了让web技术跨越世代的一项技术。
分离时代
解决上一个时代的问题，对于今天的我们来讲已经不是一个很难回答的问题了。但是当时能够想出解决方案的人，毫无疑问的是个天才。
前后端代码耦合，技术栈混杂，那我就干脆把web技术人员分成两拨一波写后台，一波写前台不就行了嘛。
但是不行啊。后台只能一个页面一个页面的发送，体验还是很差啊。
那就别整个页面发了，只给数据过来，怎么显示前端来决定！
于是乎，找到了关键，关键就是怎么局部更新网页呢，怎么只向前台发送数据而不是发送页面呢？
答案就是AJAX。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax诞生于1998年，但对于它更为重要的是另三个节点：
2004 年：Gmail
2005 年：Google 地图
2006 年：Ajax 被 W3C 正式纳入标准
可以想象如果没有Ajax我们要实现一些功能应当怎么实现呢？
（地图应用，地磅称重）
同时随着Ajax的推出，JS在前端中所占份额越来越重。第二次浏览器大战悄然展开。
至此前端也从1.0世代进入2.0世代了。
Web 2.0 时代：动态网页，富交互，前端数据处理
工业时代
随着前后端分离开之后，前端技术得到了极大程度的发展。而在这一段时间当中JQuery独领风骚，大量基于jQuery的插件和依赖构成了一个庞大的生态系统，从而稳固了JQuery为JS库一哥的位置。
而伴随信息化时代的到来，对前端技术的需求也越来越深，需求不断加深也推动了新的技术的出现。一场堪比Ajax带来变化的巨变也在悄悄进行。
我们依然先来看看新的痛点在哪里
1、 JQuery面对大规模dom操作依然过于缓慢。
2、 每个页面都是分离的，无法统一管理状态、数据。
于是我们提出了一个新的概念：数据驱动。也根据这一点，提出了一种新的开发模式：MVVM。
传统的模式：
响应用户操作->发送数据给后台->拿到新数据->更新UI（维护DOM）
数据驱动模式：
响应用户操作->发送数据给后台->拿到新数据->更新前端model
而MVVM和MVC的区别也就主要在于将C-Controller替换成了VM-ViewModel层。我们不需要再去单独在Controller层控制view如何显示，而是将数据和视图绑定起来。数据的变化去驱动视图的变化。
也正是在这样的设计思想的驱动下，涌现出了现代前端的三大框架。
2009 年 AngularJS 诞生。
2011 年 React 诞生。
2014 年 Vue.js 诞生。
这只解决了dom操作的问题，而真正为前端技术带来变革的则是NodeJS的出现。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
NodeJS的出现，不仅仅使JS这门语言走进服务器，同时也为前端工程化提供了可能。通过前端工程化，分散的前端页面真正被整合起来被当做是一个应用来处理。这也使得数据、状态、组件在不同功能之间流动起来。NodeJS提供了一个易被理解的平台，来承载工程化所需的各种工具。
在之后会有一个关于Node和Vue的培训，届时我们可以更详细的聊一聊这两者。
未来发展
前端的未来会有什么样的发展是一个没有谁敢断定的问题，但是我们透过前端历史的发展依然可以看出一些端倪。
从前端发展历程的两次重大变革来看：Ajax带来的是前后端分离，让职业领域细化。而Node带来的是工程化的改变。而从两次浏览器大战来看，一次是市场的力量决定了技术的走向，另一次则是技术的发展影响了市场的份额。
由以上几个方面，我们大致能看出一点端倪。
大前端
前段工程化的出现使得前端工程师手中的工具也越来越多，也对前端工程师提出了更高的要求。无论是NodeJS中台服务器，或者Nginx反向代理，亦或者webpack工程化应用都是对前端技术这个概念的大大扩展。
