Categories
程式開發

JavaScript和Node.js简史,前端未来走向何方?


本文最初发布于 Medium 网站,经原作者授权由 InfoQ 中文站翻译并分享。

起源,浏览器大战和交互式 Web

早年间的 Web 没有任何交互行为,那时的互联网实际上只是通过 FTP 之类的计算机网络协议显示文本文件而已。

本地网络,也就是学校等组织的内部网络最后合并在了一起,形成了互相联结的网络,那就是互联网。

随着时间推移,Web 通过 DNS、HTTP 等新协议不断扩展,且开始用上了 HTML;随着个人计算机和 Web 浏览器的推广,中产阶级也开始接入了互联网。Mosaic 浏览器的创造者创建了一种名为“LiveScript”的语言,于 1995 年发布。

发布 3 个月后,它被 重命名为“JavaScript”,为的是蹭在高级程序员中流行的 Java 语言(和 JS 完全不同,毫无关系的语言)的热度。

结果微软故技重施,又一次从别人的产品中窃取了源代码,并发布了自己的产品版本——使用“JScript”的 Internet Explorer(此处仅代表作者个人观点)。浏览器大战开始了,战争的结局是 Mosaic 等浏览器败给了 Internet Explorer。但是 JS 和其他脚本语言一样仍然存在多个分支。这些分支都是为了解决为浏览器提供(超链接和页面重载之外的)交互行为 这个问题。

为其提供动力的语言和引擎

https://www.slideshare.net/RednaxelaFX/implement-js-krystalmok20131110

如果你想了解有关 JS 引擎和语言背后代码的更多信息,请看一看 Kris Mok 做的这份很棒的演示。不像我,他实际上构建了一个 JavaScript 引擎……

通过脚本对浏览器行为进行标准化

标准化脚本语言的第一次尝试是 1997 年的 ECMAScript。(ES-1)是 欧洲计算机制造商协会(ECMA) 制订的规范。但是,由于不同的实现、互相竞争的编程语言和人们的自负心态等等因素,真正的标准化直到 2009 年才开始成为现实。在此期间,(失败的)ES-4 提案(由 Mozilla 等组织主导)曾试图推广一些更传统的编程概念,如类、模块等。

因为有人担忧 ES4 会“破坏 Web”,以及允许 客户端动态内容 的 AJAX(异步 JavaScript 和 XML)的诞生,这个标准被放弃了。受多种因素影响,jQuery 于 2006 年创建,主要是为 JavaScript 和 AJAX 的各种实现提供跨浏览器支持。ES-5 于 2009 年发布,最终成为了今天大多数人仍在引用的 JavaScript 事实标准。

这里要明确指出一点,实际上 ES-4 中提议的所有特性之后都将在 ES-6 中实现,例如类、生成器(generator)和迭代器(iterator)、解构赋值(destructuring assignment),以及最重要的模块系统。唯一 缺少 的特性就是各种 类型的重新实现

Node.js 和 JavaScript 模块系统的诞生

2009 年诞生的 serverJS 旨在为 JavaScript 提供模块系统,后来它被重命名为 commonJS。它的目标是“在 Web 浏览器之外为 JavaScript 建立模块生态系统约定”。它可能与某些失败的 ES4 提案有关系。

Ryan Dahl 两年前讨论的内容。

https://youtu.be/jo_B4LTHi3I

同年晚些时候,RyanDahl 以此为基础创建了 Node.js。这是一个 JavaScript 运行时环境,使用了 Chrome V8 引擎和 libuv 等技术,并于 2009 年 5 月发布。

这种运行时环境使 JavaScript 几乎可以运行在任何位置,只要安装了这个环境即可。

Node.js 彻底改变了 JS 语言,并帮助后者慢慢向编程语言靠拢,而逐渐摆脱了脚本语言的影子。在这一过程中有几件事很关键:分别是异步代码的回调(当时 JS 中已经有这个特性了)和模块系统(被拒绝的一个 ES4 提案),允许通过 require() 和 export 导入和导出多个文件;模块系统的特性最终催生了一个包管理器 NPM,它后来成为了最大的开源软件来源之一。Node.js API 还带有一些允许读取 / 写入文件的基本方法(例如 FS)和一种基础的 HTTP 方法,在创建一个简单服务器时它们都是必不可少的。

Node.js 发布之后,围绕这个运行时环境及其主要的包管理器 npm 的生态系统迅速发展壮大。在 grunt、gulp、webpack 等工具的帮助下,浏览器端和 Node 端的库都更容易发布、分发和互联了。

这让开发人员更容易在前端和后端快速建立网站原型。全栈开发人员的门槛一夜之间就消失不见了,所有人现在都可以成为全栈工程师,因为它不需要开发人员切换到其他语言上,如 PHP、python、pearl 等。

