前端简史（转）

前端从无到有，经历了什么？

1995年5月，布兰登·艾奇(Brendan Eich，javascript之父)花了10天时间写了第一版javascript。从这时候开始，web开发诞生，为后来前后端的职位细分，奠定了基础。

正像人类发展史一样，前端开发的历史也经历了几个阶段，回顾整个阶段，我们可以看到前端开发的历史是随着浏览器及相关的javascript api的完善逐渐变化的，10年前，我们关注切图，布局，10年后我们关注移动端体验，多端打通。正式介绍这几个阶段之前，我们先来简单回顾一下第一版js诞生到现在，那些重要的历史时刻：

1994年12月，Netscape公司发布了Navigator 1.0版，市场份额一举超过90%。
1995年12月4日，Netscape公司与Sun公司联合发布了Javascript语言
1996年3月，Navigator 2.0浏览器正式内置了Javascript脚本语言
1996年11月，Netscape公司决定将Javascript提交给国际标准化组织ECMA
1997年7月，ECMA组织发布263号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版
2011年6月，ECMAScript 5.1版发布，并且成为ISO国际标准
2015年6月，ECMAScript 6正式发布，并且更名为ECMAScript 2015

周边生态

1996年，样式表标准CSS第一版发布
2001年，微软公司时隔5年之后，发布了IE浏览器的下一个版本IE 6，这是当时最先进的浏览器
2002年，Mozilla项目发布了它的浏览器的第一版，后来起名为Firefox
2003年，苹果公司发布了Safari浏览器的第一版
2004年，Google公司发布了Gmail，促成了互联网应用程序（Web Application）这个概念的诞生。
2004年，WHATWG组织成立，致力于加速HTML语言的标准化进程
2005年，Ajax方法正式诞生，Jess James Garrett发明了这个词汇。它开始流行的标志是，2月份发布的Google Maps项目大量采用该方法。它几乎成了新一代网站的标准做法，促成了web 2.0时代的来临。
2006年，jQuery函数库诞生，作者为John Resig。
2008年，V8编译器诞生
2009年，Node.js项目诞生，创始人为Ryan Dahl，它标志着Javascript可以用于服务器端编程，从此网站的前端和后端可以使用同一种语言开发。
2013年5月，Facebook发布UI框架库React，引入了新的JSX语法，使得UI层可以用组件开发
2015年3月，Facebook发布了React Native项目，将React框架移植到了手机端
2015年vuejs发布1.0版本
2016年vuejs2.x版本发布

有些历史时刻，是对前端开发产生了深远影响的，比如ie6的发布，jQuery的发布，ajax的流行，知历史，我们可以预判到前端的未来发展方向。，知历史，我们可以打通知识体系，尤其是资历尚浅的前端同学。

下面正式介绍前端开发的几个阶段：

天地初开

中国历史，传说中是始于盘古开天辟地，前端的历史始于javascript的诞生，网景公司在发布0.9版本的Navigator浏览器后，立马发现一个问题：Navigator只能浏览页面，浏览器无法与用户互动。比如你登录一个网站输入完用户名点击提交的时候，浏览器并不知道你是否输入了，也无法判断。只能传给服务器去判断。网景公司急于解决浏览器与用户交互这个问题，当时解决这个问题有两个办法，一个是采用现有语言，比如Perl、Python、Tcl、Scheme等，允许他们直接嵌入网页。另一个是发明一种全新的语言。此时，刚入职的34岁的系统程序员Brendan Eich登场了，Brendan Eich的主要方向和兴趣是函数式编程，网景公司招聘他的目的，是研究将Scheme语言作为网页脚本语言的可能性。然鹅，1995年5月，也就是Brendan Eich入职一个后，网景公司做出决策，未来的网页脚本语言必须“看上去与java足够相似”，但是比java简单，使得非专业的网页作者也能很快上手。这个决策实际上将Perl、Python、Tcl、Scheme等非面向对象的语言都排除在外了。Brendan Eich被指定为这种“简化版Java语言”的设计师。但是，他对java一点儿兴趣也没有，为了应付公司安排的任务，他只用了10天时间就把javascript设计出来了…

