倏忽一年：回顾点评前端 2019 重大事件、趋势

本文回顾和点评 2019 年前端领域发生的所有重大事件、新闻和趋势，并展望 2020。

2019 年流行前端框架和库的 NPM 下载趋势

React 又一次成为年度最受欢迎的库，并且仍处于增长状态；而 jQuery 拿到了令人意想不到的第二名；紧随其后的是 Angular 和 Vue，它们都拥有热情的开发人员组成的庞大用户群。

这一年来 Svelte 虽然吸引了很多关注，但它离广泛普及还有很长的路要走。

WebAssembly 成为继 HTML、CSS 和 JavaScript 之后的第四大 Web 语言

经历了相对平静的一年后，WebAssembly 在 12 月初迎来重大新闻——W3C 联盟正式将其推荐为一种 Web 语言。

https://www.w3.org/2019/12/pressrelease-wasm-rec.html.en

自 2017 年 WebAssembly 发布以来，它已经收获了广泛的关注并得到快速推广。在过去几年中，我们看到它推出了 1.0 版本规范，而且几乎所有主流浏览器都开始支持 WebAssembly。

WebAssembly 在 2019 年的另一件大事是字节码联盟的成立，其宗旨是“通过合作实施标准和提议新标准，为 WebAssembly 在浏览器之外的世界开拓一片新天地”。

https://bytecodealliance.org/articles/announcing-the-bytecode-alliance

我们仍在等待 WebAssembly 真正站稳脚跟并全面普及！而随着 WebAssembly 一次又一次的更新，应该说我们现在愈加接近这个目标了。毫无疑问，W3C 声明是使 WebAssembly 获得企业认可的关键一步，并且我们需要继续降低 WebAssembly 的门槛，使其更易于构建产品。

TypeScript 使用率激增

2019 年是 TypeScript 之年。TypeScript 不仅成为了在 JS 代码中添加数据类型的事实选择，而且许多开发人员会经常在个人项目和工作中，用它来代替普通的 JavaScript。

在 2019 年初发布的 StackOverflow 调查中，TypeScript 与 Python 并列最受欢迎语言次席，仅次于 Rust。在 2020 年初将发布的新调查中，如果我们看到 TypeScript 的排名再进一步，应该也不会有什么奇怪。

https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-wanted

TypeScript 已经席卷了整个 Web 开发世界——前端和后端皆是如此。一些开发人员认为 TS 只是跟风炒作的产物，觉得它会步 CoffeeScript 后尘；但 TypeScript 已被证明可以解决 JS 开发人员面临的一大核心问题，而且它的使用率看来只增不减。

TypeScript 与所有主流文本编辑器的集成，为 Web 开发人员提供了更好的开发体验。JavaScript 开发人员将 TypeScript 视为一种工具，它可以减少错误，还可以通过（提供自带描述的）类型和对象接口更轻松地读取代码。

值得注意的是，TypeScript 在 2019 年的 NPM 下载量超越了 React，其流行程度可见一斑。此外，它的下载量也比 Flow 和 Reason 等竞争对手高得多。

TypeScript 和 React 解决的是完全不同的问题，因此这并不是一场较量，只是为了告诉大家 TypeScript 有多么受欢迎。

TypeScript v3.0 于 2018 年末发布，而在 2019 年它已发布到了3.7版，其中包括更新的 ECMAScript 功能，例如可选链和 nullish 运算符，以及类型检查功能的相关改进等。

React 继续保持领先地位，开发人员已经离不开 hooks 了

Vue 和 Angular 拥有热情的用户群体，Vue 在 GitHub 上拿到的星星甚至比 React 还多，但考虑个人和专业项目中的使用率时，React 仍继续保持着领先地位。

在 2018 年末，React 团队引入了 hooks。2019 年，hooks 席卷了 React 世界，绝大多数开发人员都将其作为管理状态和组件生命周期的首选方式。这一年下来，有关 hooks 的文章数不胜数，使用模式也稳定了下来，而最具分量的 React 包也构建了自定义 hooks 来公开它们的库功能。

Hooks 提供了一种方法，可以使用简单简洁的语法来管理函数式组件中的组件状态和生命周期。另外，React 提供了构建自定义 hooks 的能力，这使我们能够创建可复用的代码和共享逻辑，而无需创建高阶组件或使用渲染 props。

React 核心团队开始专注改进开发体验和工具

在 React v16.8 中加入 hooks 这一重大改进之后，React 之后版本的多数更改都相对较小。到了 2019 年末，版本更新到了 16.14。

