1. Dotnet9首页
  2. 更多分享
  3. 编程资讯

InfoQ 2020 年 JavaScript 和 Web 开发趋势报告

作者 | Dylan Schiemann、Bruno Couriol译者 | 张卫滨本报告来自InfoQ英文站,总结了 InfoQ 编辑团队目前是如何看待 JavaScript/Web 开发领域的技术采用情况和新兴趋势的。这是由广泛的内部讨论所形成的一篇带有观点性的文章,讨论的参与者是我们的编辑,他们同时也是活跃的软件工程师,并且参考了内部或私有的调查和分析结果,同时查看了浏览器对核心技术的支持程度,如 Web component。

本文要点:

  • 从我们的上一次报告算起,WebAssembly 可能是 Web 趋势方面被讨论最多的技术。WebAssembly 应用已经基于 WASI 跨越了浏览器的限制,WebAssembly 在 2019 年底达到了稳定的 1.0 W3C 推荐水准。我们将 WebAssembly 提升到了早期采用者状态。
  • 一年一度的 ECMAScript 版本即将发布,即 ES2020,它将提供自 ES2015 年以来数量最多的新语言特性,包括可选链、BigInt、globalThis、空值合并和动态导入。这些特性都被认为是稳定的,至少有两个现有的浏览器已实现。
  • Web component 已经从早期采用者变成了早期大众状态。Web component 已经达到了主流成熟阶段,并得到了 Chrome、Firefox、Safari 和其他基于这些浏览器引擎的其他浏览器(如 Edge 和 Brave)的支持。
  • TypeScript 已经升级到晚期大众状态。迄今为止,TypeScript 是采用最广泛的 JavaScript 变体,在过去几年中取得了长足的进步,现在大多数 JavaScript 框架都利用了它的工具和基础设施。
  • JavaScript 客户端框架和库的领域在持续发生着变化,尽管在最近几年 React、Vue.js 和 Angular 取得了统治地位,但是新一波的精简框架和应用编译器可能会在未来几年内改变现状。

在 InfoQ,我们会定期更新技术生命周期主题图,以便展示我们的理解不同的主题在技术采用曲线中的位置。在做这件事情的时候,我们会考虑实践的状态,以及网络、聚会、会议、分析师活动中的新想法和新事物。我们还考虑了站点的流量以及 QCon 和其他会议上各个演讲的参会人数。

如果某个主题位于图表的右侧,那么你可能会发现在 InfoQ 上已经有很多相关的内容了,在它们还是新技术的时候,我们对其进行了介绍,创新者和早期采用者的经验可以帮助指导个人、团队和组织采用这些想法和实践。

曲线左侧的主题是我们认为新兴的技术,正在被创新者和早期采用者使用,在我们的报告和内容中,主要的关注点在于吸引读者的注意,这样他们就能够自己决定现在是否要对其进行探索,或者是暂时等待并观察它如何进一步发展。

JavaScript 和 Web 开发领域变更快速,每年需要不止一次的更新。以下是 2018 年第四季度最后一次回顾时的图表。

InfoQ 2020 年 JavaScript 和 Web 开发趋势报告
2018 Q4 的 Web 开发图表

鉴于 JavaScript 和 Web 生态系统已经发生了如此多的变化,将所有的领域放到一张图上已经不现实了。因此,我们将它们细分成了以下 11 个主要的领域。

  1. Web 开发语言 / 标准 / 模式
  2. Web 开发的客户端框架 / 库
  3. 面向 Web 工程师的服务器端平台 / 框架 / 数据 /API
  4. 面向 Web 工程师的云技术
  5. 包管理 / 打包 / 优化
  6. Web 开发测试和自动化
  7. 移动 / 桌面环境和框架
  8. 面向 Web 工程师的 IoT/ 区块链 / 机器学习
  9. 面向 Web 工程师的可视化 /XR
  10. CSS
  11. Web 开发的代码编辑器和 IDE

我们对 Web 开发领域始终充满兴趣,几乎每天都有新的 JavaScript 项目启动。要决定关注哪些项目,忽视哪些项目是非常有挑战性的。即便目前在日常开发工作中可能暂时用不到它们,开发人员也可以从有趣的方法中学习并收集灵感。

Web 开发语言 / 标准 / 模式

