浏览器里的黑天鹅：不可预知的前端变革点

时间 2019-11-16 标签浏览器天鹅不可预知前端变革

『黑天鹅』是这样的事件：难以预测、冲击性大，而且能马后炮地过后分析。少数的黑天鹅事件几乎能解释这个世界上发生的全部事情。难道前端领域的演化也不是按部就班，而是黑天鹅式的吗？让咱们换一种角度回顾一下历史吧…javascript

不可预知的黑天鹅

审视一下你周围的环境，回顾自你出生以来周围发生的重大事件、技术变革和发明，把它们与人们此前关于它们的预期相比较，而后看一下它们中有多少是在预料之中的？看看你本身的生活，你的职业选择、你与配偶的邂逅、你被迫离开故土、你面临的背叛、你忽然的致富或潦倒，这些事有多少是按照计划发生的？html

——《黑天鹅》前端

许多史书、传记都以一种决定论的视角来阐述历史演化的必然性，但实际上对于生存在当时的芸芸众生而言，历史上的巨大变革点每每在某个平凡的日子里忽然地发生，没有一点点防备也没有一丝顾虑。好比，当年一位准备离休当教授的江南老人，怎么就忽然去了北京呢？java

个人这个经历就是到了上海，到了 89 年的年初的时候，我在想我估计是快要离休了，我想我应该去当教授……我绝对不知道，我做为一个上海市委书记怎么把我选到北京去了。react

——👓jquery

技术的发展一样存在着高度的跳跃性和不肯定性。在几年甚至几十年一遇的时间节点上，会诞生出全新的技术，而后才是一段段的平稳增加。而且，新技术的诞生每每并不像 iPhone 发布会那样具有强烈的仪式感，而可能只是在平淡乃至质疑中揭开本身的面纱。下面，咱们会把视野进一步聚焦到浏览器里，来看看前端领域中几个咱们今天再熟悉不过的技术是怎么诞生的，在当时又引发了什么反响呢？git

仓促降生的 JavaScript

90 年代中期是个神奇的时间段。在电影工业界，1994 年诞生的三部经典影片《肖申克的救赎》、《这个杀手不太冷》到《阿甘正传》长期在豆瓣电影 Top 250 中位列前十。而到了 1995 年，三门新生的编程语言在今天更是紧紧占据 TIBOE 编程语言排行榜中的前十，它们是 Java、PHP 和 JavaScript。程序员

若是说 Java 表达了肖申克监狱的沉重，PHP 暗示了杀手里昂的危险，那么 JavaScript 在诞生之初或许体谅了阿甘的智商…多年后 JS 之父 Brendan Eich 在接受采访时，是这么表达设计 JS 的初心的：github

咱们准备向使用图片、插件和 Java applet 等组件构建 Web 内容的 Web 设计师和兼职程序员提供一种『胶水语言』。咱们把 Java 当作高薪程序员使用的『组件语言』，而胶水程序员——即网页设计师们——就能够经过一门脚本语言来组装组件并将交互自动化了。web

因此，在 JS 做者本人看来，他所指望的前端工程师不过是『兼职程序员』和『胶水程序员』（原文 part time programmer / glue programmer）而已，这多少有些一语成谶的味道。为了让实现这门语言的提议得到 Netscape 管理层的承认，他在 1995 年 5 月，花了十天实现了一个原型。请注意这个时间节点，由于区区三个月后，Netscape 就以创造 IPO 记录的姿态上市了。

在公司高速发展的历史背景下，JS 的不少方面都有赶工的痕迹。在访谈中被问及语言发展过程当中最头痛的问题时，Brendan 也认可了这一点：

（最棘手的问题）主要是概念验证的时间难以想象的短，而且在这以后语言设计就必须冻结了。包括实现内建对象在内，我开发解释器的时间是大概十天。

若是 Brendan 知道这些匆匆冻结的基础设计会在接下来的 20 多年里影响百万级的开发者和十亿级的用户的话，也许他会说服管理层多给他一点时间吧……这么短的设计时间致使这门语言的基础设计中存在着一堆历史缘由留下的技术债，好比语言里竟然并存了 undefined 和 null 两种表示『值不存在』的概念：

JavaScript 在设计时应用了 Java 将值区分为『原始值』和『对象』的作法。它也使用了 Java 表达『不是对象』的值，即 null。而根据 C（而不是 Java）的先例，null 在转换到数值的时候会成为 0：