hooks 的重大改进发布之后，React 团队开始转移重心，希望提供更多工具来改善开发体验。实际上，开发体验正是 React Conf 2019 的主题。ReactConf 的主讲人，React 团队经理 Tom Occhino 表示，开发体验植根于以下三件事：准入门槛低、生产率高和扩展能力强。我们来看看 React 团队为此发布了哪些内容或有哪些计划：

• 全新版本的 React DevTools

• 全新的 React 性能分析工具

• 创建 React App v3

• 测试实用程序更新

• Suspense

• 并发模式（即将推出）

• Facebook 使用的 CSS-in-JS（即将发布）

• 渐进/选择性页面 hydration（即将发布）

• React 核心的可访问性 a11y 改进（即将发布）

人们相信，良好的开发体验也将带来良好的用户体验。下面是 React Conf 2019 大会上 Yuzhi Zheng 的演讲，谈到了即将发布的 React 功能。

https://youtu.be/uXEEL9mrkAQ

Vue 准备发布 3.0 版，采用率持续增长

Vue 可能还没迎来自己采用率的巅峰，但不得不承认它拥有最热情的用户群。人们说 Vue 汲取了 React 和 Angular 的长处，同时更加简单易用。它的另一大卖点是更加开放，不像 React（Facebook）或 Angular（谷歌）那样受到大公司的控制。

Vue 的最大新闻是即将发布的 3.0 版本，alpha 版本有望在第四季度末发布。在 2019 年，Vue 2.x 仅在年初获得了少量更新，因为主要工作都放在了 v3 版本的开发上。

虽说 Vue 在今年发布的版本不多，但发生的事情却不算少。当 Evan You 发布 v3 的 RFC 时，新版的更改在社区中引发激烈争论。

激怒 Vue 开发人员的关键问题是对框架 API 的全面修订。但在反对声浪之后，据称 API 更改将完全是附加的，并且对 Vue 2 向后兼容。许多开发人员声称，如果新版的这些更改无法令人满意的话，他们可能会考虑转向 Svelte，因为他们担心 Vue 会越来越像 React 了。不过尽管社区中仍有许多人对此表示关注，但现在大家还是在静待新版的正式发布。

除了上述争议之外，Vue 3还将带来许多重大改进：

• Composition API
  

• 全局挂载/配置 API 更改

• Fragments

• 时间切片支持（实验性）

• 多个 v-models

• Portals

• 新的自定义指令 API

• 改进响应性

• 虚拟 DOM 重写

• 静态 props hoising

• 一个 hooks API（实验性）

• 插槽生成优化（父子组件的单独渲染）

• 更好的 TypeScript 支持

今年另一个值得关注的 Vue 更新是 CLI 的第 4 版，其更新主要集中在基础工具上。

https://youtu.be/ANtSWq-zI0s

Angular 发布第 8、第 9 版，以及新的 Ivy 编译/渲染管道

Angular 的固执（opinionated）理念帮助它赢得了庞大用户群。由于 Angular 是一个强固执框架，因此它要求开发人员以 Angular 的方式行事，并且为开发人员提供了所有必要的工具。

这种理念消除了许多争议，人们不用再操心该将哪些库和依赖项带入项目，相反构建 React 应用的团队就可能会出现这类问题。Angular 还要求开发人员使用 TypeScript 编写应用程序。由于大多数选择已经确定好了，因此很多公司将其视为一个不错的选择，因为它使开发人员可以专注构建产品，而不必花费时间考虑该用哪个包。

在 2019 年，Angular 发布了第 8 版，并且还发布了一个新的渲染器/编译管道，称为 Ivy。Ivy 的最大好处是较小的打包尺寸，除此之外还提供了许多很棒的改进。目前，Ivy 是 Angular 9 之前的可选功能。这篇文章详细介绍了第 8 版中发布的功能，其中值得关注的更新有：

• 现代 JavaScript 的差异加载

• 可选 Ivy 预览

• Angular 路由向后兼容性

• 改进的 Web Worker 打包

• 可选的使用状况分享

• 依赖项更新

在 2019 年 12 月，Angular 团队开始准备发布第 9 版，可能会在 2019 年底或 2020 年初正式发布。Angular 9的最大变化是 Ivy 成为了标准渲染器。观看下面的 YouTube 视频可了解有关 Angular 9 的更多信息。

https://youtu.be/5wmWtgr7LQ0

