现在搞个 SPA (react 系)流行哪些库？

[FaiChou]

由于很久没写前端了，之前正规写前端项目还是五年前，那时候用 create-react-app + react-router + redux + ant ..

现在的话，这一套都过时了吧。现在流行什么？ vite + react-router + swr+zustand + shadcn ？

除了这些还有哪些是必备的库？

UI 库现在都用什么？直接 tailwindcss ？

（虽然大部分代码是 AI 写，但得选好框架和库）

[Aprdec]

流行的库就还是那些吧,tanstack 系列势头挺大的,

[horizon]

找个模板吧

[ultimate42]

shadcn 真是有点用不来，光表格的列宽设置都要折腾好久

[Somnusochi]

我最近用的是 vite ，react-router ，ahooks ，antd ，jotai ，unocss

[ominus3]

modernjs 一把梭

[qiaobeier]

现在国外最流行的就是 vercel + nextjs + react + sanity 这套玩意儿。简单省事便宜。

[ejin]

vue 3.6 正式版还没出

新路线是抛弃虚拟 DOM ，直接操作 DOM ，性能大幅提升，秒 React 几条街（因为要面向对象实现跨平台所以快不了一点）。

再等等吧。


我就没搞明白，前端他们卷来卷内去，什么时候是个头啊。

[opsaid]

前端现在还要自己写代码吗？

[DOLLOR]

@ejin

已经往后端方向开始卷全栈了，这算到了头吗？🐶

[FaiChou]

@opsaid 后端也不需要啊。

[FaiChou]

跑题问下，选 drizzle orm 还是 prisma ？

[FaiChou]

@DOLLOR 跑题问下，选 drizzle orm 还是 prisma ？

[kaba]

@FaiChou 个人推荐 drizzle ，prisma 那个 schema 用起来有点蛋疼

[luckyc]

vite+biome+react+antd(pro-component)+tailwindcss+vitest

[apkapb]

笑死了，前几年吹 虚拟 dom ， 现在又要回到 vaper 模式....

[bbbblue]

trpc
tanstack 全家桶

[bbbblue]

@FaiChou 肯定 drizzle
prisma 有很多隐藏问题 性能可能很差。。。
比如我之前用它 连的 mysql 发现它的 insert on duplicate update 在 mysql 的实现是先 select 没有 row 就报错 有的话再进行 update 。。。。
issue 有人反馈也没啥计划（不知道现在怎么样了）

drizzle 这类带 sql builder 的用着更贴心

感觉 prisma 适合不会 sql 的那些吧（虽然 drizzle 也有这类写法

[Ketteiron]

@ejin #7 来回看了半天，0-6 楼说的都是 react ，为什么突然冒出个 vue ，走错片场了吧？
Vapor 这种东西应该丢到 vue4 去搞，vue3 的一堆问题都还没搞定。
而且现在有人在意性能吗，反正我自己不在意。大厂用 react 多，react 性能那么差，性能真的有关系大厂早大量迁移到 vue3 去了。

我个人比较在意 vue 的一堆 typescript 相关问题，比如 defineProps 直接丢掉 undefined ，而官方对此表示这是合理的
const props = defineProps<{
a?: boolean
}>()
props.a
// ^? (property) a: boolean

直到支持了响应式解构才勉强算解决了这个问题，但是 defineProps 与 typescript 行为不一致依然是不合理的。
const { a = undefined } = defineProps<{
a?: boolean
}>()
a
//^? const a: boolean | undefined

vue 运行时再快有屁用，vue-tsc 比 tsc 慢了 5 倍，vue-eslint-parser 无法享受 typescript-eslint 的性能改进，vue 官方明确表示不会支持类型感知，只能社区自己搞了个勉强能用的，但是太慢，后端 lint 检查 12 秒，差不多体量的 vue 检查要 80 秒，慢了 7 倍，插件越多这个差距还会接着放大。

运行时性能差距，没人关心，用户也感受不到几十到几百毫秒的差别，相比之下 vue 与 typescript 的融合体验被 react 吊打。react 不会插件天天报错，升级版本换另一个报错，不会拖慢 CI/CD 检查，不会与 typescript 有不一致的行为，不会被 typescript-eslint 维护者指着鼻子说 Vue 社区对于支持 type linting 没有兴趣
https://github.com/typescript-eslint/typescript-eslint/issues/2865#issuecomment-742647474

