前端进化史——The Evolution of Front End Development

本文为了艺术效果，将前端和后端设计成了对手。实际上二者应是相辅相成，互相协作，密不可分的关系。要想做好web开发，只守着自己前端或者后端的一亩三分地，是一定会遇到瓶颈的，请各位看官放正心态，领会本文的思想，切勿上纲上线，自寻烦恼。

混沌初开，乾坤始奠（1995之前）

此时，“前端”这个词还没有任何概念，普通人还无法愉快的使用互联网，直到一个新事物的诞生，创世者称之为——浏览器

如果互联网是一方世界，那么 Tim Berners-Lee 便是整个世界的创世者。为了让欧洲核子研究组织的一帮科学家，更方便对文档、论文进行传递和分享。互联网之父——Tim Berners-Lee，创造了HTML的雏形以及第一个网页浏览器WorldWideWeb。从此，属于互联网浏览器的时代，正式开启。这期间值得一提的一件事，是两位上仙的打架——IE vs 网景，后世称之为“第一次浏览器大战”。此次大战，造成了很大的混乱，二者为了竞争，提出了很多互不兼容的标准，这对于当时的开发者来说，实在是配得上“混沌”二字。最终的结果大家已经知道了，IE以96%的市场份额，荣登“诸神之王”的宝座。此役之后，IE一直沉浸在自己光环下，早已忘了进取和竞争为何物，在第二次浏览器大战之后，被Chrome夺取王座，表面上仗着windows的捆绑似乎保留了几分面子，实际上口碑已毁，落得个晚节不保，实在可叹，当然这是后话了。在前端圈里，逆水行舟，不进则退，看来这个基调早在当时已经定下了。

竞争除了淘汰，也带来了发展。好在诸神之上还有一个创世者，他有着足够的权威，在默默地观察了这一切之后，他制定出了一系列的规则和标准，让整个互联网世界能够有序的发展……

时代特点

1. 没有统一的业内标准，浏览器之战使得标准愈加混乱。
2. 此时的网页全是静态网页。举个例子，100个论文，要写100个html，每篇论文的结构都一样，无法动态注入内容。
3. CSS，JS什么的，不存在的，给你个HTML自己玩吧

大事记

• Tim Berners-Lee是第一个使用超文本来分享资讯的人。他于1990年发明了第一个网页浏览器WorldWideWeb，后来改名为Nexus。
• 1991年3月，他把这个发明介绍给了他在CERN工作的朋友。从那时起，浏览器的发展就和网络的发展联系在了一起。
• 超文本置标语言(第一版) -- 在1993年6月发为互联网工程工作小组 (IETF)工作草案发布(并非标准)
• 网景公司在1994年10月发布了他们的旗舰产品网景导航者。
• 1995年，微软通过给予季度费用和部分收入从Spyglass中取得了Spyglass Mosaic的源代码和授权。从而使IE逐渐成为微软专属软件。同年8月16日，微软推出IE 1.0浏览器。
• 1998年，网景公司承认其市场占有率已无法挽回，这场战争便随之而结束。

天地初定，三生万物（1995-2005）

正所谓“道生一，一生二，二生三，三生万物”，HTML、CSS、Javascript俗称前端三剑客，化生了前端的万事万物。虽然一切都还只是初创，但已经有了整个前端世界的基本规则，W3C组织——由互联网之父 Tim Berners-Lee 创建，便是这最初规则的制定者和完善者。HTML负责承载内容，CSS负责布局美化，Javascript负责计算交互，三者相辅相成，循环往复，生生不息。IE与网景的浏览器大战也落下了帷幕。至此，前端乃至整个互联网开始了健康有序的发展。

HTML(HyperText Markup Language)，超文本标记语言，标准通用标记语言下的一个应用。作为前端最基础的一个元素，伴随着浏览器的诞生一直存在着。开始CSS和JS还都集成在它里面，CSS用style标签（甚至直接写在dom上），JS用script标签，还不分彼此。直到功能越加复杂之后，三者才分开各自维护。而HTML仍然保持着集成者的角色，只是以链接的形式引用CSS和JS。