InfoQ 2020 年 JavaScript 和 Web 开发趋势报告
2020 Q1 的语言/标准/模式

创新者

ECMAScript 一年一度更新,今年是 ES2020,将提供自 ES2015 以来数量最多的新语言特性,包括可选链、BigInt、globalThis、空值合并(nullish coalescing)和动态导入。这些特性被认为是稳定的,至少有两个现有的浏览器已实现。

PureScript 为 TypeScript 提供了一个替代语言。尽管在最近的 JavaScript 2019 状态调查中它的得分很高,但否能在不久的将来迈出创新者状态还存在争议。

早期采用者

关于早期采用者,我们将持续关注 Flow(面向 JavaScript 的静态类型检查器)、Elm 和 Reason(均是 JavaScript 的替代语言,可以生成基于 JavaScript 的 Web 应用)。随着 TypeScript 的兴起,Flow 的吸引力和开发似乎有所减弱,但是我们依然在跟踪它的变化。

从上一份报告发布到现在,WebAssembly 恐怕是在网上被谈论最多的趋势。WebAssembly 应用已经借助 WASI 将适用范围扩展到浏览器之外,WebAssembly 在 2019 年底已经达到了稳定的 1.0 W3C 推荐标准。因此,我们将 WebAssembly 提升至早期采用者的阶段。

除了传统的 W3C 流程,Web Incubator CG(WICG)不断提出涉及范围广泛的新特性和潜在标准。Web Audio 也持续得到了很多的关注,它致力于让 Web 平台适用各种音频应用。

早期大众

在如何最高效地构建 JavaScript 应用方面,函数式和反应式编程依然是讨论的重点。Vue 3 将会使用 TypeScript 编写,Vue.js 创始人尤雨溪在 Twitter 中说:“我认为 TypeScript 对我最大的帮助是避免创建类,而不是使用类。Vue 3 是一个 100% 的 TS 代码库,却没有用到任何类。”

Web component 已经从早期采用者转变为早期大众状态。Web components 已经达到了主流成熟的程度,现在 Chrome、Firefox、Safari 以及其他基于这些引擎的浏览器(如 Edge 和 Brave)都对 Web component 提供了原生支持。许多框架和库也对 Web component 提供了原生支持,包括 Angular、Dojo、Ionic、Stencil、Svelte 和 Vue.js。

我们将两个条目直接加入到了早期大众状态:ES2019 和 AMP。

在对“#smooshgate”争议、Object.fromEntries 以及对字符串和可选 catch 绑定的一些小改善之后,ES2019 为数组添加了 flat 和 flatMap 方法。这个相对比较小的特性集目前正在被早期大众使用。

AMP 是一个致力于让 Web 更加快速的替代方案,它已经加入了 OpenJS 基金会。尽管到目前为止 InfoQ 一直拒绝采用它,而是倾向于使用现有的开放 Web 标准,但是有些人在持续采用 AMP,它主要适用于媒体和新闻 Web 站点。

晚期大众

随着 JavaScript 生态系统的成熟,有一些处于晚期大众状态的基础技术并没有表现出被替代的迹象,而且几乎每个 JavaScript 开发人员都在使用它们。

HTML5 和 ES6/2015 – ES2018 均处于晚期大众状态,因为现在几乎每个 Web 应用都将这些特性作为基础。

TypeScript 也进入了晚期大众状态。到目前为止,TypeScript 是应用最广泛的 JavaScript 变体,在过去的几年中,它取得了长足的进步,现在大多数的 JavaScript 框架都利用了它的工具和基础设施。根据最近的 GitHub Octoverse 报告,TypeScript 位列十大语言之一,JS 状态调查网将 TypeScript 列为目前使用最广泛的 JavaScript 变种,超过 50% 的受访者说他们在使用 TypeScript,并对 JavaScript 的超集持积极态度。

落伍者

我们用落伍者结束这一部分的报告,虽然它们依然在很多的应用中使用,但是新的开发项目对它们并没有太大兴趣。尽管 ES5 和 HTML4 所包含的底层特性依然能够在最新版本的 JavaScript 和 HTML 中找到,但是更新的版本已经取代了 ES5 和 HTML4。

Web 开发的客户端框架 / 库

