10 月 23 - 25 日,QCon 上海站即将召开,现在大会已开始正式报名,可以享受 8 折优惠 了解详情
写点什么

2020 年的 JavaScript 后起之秀

  • 2021-01-22
  • 本文字数:3069 字

    阅读完需:约 10 分钟

2020 年的 JavaScript 后起之秀

近年来,前端领域迅猛发展,而在技术的不断发展下,开发者们会根据项目的需求和工具更新的功能来判断自己需要使用的工具,也就导致了很多工具和项目虽然发布时间较晚,却拥有极高人气。本文将为大家整理 2020 年前端领域那些备受瞩目的项目,看看你使用的框架排在第几位吧。


项目比较的原则是,根据过去 12 个月 GitHub 上增加的 star 数来判断哪些项目是更受欢迎的。


总体最受欢迎的项目




出于多种原因,2020 年是非常特殊的一年。但重要的一点是:5 年来第一次出现总冠军新星不是 Vue.js 而是 Deno 的情况,这是一件十分令人惊喜的事情!


Deno 是 Node.js 的创建者 Ryan Dahl 的 JavaScript 运行时。他根据自己 10 年的开发经验和对 Node.js 的迭代经验创建了 Deno,Deno 修复并改进了许多 Node.js 中被开发者吐槽的地方。

主要功能包括:

  • 默认情况下包括 TypeScript 编译器(但是开发者可以正常使用 JavaScript 编写代码)

  • 没有集中的包管理器,可以从任何 URL 加载任何 JavaScript 依赖项

  • “标准库”为通常需要在 Node.js 中安装软件包的常见需求提供解决方案

  • Deno 使用尽可能多的 Web 标准(例如:Fetch API)

  • 使用 ECMAScript 模块导入的文件

  • 内置测试运行器和调试器


虽然目前 Deno 的生态系统还不够完善,但它还年轻,或许在后续生态系统逐步发展起来后,事情会发生很大的变化。


Deno 的成功证实了 2 大趋势:

  • 前端和客户端中 TypeScript 语言的兴起;

  • 通过 Snowpack 之类的解决方案快速导入的 ES6 模块的兴起。


前端框架



在前端框架方面,Vue.js、React 和 Angular 一直占据着前三名的位置。出自前端界“轮子哥”Rich Harris 的 Svelte 也在 2020 年收获了 1.2 万的 star。


而第五名则是一个新面孔,Alpine.js 是 Laravel LiveWire 的创建者为浏览器设计的一个框架。Alpine.js 借鉴了 Vue.js 和 Angular 的一些思路:自定义 HTML 指令,双向绑定等等。


<script>是一个通过在 HTML 页面上添加一个标记来检查页面的标签,不需要构建过程,所有事情都可以从 HTML 标记中直接完成,因此,如果开发者想快速增强现有 Web 页面而又不增加任何内容的话,<script>是一个很理想的解决方案。


作为一种非常轻巧的解决方案,它可以将交互性引入网页,可以与 Elixir Phoenix 等现代框架很好地配合使用。甚至有一个被称为 PETAL 的栈,其中包括 Alpine.js 和 Tailwind CSS,稍后会详细介绍。


Node.js 框架



有两种类型的项目在 Node.js 框架中占主导地位。


一方面,像 Next.js 和 Nuxt 这样的全栈框架,在将 React 和 Vue.js 带到服务器端时,对构建应用程序也会有解决方案。


另一方面,我们还有更多经典选项只能在服务器(如 Nest 或 Fastify)中运行。


与 2018 年一样,该类别由 Next.js 领导。最初,它作为在服务器上呈现 React 应用程序的解决方案而闻名。现在,它是使用 React 构建全栈 Web 应用程序的出色解决方案。


最新版本提供了诸如“增量静态再生”(IncrementalStaticRecreation)之类的功能,这些功能带来了最佳的动态和静态环境,非常适合许多用例。


关于全栈框架,Blitz 和 Redwood 异军突起,旨在提供最佳的开发人员体验来构建完整的 Web 应用程序。


有趣的是,11 年前诞生的 Express 在 JavaScript 领域仍然很重要。


React 生态



2020 年,React 生态系统的主题是稳定性。尽管 React 17 并没有带来重大变化,但它为未来奠定了基础:React Server Components。