可访问性（a11y）和国际化（i18n）变得越来越重要

Web 应该对所有人开放，让所有人使用。前端业界一直将这一目标视为头等大事。自 2015 年以来，JavaScript 和 Web 的发展如此之快，相关模式和框架也终于稳定了下来。现在各种事物都更稳定了，开发人员就可以将更多的精力放在那些帮助应用本地化、改善应用可访问性的工具上面了，从而让所有人都能体验到更加美好的 Web 世界。我们应该为我们所取得的进展感到自豪，但是前面还有很长的路要走。

可访问性：“让尽可能多的人使用你的网站——我们传统上认为这是关于残疾人的特性，但实际上它也涵盖了其他群体，比如使用移动设备的人群和那些网络连接较缓慢的人群。”——MDN

国际化：“在设计/开发你的内容、应用程序和规范等事物时，确保其适合，或者可以轻松适应来自任何文化、地区或使用任何语言的用户”——W3C

ES2019 新特性

ECMAScript（JavaScript 所基于的规范）的年度更新周期还在继续，ES2019 版本添加了许多新特性：

• Object.fromEntries()

• String.trimStart()和 String.trimEnd()

• 更好地处理 JSON.stringify 中的 unicode

• Array.flat()

• Array.flatMap()

• try/catch 绑定

• Symbol.description

虽然 ES2019 带来了一些重大更新，但即将面世的ES2020看来会有一些自 ES6/ES2015 以来最受期待的特性：

• 私有类字段

• 可选链——obj.field?.maybe?.exists

• nullish 合并——item ?? ‘use this only if item is null/undefined’

• BigInts

Flutter 爆发式增长，开始挑战 React Native 地位

Flutter 的发布比 React Native 晚了两年，但前者很快就站稳了脚跟。Flutter 在 GitHub 中拿到的星几乎快赶上 React Native 了，目前是 80.5k 对 83k；按这个趋势，超过 RN 指日可待。

考虑到 Flutter 并没有像 React Native 那样，拥有 React Web 开发人员那样庞大的开发社区来帮助自身成长，这样的成绩就更令人惊讶。Flutter 正在成为最佳的跨平台移动框架。

OpenJS Foundation 成立，Node 12 发布

为了支持 JavaScript 生态系统并加速发展这种语言，Node.js 基金会和 JS 基金会合并成立了 OpenJS 基金会。新的基金会希望社区在一个中立的实体支持下协作和发展，这个实体现在托管 31 个开源项目，包括 Node、jQuery 和 Webpack。这一行动被认为对整个 JS 社区都有正面影响，并得到了谷歌、IBM 和微软等大型科技公司的支持。

Node 今年发布了第12版，也是一个长期支持版本（LTS），支持周期截至 2023 年 4 月。Node12 提供了许多新特性、安全更新和性能改进。一些值得关注的更新包括对 import/export 语句的原生支持、私有类字段、与 V8 Engine 7.4 版的兼容性、对 TLS 1.3 的支持以及新增的诊断工具等。

Svelte 发布第 3 版，吸引更多关注

Svelte 设法在拥挤不堪的前端框架世界中找到自己的位置。但正如我们在本文开头所看到的那样，它的努力还没能转化为大规模的现实使用率。对 Svelte 来说，最好的总结就是“简单而强大”。Svelte 网站上指出了三点优势：

• 写的代码更少

• 没有虚拟 DOM

• 真正的响应性

Svelte试图将其大部分工作转移到编译步骤，而不是放到浏览器中的运行时上。Svelte 具有基于组件的架构，可编译为纯 HTML 和标准 JavaScript，同时还承诺减少样板代码。它使用响应式编程来直接更新 DOM，而不是使用虚拟 DOM。

Svelte 通过做减法的方式，为前端领域提供了一些新颖而令人兴奋的东西。在 2020 年，观察 Svelte 的成长和发展将是一件很有趣的事情，希望我们能看到一些大规模应用的案例，看看它是如何与 React、Vue 和 Angular 等大块头对手竞争的。

https://youtu.be/AdNJ3fydeao

静态站点活力依旧，开发人员开始使用 JAMStack

随着诸如 Gatsby 之类的框架愈加流行，诸如 Netlify 之类的静态网站托管快速增长，以及无数无头 CMS 公司的涌现，静态网站证明了它们将成为 Web 不可或缺的一部分。