CSS(Cascading Style Sheets)，层叠样式表。可以说是整个前端届的化妆师，甚至可以称为整容师了。在很长一段时间里，它都是那种不被重视，又不可或缺的存在。直到CSS3标准的不断迭代，和浏览器性能的不断提升，让前端多了更多酷炫吊炸天的效果。可惜，浏览器兼容永远都是CSS的痛，让人们不能毫无顾忌的使用它的新特性，所以它的发展一直不温不火。

JS(JavaScript)一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。曾经不被认为是一门编程语言，据说Brendan Eich在 1995 年仅花了 10 天就开发出 Javascript，JavaScript 之所以用了 Java 这四个字母完全是行销上考量，借由 Java 的名气使更多人注意到 JavaScript。也许连Brendan Eich都没有预料到，如今的JS在web领域不但占据了绝对统治地位，甚至已经开始蚕食起其他语言的领域。当然，此时的JS还很弱小，仍然在积蓄力量不断的完善自己，一直等待着一个机遇的出现。

随着互联网的普及，前端规范越发的发展和完善，衍生出来的新事物也越来越多，越来越高级。其中，一个新的衍生标准，起初未引起人们多大的重视，在沉寂了一段时间后，厚积薄发，一鸣惊人；同时，一个JS的衍生库正在越发变得耀眼，开始书写属于它的历史。二者携手开创了web2.0时代……

时代特点

1. W3C组织成立，各种标准开始出现，并发展迅速
2. 以PHP为代表的，动态网页技术开始出现
3. HTML4和ECMAScript 3.0具有里程碑式的意义，这两个标准持续了很长时间
4. Ajax的雏形已经出现，一场革命正在酝酿中

大事记

• 万维网联盟（W3C）由蒂姆·伯纳斯-李于1994年10月离开欧洲核子研究中心（CERN）后成立，在欧盟执委会和国防高等研究计划署（DARPA）的支持下成立于麻省理工学院MIT计算机科学与人工智能实验室（MIT／LCS），DARPA曾率先推出了互联网及其前身ARPANET。——维基百科
• 1994年一个叫Rasmus Lerdorf的加拿大人为了维护个人网站而创建了PHP。PHP原意是Personal Home Page，宣传语是Hypertext Preprocessor（超文本处理者）。PHP实现了与数据库的交互以及用于生产动态页面的模板引擎，是Web领域中最主流的服务端语言。
• HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
• 1995年网景推出了JavaScript，实现了客户端的计算任务（如表单验证）。
• 1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。
• HTML 3.2——1997年1月14日，W3C推荐标准
• 1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。
• HTML 4.0——1997年12月18日，W3C推荐标准
• 1998年6月，ECMAScript 2.0版发布。
• 1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
• HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
• 1999年W3C发布第四代HTML标准，同年微软推出用于异步数据传输的ActiveX，随即各大浏览器厂商模仿实现了XMLHttpRequest，这标识着Ajax的诞生。
• 2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块。

方兴未艾，如火如荼（2005-2009）

事物按部就班的发展着，但事实上并没有表面上看起来的那么平静，直到ajax和jQuery的出现，为互联网开启了一个崭新的时代——web2.0时代。

Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）。它颠覆了用户体验，也颠覆了人们对前端的认知，人们惊艳于Gmail和谷歌地图的神奇，才意识到原来前端可以做的更多。它可以做到异步获取数据，配合jQuery更可以做到局部刷新，做到极致后便发展成为了之后的SPA（单页应用）。它的出现，几乎将后端模板的地盘抢了大半，甚至一些后来者，只知ajax，而不知后端模板为何物。另外，格式通用这个特点，让它在接下来的移动互联网时代更是大放异彩，甚至让后端的工作量减少了一倍。

jQuery，一个伟大的JS库，一个在前端历史上有着不可撼动地位的里程碑。甚至后来的javascript的标准制定也受到了其思想的启发。它让开发者的效率提高了数倍，最直接的影响便是越来越多的网页，以越来越快的速度产生，用户体验也越来越好。它重新定义了前端工程师这个职位，在它出现之前，我们更多的被称为“切图的”，根本没有人会把“前端”和“工程师”联系起来。

