«

2025 年主流的前端技术全集合

时间：2026-5-10 00:32     作者：独元殇     分类： 前端技术

欢迎关注我的公众号，名叫「串串狗小刊」

在全球前端圈里面，如果想有一个大局观，上帝视角的话，那肯定是这个网站。挺权威的，我每年都会去看看。

2025年 JavaScript 明星项目risingstars.js.org/2025/zh

JavaScript 明星项目。

img

每过一年，它里面都会把前年的前端重要的生态，排列和分享出来。

反正以它为准，那就是主流的技术。

今年 2026 年还没过完，所以现在的数据还停留在 2025 年。

然后可以进来看看 2025 年的一些前端技术都有什么。

那些什么什么技术栈，翻来覆去，什么 React Vue 就不多说了，耳朵都起茧，看一些比较现成的项目吧。

img

第一个是 n8n 。一年内增加了+112,000颗 github star 。

国内的竞品就是 字节 的扣子，这个 n8n 主要厉害的点，就是 AI 生成工作流，我确实也用着几条，定时给我谷歌文档里面写入一些监察日志，不过是自己部署的，自己部署是完全免费的。大家肯定都听过 n8n ， 它的流行在最开始我还以为是一个计算机名词呢，没想到是个最近才火的软件。（它其实 2022 年就有大量用户了，还是拖 AI 的风口，把它吹上天了）

第二个是 React Bits ，是一个 React 的样式库。

这个我倒没听说过哈哈... 不过去它官网看了看，苹果味道还是挺浓的。简约大方，有质感。AI 味道不太大，感兴趣可以看看。【它作为一个shadcn/ui项目分发，可以通过命令行从shadcn/ui注册表获取，或通过传统的复制粘贴方式添加到您的代码库中。】我有用着 shadcn/ui ，有空我试试。

第三个就是大名鼎鼎的 shadcn-ui 了！

我用它用了 3 年了，做过十几个项目了，简洁又美观发挥稳定。和我的 next.js 搭配简直绝配。

img

平淡无奇，但每个弯折和角度全恰到好处，且容易定制代码好改。我试过很多 UI 库，但只有这个在全场景下都适配，都能驾驭得了。比如我的一个 saas 站，月订阅费用 300$ 的高端工具，只有这个组件库能驾驭这种高端工具的界面气质。

第四个：Excalidraw 。

这个是个画板，以前听一些课的网课时，老师用过。中国画板工具也设计的很用心。

第五个：Supabase

这个 js 项目就不多说了，你建立一个 AI 工具网站，你就不用太考虑后端了，这个把后端用到的大部分东西、以及后台能操作的大部分都集成了，而且免费额度还可以。

下面是每个前端开发领域的细分领域的前 5 名：

前端框架

  1. React：主流 Web UI 库
  2. Ripple：新 TS 优雅 UI 框架
  3. Svelte：轻量编译型框架
  4. htmx：HTML 直连 AJAX 等能力
  5. Vue.js：渐进式前端框架

唉，我 尤大 的 Vue 不行了。尤其是 AI 默认都选 React 以来，份额下降不少。

不过 Svelte 对于一些小项目，还是挺好用的，推荐大家看看。Ripple 不了解，htmx 这种... 这种奇淫技巧为什么排名那么靠前？？

React 生态

  1. React Bits：React 动效组件库
  2. shadcn/ui：通用组件分发平台
  3. Excalidraw：协作手绘白板工具
  4. Onlook：AI 驱动 React 可视化编辑
  5. Vercel AI SDK：TS AI 应用开发工具包

多亏 Vercel 和 next.js 的贡献。

后端 / 全栈

  1. Motia：多语言一体化后端框架
  2. Payload：Next.js 全栈开发框架
  3. Next.js：React 服务端渲染框架
  4. Astro：现代轻量站点构建器
  5. Hono：跨平台 Web 标准框架

Motia 排名那么高？！

工具

  1. Bun：极速 JS 运行时打包器
  2. Vite：下一代前端构建工具
  3. Biome：Web 项目格式化 Lint 工具链
  4. Oxlint：高性能 JS 代码检查器
  5. Nx：构建 CI 优化加速工具

我现在已经不用 nodejs 了，一律使用 Bun 。用 Zig 写的东西就是快。

AI

  1. n8n：AI 原生工作流自动化平台
  2. Dyad：本地开源 AI 应用构建器
  3. Stagehand：AI 浏览器自动化框架
  4. Mastra：TS 栈 AI 应用开发框架
  5. Flowise：可视化 AI 代理构建工具

除了第一个，都很陌生.... 看着还让人焦虑.... 看见 AI 就害怕，就浑身不舒服。

移动端

  1. Valdi：跨平台原生性能 UI 框架
  2. Lynx：字节跨平台渲染框架
  3. Expo：React Native 通用开发框架
  4. Dioxus：全栈跨端应用框架
  5. React Native：React 原生应用框架

不懂。

Vue 生态

  1. Slidev：开发者专用演示工具
  2. Nuxt：Vue 渐进式全栈框架
  3. Vue Bits：Vue 动画交互组件库
  4. shadcn-vue：Vue 版 shadcn/ui 组件
  5. VitePress：Vue 驱动静态站点生成器

还是那几样。

状态管理

  1. Zustand：轻量 React 状态管理
  2. Jotai：原子化状态管理库
  3. alien-signals：响应式信号库
  4. X：高效状态管理方案
  5. Nano stores：微型跨框架状态库

就用第一个就行了。

样式 / CSS in JS

  1. Tailwind CSS：实用优先 CSS 框架
  2. DaisyUI：Tailwind 组件库
  3. Pico.css：极简 CSS 框架
  4. NativeWind：RN 端 Tailwind 方案
  5. B：样式工具库

虽然官方不推荐 YYDS 这个词，但 Tailwind CSS 就是 YYDS 。未来的大学生就不学 CSS 了，直接学 tailwind CSS ，以后全球前端界面品控能提高一大半。

UI 组件库

  1. shadcn/ui：可访问高质量组件
  2. tweakcn：组件定制增强工具
  3. Magic UI：魔法动效组件库
  4. Base UI：基础无样式组件
  5. HeroUI：美观易用组件集合

就第一个就行了。

测试

  1. Stagehand：AI 浏览器自动化测试
  2. Midscene.js：视觉模型 UI 自动化
  3. V：高效测试框架
  4. A：测试工具集
  5. Puppeteer：无头浏览器测试

Stagehand 还是不错的，一句话就能给你生成测试解决方案。

桌面端

  1. Wails：Go+Web 桌面应用
  2. Dioxus：跨平台桌面框架
  3. Electron：Web 技术桌面应用
  4. electron-vite：Electron+Vite 集成
  5. e：桌面开发工具

我前几天介绍过 Dioxus ，效果还不错，解决了 Electron 的大部分弊端。

静态站点

  1. Next.js：React 静态 / 动态站点
  2. Fumadocs：文档站点生成
  3. Astro：多框架兼容站点工具
  4. Docusaurus：React 文档框架
  5. M：静态站点工具

不多说了，全是熟悉的面孔。

GraphQL

  1. Twenty：GraphQL 相关工具
  2. Directus：开源数据 GraphQL 平台
  3. TanStack Query：数据获取状态管理
  4. EverShop：电商 GraphQL 方案
  5. Vendure：开源电商 GraphQL 框架

这个领域涉足不多。

标签: 原创 前端