JavaScript 客户端框架和库领域在不断变化,虽然最近几年 React、Vue 和 Angular 占据了主导地位,但是新一波的精简框架和应用编译器可能会在未来几年内改变现状。

InfoQ 2020 年 JavaScript 和 Web 开发趋势报告
2020 Q1 的客户端框架/库创新者

截止本报告撰写时,Vue.js 3 尚未发布,但它是使用 TypeScript 重写的,非常值得期待。

早期采用者

Dojo 在其确定的道路上继续发展,目标是交付精益的、TypeScript 优先的框架,目前它的版本是 6,不久将会发布版本 7。在构建反应式 Web 应用方面,Dojo 提供了非常现代高效的方式,并对 TypeScript 和开发者工程学提供了特别好的支持。Dojo 目前是 OpenJS 基金会的一部分。

Ember 最近发布了 Ember Octane,提供了一个新的组件模型和反应式系统。

LitElement 是 Polymer 的继承者,提供了创建轻量级 Web component 的 JavaScript 库。

Aurelia 依然有一批忠实的追随者,继续致力构建基于组件的应用环境。

Marko 也是 OpenJS 基金会项目,最初起源于 eBay,主要关注点在于创建反应式 UI 组件。

腾讯的 Omi 是个跨框架的组件创建库,支持将 Web component、JSX 和其他组件集成到统一的库中。

早期大众

有三个项目首次进入早期大众类别中。

Ionic 的 Stencil 已经成为最流行的 Web component 创建框架,与 Omi 类似,它是用来跨多个框架创建组件的框架。

Svelte 已经成为了流行的 React 替代方案,这归功于它保持了与 HTML 的一致性,它的使用方式使其成为了一个让人感受不到其存在的框架。

Preact 是个很小的 React 替代方案(压缩后小于 4KB),其 API 与 React 库是一致的。

晚期大众

Angular 已经到了晚期大众阶段,在本报告撰写时,Angular 9 处于发布候选版本,该版本会发布备受期待的 Ivy 渲染引擎更新。

Vue.js 2 也到了晚期大众状态,如今它已经成为最广泛使用的 JavaScript 框架。

React 依然是最流行的 JavaScript 渲染库,并且在我们上次报告之后还进行了 hooks 等方面的更新。

RxJS 依旧是流行的反应式扩展库,在 Angular 生态系统中得到了广泛应用。

Moment 也是 OpenJS 基金会的一部分,在管理日期和时间等问题时,它依然是应用最广泛的库。

虽然对 Lodash(OpenJS 基金会)这种库的需求在减少,但是在与 JavaScript 协作时,它依然是应用很广泛的库。在与现代 JavaScript 协作时,Core-js 也是广泛使用的库。

落后者

Dojo 1.x 和 Angular 1.x 虽然还在广泛部署,但是它们已经处于维护模式。jQuery 虽然得到了一些改进,但基本上已经被新的 HTML 和 JavaScript 特性或更成熟的框架所取代。

服务器端平台 / 框架 / 数据 /API

最近,JavaScript 的服务器生态系统引起了人们很大的兴趣。一项重要的创新就是向服务器端渲染、静态预渲染和构建时渲染转变,以减少 JavaScript 在客户端的工作负载,在这个过程中不需要改变如今应用所使用的反应式编程模型。

服务器端、API 和客户端之间的界限变得越来越模糊,所以这个类别还包含了静态生成、数据、状态管理和 API 等方法,这些方法通常是在客户端和服务器端所共享的。

InfoQ 2020 年 JavaScript 和 Web 开发趋势报告
2020 Q1 的服务器端/框架/数据/API

创新者

Deno 已经接近 1.0 发布版本。它是由 Node.js 最初的作者 Ryan Dahl 创建的,Deno 致力于创建 TypeScript 版的 Node.js 替代方案。

Dojo 添加了一个构建时渲染方式,这样的话,它就可以在应用构建的时候利用 Node.js 的特性,从而为静态站点的生成提供一系列的功能。与其他方案相比,Dojo 的方法运行在组件级别,为关键模式和特性代码块提供了高度可重用的方式。除此之外,Dojo stores 还提供了可预测的、一致的状态容器,内置了对常见状态管理模式的支持。