总的来说，他的设计思路是这样的：

（1）借鉴C语言的基本语法
（2）借鉴java语言的数据类型和内存管理
（3）借鉴Scheme语言，将函数提升到“第一等公民”（first class）的地位
（4）借鉴Self语言，使用基于原型（prototype）的继承机制

所以，javascript实际上是两种语言风格的混合产物—-（简化的）函数式编程+（简化的）面向对象编程。这是由Brendan Eich（函数式编程）和网景公司（面向对象编程）共同决定的。

由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，javascript写出来的程序混乱不堪。

the part that is good is not original, and the part that is original is not good. (它的优秀之处并非原创，它的原创之处并不优秀。)[十八世纪英国文学家约翰逊博士]

不管怎样，javascript诞生了，它的设计之初很简单，就是为了解决浏览器上表单提交的人机交互，而作为一种脚本语言，它天生的设计缺陷为后来的大型应用程序开发，留下了隐患。

石器时代

大约2007年，前端处在基于table（表格）布局的时代。
哪个时候没有前后端之分，web工程师真的是“全栈”，写的了后端，套的了表格，查的了数据库，写的了js，js主要承载的作用是网页特效（对，如果有前端的话，其实也是写点特效）。

js写的代码，一般以内联方式放在页面的任何地方，就像一块一块的补丁，看了让人难受，不过还好，这个阶段很快就结束了。（也许很多很烂的政府网站还在用table布局也说不定）

铜器时代

2001年发布的ie6当时是世界上最先进的浏览器
2004年2月9日，Mozilla Firebird改称为“Mozilla Firefox”，简称“Firefox”
在2006年年尾，微软发布了rebranded代号的IE7
在2008年3月6日，微软发布了IE8的第一个公开测试版本
2008年9月2日，Chrome beta测试版本发布

铜器时代，是令人悲伤的一个阶段，因为这个阶段终于有前端开发工程师这个职位了，但是主要工作居然是处理浏览器兼容性问题，上面是那个时代的浏览器情况，虽然ie6在2001年就发布了，但是它持续的时间太长，2012年貌似淘宝才不兼容ie6，大部分的时间，前端同学要兼容ie6、ie7、ie8、ie9、FF、chrome、safari…

大部分的css代码里会有这样熟悉的hack存在：

.hack{  
    background-color:red; /* All browsers */  
    background-color:blue !important;/* All browsers but IE6 */  
    *background-color:black; /* IE6, IE7 */  
    +background-color:yellow;/* IE6, IE7*/  
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
    background-color:purple\0; /* IE8, IE9, IE10 */  
    background-color:orange\9\0;/*IE9, IE10*/  
    _background-color:green; /* Only works in IE6 */  
    *+background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */  
}

那个时候的js代码已经不再内联在页面代码里，转而以文件的方式引入，类似这样：

<script src=“../your/code/a.js”></script>
<script src=“../your/code/b.js”></script>
<script src=“../your/code/c.js”></script>
<script src=“../your/code/d.js”></script>

但是，模块化，依旧毫无头绪，就像上边的代码，如果功能复杂的模块，维护起来难度较大，打包工具基本是借助别人家的ant或者YUI Compressor，前端工程师这个阶段的职责已经开始开发复杂的应用，另外值得注意的是后端MVC的架构开发模式逐渐成熟。

前端的架构模式呢？不知道在哪里。

铁器时代

2006年，Jquery诞生了，时至今日，jquery之所以这么成功，就是处理了大量的浏览器兼容性问题！

1	$('J_Hook').html('haha');

这样的代码让人重拾对web开发的乐趣，jquery诞生后，各种基于jquery的组件铺天盖地而来，随着html5+css3的支持程度的加强，好日子终于来了。2010年，随着模块加载器（LABjs、RequireJS、SeaJS）的涌现，前端开发的生产效率大幅提高，前端真正可以去关注业务本身，而不用投入太多精力去处理兼容，处理模块关系了，前端的代码可能类似这样了：

