回顾前端历史,明晰前端未来

4,865 阅读13分钟

本篇文章适用于 1-3 年的 WEB 新人也同样适用于 3-5 年的前端老人。本文是回顾历史,预测未来的文章,所以会以时间线的形式一步一步过来,会有 WEB 的诞生,WEB 发展的重大转折点。让你清晰明白 WEB 诞生的历史意义?没有浏览器人们如何查阅信息?IE 作为 windows 预装的浏览器为什么不如 Google 浏览器的市场份额大等等

1991 年 HTML 诞生了

在 web 诞生之前人们之间的信息查看极不方便。你可以试想一下你用命令行去浏览现在看的网页,上图就是当时用命令行做的纯文字游戏,如果你用过说明你真的是资深互联网人了。


如果能够通过更加直观的形式供大家预览将会是非常幸福的事情。于是 Tim Berners-Lee 博士提出了World Wide Web 的设计方案:包括浏览器、服务器、网络传输协议。于 1991 年对外发布,所以 1991 年是 web 的破蛋日。


1993 年 cookie 的诞生

写这篇文章的时候我查阅了大量的资料,但是大都没有讲到 cookie。但是他的重要性一点点都不亚于 JS 的诞生。http 协议是无状态的,这就表明没法做用户追踪,没有这个东西 web 就只是一个纸质书的替代品而已。但是有了这个东西,整个 web 就开始繁荣起来了,他不再是单项的沟通平台,他具备了双向沟通的潜力。他能够更好的服务用户提供更多的专属服务,所以我觉得有必要单独拿出来谈一谈 cookie。而且作为经典面试题 cookie,localStorage,sessionStorage 的区别你也应该更多的关注他。


1996 年相继诞生的 CSS,JS

谈到 JS 就必须要了解几个疑问。

1.为什么需要 JS

初期的浏览器只是纯粹的供大家浏览信息,最多的交互就是链接。单击一下弹出一个新的窗口看相关介绍。浏览器一定程度上就跟书一样是查阅资料的。后来有了 form 表单浏览器不仅能够查阅信息还能够收到用户反馈。但是也不能够随便反馈,需要添加一下限制,比如文字长度啊,填写格式啊。这个时候对于信息的处理都是放到服务器上的,要是信息不合格界面还不能保存用户输入的内容。输入了 100 个字告诉你你写的有问题重新写一遍气不气,而且当时的网络还极其差劲,提交一次就要等好几秒钟。于是为了提高用户体验 JS 就诞生了。


2. JS 的竞争对手有哪些,为什么最后 JS 独占鳌头?

跟 JS 同时代的强势竞争对手主要是IE 的 JScript,CEnvi 中的 ScriptEase。在角逐浏览器脚本的时候没有统一的规范,三大主要浏览器脚本各自发力同样的功能不一样的写法就好比如今的 IOS Android 一样。混乱不堪于是 JS 的创始人布兰登 * 艾克于1997年,以 javascript1.1 为蓝本的建议提交给了欧洲计算机制造商协会也就是 ECMA 。该协会指定39号技术委员会来负责此事。这个时候就有了规范,后来想做浏览器的人都开始依照规范设计自己的出版,于是 ECMA 规范就越来越大众。文章开头提到了 IE 为什么被淘汰,就目前大众认为的原因性能差,界面混乱,功能不全。但其实根本原因是因为 IE 没有很好的支持 ECMA 规范导致程序员实现一个功能是很费劲的那实现不了在大众眼中不就是功能不全和界面混乱么。


3. JS 为什么会成为如今浏览器的标配,而且生命力至今生生不息。

这得益于当时 ECMA 规范的先进性。在制定第一版的时候就有3个很重要的原则:

  1. 把所有和浏览器相关的代码全部删掉,这也是javascript1.2 与 javascript1.1 不兼容的主要原因。
  2. 要求对象和平台无关。
  3. 全面支持Unicode的编码,这是为了以后能支持多语言的开发。

可以看出Js在设计之初就不是客户端语言,所以js可以在很多平台去使用,比如node.js,甚至在很多机顶盒里也在使用js。现在很多人开始叫 js 为 ECMAScript。从历史角度发展来看 js 应该包括 ECMAScript,因为一个完整的 JS 应该包括:

  • 核心(ECMAScipt)

  • 文档对象模型(DOM)

  • 浏览器对象模型(BOM)