Ajax与jQuery将前端带上了一个新台阶，为前端带来了飞速的发展，前端进化从此进入了快车道。此时的前端开发，只需要一个浏览器和一个文本编辑器，就可以愉快的进行工作。但是，一场更加彻底，影响更加深远的革命已经在酝酿当中，甚至绝大多数前端工程师都没有预料到……

时代特点

1. 前端工作被重新定义，并且飞速发展，“前端工程师”成为一个新的职位
2. jQuery为前端带来了革命性的改变，直到现在，研究jQuery源码还是一个快速提高编程能力的捷径
3. ECMAScript在10年之后终于发布了新版本，这其中的故事相信足够写一本精彩的小说了
4. 由于SEO的需求，后端模版仍然占有部分地盘；但毫无疑问，越来越多的网页开始使用了ajax
5. jQuery和Ajax为前端发展大大提速，他们的影响还会持续一段时间，但是另一场革命已经到来

大事记

• 2005年初，谷歌使用Ajax技术打造了Gmail和谷歌地图之后，Ajax获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术，它标识着Web2.0时代的到来。
• 2006年，XMLHttpRequest被W3C正式纳入标准。
• 2006年1月John Resig等人创建了jQuery；8月，jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。
• 2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
• 2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5。
• 2009年12月，ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。

势不可挡，威震八方（2009-2014）

在人们还没有消化掉ajax和jQuery带来的变化时，在人们刚刚开始重新思考前端时，谁都没有想到，另一场革命已经到来。来的如此迅速，来的如此汹涌。迅速到“自己人”都疲于应付，汹涌到重新定义了前后端的格局。这一切只因一个开拓者——Node.js。

Google的V8引擎，让javascript的运行效率有了极大的提升，Node.js既是在此背景下诞生的。它让JS的运行脱离了浏览器环境，可以直接运行在PC上，甚至可以运行在服务器上提供后端服务。并且因为JS天生异步的性质，不需要考虑复杂的“锁”，尤其在处理I/O操作上优势更加的明显。这让人们开始考虑它在后端提供服务的可能。没错！前端已经打到了后端的门口了，曾经被后端固守的模板领域，也已经被彻底攻陷。还有比这更颠覆的吗？！此时只想说一句，“还！有！谁！！”

Node.js带来的影响是多方面的，超出了所有人的预料。如果说之前前端的发展是开着飞机的话，那么现在真的算是坐着火箭了。

首先，JS能够在PC上运行了，那么编译文件肯定是可行的了。于是各种开发工具像火山喷发一样喷薄而出。来一张不太准的github统计图大家体会一下。

CSS方面，终于有了突破性的发展，less、sass的出现为CSS带来了新的生机，也让人们对CSS的关注多了一些；

JS方面，除了各种压缩、混淆、打包的工具之外，更是出现了browserify、grunt等工程化的框架，从此前端也有了工程化；

在服务端方面，express、koa开始登上舞台，并且衍生出了更多的后端框架；

最后，第一个著名的SPA框架——AngularJS出现了，这简直又是一次颠覆。没错，我又用了颠覆，除了颠覆，我真想不到用什么其他的词了。它的出现，已经开始对jQuery的统治地位产生了影响，颠覆也只是时间的问题。

上面一系列的变化，都发生在短短的几年时间里。想象一下，这相当于将一些成熟后端语言的发展历程，硬生生的缩短了几倍的时间。最后造成的结果就是，现在的前端开发，已经跟后端开发无异，需要准备很久的开发环境，安装各种依赖包，开发时要运行各种命令，甚至启动一个，乃至多个服务。新人入职，用一整天的时间安装配置开发环境，都算是高效的了。2年前很火的一个帖子，《2016年里做前端是怎样一种体验》，很好的诠释了前端开发的复杂度。之前浏览器加编辑器就能走天下的时代，一去不复返了。前端工程师的门槛，也越来越高了。

时代特点

