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

前言

回顾 2019 年前端和 Web 开发的主要事件,新闻和趋势。

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

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

  • 译者:前端劝退师

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

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

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

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

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

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

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

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

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

3. TypeScript 使用量激增

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

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

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

TypeScriptReact 受欢迎程度

4. " React Hooks "成为首选方式,并使 React 继续领先

VueAngular 拥有热情的支持者, VueGitHub 上甚至超过了 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. Vuev3 版本发行做准备,使用量继续增长

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

Vue 引入了 ReactAngular 的最佳部分,同时也变得更加简单。

另一个巨大的卖点是它更开放,不受 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 最大好处是较小的捆绑包尺寸,但是它提供了许多巨大的附加改进。当前, IvyAngular 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 跨平台框架王者地位

FlutterReact Native 发行 2 年后发布,目前 Star 数已 81.1k , 超过 React Native83.2k 指日可待。

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

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

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

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

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

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

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,VueAngular 等对手竞争。

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

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

  • 我们能够使用像 React 等库来构建我们的站点,然后在构建时将它们编译成静态 HTML。
  • 由于所有页面现在都是预先构建的,因此不需要服务器时间就可以根据请求将它们与数据混合在一起

  • 这些页面可以立即提供服务,并可以利用在 CDN 缓存的优势,使内容更快应答

静态站点使用的一种流行编程模式是 JAMStack(JavaScript,API,Markup)

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

14. 前端工具变得更好

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

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

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

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

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

GraphQL 有望解决基于 REST 的传统应用暴露出的许多问题。开发人员很快就爱上了 GraphQLGitHub 几年前用 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 <div className={className}>HI</div>

}

// 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}} =>(

<Header isActive = {isActive}> HI </ Header>

CSS-in-JS 两个主要的库是: styled-componentsemotion

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

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

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

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

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

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

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

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

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

  • 清理内部模式而不会造成任何重大更改。

19. JestFlow 迁移到 TypeScript

Facebook 维护着流行的测试库 JestFlow ,后者是 TypeScript 的竞争对手。

他们在 2019 年初发表了声明,选择将 JestFlow 迁移到 TypeScript

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

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

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

在 2019 年,我们看到发布了 7 个稳定版本,其中还有 Beta v79dev v80canary v81

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

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

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

微软顺应市场的选择,使用了开源 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 VRGoogle VR 等库以及对浏览器中本机 AR / VR 工具的改进,而取得了长足的进步。
  • 容器化(例如 Docker,Kubernetes )的影响在前端中变得越来越普遍。

:heart: 看完三件事

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

  1. 点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)

  2. 关注公众号「前端劝退师」,不定期分享原创知识。

  3. 也看看其它文章

劝退师个人微信: huab119

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

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

参考资料

[1]

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

[2]

The case of partial hydration (with Next and Preact): https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5

[3]

Web开发中最该知道却从不重视的 —— Accessibility: https://juejin.im/post/5dee4e39f265da33ba5a799b

[4]

《Chrome新功能一览》: https://en.wikipedia.org/wiki/Google_Chrome_version_history?source=post_page-----1e7d07966d6c----------------------

[5]

Meet Hermes, a new JavaScript Engine optimized for React Native: https://facebook.github.io/react-native/blog/2019/07/17/hermes?source=post_page-----1e7d07966d6c----------------------

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章