React Server Components 将通过减少客户端捆绑包大小和缩短启动时间来改变我们构建 React 应用程序的方式。此外,它们将简化数据获取和对数据源(如数据库和文件系统)的访问。


Next.js 已经发展成为构建 React 应用程序的最受欢迎的解决方案。


支持库(如 React Query,Recoil 和 React Hook Form) 已经围绕 React 成熟并发展了。每个支持库都简化了一部分 React 开发。与完善的组件库结合使用时,React 开发人员将拥有比以往更多的工具。


Vue 生态



2020 年,Vue.js 社区中最大的新闻是 Vue 3 的发布。


它带有新的 Composition API,可解决 Vue.js 2 的几个问题:

  • 很难通过组件内部的逻辑关注来组织代码

  • 跨组件的代码重用更加容易(使用 Vue 2,mixins,mixing factory 和作用域插槽都不是最佳选择)

  • 它具有更好的 TypeScript 支持


查看 迁移指南 以获取有关版本 3 引入的更改的更多详细信息


2020 年,一个新的 Web 构建工具 Vite 也成功诞生。由 ES 模块提供支持,这是从命令行开始使用 Vue.js 应用程序的最快方法。


Angular 生态



排名前 5 位的 Angular 项目与去年基本相同,除了排名第三的新竞争者。


Scully 是一个静态站点生成器,将 Angular 带入 Jamstack。该项目于 2019 年 12 月启动,其中包含大量文档,可帮助开发者快速入门。


Angular 在 2020 年发布了三个主要版本。


Angular 9 于 2 月发布。主要变化是移至 Ivy 编译器,该编译器带来了更小的捆绑包大小和许多其他构建改进。版本 10 和 11 在今年晚些时候问世。


Angular 9即将发布:改进Ivy编译和渲染管道

Angular 10正式发布,不再支持 IE9/10!

Angular 11 正式发布:加入 webpack 5,升级至 TS 4.0,不再支持 IE 9 和 10


下半年,Angular 团队的主要重点是听取社区意见。该团队付出了巨大的努力来对问题和 PR 进行分类,以理解和解决社区的需求。他们还发布了 路线图, 以共享团队正在做的事情以及他们对未来的计划。


构建工具



2020 年是构建工具发展中十分重要的一年,我们看到了许多新趋势。


Snowpack 和 Vite :它们不会将代码捆绑在开发人员中,反馈循环非常快,并且会退回仅用于生产捆绑(直到增加浏览器支持)。


swc 和 esbuild 充分利用 Rust 和 Go 的出色性能,且均支持 TypeScript。


Webpack 被一些开发者吐槽说它过于复杂,而同时诸如 Parcel 和 Rollup 之 类的替代品也已经成熟,所以开发者可以根据项目需求和自己的习惯选择更适合的工具。Webpack 仍然是实际的构建工具,其新的缓存层可以显着提高构建性能。


Monorepos 成为主流:Yarn 和 Lerna 被广泛使用,支持 npm 7。


2021 年值得关注的个人精选:Rome,Toast,Turborepo


CSS 框架



与去年相比,我们增加了 CSS 框架,重点介绍了 Tailwind CSS 的成功及其“实用程序至上”的方法。

与更传统的 CSS 框架(如 Bootstrap 或 Bulma)相比,它提供了命名约定,使开发人员可以通过编写类名来设置页面和组件的样式。


State of CSS 的报告显示,它是满意度最高的是 CSS 框架。


Tailwind CSS v2 是最近发布的,它带来了许多新功能,包括最受欢迎的“暗模式”的支持。


https://blog.tailwindcss.com/tailwindcss-v2


总结    


JavaScript 又是辉煌的一年,Best of JS 总结了不同类别下的几款十分出色且受开发者喜爱的工具。


后端开发人员可以与 Deno 一起玩,并立即开始使用 TypeScript,而且不必担心依赖关系。


前端开发人员现在可以使用诸如 esbuild,Snowpack 和 Vite 之类的解决方案来更快,更简单地构建工具。


说到工具,NPM 的第 7 版提供了用于在单个存储库中处理多个软件包的工作区。


对于样式,Tailwind CSS 之类的解决方案也提供了更多的简便性,并且围绕一个简单的概念构建了一个生态系统。


