VS Code 成主宰、Vue备受热捧、Flutter成新贵！2020 前端开发趋势指南

前端在生产里越来越重：PC、手机、桌面、智能手表都离不开它。本文围绕框架、语言、工具、React、Vue，回顾 2019 年 Web 开发大事。译文来源：https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c。

过去一年前端再次加速，下面按热度把框架下载、Wasm、TypeScript、三大框架、Flutter、PWA、GraphQL、VS Code 等收成一份 2020 趋势指南。

一、框架、语言与运行时

1. 2019 年流行框架的 NPM 下载

React 再登榜首且仍在涨；jQuery 意外保住第二。随后是 Angular 和 Vue。Svelte 去年很受关注，采用还在努力。

2. WebAssembly 成为第四种 Web 语言

12 月初 W3C 正式推荐 Wasm 为 Web 语言。2017 年发布以来采用很快，1.0 规范和主流浏览器支持都已就绪。2019 年字节码联盟（Bytecode Alliance）成立，要把 Wasm 做到浏览器之外。入门门槛还要再降，公司才能更放心地用它做产品。

3. TypeScript 使用激增

2019 是 TypeScript 之年：给 JS 加类型的首选，很多人个人项目和工作都更爱它而不是裸 JS。StackOverflow 调查里它与 Python 并列第二受欢迎语言，仅次于 Rust。

它已在吃前端和后端。有人以为会像 CoffeeScript 一样一阵风，事实是它打中了 JS 的核心痛点：少错、类型即文档、和主流编辑器集成。NPM 流行度超过 React，也远超 Flow、Reason。

TypeScript 和 React 解决的问题完全不同，下图只是展示受欢迎程度，不宜直接对比。

TS 3.0 在 2018 末，2019 发到 3.7，带上 Optional Chaining、nullish 以及类型检查增强。

二、React、Vue、Angular

4. React 继续领先，钩子吞掉生态

Vue、Angular 用户热情高，Vue 在 GitHub 星数甚至超过 React，但个人和商业项目里 React 仍领先。2018 末引入 Hooks，2019 年绝大多数人用它管状态和生命周期；重要包也开始用自定义钩子导出能力。不必再靠 HOC 或 render props 共享逻辑。

5. React 团队转向开发者体验

16.8 之后改动相对小，发到 16.14。重点变成工具。Tom Occhino 把 DX 拆成降低门槛、提高生产率、改善扩展。当年落地或规划的包括：新 DevTools、性能分析、CRA v3、测试工具、Suspense、并发模式、Facebook 的 CSS-in-JS、渐进 hydration、核心层无障碍。Yuzhi Zheng 的大会发言：https://youtu.be/uXEEL9mrkAQ。

6. Vue 为 3.0 做准备，用量继续涨

卖点是吸取 React/Angular 再简化，且不被大公司控制。3.0 alpha 有望四季度末。2.x 只在年初有更新。Evan You 征集 v3 建议时，API 大改在 Reddit / HN 引发争论；后来说明与 Vue 2 兼容。有人担心太像 React 而看 Svelte。3.0 还包括：组合 API、全局 mount/配置改动、Fragments、时间切片（实验）、多个 v-model、Portal、新自定义指令、响应式重写、虚拟 DOM 重写、静态 props hoisting、钩子 API（实验）、slot 生成优化、更好的 TypeScript。CLI 第 4 版见 https://youtu.be/ANtSWq-zI0s。

7. Angular 8/9 与 Ivy

Angular 是“霸道”框架：工具齐、强制 TypeScript，少掉选库之争。2019 发了 8，新渲染/编译管线 Ivy：包更小，当时在 9 之前可选。8 的要点：差分加载、Ivy 预览、Router 向后兼容、Web Worker 包、依赖更新。12 月为 9 做准备，Ivy 将成为标准。详见 https://youtu.be/5wmWtgr7LQ0。

三、语言特性、跨端与基金会

8. 可访问性与国际化