> Number(null)
0
> 5 + null
5
复制代码

而 JavaScript 的第一个版本是没有异常处理的。这样一来，一些未定义的变量和缺失的属性就须要经过一个值来表示。null 原本很适合这个场景，但 Brendan 还想要知足下面两个条件：

这个值不该该有对应到引用类型的含义，由于它不只仅是对象。
这个值不该该转换到 0，由于这样会使得错误更加难以发现。

结果，Brendan 加上了 undefined 这个概念来表达另外一种形式下的『值不存在』。它会转换成 NaN：

> Number(undefined)
NaN
> 5 + undefined
NaN
复制代码

这就是 JS 中别 (chou) 具 (ming) 一 (zhao) 格 (zhu) 的 undefined 的由来了。这个特性在不少年来给不少开发者带来了很大的痛苦。好比，一个 bug 在真正产生的那一行经常不会直接报错，而是会产生一个 undefined 被解释器接收。而后过了好久，在另外一个地方会产生一个莫名其妙的报错，告诉你 undefined 下不存在某某属性，但其实错误根本不在这一行，而是在很早以前就发生了！这个特性放在今天来看绝对入不了 PL 界的法眼，不过只给你十天的话，你真的不会选择这个更容易实现的设计吗？

固然了，没有任何一门语言生来就是完美的。然而在浏览器这个对前向兼容有着极其严苛要求的领域，想作出任何语言特性上的 Breaking Change 都是很是困难的。像下面这个问题就已是一个 feature 而不是 bug 了：

var obj = {}
typeof obj // 'object'
typeof null // 'object'

obj instanceof Object // true
null instanceof Object // false
复制代码

做为总结，如今咱们有这些证据来直接或间接地证实 JavaScript 是一个仓促实现的产物：

设计目标定位低端码农。
金主处于粗放增加阶段。
原型迭代花费时间极短。
许多基础特性实现潦草。

在互联网这个链接超过 30 亿人的巨大系统里，应用层的惟一编程语言倒是一个充满设计缺陷的赶工做品，实在是一件匪夷所思的事情——这也很好地体现了黑天鹅事件忽然发生而影响深远的特色。固然，Web 的重要性催生了无数后来者持续的创新，下面咱们会挑选出这些创新中最广为人知的几项，来印证它们的黑天鹅性质。

面基现场的 jQuery

十二年前那个白色相簿的季节，若是你有幸在纽约参加了一场 BarCamp 线下交流会，你能想象到台上这个叫作 John Resig 的小伙子安利的，连文档都还没写完的新轮子会在全世界超过 70% 的网页里运行吗？

BarCamp 是一种由参与者相互分享的工做坊式会议，其议程内容由参加者提供，主题一般与互联网、编程、开源相关。换句话说，这是一种小规模的技术交流会。BarCamp 会举办不少次，由不少演讲者来分享不少不一样的主题，以 jQuery 的影响力而言，它多是这类活动中诞生的轮子里最著名的 Big Thing 了。不过，红极一时的 jQuery 在发布时，甚至只是做者本人的几个分享主题中的一个而已。根据 John Resig 本身的陈述，在那场 BarCamp 中他也没分享什么别的，大概三件事：

讲了一个叫作 ideaShurb 的实时协做应用 Demo。
讲了一个叫作 Feed Pile 的新网站产品，用来汇聚熟人的信息流。
讲了一个叫作 jQuery 的新轮子，能够改进用 JS 控制 HTML 的方式。

若是说还有一点什么成绩，就是额外讲了一个对社交网络思考的 PPT，还有提出了一个付费社交的 idea 也是很大的。不过最主要的就是这三件事。

在当时，编写 JavaScript 意味着不停地在兼容性上踩坑：你须要支持 IE6 和 Firefox，而谷人希的 Chrome 五年后才发布。jQuery 很快受到了~~胶水程序员~~前端开发者们的广泛喜好，到今天来自近 300 人的超过 6000 个 commit 记录证实了它的火热程度。jQuery 还创建了基金会，有许多志愿者继续维护。

