2019年前端大事件回顾：流年笑掷，未来可期

前言

回顾 2019
年前端和 Web 开发的主要事件，新闻和趋势。
在过去的一年中，前端开发的世界再次迅速发展，本文总结了2019·年以来的所有重要事件，新闻和趋势。

原文： A Recap of Frontend Development in 2019
^[1]

• 译者：前端劝退师

原先没有打算翻译这篇，但发现该篇需要科学上网和会员，于是就加上自己的理解，意译了，非重要内容我直接一键翻译了，嘿嘿。

原文内容不足的，我都加了点补充。

1. 热门前端框架和库的 NPM 下载量对比

• React
  在国际上仍是 No.1
  库，并且还在增长
• jQuery
  作为老牌库仍占据第二的位置
• 紧随其后的是 Angular
  和 Vue
• 去年， Svelte
  受到了很多关注，但它仍在努力争取被采用。
• 

2. WebAssembly
成为连接 Web
的第四种语言

WebAssembly
成为连接 HTML，CSS
和 JavaScript
的 Web
第四种语言。经过一年的平静之后， WebAssembly
在 12 月初被 W3C
联盟正式收编，并推荐的 Web
语言。

自 2017
年发布 WebAssembly
以来，它已经引起了广泛关注和迅速采用。在过去的几年中，我们看到 了1.0
规范的创建和在所有主要浏览器中的集成。

与 WebAssembly
相关的另一条新闻是：字节码联盟的成立

感兴趣的可以查看：https://bytecodealliance.org/articles/announcing-the-bytecode-alliance

3. TypeScript
使用量激增

2019
年是 TypeScript
的一年。 TypeScript
不仅成为在 JS
代码中添加数据类型的最佳选择，而且许多开发人员会选择在个人项目和工作中使用它。

在年初发布的 StackOverflow
调查中， TypeScript
与 Python
并列第二，成为最受欢迎的语言，仅次于 Rust
。可以预见，在 2020
年，它的地位将进一步攀升。

• TypeScript v3.0
  于 2018
  年末发布
• 而到 2019
  年，它发布的版本激增到 v3.7
  ，其中包括更新的 ECMAScript
  功能，例如可选的链接和无效运算符以及对类型检查功能的改进。

TypeScript
和 React
受欢迎程度

4. ” React Hooks
“成为首选方式，并使 React
继续领先

Vue
和 Angular
拥有热情的支持者， Vue
在 GitHub
上甚至超过了 React
。但在个人和专业项目中被采用时， React
继续保持领先地位。

• 在 2018 年末， React
  团队引入了钩子 hooks
• 在 2019 年， hooks
  吞噬了 React
  世界，绝大多数开发人员将其作为管理状态和组件生命周期的首选方式。
• 在这一年，有无数有关 React hooks
  的文章，模式开始固化。
• React
  中最重要的工具包都发布了 hooks
  化的版本。

React hooks
提供了一种使用简洁的语法，用以管理功能组件中 组件状态和生命周期。

另外，React提供了构建自定义钩子的功能，这使我们能够创建可重用的代码和共享逻辑，而无需创建高阶组件或使用渲染道具。

5. React
团队工作重点转移到工具上

React
团队在 v16.8
中大量增加了钩子 hooks
之后，此后版本变动都相对较小（除了并发模式），同时在年底发布了版本 16.14。
团队随后将重点转移到通过提供更多工具来改善用户的开发体验上。

ReactConf
的发言人和团队经理 Tom Occhino
表示，将会从以下三个目标进行改善：

准入门槛低，生产率高，和扩展能力强。

让我们看一下 React
团队计划（或已）发布的功能内容：

• 全新版本的 React DevTools
• 全新的 React
  性能分析器工具
• Create React App v3
  版本
• 测试实用程序更新
• Suspense
• 并发模式（即将推出）
• Facebook
  使用的 CSS-in-JS
  （即将发布）
• 渐进/选择性页面混合（ hydration
  ）（进行中）
• React 核心的可访问性改进（即将发布）

补充：渐进/选择性页面混合（ hydration
）：

用户在加载网站时已经看到了完整呈现的页面（而不是空白页面），然后该页面变为交互式页面。网站也将受益于重大的性能改进，因为浏览器不需要进行任何重新绘制（使用 React
重新呈现您的页面）