1. 井喷式的发展速度，各种Node.js的包满天飞，让人应接不暇
2. 2010年被称为移动互联网元年，这相当于又开放了一个位面给前端，为前端的飞速发展又加了一把火
3. 前端工程师的门槛越来越高，对人员的素质要求也越来越高，相应的，待遇水平也越来越高
4. 快速学习已经成为了前端工程师必备的能力，一个流行的框架或工具，你要是在半年内还没走过它的demo，那你就危险了
5. 前端工程化和向后端渗透这两个新方向，让前端工程师的任务增加了许多，前端不再是一个局限的职位，大前端的趋势已经出现

大事记

• 第一个版本的V8引擎随着第一个版本的Chrome于2008年9月2日发布。
• 2009年5月，Ryan Dahl在GitHub上发布了最初版本的部分Node.js包，随后几个月里，有人开始使用Node.js开发应用。
• AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。
• 2009年12月coffeescript在github开源
• 2010年2月express在github开源
• 2010年2月less在github开源
• 2010年9月sass在github开源
• 2010年9月browserify在github开源
• 2011年7月，Node.js在微软的支持下发布Windows版本
• 2011年9月grunt在github开源
• 2013年12月koa在github开源

不忘初心，砥砺前行（2015-至今）

笔者写到这里，突然有种恍如隔世的感觉。真的不敢相信，H5、TS、Babel、Webpack、ES6、Vue这些如日中天的存在，仅仅才诞生了3、4年的时间，即使是React也不过5年的时间，前端的发展速度，由此可见一斑。也难怪周围的同学都有一个相同的口头禅，“老子TMD学不动了”。现在前端的格局，不，应该说是大前端的格局已经有了趋于寡头垄断的稳定趋势。比如，JS框架这块已经被React、Vuejs、AngularJS（已经有些力不从心）三者瓜分；工程化这块，Webpack占有着绝对的优势；ES6的发布，让Babel成为了前端开发必不可少的依赖，甚至可以提前使用未发布的ES7的新特性（我们似乎已经习惯了超前……）；CSS预处理这块，被Postcss、less、sass把持着，不过css-modules大有上来插一脚的意思；服务端，express已经显得过时，koa已经作为更底层的依赖，衍生出了更多的后端框架，例如国产的ThinkJS和eggjs；前后端同构方面，React和Vue都给出了解决方案，nextjs和nuxtjs分别对其进行了实现；移动端开发方面，ReactNative和Weex蠢蠢欲动，不过貌似进展不是很顺利；甚至在嵌入式开发上面，Nodejs也已经有所渗透……

最近的前端圈，已经算是比较太平得了，至少2018年没有特别颠覆的事情出现，对于每个经历过前端发展历程的人来说，似乎有点不太习惯。这几年刚刚加入前端阵营的小朋友，可算是幸运，也算是不幸。幸运的是一上来就可以用上最佳实践来开发，具体的原理慢慢参悟；不幸的是没有经历过前端发展历程，似乎少了一些应有的历练。不过有一点是可以肯定的，想在前端圈混下去，你一刻也不能停，必须不断地学习与前进。如果你休息个一年半载再出来看，保证你听不懂圈子里的人在聊什么。这次就不写什么时代特点了，毕竟身在其中，也不好评说，只有一句，“前端不易，且行且珍惜”~

大事记

• 2013年5月Facebook开源了React
• 2014年1月gulp在github开源
• HTML 5——2014年10月28日，W3C推荐标准
• 2014年11月Typescript在github开源
• 2015年1月Babel在github开源
• 2015年1月Webpack在github开源
• 2015年4月Postcss在github开源
• 2015年4月React Native开源
• 2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。
• 2015年8月，css-modules在github开源
• 2015年10月，rollup在github开源
• 2015年10月27日，Vuejs 1.0.0正式发布
• 2016年4月21日，阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请。
• 2016年5月，Vuejs2.0.0发布
• 2016年10月，next.js在github开源
• 2016年11月，nuxt.js在github开源
• 2017年2月，koa2发布
• TO BE CONTINUE……

参考文献

https://blog.csdn.net/elwingao/article/details/52412403

https://www.cnblogs.com/kidney/p/6079530.html