静态站点将旧式 Web 与新的工具、库和更新结合在一起，提供了无与伦比的体验。我们能使用像 React 这样的现代库来构建我们的站点，然后在构建时将它们编译成静态 HTML 页面。由于所有页面现在都是预先构建的，因此无需服务器时间就可以根据请求将它们与数据混合在一起——这些页面可以立即提供服务，并可以利用在全球 CDN 中缓存的优势，使内容尽可能接近你的用户。

静态站点使用的一种流行编程模式是JAMStack（JavaScript、API 和 Markup）。这是一种静态/SPA 混合方法，其中页面是静态提供的，但在客户端上更像是 SPA，使用 API​​和用户交互来发展 UI 状态。

PWA 迎来更快的增长和更多的使用率

静态网站是获得高速产品的一种方法，但是它们并不适合所有应用——另一个上佳选择是 PWA（渐进式 Web 应用）。PWA允许你在浏览器中缓存资源，以使页面立即响应并提供脱机支持。另外，它们允许后台 workers 提供原生功能，例如通知推送。

甚至有人声称 PWA 可以取代原生移动应用。无论结果如何，可以肯定的是 PWA 将在很长一段时间里成为企业构建产品的重要途径。

前端工具链变得非常好用了

多年来，前端开发人员一直在抱怨对 JavaScript 的审美疲劳，但我们已经逐渐看到，开源项目维护人员的不懈努力正在减轻这种审美疲劳。

以前，如果我们要构建一个 SPA，则必须使用 Bower 或 NPM 引入我们自己的依赖项，学会如何使用 Browserify 或 Webpack 来编译它，从头开始编写 Express 服务器，并通过繁琐的库更新维护我们的应用。

这种痛苦我们已经承受了很多年，但现在我们已经发展出了最活跃、最发达的软件包生态系统。有一些工具可以帮助我们抽象出构建应用程序时令人痛苦的部分——Create React App、Vue CLI、Angular CLI、用于静态站点的 Gatsby，用于 React Native 移动应用的 Expo、用于 SSR 应用程序的 Next/Nuxt，用于创建我们服务器的生成器、无需为 GraphQL 编写服务器的 Hasura，自动生成 TypeScript 类型的 GraphQL Code Generator，越来越简化的 Webpack——不管我们有怎样的需求，都有对应的工具可以帮助我们从繁重的劳动中解放出来。

也许现在我们有了工具链审美疲劳？

GraphQL 继续受到开发人员喜爱

GraphQL 有望解决传统的基于 REST 的应用程序面临的许多问题。开发人员很快就爱上了 GraphQL，技术公司也终于开始使用它了。GitHub 几年前用 GraphQL 编写了它的最新 API，还有许多组织也在跟上步伐。

GraphQL 应用是数据驱动的，而不是端点驱动的，从而允许客户端声明所需的确切数据，并从服务器接收相应的 JSON 响应。GraphQL API 提供了一个架构，用于记录所有数据及其类型，从而使开发人员可以全面了解 API。

由于 GraphQL API 提供了完全类型化的 schema，因此它也可以与使用 TypeScript 的应用程序很好地集成在一起。使用诸如 GraphQL Code Generator 之类的工具时，它可以读取我们客户端代码中的查询，并将其与 schema 匹配，以提供会在整个应用程序中流动的 TypeScript 类型。

在过去的一年中，GraphQL 的下载量增长了一倍以上，而 Apollo 则开始成为使用最广泛的框架。

CSS-in-JS 势头强劲

Web 开发的前进方向似乎是要在 JavaScript 下统一一切，而 CSS-in-JS 的推广就体现了这种趋势；它是用 JavaScript 字符串创建样式的方法。

这使我们可以通过 import/export 来使用常规 JavaScript 语法共享样式和依赖项。由于 CSS-in-JS 组件可以将 props 插入其样式字符串中，因此它还简化了动态样式。如前所述，Facebook 甚至可能将 CSS-in-JS 视为前端的未来，并将发布他们自己的库。

以下是经典 CSS 与 CSS-in-JS 的对比示例。要使用常规 CSS 处理动态样式，你必须管理组件中的类名称并根据 state/props 来更新它。对于每个变体，你还需要一个 CSS 类：

// Component JS fileconst MyComp = ({ isActive }) => {  const className = isActive ? 'active' : 'inactive';  return <div className={className}>HI</div>}// CSS file.active { color: green; }.inactive { color: red; }