感兴趣的可以看这篇： The case of partial hydration (with Next and Preact)
^[2]

6. Vue
为 v3
版本发行做准备，使用量继续增长

Vue
可能在国际上尚未获得最多的采用率，但很难不说它拥有最热情的用户。

Vue
引入了 React
和 Angular
的最佳部分，同时也变得更加简单。

另一个巨大的卖点是它更开放，不受 React（Facebook）
或 Angular（Google）
等大公司的控制。

Vue
的最大新闻是即将发布的 3.0
版本， alpha
有望在第四季度末发布。

在 2019 年， Vue 2.x
在今年年初仅有少许更新，因为大多数努力都投入到了 v3
版本中。

Vue 3.x
重大变化：

• Composition API
• 全局安装/配置 API 更改
• 支持 Fragments
  和跨组件渲染
• Time Slicing
• 重写虚拟 DOM
  ( Virtual DOM Rewrite
  )
• 静态树提升( static tree hoisting
  )、静态属性提升( static props hoisting
  )
• hooks API
• slot
  插槽生成优化（父子组件的单独渲染）
• 更好的 TypeScript
  支持

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

7. Angular 发行 v8(v9?)版本，以及新的 Ivy 编译/渲染管道

在 2019
年， Angular
发布了 v8
版本，并且还发布了一个新的渲染器/编译管道，称为 Ivy
。

Ivy
最大好处是较小的捆绑包尺寸，但是它提供了许多巨大的附加改进。当前， Ivy
是 Angular 9
之前的可选功能。本文详细介绍了版本 8 中发布的功能，但值得注意的更新是：

• 现代 JavaScript
  的差异加载
• 选择加入 Ivy
  功能
• 路由器向后兼容性
• 改进的 Web Worker
  捆绑
• 选择加入使用情况分享
• 依赖关系更新

在 2019 年 12 月， Angular
团队准备了 v9
版本的发布，该版本将于 2019
年底或 2020
年初正式发布。

Angular 9
的最大变化是 Ivy
成为标准渲染器。

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

自 2015 年开始， JavaScript
和网络快速发展之后，模式和框架终于得到巩固。
这使开发人员可以将更多的精力放在应用本地化并让其更易于访问的工具上，从而使每个人的网络体验变得更好。

我们应该为所取得的进展感到自豪，但是还有很长的路要走。

原文中对可访问性的介绍不全，以下粘贴自鱼头的

Web 开发中最该知道却从不重视的 —— Accessibility
^[3]

Accessibility
，通常缩写为 A11Y
，这缩写取的是首字母 + 中间字母长度 + 结尾字母，译为 “可访问性”。这是一种让尽可能多的人访问我们所开发的网站的技术概念，通过这个概念，让互联网访问公平变得可能。

A11Y
是一件非常正确的事，在某些国家与地区，甚至提供无障碍站点已经成为了法律的一部分。在 MDN 上有这么一句话： “Web 根本的目的是为了服务于所有人，而不是受限于软硬件，语言，文化，位置以及身心状态。”
（原文： The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.） Web Accessibility
，译为 “网页亲和力（又称网络无障碍、网络可达性、网络可用性、网页可访问性）” 。
无论是一般人或者是身心障碍的朋友，都需要有规范的网站方可便捷地获取信息，无障碍网页则是拓展对网页的规范，以更严谨的态度及条件来设计网页，使网页内容落实“无障碍”让不同程度或需求的用户，可以顺畅的获取网站上的信息。

9. ES2019
功能

ECMAScript
继续其年度更新周期，为 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
• 无效的合并运算符— item ?? 'use this only if item is null/undefined'
• BigInts

10. Flutter
爆炸发展元年，挑战 React Native
跨平台框架王者地位

Flutter
在 React Native
发行 2 年后发布，目前 Star
数已 81.1k
, 超过 React Native
的 83.2k
指日可待。

但其的 issue
数，已稳定保持了多年的 5000+
。

Flutter
没有像 React Native
那样与 React Web开
发人员一样拥有开发人员社区来实现共同进步，所以这个受欢迎程度是实打实的：
Flutter
正在使自己成为最佳的跨平台框架。

