译者:前端劝退师
回顾2019
年前端和Web开发的主要事件,新闻和趋势。
在过去的一年中,前端开发的世界再次迅速发展,本文总结了`2019·年以来的所有重要事件,新闻和趋势。
原先没有打算翻译这篇,但发现该篇需要科学上网和会员,于是就加上自己的理解,意译了,非重要内容我直接一键翻译了,嘿嘿。
原文内容不足的,我都加了点补充。
React
在国际上仍是No.1
库,并且还在增长jQuery
作为老牌库仍占据第二的位置- 紧随其后的是
Angular
和Vue
- 去年,
Svelte
受到了很多关注,但它仍在努力争取被采用。
WebAssembly
成为连接HTML,CSS
和JavaScript
的Web
第四种语言。
经过一年的平静之后,WebAssembly
在12月初被 W3C
联盟正式收编,并推荐的Web
语言。
自2017
年发布WebAssembly
以来,它已经引起了广泛关注和迅速采用。在过去的几年中,我们看到了1.0
规范的创建和在所有主要浏览器中的集成。
与WebAssembly
相关的另一条新闻是:字节码联盟的成立
感兴趣的可以查看:https://bytecodealliance.org/articles/announcing-the-bytecode-alliance
2019
年是TypeScript
的一年。TypeScript
不仅成为在JS
代码中添加数据类型的最佳选择,而且许多开发人员会选择在个人项目和工作中使用它。
在年初发布的StackOverflow
调查中,TypeScript
与Python
并列第二,成为最受欢迎的语言,仅次于Rust
。可以预见,在2020
年,它的地位将进一步攀升。
TypeScript v3.0
于2018
年末发布- 而到
2019
年,它发布的版本激增到v3.7
,其中包括更新的ECMAScript
功能,例如可选的链接和无效运算符以及对类型检查功能的改进。
TypeScript
和React
受欢迎程度
Vue
和Angular
拥有热情的支持者,Vue
在GitHub
上甚至超过了React
。
但在个人和专业项目中被采用时,React
继续保持领先地位。
- 在2018年末,
React
团队引入了钩子hooks
- 在2019年,
hooks
吞噬了React
世界,绝大多数开发人员将其作为管理状态和组件生命周期的首选方式。 - 在这一年,有无数有关
React hooks
的文章,模式开始固化。 React
中最重要的工具包都发布了hooks
化的版本。
React hooks
提供了一种使用简洁的语法,用以管理功能组件中 组件状态和生命周期。
另外,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核心的可访问性改进(即将发布)
用户在加载网站时已经看到了完整呈现的页面(而不是空白页面),然后该页面变为交互式页面。网站也将受益于重大的性能改进,因为浏览器不需要进行任何重新绘制(使用React
重新呈现您的页面)
感兴趣的可以看这篇:The case of partial hydration (with Next and Preact)
Vue
可能在国际上尚未获得最多的采用率,但很难不说它拥有最热情的用户。
Vue
引入了React
和Angular
的最佳部分,同时也变得更加简单。
另一个巨大的卖点是它更开放,不受React(Facebook)
或Angular(Google)
等大公司的控制。
Vue
的最大新闻是即将发布的3.0
版本,alpha
有望在第四季度末发布。
在2019年,Vue 2.x
在今年年初仅有少许更新,因为大多数努力都投入到了v3
版本中。
Composition API
- 全局安装/配置API更改
- 支持
Fragments
和跨组件渲染 Time Slicing
- 重写虚拟
DOM
(Virtual DOM Rewrite
) - 静态树提升(
static tree hoisting
)、静态属性提升(static props hoisting
) hooks API
slot
插槽生成优化(父子组件的单独渲染)- 更好的
TypeScript
支持
今年另一个值得注意的版本是Vue-CLI
的第4版,主要集中在更新基础工具上。
在2019
年,Angular
发布了v8
版本,并且还发布了一个新的渲染器/编译管道,称为Ivy
。
Ivy
最大好处是较小的捆绑包尺寸,但是它提供了许多巨大的附加改进。当前,Ivy
是Angular 9
之前的可选功能。本文详细介绍了版本8中发布的功能,但值得注意的更新是:
- 现代
JavaScript
的差异加载 - 选择加入
Ivy
功能 - 路由器向后兼容性
- 改进的
Web Worker
捆绑 - 选择加入使用情况分享
- 依赖关系更新
在2019年12月,Angular
团队准备了v9
版本的发布,该版本将于2019
年底或2020
年初正式发布。
Angular 9
的最大变化是Ivy
成为标准渲染器。
自2015年开始,JavaScript
和网络快速发展之后,模式和框架终于得到巩固。
这使开发人员可以将更多的精力放在应用本地化并让其更易于访问的工具上,从而使每个人的网络体验变得更好。
我们应该为所取得的进展感到自豪,但是还有很长的路要走。
原文中对可访问性的介绍不全,以下粘贴自鱼头的
Web开发中最该知道却从不重视的 —— Accessibility
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
,译为 “网页亲和力(又称网络无障碍、网络可达性、网络可用性、网页可访问性)” 。
无论是一般人或者是身心障碍的朋友,都需要有规范的网站方可便捷地获取信息,无障碍网页则是拓展对网页的规范,以更严谨的态度及条件来设计网页,使网页内容落实“无障碍”让不同程度或需求的用户,可以顺畅的获取网站上的信息。
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
Flutter
在React Native
发行2年后发布,目前Star
数已81.1k
, 超过React Native
的83.2k
指日可待。
但其的issue
数,已稳定保持了多年的5000+
。
Flutter
没有像React Native
那样与React Web开
发人员一样拥有开发人员社区来实现共同进步,所以这个受欢迎程度是实打实的:Flutter
正在使自己成为最佳的跨平台框架。
为了支持JavaScript
生态系统并加速语言的发展,Node.js Foundation
和JS Foundation
合并成立了OpenJS Foundation
。
基金会传达的信息是在一个中立的实体下的协作和发展,该实体现在托管31个开源项目,包括Node,jQuery
和Webpack
。
这一举动对整个JS社区都是积极的,并得到了Google,IBM
和Microsoft
等大型科技公司的支持。
Node
今年发布了v12
版本,该版本具有长期支持(LTS
),直到2023年4月。
Node12
提供了许多新功能,安全更新和性能改进。一些值得注意的更新包括:
- 对
import/ export
语句的本机支持 - 私有类字段
- 与
V8 Enginev 7.4
版本的兼容性 - 对
TLS 1.3
的支持以及其他诊断工具
写
在2020年,观察Svelte
的成长和发展将是一件很有趣的事情,希望我们能从中得到一些最佳实践,以了解它如何与React,Vue
和Angular
等对手竞争。
随着诸如Gatsby
之类的框架利用率的提高,Netlify
等静态网站主机的快速增长以及无数headless CMS
公司的出现,静态网站证明了它们将成为Web
不可或缺的一部分。
- 我们能够使用像
React
等库来构建我们的站点,然后在构建时将它们编译成静态HTML。 - 由于所有页面现在都是预先构建的,因此不需要服务器时间就可以根据请求将它们与数据混合在一起
- 这些页面可以立即提供服务,并可以利用在
CDN
缓存的优势,使内容更快应答
静态站点使用的一种流行编程模式是JAMStack(JavaScript,API,Markup)
这是一种静态/ SPA
混合方法,其中页面是静态服务的,但是一旦在客户端上,它就被作为SPA
使用。
几年来,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
不断得到简化,很多优化插件已内置。
GraphQL
有望解决基于REST
的传统应用暴露出的许多问题。开发人员很快就爱上了GraphQL
。GitHub
几年前用GraphQL
编写了它的最新API
,许多其他组织也在进行更改。
GraphQL
应用是数据驱动的,而不是端点驱动的。
从而允许客户端声明所需的确切数据,并从服务器接收相应的JSON
响应。
GraphQL API
提供了一个架构,用于记录所有数据及其类型,从而使开发人员可以全面了解API
。
由于GraphQL API
提供了完全类型化的架构,因此它也可以与TypeScript应用
很好地集成。
在过去的一年中,GraphQL
的下载量增长了一倍以上:
如前所述,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-components
和emotion
各语言开发人员对自己的IDE /文本编辑器充满热情,并且不怕争论为什么他们的选择是最好的。
但是,前端开发人员几乎一致选择VS Code
作为其编辑器。VS Code
是一个开源编辑器,它提供丰富的插件来提供令人难以置信的开发体验。
这是根据2018
年调查状况(2019年调查将更新)的文本编辑器使用分布:
Webpack
已成为几乎所有现代JavaScript
工具链的核心组件,并且是最常用的构建工具。
Webpack
一直在提高其性能和可用性,使其对开发人员更好。Webpack 5
着重于以下几点:
- 通过持久缓存提高构建性能。
- 使用更好的算法和默认值来改善长期缓存。
- 清理内部模式而不会造成任何重大更改。
Facebook
维护着流行的测试库Jest
和Flow
,后者是TypeScript
的竞争对手。
他们在2019
年初发表了声明,选择将Jest
从Flow
迁移到TypeScript
。
Chrome
继续快速迭代,迅速向网络和开发人员工具中添加了新功能。
在2019年,我们看到发布了7个稳定版本,其中还有Beta v79
,dev v80
和canary v81
查看下面的Wiki,了解过去一年中Chrome
的重要新增功能。
《Chrome新功能一览》
Internet Explorer
及其更新的版本Edge
对Web
开发者来说是一个玩笑,更糟的是,兼容它们时都会痛苦不堪。
微软顺应市场的选择,使用了开源Chromium
Facebook
认为Android JavaScript
引擎的速度不够快,因此他们建立了自己的引擎。
感兴趣的可以看这篇:Meet Hermes, a new JavaScript Engine optimized for React Native
- 随着代码拆分和
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
)的影响在前端中变得越来越普遍。
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
- 点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)
- 关注公众号「前端劝退师」,不定期分享原创知识。
- 也看看其它文章
劝退师个人微信:huab119
也可以来我的GitHub
博客里拿所有文章的源文件:
前端劝退指南:https://github.com/roger-hiro/BlogFN 一起玩耍呀。~