Hasura 是创建 GraphQL 服务器的开源方案之一。按照 JS 2019 新星状态报告,在 2019 年,人们对 Hasura 兴趣显著增长。

早期采用者

最初创建 Express 的团队开发了一个名为 Koa 的 Node.js 框架,该框架持续吸引着人们的关注。

Nuxt 是个 Vue 框架,它提供了服务器端渲染、静态站点生成和单页应用功能。

Strapi 和 Storyblok 是两个开源的 Headless 内容管理系统。随着反应式和用基于组件的架构提供现代化的内容管理方案的增多,这一领域引起了极大的兴趣。

Apollo 仍然是 GraphQL 方面的流行方案,它最初来源于 Meteor 框架。

早期大众

Nest.js 是使用 TypeScript 编写的 Node.js 框架,因为其支持全栈 TypeScript 开发的各种选项和特性,它的受欢迎程度在不断上升。

Next.js 是面向 React 应用的服务器端框架,它支持服务器端渲染、静态站点生成等功能。

Gatsby 能够利用 GraphQL 从各种源获取数据,并为基于 React 的应用提供了高效的渲染方案。

Fastify 是 OpenJS 基金会项目,作为一个高性能的 Node.js Web 框架,目前它是替代 Express 的新兴方案。

MobX 是除 Redux 之外的另一个状态管理方案,它正被越来越多的人所采用。

晚期大众

到目前为止,Node.js 依然是在服务器端运行 JavaScript 的最流行方案,也是像 Electron 这种环境的基础,借助该环境,我们可以使用 Web 技术创建桌面应用。Node.js 是 OpenJS 基金会的项目。

Express 依然是使用最广泛的 Node.js Web 框架,它也是 OpenJS 基金会的项目。

尽管 REST 依然是创建 API 的最流行方式,但是 GraphQL 也得到了相当广泛的采用,它是一种基于查询的方案,能够取代将所有 API 端点预先定义好的方式。在 API 中同时使用 REST 和 GraphQL 也是很常见的。

Redux 依然是 JavaScript 应用中进行状态管理的最流行方式,不过在小型或简单的应用中,它使用得比较少。

面向 Web 工程师的云技术

现在有很多方案可以帮助 Web 工程师创建和部署基于云的应用。

InfoQ 2020 年 JavaScript 和 Web 开发趋势报告

云技术创新者

Architect 是 OpenJS 基金会项目,支持创建 Serverless 的 JavaScript、Python 和 Ruby 应用。早期采用者

AWS Amplify 提供了使用 AWS 构建移动和 Web 应用的开发平台。

在快速部署 Web 应用方面,Netlify 是最流行的可选方案之一。

Azure 的 JavaScript SDK 越来越受欢迎,这很大程度上是因为其灵活的 IoT 和认知服务(Cognitive Services)API。

早期大众

AWS Lambda 在运行 Serverless JavaScript 函数方面越来越受欢迎。

Zeit Now 凭借其静态和 JAMstack 部署、Serverless 函数和全球 CDN,现在已经成为部署 Web 应用的流行方式。

Google Cloud Functions 为 Google 云提供了运行 Serverless JavaScript 函数的方法。

Firebase 是 Google 提供的另一个方案,提供基于云的移动和 Web 基础设施。

包管理 / 打包 / 优化

在 JavaScript 和 Web 开发中,打包(Bundling)、包管理以及应用的整体优化依然是重要的话题。

InfoQ 2020 年 JavaScript 和 Web 开发趋势报告
2020 Q1 的包管理/打包/优化创新者

Pika 致力于为 JavaScript 提供一个工具,将其构建和部署到 ES 模块支持的环境中。

Entropic 是 npm 的替代方案,目前还处于早期阶段,它采用了一种更为分布式的方式来实现包注册,而不是使用单个联合注册器。

早期采用者

Parcel 是越来越流行的 Web 应用打包器。在撰写本报告时,Parcel 2 已经准备发布了。

Webhint 是 OpenJS 基金会项目,它是 linting 工具的补充,可以提高可访问性、速度和跨浏览器兼容性。早期大众

Prettier 是个带有偏好的代码格式化器,它终结了 JavaScript 开发中关于代码格式化的大部分争论。