4. JS 的风格为什么像面向对象语言又如此支持函数式编程?

这不得不说到 JS 的创始人 Brendan Eich 和 Brendan Eich 所在的网景公司。Brendan Eich 是函数式编程的信徒,并且还比较讨厌 JAVA,但是网景公司的创始人都是 java 的教徒,当时 java 作为唯一的跨平台语言魅力十足。于是 Brendan Eich 就不得不在公司的压力之下使得 JS 有很多面向对象的特性。为什么说 Brendan Eich 比较讨厌 JAVA 呢,看下面这句话:

"Java(对Javascript)的影响,主要是把数据分成基本类型(primitive)和对象类型(object)两种,比如字符串和字符串对象,以及引入了Y2K问题。这真是不幸啊。"

1998 年 ajax 的诞生

ajax 诞生是很早的,在 1998 年的时候就被微软实现了。但是直到 2005 年 2 月人们才发现他的作用,于是大规模普及开来。现在来看 ajax 是一个稀疏平常的事情,就像白开水一样理应存在。所以正如人没有水不能活一样, web 离开了 ajax 也不能活。你可以想一下现在用的最火的框架 Vue,Angular,React 页面呈现内容的方式都是通过 ajax 获取到内容然后渲染到页面上,没有了 ajax 就没有他们了。ajax 为 web 前端工程师的诞生创造了条件。


2005 年 “web工程师” 的诞生

虽然 web 诞生这么久,但是一直到 2005 年是都是没有 web工程师的。这个概念首次来自于淘宝,2005 年是淘宝的大规模扩充其,极高的用户访问量和并发量使得对于页面的交互跟响应速度都有了极高的要求,因此需要更加懂 web 的人来服务于此。因此 web 工程师诞生了。不再是切图仔,一直到今天 web 工程师的地位终于发生了聚变成了一个团队中的核心之一。


2006 年 jQuery 的诞生

1997 年虽然有了 ECMA 提供的标准但是各大浏览器厂商之间并不是完全兼容的,有的浏览器厂商会实现很多更加有好的特性来吸引开发者入住,吸引客户使用。于是战乱纷飞,即使到了今天写的代码也需要兼容比如 CSS 的前缀 -webkit-,-o-, childrens 获取子节点的不同表现。于是一套代码 多个 if else 。而处理的事情几乎相似 if 判断的是什么浏览器,以此写出这套浏览器的代码。就目前写出一套代码都相当困难更别说好几套了,不翻墙都没有资料的,翻墙了资料你也看不懂。即使就目前支持谷歌翻译了,这东西 emmmm。

于是 jQuery 诞生了。浏览器的兼容问题被解决了,而且当时的链式结构爽到不能再爽虽然在今天看来又被找到了瑕疵。。。

所以 jQuery 的诞生让 web 开发工程师的门槛大幅度降低使得 web 涌现出了惊人的活力。


2009 年 Node 的诞生

node是采用 js 语法使用 v8 引擎进行编译的一门语言。他的诞生使得web 工程师有了写服务端的能力,但是从前端的角度来讲我认为这只是次要的。真正的核心是他给了前端工程师操纵文件系统的能力,虽然一直有很多种语言都有这种能力,但是对于前端开发者来说并不友好,学习曲线是非常高的。而且大部分这类语言的能力者基本上工资都比前端工程师高,谁还愿意放着高薪不拿拿低薪呢。web 工程师要比任何其他工程师知道自己需要什么,好比 babel,css 预编译器。各种脚手架,各种打包器。这些 java 工程师也会做,但是他做了绝对没有几个 web 工程师搞得懂。但是 node 不一样了,天生的语法优势注定了他的辉煌。单独拿 babel 来说,从前大家都是等到标准一个阶段一个阶段确定了之后各个浏览器厂商再去实现它,有很多非常好用的功能必须要等好几个月甚至一年才能用上。但是有了 babel 就不一样了。能够将新的语法打包成目前浏览器支持的语法。node 让 web 开始变成一个越来越工程的化的东西,也使得前端的门槛变得更高但是却让互联网从业者的门槛变得更低。

也就是基于这个时代一边作图一边写页面的切图仔终于搞不定了, web 工程师开始广泛流行起来。


2012 年 MVVM 的时代拉开序幕