使用 CSS-in-JS，你不用再管理 CSS 类。你只需将 props 传递给样式化的组件，它会使用声明性语法处理动态样式。代码更加简洁了，而且允许 CSS 管理基于 props 的动态样式后，我们对样式和 React 的关注点分离也更为清晰了。现在，所有内容看起来都像是常规的 React 和 JavaScript 代码：

const Header = styled.div`  color: ${({ isActive }) => isActive ? 'green' : 'red'};`;const MyComp = ({ isActive }} => (  <Header isActive={isActive}>HI</Header>)

CSS-in-JS 的两大库分别是 styled-components 和 emotion，后者在 2019 年的下载量超越了前者。这两个库遥遥领先于其他 CSS-in-JS 选项，看起来它们将继续快速增长。

VS Code 主导文本编辑器市场

开发人员对自己的 IDE/文本编辑器充满热情，并且经常会争论谁的选择是最好的。但在前端领域，开发人员几乎一致选择 VS Code 作为他们的编辑器。VS Code 是一个开源编辑器，它提供许多插件来创造极为出色的开发体验。

下面是 2019 年 JS 现状调查统计的文本编辑器使用率：

Webpack 5 进入测试阶段，并即将发布

Webpack 已成为几乎所有现代 JavaScript 工具链的核心组件，并且是最常用的构建工具。Webpack 一直在提升其性能和可用性，从而改善开发体验。在第 5 版中，Webpack 着重于以下几点：

• 通过持久缓存提升构建性能

• 使用更好的算法和默认值来改进长期缓存

• 清理内部模式，但不会造成重大更改

Jest 从 Flow 转向 TypeScript

Facebook 维护着流行的测试库 Jest 和 Flow，后者是 TypeScript 的竞争对手。他们在 2019 年初发表了大胆声明，选择将 Jest 从 Flow 迁移到 TypeScript。这进一步表明 TypeScript 已成为类型化 JavaScript 的标准选择，并且在 2020 年及以后的使用率会不断增长。

Chrome 在 2019 年发布 72–78 稳定版

Chrome 继续快速迭代，迅速向 Web 和开发工具中添加新功能。在 2019 年，我们看到 Chrome 发布了 7 个稳定版本，还有 79 Beta 版，80 dev 版和 81 canary 版。查看下面的 Wiki 可以了解过去一年中 Chrome 的重要新增功能。

https://en.wikipedia.org/wiki/Google_Chrome_version_history?source=post_page1e7d07966d6c

Microsoft Edge 浏览器迁移至 Chromium 上，换上新 Logo

Internet Explorer 及其后继者 Edge 对 Web 开发人员来说就是个笑话，更糟的是使用它们的体验令人痛苦不堪。微软的浏览器在 Web 特性实现方面一直落后于人，并且很难为其编写跨浏览器兼容的代码。作为开发人员的重大胜利，微软已经选择转向谷歌的开源 Chromium 引擎。到了 2019 年中，此更改已进入 beta 阶段。

Facebook 发布 Hermes，用于改进 React Native

Facebook 认为 Android JavaScript 引擎的速度不够快，因此他们打造了自己的引擎。Facebook 正在全力支持 React Native，此举表明他们愿意做出必要的调整，以使其在所有平台上都能发挥最大效能。

对 2020 年的预测

• 随着代码拆分和 PWA 的进一步普及，性能仍然会是 Web 上最重要的指标。

• WebAssembly 愈加流行，开始实际应用，并被用在现实产品中。

• GraphQL 在新的创业公司和新项目的使用率上超过 REST，也会有越来越多的成熟公司向它迁移。

• TypeScript 成为新的创业公司和项目的默认选择。

• 我们有望看到无需服务器，且在区块链上构建的现实应用，使 Web 更加开放。

• CSS-in-JS 可能会成为默认的样式方法，取代普通的 CSS。

• “无代码”应用变得愈加流行。随着 AI 的改进和应用抽象层的增加，构建应用程序变得越来越容易。在 2020 年，我们可能会看到一场重大转型，未来创建应用时可能不用再编写代码了。

• Flutter 可能会取代 React Native 成为构建跨平台移动应用的最佳方式。

• 使用 Svelte 构建的实际项目会越来越多。

• Deno（由 Node 创建者构建的 TypeScript 运行时）也会迎来现实应用。

• AR/VR 在诸如 A-Frame、React VR 和 Google VR 之类的库，以及浏览器中原生 AR/VR 工具的改进推动下取得长足进步。

• 容器化（例如 Docker 和 Kubernetes）的影响在前端流程中变得越来越普遍。

原文链接：

https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c