初创企业的视角

随着时间的流逝,在种种因素推动下,Node.js 迎来了爆炸式增长和普及。

这个环境让很多东西学起来都轻松多了,因为你不必像配置 php 和 LAMP 一样学习如何配置本地 apache 服务器、xampp、配置 vhost 文件。你能想到的几乎所有需求,在前端或后端都会有一个库来满足它,只需一个 npm install 命令即可。

太棒了,只要能正确实现(异步编码模式),很多场景中服务器都能跑得飞快,并能以最少的内存处理大量并发流量。而且它们的代码写起来非常轻松。

不管是对新手还是有经验的开发人员,这都绝对是梦寐以求的生活;尤其是那些每时每刻都在 引领编程潮流的初创企业,更是对 Node.js 情有独钟。随着 Node.js 逐渐走向成熟,人们也看到了它的诸多优势:高速度、低廉的服务器成本和学习成本,降低潜在的培训和招聘成本,快速开发原型,加强前端和后端团队之间的沟通,最重要的是总体薪酬成本下降——因为一位优秀的全栈工程师可以同时处理前端和后端需求。后者对初创公司来说尤其重要,因为这意味着更低的股权成本和更少的开销。

响应式设计和移动应用开发

从 2009 年 Node.js 诞生到 2013 年它迎来爆发的期间,移动电话进化成了智能手机,而应用成为了初创企业的成败关键。你的软件要在用户手中 7×24 待命,为你建立竞争优势,甚至可能帮助你击垮行业中的巨头,建立一个新的帝国。

JavaScript和Node.js简史,前端未来走向何方? 1

媒体查询(Media Queries)于 2008-2009 年间引入,在 2010 年“响应式设计”一词出现,以适应随技术领域和整个社会的革命性变化而产生的需求。随着响应式设计成为 Web 设计的主流,新技术也即将诞生,准备颠覆移动应用程序开发行业。

到 2011 年,另一种技术开始兴起,这很大程度上是受到了响应式设计理念的影响。Apache Cordova 允许 Web 开发人员使用 HTML、CSS 和 JS 来构建移动应用。在此之前,你必须精通 Android 端的 Java 语言或 iOS 端的 objective C 语言。这些语言不仅很难学习,而且开发环境更难调试(今天也是如此),开发速度也更慢,因为你必须等待代码重新编译。Cordova 提供了一个解决方案,只用一种编程语言(JS)、html(标记)和 CSS(样式)就可以开发移动应用,而且学习起来更容易。

当然,这种途径确实存在巨大的缺陷,那就是应用的运行速度比其原生版本要慢许多,因此它并没有像 Node.js 那样大受欢迎。2013 年的 Ionic 在它的基础上进一步发展,此后也不断进步,并基本取代了 Cordova。但这还不足以挽救微软的 Windows Phone,因为没人为它的应用商店开发应用……

个人经历:我叔叔在微软工作了 20 多年,大部分时间都在用微软系统的手机。所以我在本文中会对微软大开嘲讽。2000-2008 年间,当我看到微软开发的智能手机具备完整的互联网功能(Windows Mobile 系统)时,我本来是非常惊讶和倍感振奋的。那可是响应式设计诞生的整整 10 年前啊。

JavaScript和Node.js简史,前端未来走向何方? 2

在硬件方面,Johnny-Five.io 于 2012 年面世;有了它,你第一次可以利用 JS 的简洁性以及 Node.js 和 NPM 的强大能力来快速开发硬件原型。

以前需要开发人员使用静态类型的 OOP 语言的所有领域都受到了影响。

这让我们开发人员可以使用 Arduino、Tessel 2、Raspberry Pi 以及可以安装 Node.js 和 johnny-five 的几乎所有设备来做开发。不仅是机器人,当今很多的物联网设备都是基于它构建的,它对很多领域都产生了深远的影响,甚至包括一些并没有真正意识到 JS 好处或推崇 JS 的领域。

结果,JavaScript 成为了 最通用、可访问性最高的编程语言,可以在客户端(浏览器)、服务器、手机 / 平板电脑应用,以及通过 Johnny-Five 的微控制器控制的各种设备上使用。

甚至还有几个库可以用来构建 VR 甚至游戏。

Node Forks 和 ES6 的问题

时间来到了 2014 年,出于各种原因,Node.js 开始出现了一些分支。其中最著名的是 io.js,它最终合并回了 Node.js。其他还有几个分支这里就不细谈了,它们的消亡背后也有很多因素,包括技术原因(如 promise)、缺乏贡献者,甚至是出于一些不成熟的个人情绪化原因。