从 jQuery 的例子里咱们可以看到，一个变革性技术的起点能够有多么小。jQuery 并非某个公司或组织推动的项目，做者本人在当时更没有 all-in 开发（John Resig 本人仍是一位创业者和浮世绘研究者，在基金会成立后基本上退出了项目的维护）。而回到今天，如今咱们还有谁知道 ideaShurb 和 Feed Pile 呢？咱们很是有理由相信，做者本人必定但愿他分享的这三个项目都能作起来，然而最后留下来乃至改变上百万人工做方式的，只有 jQuery 这一个。在今天，有许多文章有着『当时的 Web 面临着兼容性问题，因此 jQuery 的出现是历史的必然』这样的观点。不过只要你了解了它的诞生过程，就会发现黑天鹅的偶然性和不肯定性才是这些项目中惟一的共性。

在这一节的最后，让咱们怀念一下当时的 jQuery 首页吧。那时候天仍是蓝的，水仍是绿的，北京的房价还只要 8000 一平……

饱受质疑的 React

当咱们开源 React 的时候，最先收到的反应是有疑问的。

在 React 开源一周年之际，其官方博客上轻描淡写的一句话背后，是其诞生之初社区广泛性的质疑。让咱们看看 Reddit 上的人们最先对于 React 开源的消息是如何回应的吧：

读了他们的文档，我都根本不知道最简单的示例是想干吗。

只有我以为这个看起来又乱又笨重吗（还有个新语法要学）？这个比起 Angular 来有什么好处吗？

Facebook 的库能给 Facebook 用，不表明它适合其余人。

卧槽好吓人，为何会想在代码里加 更多的 标记呢？

有那么一秒钟我在想今天是否是 4 月 1 号。它破坏了太多约定了，注定拉仇恨。我欢迎多样性，不过这个看起来确定很差。

把 HTML、XML 和 JavaScript 混在一块儿的作法让我感受回到了 JSP 的年代。当你在一个文件里存在五种语言和语法的时候，判断光标位置是哪一种语言都是一个 NP 难的问题。算了吧，除非真有啥区别，要否则我仍是用 Angular。

HTML 混在 JavaScript 里？不了谢谢。

看起来花了十个亿啊。

丑。

Reddit 上最热门的几十条评论中，几乎有 90% 以上都是负面意见。有意思的是，恰好在这一年，知乎上对阿里云王坚博士的评价也是一边倒的差评。

在公开的资料中咱们能知道的是，React 最先是 JS 版的 XHP（这是一种 Facebook 的 PHP 方言），因为 XHP 和客户端 JS 代码混编的不便，一名工程师向经理申请到了六个月时间来把它彻底迁移到 JavaScript 上。时至今日，它已经有了几万个 react-xxx 周边插件、近万 commit 和上千贡献者，是前端社区中的超级巨星。

React 表明的就是另外一种类型的技术创新了。它的确打破了不少『最佳实践』和思惟定式，也带来了很是多的争议，但它背后的理念和范式的确引领了前端社区的一轮技术进步。在这个例子中最有意思的地方在于，一个 2013 年的~~胶水程序员~~前端开发者初次接触它的时候，90% 以上的第一印象是『这 TM 什么玩意』，没错，那时的主流民意也以为比特币太贵了…在预测将来的能力上，咱们常常错得离谱却还自觉得是。

关于 React，最后还有一个细节很值得一提：它是本文中惟一一个没有明确做者的轮子。咱们都知道 React 是 Facebook 公司的产物，但那个申请到六个月时间造轮子的工程师是谁呢？React 的全部新消息都是经过 Facebook 官方博客发布的、源码里的 AUTHORS 是字母排序的、react-basic 的初始设计文档也没有做者的提交记录…咱们最后仍是找到了这位大牛 Jordan W 的 Github，不过和 React 团队里群星璀璨的网红们比起来，他却连照片都不放一张…结合国内前端社区关于 Vue 和 Angular 的大撕逼与 React 的争议性，咱们彷佛能够理解做者隐姓埋名的苦衷了…

生逢其时的 Vue

上文的介绍的这些轮子，都有着本身牛逼闪闪的地方：JavaScript 使得浏览器中的富交互行为成为可能、jQuery 发明的 DSL 大大简化了 DOM 操做、React 的编程范式颠覆了开发者的思惟模式…而到了 Vue 这里，咱们却很难找到一个『好用』以外，它在技术上的颠覆性闪光点。不过，既然它的热度在国内已经盖过 React，它也定然有本身的独特之处。

