从 2023 GitHub 涨星数看 2024 前端发展方向

从 2023 GitHub 涨星数看 2024 前端发展方向

前端涨星总榜

从 2023 GitHub 涨星数看 2024 前端发展方向_第1张图片

1. shadcn/ui

一个高可定制化的 React UI 组件库,与 Ant Design 的区别在于它直接将导入的组件文件复制到指定目录中,可以自行修改源码,并且与 Tailwind CSS 配合使用极佳。

从 2023 GitHub 涨星数看 2024 前端发展方向_第2张图片

2. Bun

一个集成了速度极快的 JavaScript 运行时、包管理器、捆绑器和转译器的工具,目前已经兼容 Node.js,意味着无需大量更改原有代码。

从 2023 GitHub 涨星数看 2024 前端发展方向_第3张图片
可以看到 Bun 的涨幅主要是在 9 月,这段时间刚好 Bun 发布了自己的第一版正式版,并且扬言要在 2024 年取代 Node.js 在前端的地位,但是一个工具能否从有名气变为通用工具更重要的还是生态,只能说未来可期。

3. Excalidraw

一个用于绘制手绘图表的虚拟白板,本人没有用过就不做过多的评价了。

从 2023 GitHub 涨星数看 2024 前端发展方向_第4张图片

4. tldraw

一个白板工具,猜测和排第三的有些许的异同,同样本人没有用过就不做过多的评价了,感兴趣的可以自行尝试。

从 2023 GitHub 涨星数看 2024 前端发展方向_第5张图片

5. Next.js

一个 React 的 SSR 框架,集成了包括路由、CSS 框架等多种功能,也是目前最主流的基于 React 的 SSR 框架,足以说明 SSR 在前端领域的关注度在逐渐上升。

从 2023 GitHub 涨星数看 2024 前端发展方向_第6张图片

6. Supabase

一个开源的 Firebase 替代工具。

从 2023 GitHub 涨星数看 2024 前端发展方向_第7张图片

7. React

一个 JavaScript 库,没什么好讲的,世界上最主流的 “框架”。

从 2023 GitHub 涨星数看 2024 前端发展方向_第8张图片

8. Tauri

一个跨平台框架,去年排名第二,虽然关注度有所下降,但跨平台在前端仍然是一个非常受欢迎的方向。

从 2023 GitHub 涨星数看 2024 前端发展方向_第9张图片
从 2023 GitHub 涨星数看 2024 前端发展方向_第10张图片

9. Drizzle ORM

一个带头的 Handless TypeScript ORM。

从 2023 GitHub 涨星数看 2024 前端发展方向_第11张图片

10.htmx

一个面向 HTML 的框架。

从 2023 GitHub 涨星数看 2024 前端发展方向_第12张图片

框架涨星总榜

1. React

上面已经有了就不做过多的赘述了。

2. htmx

上面已经有了就不做过多的赘述了。

3. Svelte

一个无虚拟 DOM 的框架。

从 2023 GitHub 涨星数看 2024 前端发展方向_第13张图片

4. Million

一个追求小体积、高性能的虚拟 DOM 库。

从 2023 GitHub 涨星数看 2024 前端发展方向_第14张图片

5. Vue.js

一个面向 HTML 的框架,世界流行度排名第二,国内最主流(个人认为比 React 流行),尽管关注度有所下降,但是仍然是一个非常主流的框架,并且相关生态基本都是自产,对于有选择强迫症的同学及其友好。

从 2023 GitHub 涨星数看 2024 前端发展方向_第15张图片

React 相关生态涨星总榜

1. shadcn/ui

上面已经有了就不做过多的赘述了。

2. Excalidraw

上面已经有了就不做过多的赘述了。

3. Next.js

上面已经有了就不做过多的赘述了。

4. Zustand

一个 React 状态管理仓库,相比 Redux 使用简单很多,在没有过多复杂场景的中小项目中可以尝试。

从 2023 GitHub 涨星数看 2024 前端发展方向_第16张图片

5. Refine

一个 React 框架。

从 2023 GitHub 涨星数看 2024 前端发展方向_第17张图片

Vue 相关生态涨星总榜

1. Nuxt

最主流的 Vue SSR 框架。

从 2023 GitHub 涨星数看 2024 前端发展方向_第18张图片

2. slidev