到 2015 年,最新的 JavaScript 标准 ECMAScript 6 发布了,它几乎实现了原来在 ES4 中计划的所有内容,只是去掉了一些重大更改,尤其令人瞩目的是引入了 let、const 和 symbol,而不是更传统的局部 / 全局变量和静态、强类型的声明。还有,这个方法 不像原来的 ES4 草案那样 可能会破坏 Web,而是引入了强大的 Babel,并让开发人员可以将 ES6+ 编译到 ES5(当时的通行标准),这样就能立即使用很多新特性了。

所有这些都已由 Node.js 实现。

这些新的 JavaScript 特性包括 ESM,也就是 ECMAScript 模块(import/export,而不是通过 commonJS 的 require())、async/await、fetch browser API,还有很多 ES4 草案中没有的特性。其中一些特性还在不同程度上引入了与 Node.js 核心架构的兼容性问题。最值得注意的是,在过去的 5 年中,ESM 标准本身一直就是一个非常现实的问题,它需要根据不同情况来使用第三方包 / 实验标志或使用.mjs 文件。

TS的诞生和崛起:对ES4和ES6的回应?

在水面下还潜藏着另一股力量。TypeScript 于 2012 年诞生,但直到 2014 年,ES6 这一新标准快要发布的时候它才放出了 1.0 版。

接下来,我会基于自己对历史和 2020 年当前行业形势的理解,插入一些个人观点和判断。我将尝试从社会学家和 JavaScript 开发人员的角度,凭借近五年的经验对未来做一些预测。

我认为 JavaScript 在很大程度上是一门残破的语言,其缺陷本应该在基于它运行的全球经济与技术体系深刻影响我们的现实社会之前就得到解决。换句话说,他们关于 ES4 提案的观点可能是正确的……但是现在意识到这一点为时已晚

最后,我认为 TypeScript 可以调试语言本身的继承错误,并在快速制作原型和高质量代码之间取得了良好的平衡等特性确实很棒,而且我迫不及待地想看看 Deno 为这种语言带来了哪些新鲜空气。

Deno 原型的诞生

Deno 于 2018 年首次公布,Node.js 的创建者 Ryan Dahl 完全基于现代 JS 标准(例如 promise 和 async/await、ESM、类型数组和 TypeScript),从头开始写了一个全新的运行时,震撼了整个 JavaScript 世界。

https://youtu.be/M3BM9TB-8yA

由于所有这些历史原因和其他因素,Ryan Dahl 开始打造全新的事物。在演讲中,他谈到 Deno 主要是一个“思想实验”,并表达了他在构建 nodeJS 时留下的遗憾,对 TypeScript 的热爱以及对 dart 的厌恶。

Deno 1.0

今天,Deno 的 1.0 版本已经稳定下来,准备就绪,可供大家试用。

https://youtu.be/HjdJzNoT_qg

他们在一月份将安装编译为可执行文件,之后到现在它已经足够稳定了。

https://youtu.be/NHHhiqwcfRM

https://youtu.be/KuaI6mphFNc

以上是来自创作者的一些最新视频,以供参考。

未来走向?去年我教高中生时就做过一些预测,并告诉他们应该注意三件会改变开发行业的事情:

1、TypeScript 和 Deno

通过它们学习后端知识,并掌握行业(FANG)所需的代码质量水平。

2、CSSHoudini

事关浏览器优化和自定义布局等等。

3、WebAssembly 和 AssemblyScript

可在服务器、移动应用和 VR 领域提供原生级的优化水平。

换句话说,今天就像是 2009 年的重演,只不过 这次轮到 TypeScript 和它的运行时环境来颠覆行业了

今天的主角是 TypeScript 和 Deno,而不是曾经的 JavaScript 和 Node.js。

相比过去的移动应用和响应式设计,如今可能是 VR/AR 设计界面来掀起新的潮流,因为在这次全球疫情中,我们学会了利用 5G 和云游戏等技术来抵消灾难的冲击。

相比过去我们使用 Cordova、Ionic 或 NativeScript,用一个包装器来原生编译运行代码,今天你可以使用 TypeScript 编写和调试代码,然后编译为 WebAssembly,也几乎用不着再操心性能问题了。

有想法或意见吗?

希望大家能喜欢这篇文章,并且不要把我的一些批评太当真。我真的很想听听你的想法!我特别想看看老一代程序员对 JS/ECMA 历史的看法,因为我从 2013 年才开始用它,到了 2015 年才开始成为真正的全栈工程师。

宣传一下我们的 YouTube 频道,里面有很多有用的教程,欢迎大家订阅:

https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw

英文原文

A brief history of JavaScript