1 2	<script src=“js/jquery.min.js”></script> <script src="js/require.js" data-main="js/main"></script>

随着2004年ajax技术的出现，异步加载/按需加载盛行起来，我亲身经历了2010~2014年淘宝瀑布流布局的兴起，那时候的前端的代码可能是这样的：

<!—— your dom element ——>
<div class=‘J_RenderCont’></div>

<!—— your javascript source ——>
<script src=“js/jquery.min.js”></script>
<script s

rc="js/require.js" data-main="js/main"></script>

vm中很少的html代码作为钩子，大部分内容使用js异步渲染的方式在今天的大部分网站非常常见，并将持续很久。

蒸汽时代

终于来到了蒸汽时代，生产效率成数量级似的快速增长，这个时代有两件事，特别有历史意义：

2009年5月，Ryan Dahl在Github上发布了最初版本的部分Node.js包
2010年6月8日凌晨1点，史蒂夫·乔布斯在美国Moscone West会展中心举行的苹果全球开发者大会（WWDC 2010）上发布了苹果第四代手机iPhone4

第一件事，对于前端的意义是前端同学可以一个人搞定全栈开发了；
第二件事，对于前端的意义是前端同学可以开发在手机上访问的应用了；
前端迎来了一个逆天的时代，一个最美好的时代，一个基于Nodejs开发的时代

Nodejs是一个能够在服务器端运行js的开放源代码，跨平台js运行环境
与js语法相同，只是少了浏览器相关的环境（DOM、BOM之类）
核心模块包括文件系统I/O、网络（HTTP、TCP、UDP、DNS、TLS/SSL等）、二进制数据流、加密算法、数据流等等

那么nodejs都能做什么呢？

web框架：express koa

im及时聊天：socket.io

api包装：移动端、pc、h5

http proxy（淘宝首页）/ http proxy延伸，组装rpc服务，作为微服务的一部分

前端构建工具：grunt/gulp/bower/webpack/fis3

OS: nodeOS

跨平台打包工具：nw.js、electron、cordova/phonegap

编辑器：atom、vscode

哦，为了给其他端工程师留点面子，就不再列举下去了，你只需要知道阿特伍德定律就可以了：

any application that can be written in JavaScript, will eventually be written in JavaScript

nodejs给前端带来了空前强大的利好，智能手机却给前端带来了前端未有的跳转：

面向多终端的开发（pc端、移动端）

很多新概念产生：响应式设计、多端适配

移动端js框架（库）： zepto、jquery-mobile、kimi、vue、react

性能调优：首屏渲染、懒加载、webp、300ms延迟、css3、canvas动画

相比于pc端，手机端的硬件网络都受限，前端只能继续挖掘自身的经验并等待着手机硬件的加强（好消息是到17年，智能手机的硬件和依赖的网络情况越来越好）。
是选择native还是hybrid？no，我们有weex和react-native，磨平三端的差异已经是必然趋势，说不定未来的某一天，js已经可以直接搞定三端开发，调用系统硬件，处理流畅的动画和人机交互。
说道这里，其实前端开发简史2017年之前的部分已经结束了，但是作为前端的一份子，我们可以大胆的憧憬一下下一个时代——基于js的生态时代。

基于js的生态时代

这个时代的典型特点是：js已经不再单纯的承担页面脚本的职责，他可以构建复杂的企业应用。
各种细分领域，层出不穷，原来想也不敢想的事情，今天都可以用js去做，前端的未来10年将会是多彩纷呈的繁荣景象，现在已经有的领域：

web框架：
vue.js
react
angularjs

数据可视化：
D3.js
Echarts
hichcharts

移动端打通：
weex
react native

桌面软件：
electron
nw.js

游戏：
cocos2d-x

VR/AR：
aframe
three.js
react-vr

企业应用：
express
koa
egg.js

硬件/互联网：
Ruff

操作系统：
os-js