2021 年会有什么期望?答案是:React Server 组件将会带来什么。


现在,塞巴斯蒂安·麦肯齐(Sebastian McKenzie)在罗马全职工作,将统一 JavaScript 工具的努力将走多远。它可能是处理编译,测试,整理...


我们也将密切关注全栈框架 Redwood 项目,该项目可以很好地与 GraphQL 配合,并且具有使用其所谓的“单元”来处理数据提取的独特方法。


如果您想要基于实际用户的反馈对趋势有其他看法,欢迎在下方留言讨论。


祝大家 2021 无 BUG!


原文链接


https://risingstars.js.org/2020/en

2021-01-22 12:284443

评论

发布
暂无评论
发现更多内容

云原生最佳实践系列 1:如何快速实现kafka性能压测

阿里巴巴云原生

kafka 阿里云 云原生 消息

数字化车间MES管理系统是如何降低企业生产成本

万界星空科技

数字化转型 数字化 制造业 mes 万界星空科技

Footprint Analytics 强势入局 AI 推出全新投研工具

Footprint Analytics

#人工智能 #区块链

全新架构!日志服务 SLS 自研免登录方案发布

阿里巴巴云原生

阿里云 云原生 日志服务 sls

iframe自动化革命:颠覆传统网页嵌入的新趋势

测吧(北京)科技有限公司

测试

矩阵起源新一年喜报连连!

MatrixOrigin

数据库 分布式 云原生

架构实战营 - 模块二作业

满心

架构实战营

OgGame——游戏全球发行的全套解决方案

Ogcloud

云游戏 游戏发行 云游戏发行 游戏云化 游戏发行公司

【AAAI 2024】MuLTI:高效视频与语言理解

阿里云大数据AI技术

人工智能 机器学习 模型训练 大模型

NFTScan | 03.11~03.17 NFT 市场热点汇总

NFT Research

NFT\ NFTScan

2024政府工作报告聚焦数字经济,“双象限”评选凸显数字化先锋

信通院IOMM数字化转型团队

数字化转型 数字经济 IOMM 企业数字化转型发展双象限

Java社招面经分享,别人都是怎么面试蚂蚁的?

阿里、莫言

Java Java面经 Java面试题

兼顾稳定和性价比的跨国企业SD-WAN组网

Ogcloud

SD-WAN 企业网络 SD-WAN组网 SD-WAN服务商 SDWAN

LED芯片寿命试验过程解析

Dylan

屏幕亮度 光热发电 电子 LED display LED显示屏

云手机为电商提供五大出海优势

Ogcloud

云手机 海外云手机 云手机海外版 国外云手机 跨境云手机

详解GaussDB(DWS)中3个防过载检查项

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 华为云GaussDB(DWS)

Hero Talk|无缝扩展:Kubernetes 上的 Amazon Aurora 分片和流量管理

亚马逊云科技 (Amazon Web Services)

人工智能 生成式AI

软件测试学习笔记丨Pytest结合数据驱动读取csv文件

测试人

软件测试

制造业工厂中的设备管理系统

万界星空科技

工业互联网 制造业 mes 设备管理 设备数据采集

被快手面试官追着问的真正线上索引失效的问题是如何排查的

派大星

:MySQL 数据库 Java 面试题 互联网大厂面试

Java 中 HashMap 详解

小白牙

Java Map集合

HPE Aruba Networking连续第十八次获评Gartner企业级有线和无线局域网基础设施魔力象限领导者

科技热闻

华为云开年采购季全面启动 智领千行万业 赋能美好未来

轶天下事

新一代AI模型Claude 3:有大学生智商,全面超越GPT-4,现已正式登陆 Amazon Bedrock!

伊克罗德信息科技

API接口知识小结

Noah

Vue.js 应用实现监控可观测性最佳实践

OpenTiny社区

开源 Vue 前端

软件测试学习笔记丨Pytest结合数据驱动读取json文件

测试人

软件测试 测试开发

如何通过ETL做数据转换

RestCloud

ETL 数据集成 数据转换

你在测试金字塔的哪一层(上)

禅道项目管理

软件开发 自动化测试 测试工程师 测试金字塔

2020 年的 JavaScript 后起之秀_语言 & 开发_bestofjs_InfoQ精选文章