11. JS
基金会和 Node.js
基金会合并成 OpenJS
基金会, Node v12
成为 LTS
版本

为了支持 JavaScript
生态系统并加速语言的发展， Node.js Foundation
和 JS Foundation
合并成立了 OpenJS Foundation
。

基金会传达的信息是在一个中立的实体下的协作和发展，该实体现在托管 31 个开源项目，包括 Node，jQuery
和 Webpack
。

这一举动对整个 JS 社区都是积极的，并得到了 Google，IBM
和 Microsoft
等大型科技公司的支持。

Node
今年发布了 v12
版本，该版本具有长期支持（ LTS
），直到 2023 年 4 月。

Node12
提供了许多新功能，安全更新和性能改进。一些值得注意的更新包括:

1. 对 import/ export
   语句的本机支持
2. 私有类字段
3. 与 V8 Enginev 7.4
   版本的兼容性
4. 对 TLS 1.3
   的支持以及其他诊断工具

12. Svelte
发布 v3
版本，但采用率欠佳

写
在 2020 年，观察 Svelte
的成长和发展将是一件很有趣的事情，希望我们能从中得到一些最佳实践，以了解它如何与 React，Vue
和 Angular
等对手竞争。

13. 静态站点继续被广泛应用，开发人员爱用 JAMStack
模式

随着诸如 Gatsby
之类的框架利用率的提高， Netlify
等静态网站主机的快速增长以及无数 headless CMS
公司的出现，静态网站证明了它们将成为 Web
不可或缺的一部分。

• 我们能够使用像 React
  等库来构建我们的站点，然后在构建时将它们编译成静态 HTML。
• 由于所有页面现在都是预先构建的，因此不需要服务器时间就可以根据请求将它们与数据混合在一起
• 这些页面可以立即提供服务，并可以利用在 CDN
  缓存的优势，使内容更快应答

静态站点使用的一种流行编程模式是 JAMStack（JavaScript，API，Markup）

这是一种 静态/ SPA
混合方法，其中页面是静态服务的，但是一旦在客户端上，它就被作为 SPA
使用。

14. 前端工具变得更好

几年来， JavaScript
疲劳一直是前端开发们吐槽的核心，但是随着开源项目维护人员的不懈努力，我们逐渐看到它可以缓解这种疲劳。

以前，如果我们想构建 SPA
，则必须使用 Bower
或 NPM
引入依赖关系，弄清楚如何使用 Browserify
或 Webpack
对其进行编译，从头开始编写 Express
服务器，以及在遇到问题时维护应用更新

我们经历了数年的痛苦，但现在我们已经迭代到最活跃，最发达的软件包生态系统之一。

• 有一些工具可以帮助我们抽象化构建应用的痛苦部分- Creat React App，Vue CLI，Angular CLI
• 用于静态站点的 Gatsby
  ，用于 React Native
  移动应用程序的 Expo
  ，用于 SSR
  应用程序的 Next / Nuxt
  。
• 即时 GraphQL
  引擎: Hasura
  ，可以自动生成 TypeScript
  类型。
• Webpack
  不断得到简化，很多优化插件已内置。

15. GraphQL
继续受到开发人员的喜爱，并在科技公司中得到进一步的采用

GraphQL
有望解决基于 REST
的传统应用暴露出的许多问题。开发人员很快就爱上了 GraphQL
。 GitHub
几年前用 GraphQL
编写了它的最新 API
，许多其他组织也在进行更改。

GraphQL
应用是数据驱动的，而不是端点驱动的。

从而允许客户端声明所需的确切数据，并从服务器接收相应的 JSON
响应。

GraphQL API
提供了一个架构，用于记录所有数据及其类型，从而使开发人员可以全面了解 API
。由于 GraphQL API
提供了完全类型化的架构，因此它也可以与 TypeScript应用
很好地集成。

在过去的一年中， GraphQL
的下载量增长了一倍以上：

16. CSS-in-JS
势头强劲

如前所述， Facebook
甚至可能将 CSS-in-JS
视为前端的未来，并将发布自己的库。
在传统应用中，我们添加样式需要这么做：

// Component JS file

const MyComp = ({ isActive }) => {

  const className = isActive ? 'active' : 'inactive';

  return 
HI

}

// CSS file