[ejin]

@dssxzuxc #18

哈哈，确实是我错了，谢谢耐心回复。

[red13]

@ejin 卷不到头的🤣🤣

[bgm004]

@ejin 你要不看看 solidjs 和 preact 。vapor 就是个弟弟。

[june4]

@dssxzuxc vue 搞 vapor ，搞 typescript ，这进化方向不就是 SolidJS 嘛，也是无 DOM （怀疑就是看了 solid 走通了路才搞的），原生 tsx 毫无 ts 问题以及自制插件的需求

[wwk]

tailwind 、tanstack 、shadcn 、zustand 基本够用吧。

orm 得看需求场景了。如果自己要折腾数据库其实还是 prisma 适合些，尤其是涉及迁移同步这些。drizzle 适合纯查询场景，serverless 场景里好用，之前遇到好几个迁移方面的坑。

[summerwar]

@FaiChou #11 drizzle-orm

[Ketteiron]

@wwk #23 drizzle1.0 修复了大量 bug ，包括一堆迁移问题，正式项目可以等待 1.0 发布再转。
prisma 无论如何都不推荐用，很难想象多少公司被 prisma 推进坑里去了。

[Ketteiron]

@june4 #22 vue 最大的一个问题就是没有需求，创造需求。vue3 进展缓慢，这些不去解决，反而炒热度玩 solidjs 吃剩的玩意。vue3 吸收 react 的优点，并且设计上没有 react 带来的心智负担，这个方向相当好，甚至不少人放弃 react 转而去写 vue tsx 。而 vapor 我个人是不认可的，它的发展必定挤占大量开发资源，我手里的一堆 vue 项目都在考虑用 react 重构。yyx 懂开源，更懂炒热度，oxc 之类的项目也是如此。

[DOLLOR]

@june4

SolidJS 还是太 React 里 React 气了。
在我看来，Svelte5 才是 vue 最理想的样子。🐶

[wwk]

@Ketteiron “prisma 无论如何都不推荐用，很难想象多少公司被 prisma 推进坑里去了。”

举例来说呢，坑指什么？从我的角度来看，prisma 至少能解决实际问题。

drizzle 早前就很多人推荐，所以我也深度使用过，社区里早期就一堆狂热粉无脑给新人推荐，导致的问题可不比 prisma 少。

[Ketteiron]

@wwk 最大的问题是性能问题，prisma 一些很简单的操作会生成多个 SQL ，例如几年前 prisma 的 update 一直都是生成 select+update+select 至少 3 个语句，某些情况下会增加到 6 个，这问题至今没有完全解决，复杂联表查询就更不用说了。
而相比之下 drizzle 基本都保证只有一次操作，drizzle 出圈除了营销很大原因是因为性能实在太好，相比原生 sql 几乎感受不到额外开销。而 prisma 很容易碰上莫名其妙的慢 SQL ，一通排查发现是 prisma 自己的问题，再找到 issue 发现存在很久没有任何进展，因此只能无奈地回退拼接 SQL ，类似 issue 我看得都麻木了。
再来就是 DX ，drizzle 的 schema 与 typescript 融合得很完美。prisma 的自定义 schema 很垃圾，间接导致 prisma 的 ts 支持并不理想，json 类型至今还是 any ，使用社区插件又引入新的问题。Model 的设计首先是无法继承，被迫多写很多重复性字段定义，其次让连表查询相当困难，嵌套多不说，最恶心的是一些简单的连表+动态查询不得不回退 SQL 拼接。
prisma 主打的就是类型安全，而实际上很难能称之为安全，相反 drizzle 的设计是真的能避开很多低级运行时隐患，缺点是比较复杂的场景要跟 typescript 打架。

drizzle 的 bug 确实不少，但是对我来说暂时都有办法解决，生产环境目前没有遇到过问题。

[spider12]

可以参考我做的 SPA 模版，组合了当前最酷最先进开发体验最友好的一些库 https://github.com/faner11/react-antd