一个基于 Vue 的 Markdown 幻灯片制作工具。

从 2023 GitHub 涨星数看 2024 前端发展方向_第19张图片

3. Vue Element Admin

一个基于 Vue 的开箱即用的中后台管理应用。

从 2023 GitHub 涨星数看 2024 前端发展方向_第20张图片

4. VueUse

一个集成了多个 Vue 组合式 API 的工具库。

从 2023 GitHub 涨星数看 2024 前端发展方向_第21张图片

5. Element Plus

一个基于 Vue 的组件库。

从 2023 GitHub 涨星数看 2024 前端发展方向_第22张图片

全栈方向涨星总榜

1. Next.js

上面已经有了就不做过多的赘述了。

2. Astro

一个支持 SSG 和 SSR 的框架。

从 2023 GitHub 涨星数看 2024 前端发展方向_第23张图片

3. tRPC

基于 TypeScript 的 PRC 库。

从 2023 GitHub 涨星数看 2024 前端发展方向_第24张图片

4. create-t3-app

一个开发全站 Next.js 应用的方案。

从 2023 GitHub 涨星数看 2024 前端发展方向_第25张图片
从 2023 GitHub 涨星数看 2024 前端发展方向_第26张图片

5. Nest

一个渐进式的 Node.js 框架。

从 2023 GitHub 涨星数看 2024 前端发展方向_第27张图片

构建工具涨星总榜

1. Bun

上面已经有了就不做过多的赘述了。

2. Vite

Vue 团队推出的构建工具,对 Vue3 的支持极为友好,采用了先启动后加载的方案,让它在调试项目时极为迅速,但是由于采用 Rollup 进行构建,导致在一些大型项目上可能会不稳定并且效率极慢,推荐在基于 Vue3 的中小项目中使用。

从 2023 GitHub 涨星数看 2024 前端发展方向_第28张图片

3. Biome

一个格式化、检查代码指令的工具,仅 4 个月就能排名第 3,可见其受欢迎程度。

从 2023 GitHub 涨星数看 2024 前端发展方向_第29张图片

4. Oxc

一个构建工具集,最近因为多位大佬(例如:“不懂 Vue” 的尤雨溪)发表试用感受而爆火。

从 2023 GitHub 涨星数看 2024 前端发展方向_第30张图片

5. Rspack

字节自研的构建工具,本人有幸听过它们的演讲,感觉应该还不错,但是我没有实际落地过。

从 2023 GitHub 涨星数看 2024 前端发展方向_第31张图片

移动端涨星总榜

1. Expo

一个基于 React 的跨端方案。

从 2023 GitHub 涨星数看 2024 前端发展方向_第32张图片

2. React Native

一个基于 React 的跨端框架,facebook 出品。

从 2023 GitHub 涨星数看 2024 前端发展方向_第33张图片

3. Tamagui

一个支持 RN 的 ui 库。

从 2023 GitHub 涨星数看 2024 前端发展方向_第34张图片

4. Quasar

一个基于 Vue 的跨端框架。

从 2023 GitHub 涨星数看 2024 前端发展方向_第35张图片

5. Capacitor

一个跨端库。

从 2023 GitHub 涨星数看 2024 前端发展方向_第36张图片

总结

作者认为在 2024 年可能会有比较好的发展前景的前端方向:

  1. 结合 AIGC 在原有前端项目上进行升级改造
  2. 基于 Rust 对前端工具链进行升级
  3. 在原有 CSR 项目的基础上引入 SSR
  4. 在合适的项目中使用 Node.js(例如:Nest) 替代 Java
  5. 鸿蒙系统跨端支持

以上仅为作者个人的看法,若有不同的看法或作者有错误的理解欢迎共同探讨。

PS

作者整理了一份长达 9w+ 字数,字节、阿里、百度大佬看了都称赞的前端文档,并且还在持续更新,包含:

  • HTML、CSS、JavaScript 三件套
  • Vue、React 流行框架
  • Webpack、Vite 构建工具
  • 浏览器、安全、计算机网络、操作系统、设计模式等计算机领域基本功
  • etc…

在这里插入图片描述

可以添加作者 Q: 1437517225 备注领取,文档可以参与评论,以及给作者留言想要的问题,欢迎大家参与共建。

参考:

  • 2023 JavaScript Rising Stars

你可能感兴趣的:(JS,github,前端)