热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

作者| HansMcMurdy译者|王强策划 |小智本文最初发布于Medium网站,经原作者授权由InfoQ中文站翻译并分享。1起源,浏览器大战和交互式Web早年间的Web没有任何


作者 | Hans McMurdy


译者 | 王强


策划 | 小智



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


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


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


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


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


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


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


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


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


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


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


标准化脚本语言的第一次尝试是 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),以及最重要的模块系统。唯一 缺少 的特性就是各种 类型的重新实现


4 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 等。


5 初创企业的视角


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


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


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


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


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


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



媒体查询(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 年前啊。



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


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


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


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


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


7 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 文件。


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


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


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


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


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


9 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 的厌恶。


10 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,也几乎用不着再操心性能问题了。


11 有想法或意见吗?


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


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


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


参考阅读:


https://medium.com/Javascript-in-plain-english/a-brief-history-of-Javascript-9289a4d344d2




InfoQ 读者交流群上线啦!各位小伙伴可以扫描下方二维码,添加 InfoQ 小助手,回复关键字“ 进群 ”申请入群。大家可以和 InfoQ 读者一起畅所欲言,和编辑们零距离接触,超值的技术礼包等你领取 ,还有超值活动等你参加,快来加入我们吧!




点个在看少个 bug :point_down:





推荐阅读
  • flowable工作流 流程变量_信也科技工作流平台的技术实践
    1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下:目前OA流程引擎无法满足企业特定业务流程需求,且移动端体 ... [详细]
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文比较了eBPF和WebAssembly作为云原生VM的特点和应用领域。eBPF作为运行在Linux内核中的轻量级代码执行沙箱,适用于网络或安全相关的任务;而WebAssembly作为图灵完备的语言,在商业应用中具有优势。同时,介绍了WebAssembly在Linux内核中运行的尝试以及基于LLVM的云原生WebAssembly编译器WasmEdge Runtime的案例,展示了WebAssembly作为原生应用程序的潜力。 ... [详细]
  • 阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾
    本文介绍了阿里Treebased Deep Match(TDM)的学习笔记,同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法,再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用,并介绍了TDM的背景和优势。最后,文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • Tomcat/Jetty为何选择扩展线程池而不是使用JDK原生线程池?
    本文探讨了Tomcat和Jetty选择扩展线程池而不是使用JDK原生线程池的原因。通过比较IO密集型任务和CPU密集型任务的特点,解释了为何Tomcat和Jetty需要扩展线程池来提高并发度和任务处理速度。同时,介绍了JDK原生线程池的工作流程。 ... [详细]
  • Webmin远程命令执行漏洞复现及防护方法
    本文介绍了Webmin远程命令执行漏洞CVE-2019-15107的漏洞详情和复现方法,同时提供了防护方法。漏洞存在于Webmin的找回密码页面中,攻击者无需权限即可注入命令并执行任意系统命令。文章还提供了相关参考链接和搭建靶场的步骤。此外,还指出了参考链接中的数据包不准确的问题,并解释了漏洞触发的条件。最后,给出了防护方法以避免受到该漏洞的攻击。 ... [详细]
  • 本文介绍了在Windows环境下如何配置php+apache环境,包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]
author-avatar
kevin_xi
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有