模式和框架稳定后，更多精力可以放在本地化和让更多人用得上。A11y 不只是残障，也包括移动设备和慢网络（MDN）。i18n 是让应用和规范更好适应不同文化、地区、语言（W3C）。Accessibility 简称 A11y，因为 A 与 y 之间有 11 个字母。

9. ES2019 与即将到来的 ES2020

ES2019 新增：Object.fromEntries()、String.trimStart/trimEnd、JSON.stringify 的 unicode、Array.flat / flatMap、try/catch 绑定、Symbol.description。ES2020 更被期待：私有类属性、Optional Chaining、nullish coalescing、BigInts。

10. Flutter 挑战 React Native

Flutter 晚两年发布，GitHub 约 80,500 星，接近 RN 的 83,000。没有 React Web 社区那么强的带动，还能追得这么快，说明它在认真做跨平台移动框架。

11. OpenJS 基金会与 Node 12 LTS

Node.js 基金会与 JS 基金会合并为 OpenJS，托管 31 个项目（Node、jQuery、Webpack），Google、IBM、微软支持。Node 12 走 LTS 到 2023 年 4 月：原生 import/export、私有类属性、V8 7.4、TLS 1.3 等。

12. Svelte 3 受关注、采用仍落后

口号是代码更少、没有虚拟 DOM、真正的响应式。把工作挪到编译期，输出 HTML 和原始 JS。2020 年需要更多能和三大框架对打的实例。相关视频：https://youtu.be/AdNJ3fydeao。

四、架构、数据与样式

13. 静态站与 JAMStack

Gatsby、Netlify、headless CMS 起来后，静态站用现代库构建、构建时编成 HTML，CDN 缓存，再在客户端当 SPA 用 API 推进状态——这就是 JAMStack。

14. PWA 采用增加

浏览器缓存、离线、推送通知。有人说能替代原生应用；无论结果如何，PWA 都会长期影响产品形态。

15. 前端工具越来越好

从自己接 Bower/NPM、Browserify/Webpack、手写 Express，到 CRA、Vue CLI、Angular CLI、Gatsby、Expo、Next/Nuxt、Hasura、GraphQL Code Generator。也许下一步是厌倦工具本身。

16. GraphQL

数据驱动而不是端点驱动，客户端声明要的字段。类型化 schema 和 TypeScript、Code Generator 很搭。下载量一年翻倍，Apollo 也在冲最常用框架。

17. CSS-in-JS

用 JS 字符串写样式，import/export 共享，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 不必管 class 名，把 props 交给 styled 组件：

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

2019 年 emotion 下载超过 styled-components，二者仍远超其他库。

五、编辑器、构建、浏览器

18. VS Code 主宰文本编辑器

开源加插件。2018 年 JS 现状调查：https://2018.stateofjs.com/other-tools/。

19. Webpack 5 进入测试

持久缓存提升构建；更好算法改善长期缓存；清理内部模式且尽量无 breaking change。

20. Jest 放弃 Flow，转投 TypeScript

Facebook 自己的测试库改投 TS，进一步说明 TS 已成标准选择。

21. Chrome 稳定版 72–78

一年 7 个稳定版，还有 Beta 79、dev 80、canary 81。版本史：https://en.wikipedia.org/wiki/Google_Chrome_version_history?source=post_page—–1e7d07966d6c———————-。

22. Edge 改用 Chromium

为赢回开发者，微软换上 Chromium，2019 年中进入 beta。

23. Facebook 发布 Hermes

面向 Android 的 JS 引擎，给 React Native 提速。说明为了全平台效率，他们愿意换引擎。

24. 2020 年的预测

原文在此处截断，仅留下开了头的列表项。完整预测条目在源站译文中已不可还原，故不强行补写。

一句话总结：2019 年的前端画像是：React+Hooks 仍最大、Vue3 和 Ivy 在换代、TypeScript 与 VS Code 成为默认开发体验，Wasm、Flutter、JAMStack 和 GraphQL 则在抢下一波入口。