ESLint 是另一个 OpenJS 基金会项目,它有很多种查找 JavaScript 应用程序中的错误和反模式的方式。TSLint 作为独立的产品已经被弃用,现在它是 ESLint 之上的一个扩展。

Esprima 是广泛使用的 ECMAScript 解析器,用来帮助处理抽象语法树,它也是 OpenJS 基金会的一部分。

Yarn 是替代 npm 的包管理器,它利用了 npm 的包注册表。

Rollup 是由 Svelte 团队的一些成员创建的 ES 模块打包器。Rollup 更广泛地用于库和模块,而 Webpack 更广泛地用于应用。

晚期大众

NPM 是 JavaScript 领域事实上的包管理和注册表标准。npm 在 2019 年遇到了很广泛的争议,在不久的将来,生态系统可能会寻找替代方案。

Webpack 是 JavaScript 生态系统中使用最广泛的打包器和代码优化器。

Babel 提供了 JavaScript 转换器(transpiler),允许开发人员在开发的过程中使用更新的特性,但是在生产环境可以使用更陈旧的变种形式。Babel 最近添加了 TypeScript 转换功能,不过它还没有提供类型检查,因此用处有限。

Lighthouse 是由 Google 创建的广泛使用的自动化工具,用来提升代码质量和性能。

Web 开发测试和自动化

在 JavaScript 中有许多用于编写和运行测试的可选方案。为了简单起见,在这里我们排除了对 Chai、Sinon、Jasmine、QUnit、Cucumber 和其他类似库的分析,这些库提供了非常有用和流行的测试功能,我们会继续跟踪这些库和许多其他测试解决方案的进展。

InfoQ 2020 年 JavaScript 和 Web 开发趋势报告
2020 Q1 的测试和自动化创新者

Playwright 是新发布的 Puppeteer 替代方案,用于浏览器自动化和测试。但是与 Puppeteer 不同的是,Playwright 面向所有现代浏览器渲染环境。

基于机器学习的测试是自动化测试生成的新兴领域。试图解决该问题的公司并不鲜见,包括 Applitools、SauceLabs、Testim、Sealights、Test.AI、Mabl、ReTest、ReportPortal,等等。该领域目前还没有明确的正确答案,但是我们期待在不久的将来会有所改变。视觉人工智能测试(Visual AI testing)也是代替传统可视化回归测试的新兴方向。

早期采用者

Appium 适用于原生、混合和移动 Web 应用的自动化测试框架,它使用了起源于 Selenium 的 W3C WebDriver 协议。Appium 是一个 OpenJS 基金会的项目。

Intern 是使用 TypeScript 编写的 OpenJS 基金会项目,适用于单元测试、功能测试(通过 WebDriver 或其他像 Puppeteer、Playright 这样的环境来实现)、集成测试、性能测试和其他类型的测试。

Ava 是一个适用于 Node.js 应用的流行测试运行器。

WebdriverIO 是 OpenJS 基金会项目,它基于 WebDriver 协议提供了功能性和集成测试环境。

早期大众

Cypress 是运行在基于 Chromium 的浏览器的端到端测试运行器,发布后迅速得到了广泛欢迎,它最近添加了对 Firefox 和 Edge 的支持。

Storybook 是个测试框架,也是设计系统,还用来创建、测试和共享 UI 组件的开发环境。

晚期大众

Jest 是由 React 生态系统推广的测试框架,可能是如今使用最广泛的测试断言库。

Mocha 是 OpenJS 基金会项目,提供了简单易用的单元测试库。

对于 Angular 应用的测试来讲,Karma 和 Protractor 依然是最流行的方式。

WebDriver 是起源于 Selenium 项目的协议,它依然是实现完整测试自动化的最常见方式。

Puppeteer 是一个只支持 Chromium 浏览器的自动化方案,在很多方面它都比 Selenium 更易用,但是它的功能和支持的浏览器都比较受限。

移动 / 桌面环境和框架

利用 Web 技术来构建移动和桌面应用在流行程度和可选方案方面都在不断增长。

InfoQ 2020 年 JavaScript 和 Web 开发趋势报告

…..

全文较长,更多请点击下方链接查看原文。

原文出处:微信公众号【Dylan Schiemann 前端之巅】

原文链接:https://mp.weixin.qq.com/s/ktxx4TM_oj8Z-FU_2Okgpw

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论