和 React 相比，Vue 的亮相能够说是默默无闻了。在 Hacker News 上，做者 Evan You 初次发布 Vue 的帖子得到了 54 点数和 26 条评论。做为对比，React 连换个许可协议都得到了 2280 点数和 498 条评论。

虽然初次发布时话题性没有 React 那么强，可是 Vue 的传播和口碑却至关的好，在发布后的第一周内就得到了 2w+ 的官网浏览量和 600+ star。三年之后的今天，它已经几乎成为中国开发者业务开发的首选框架了。Vue 兴起的过程已经老生常谈，在此按下不表。在这一节里，咱们但愿思考的问题是：为何就在近期，有大量的前端开发者转向 Vue 呢？为何 Angular / Avalon / Knockout 这些相似的 MVVM 框架没有造成这样的星火燎原之势呢？

从技术角度上，笔者可以想到几个『合理』的理由：

转向 Vue 时国内已经能够广泛抛弃 IE8，而 Vue 的实现原理刚好最低支持 IE9。
Angular 1 性能很差，而 Angular 2 的 API 变动很是大。
React 的 JSX 长期被视为异端，全家桶很差配，中文化支持也没有 Vue 好。
Knockout 和 Avalon 缺少现代的工程化支持，维护乏力。
……

因此这些理由有道理吗？它们不过都是纯粹的马后炮而已！这些理由都不过是咱们基于『Vue 很是火』的现实，去正当化『Vue 为何能火』的合理性而已。毫无疑问，Vue 的框架设计是第一流的，不过，Vue 的普及程度是某些大厂内部框架的几十倍，是否意味着它的代码质量就比这些同时期的框架好上这么多倍呢？咱们无法量化比较这一点。不过，这里有一个例子能够做为类比：

若是你是个音乐爱好者，那么在没有唱片的时候，你可能会花钱到本地的剧院花 100 刀听本地小乐团的音乐会。而在唱片流行后，你能够只花 10 刀就能听到世界第一乐团的音乐，这时候你去本地小乐团的音乐会的意愿还会同样强吗？对于信息资源，存在着很是强的马太效应，而开源也在编程领域大大增强了这种效应。类比到前端领域里，种种 React 和 Vue 等框架的替代品有多少真正应用到了生产环境呢？黑天鹅的巨大影响力很大程度上来源于这种『赢家通吃』的集聚效应，而 Vue 则是这个领域中不可多得的胜利者。

到这里为止，咱们已经看到了浏览器领域里几个关键技术的诞生，和咱们的想象之间所存在的不一样：JavaScript 实现得很是草率、jQuery 只是个微小的业余项目、React 诞生之初饱受质疑、Vue 的设计并无多少颠覆性…然而它们已经不会被历史遗忘了。因此下一个变革点在哪呢？若是黑天鹅可以被预测，那它就不是黑天鹅了。

后记

人呐就都不知道，本身就不能够预料。一我的的命运啊，固然要靠自我奋斗，可是也要考虑到历史的行程。

行文至此，笔者有了一些额外的想法：文中涉及的开发者毫无疑问都是社区中的精英，但作出巨大贡献的他们，在技术水平上就必定是最优秀的吗？我的愿意相信，在百万级的开发者中，必然还存在着许多低调的大牛们，他们的项目所需工做之艰深，所遇到的挑战之困难不会亚于上面的任何一个项目。不过，黑天鹅只有那么几只，聚光灯的范围也只有那么一点，对于绝大多数勤勤恳恳的开发者，黑天鹅的机会都是可遇而不可求的。

因此咱们该有怎么样的态度来面对技术演化的黑天鹅性质呢？玉伯 dalao 的签名很是有借鉴意义：『因上努力，果上随缘』。达到开发明星项目水平的同窗有不少，但革命性的项目有太多不肯定性，咱们能作的也就是踏实地去学习和进步，而后耐心地等待吧。换句话说，这就是所谓的『且行好事，莫问前程』了。固然了，请不要把这个态度和胶水程序员们问心无愧地编写增查改删的业务逻辑混为一谈哦 🙂

鉴于做者对前端的了解有限，所以本文只涉及了几个前端领域中老生常谈的例子而已。若是你们有勘误或更好的想法，欢迎在 Github 或评论中提出，谢谢。