这一年谷歌发布了 angularjs 1.0 。mvvm 的时代拉开了序幕,之后紧接着诞生的 react,vue 都以其自身独有的优势开始抢占市场。也正是他们的出现 jQuery 的时代渐渐褪去。上面说过 jQuery 是帮助工程师兼容浏览器极大提高开发效率而诞生的巨头。但是随着浏览器的规范,js的发展以及内核的大一统 jQuery 的历史意义已经渐渐不存在了。所以渐渐褪去是必然的。

那么 vue,react,angular 他们存在的或者是解决的难题在哪里呢?他的主要优势是俩部分,一是前文说过完整的 js 包含三部分。

  • 核心(ECMAScipt)

  • 文档对象模型(DOM)

  • 浏览器对象模型(BOM)

三个肯定没有一个容易学,于是他们将三部分变成了一个部分。我相信任何一个经历过操作 DOM 时代过来的人都深有体会。数据跟试图同步绝对是阻碍 web 工程师效率的极大难题。

二是移动互联网的到来形成了新的信息分享方式,诞生出的 ios Android 俩大阵营。他们极大地冲击了 web开发工程师。但是他们有一个极大地缺点就是同样的东西需要写俩套,俩肯定没有一个容易。于是 js 的跨平台性展现出来了,能够写一套代码运行俩边,但是性能上有很大的局限性。于是 spa 模式的诞生大大提高了性能。


2014年 html5 css3 的诞生

随着日益快速的网络,性能更高的 js 引擎,要求越来越高的 UI 和交互 HTML5 和 CSS3 诞生了。CSS3 提供的旋转、阴影、3D,HTML5 提供的 video,localstorage 等等。进一步提高了 web 工程师的门槛


总结与明晰未来

重大历史节点还有很多,像 flash,asp,php,jsp 为 web 带来的影响。但是他们对于前端开发者来说意义并不大所以就不重点说了。

总结一人群:使用者和制作者,从一次一次的重大事件中可以看到每一次变革都是服务于这俩类人的。JS 的诞生给使用者提供了更友好的交互,HTML5,CSS3 给使用者提供了更加丰富的界面展示。jQuery,Vue,React,Angular 极大地提高了制作者的开发效率以及降低了开发难度,node 赋予了制作者更多了能力。可以想象未来的重大节点也一定是给用户带来更好的服务,给制作者提供更好的工具和更快的开发效率。

总结二历史意义:jQuery 的历史意义是兼容浏览器,后来兼容性问题渐渐不存在也就慢慢的被替代了。flash 为 web 提供了视频体验但是随着 html5 直接支持 video,flash 就慢慢的被替代了。php,jsp... 赋予了 html 编译的能力但是 vue,angular,react 赋予了这种能力更好的前景于是也慢慢被替代了。而 web 你可以看到他诞生的意义就是为了给用户一个信息交流的平台,信息交流肯定是贯穿整个人类历史以及未来的,因此 web 的初衷永远不会消失。web 消失的唯一可能就是新的替代品,目前的 PC ,手机市场已经相当成熟由此看来 web 也不会被替代。唯一有可能的是 VR 作为新的信息流通工具他的前景是广泛的并且不同于 PC 和 手机。VR 是以 3D 的场景作为一个载体,目前的交互方式是以类似遥控器的手柄为主。目前已经有很多成熟的软件和平台了,具体实现的语言我还没了解过,但是里面是没有体现出来 web 的使用场景的。但是目前阶段他是不会淘汰 PC 和 手机的使用场景的,后期即使做到了 能够手指控制赋予文字交流的能力可能会淘汰 PC 但是手机依然是很强力的产品,web 会被分流但是肯定不会被淘汰的。

总结三发展周期:这个可以说是一个历史规律,没有发生只能说是时间还不够长。什么规律呢:从无到有,人有我优,人优我廉,人廉我走。可以看到 web 已经经过了从无到有的过程,目前正在人有我优的阶段,而且随着 web 高度的发展从制作者的角度出发这个阶段目前还是上升的趋势,从使用者的角度出发。用户体验已经到了一定的阶段了,除非 3D 的交互到来。所以这里面开始进入了人优我廉的阶段,所以随着前端开发者的涌入低阶从业者的市场价值开始走低,高端的会呈现上升趋势。


文章就到这里了,有不对的地方欢迎指出。后期还会有更多的优质文章并且会以系列的形式推出,不会杂乱无章,不想错过就关注我吧。你们的关注点赞是我开源的动力,毕竟我也是可以私藏的。(此处一个坏笑的表情)