.active { color: green; }

.inactive { color: red; }

使用 CSS-in-JS
，你将不再管理 CSS
类，只需传递 props
给样式化的组件，它便使用声明性语法处理动态样式。代码更加简洁。

现在，所有内容都像正常的 React
代码一样读取：

const Header = styled.div`

  color：$ {（{isActive}）=> isActive吗？'green'：'red'};

`;

const MyComp =（{isActive}} =>（

  
 HI 

）

CSS-in-JS
两个主要的库是： styled-components
和 emotion

17. VS Code
主导了编辑器的市场

各语言开发人员对自己的 IDE /文本编辑器充满热情，并且不怕争论为什么他们的选择是最好的。

但是，前端开发人员几乎一致选择 VS Code
作为其编辑器 。VS Code
是一个开源编辑器，它提供丰富的插件来提供令人难以置信的开发体验。

这是根据 2018
年调查状况（2019 年调查将更新）的文本编辑器使用分布：

18. Webpack 5
迭代到测试版并即将发布

Webpack
已成为几乎所有现代 JavaScript
工具链的核心组件，并且是最常用的构建工具。

Webpack
一直在提高其性能和可用性，使其对开发人员更好。 Webpack 5
着重于以下几点：

• 通过持久缓存提高构建性能。
• 使用更好的算法和默认值来改善长期缓存。
• 清理内部模式而不会造成任何重大更改。

19. Jest
从 Flow
迁移到 TypeScript

Facebook
维护着流行的测试库 Jest
和 Flow
，后者是 TypeScript
的竞争对手。

他们在 2019
年初发表了声明，选择将 Jest
从 Flow
迁移到 TypeScript
。

Flow
现在是“姥姥不疼，舅舅不爱”的处境了。。。

20. Chrome
在今年发布 72–78
稳定版本

Chrome
继续快速迭代，迅速向网络和开发人员工具中添加了新功能。

在 2019 年，我们看到发布了 7 个稳定版本，其中还有 Beta v79
， dev v80
和 canary v81

查看下面的 Wiki，了解过去一年中 Chrome
的重要新增功能。 《Chrome 新功能一览》
^[4]

21. Microsoft Edge
浏览器内核移至 Chromium

Internet Explorer
及其更新的版本 Edge
对 Web
开发者来说是一个玩笑，更糟的是，兼容它们时都会痛苦不堪。

微软顺应市场的选择，使用了开源 Chromium

22. Facebook
发布了 Hermes
，这是安卓的 JavaScript
引擎，用于改进 React Native

Facebook
认为 Android JavaScript
引擎的速度不够快，因此他们建立了自己的引擎。

感兴趣的可以看这篇： Meet Hermes, a new JavaScript Engine optimized for React Native
^[5]

2020
年的趋势预测

• 随着代码拆分和 PWA
  的进一步利用，性能仍然是 Web
  上最重要的一部分。
• WebAssembly
  变得越来越普遍，得到了实际采用，并被用于产品中。
• GraphQL
  在新的创业公司和新项目上超过了 REST
  ，而老牌公司则向其迁移。
• TypeScript
  成为创业公司和新项目的默认选择。
• CSS-in-JS
  可能会成为默认的样式设置方法，而不是普通的 CSS
  。
• “无代码”应用变得越来越流行。随着 AI 的改进和应用程序抽象层的增加，构建应用变得越来越容意
• Flutter
  可能会取代 React Native
  成为构建跨平台移动应用的最佳方式。
• Svelte
  将会有更多实际项目使用。
• Deno
  （由 Node
  创建者构建的 TypeScript
  项目）可以实际使用。
• AR / VR
  使用诸如 A-Frame，React VR
  和 Google VR
  等库以及对浏览器中本机 AR / VR
  工具的改进，而取得了长足的进步。
• 容器化（例如 Docker，Kubernetes
  ）的影响在前端中变得越来越普遍。

:heart: 看完三件事

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1. 点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
2. 关注公众号「前端劝退师」，不定期分享原创知识。
3. 也看看其它文章

劝退师个人微信： huab119

也可以来我的 GitHub
博客里拿所有文章的源文件：

前端劝退指南：https://github.com/roger-hiro/BlogFN
一起玩耍呀。~

参考资料