倏忽一年：回顾点评前端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 file
const 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