前端众多技术栈中，当今主流的技术框架究竟该怎么选？

[lalalaXxx]

前言

我是一名特别热爱前端的后端仔，自己平时就是学习前端技术，目前可以写 vue,ts,js ，wx,最近在学 react ，学习 react 的时候，发现很多好用的框架， 如 nextui, next.js ，Framer Motion 等....  感觉 react 跟 vue 差别还是挺大的；

需求

在自己学习前端的时候 感觉自己还是比较喜欢 css ，可以按照自己的想法来实现一些样式及效果，我发现自己很热爱，工作之余我都会写一些稀奇古怪的页面，就是心里面有自己的设计方案，然后用 css/ html 或者 ts js 来构建出来，但是学习的东西越多，感觉前端东西真的好杂， 就不像后端，java 一个 jdk 一个 spring 统治了..

像我目前所了解的前端的技术栈中 如 
node.js
next.js
nuxt.js
nest.js
vite
webpack
npm
pnpm
yarm
vue
react
ts
js
css
sass

哇 我写到这里我已经头都大了，而且前端的技术栈更新太快了，v1 和 v2 版本完全不兼容，甚至语法糖都变了。

最后

因为我喜欢写稀奇古怪的页面，最近我都会用 next.js 去写，他的路由模式 包括页面写法，都挺适合我的，但是我觉得他还是比 vue 要难理解的多，所以到现在我写代码还需要去看着官方文档去研究... 所以我发现一个问题， 以 Next.js 和 java 对比的话 是否可以理解为以下的关系？

node.js = jdk
react = java
next.js = spring
是这个逻辑吗，还有一种情况，我想写一个 react 项目，我使用 next.js 去编写，当然我又希望他效率能高一些，我又会选择 vite ，因为网络 我有会使用 pnpm 来装依赖， 就会产生各种而样的问题，我真的很头大，所以我想问问，针对我这种，就是纯对前端的热爱，喜欢最新的技术，而且喜欢写一些设计感的页面，大家推荐我学的主方向是什么？

[estk]

nextui.org 一把梭

[BeiChuanAlex]

前端搞来搞去其实底子还是：js 、css 、html 三剑客。

[MorningStar0]

有一说一，如果你对 SEO 没有要求的话，nextjs 可以不太关注。
你可以只用 react 然后用 nginx 来启动一个 static source server 。
vite 和 webpack 真的会为开发体验带来很多优化么？我觉不一定，尤其 vite 的 build 和 dev 是两种不同的路线，如果你想在 complie 阶段搞点花活，可能还需要额外的关注兼容问题。

[ck65]

目前转向了 remix + vite + tailwind 的技术栈，开发体验很不错，部署也非常轻松，不挑运行时想部署在哪很自由

[rabbbit]

我自己是觉得 Webpack Vite Rollup 这种东西都是工具，指不定啥时候就淘汰了（例如曾经的 Gulp Grunt 。选一个拿来用就好，用的时候翻翻文档。
也懒得去研究底层原理，又不是大厂手脚架开发。
自己写小项目就 Vite ，开发 package 就 Vite 、Rollup ，公司里就 Webpack 。
还有 npm yarn pnpm 也没感觉有啥区别，换个国内的镜像速度都差不多。就 npm 还不用担心某些包不兼容。

个人还是觉得研究不会过时的东西性价比更高，例如 CSS JavaScript 算法 图形学 WASM

[rabbbit]

前端很多页面一年的能写、三年的也能写，很轻易的就被替代了。
所以我现在就喜欢学那些不容易上手学习曲线陡峭的，例如 GLSL 、RxJs 、WASM 。

[jin5354]

@rabbbit 你搁那研究 glsl ，rxjs 有啥用，前端没几个落地应用
讲个笑话，我毕业前三年就是做 webgl 的，后来找不到工作转传统前端，还是切图写营销页面。
rxjs 更搞，我们团队现在用的就是某前端知名轮子哥手撸的 rxjs 数据流状态管理工具，因为太他妈难用了今年全部下线换成标准的 zustand valtio 那一套。不过轮子哥已经趁这个刷了一波简历跳槽出去当 CTO 了

[rabbbit]

@jin5354 我这里公司用啊，Web 3D 模型啥的用 Shader 写动画，部分组件或者页面内部用 Rxjs ，例如上传文件点击取消的时候中断某些操作很方便。
全局 Rxjs 管理数据状态是什么鬼？纯折腾人吧。

[rabbbit]

@jin5354
除了 AngularJS ，前端项目全部用 RxJs 那一套就是折腾人。谁建议的啊？不拉出去打一顿。

[rabbbit]

@jin5354
翻了下帖子，美团出来的找不到工作？现在经济这么差吗？

[huijiewei]

remix + vite + tailwindcss + shadcn ui 最大灵活性

[rabbbit]

@jin5354
看了下 Github ，原来是大佬。失敬失敬。想必找不到应该是指找不到大厂 30+ 的 WebGL 工作。
咱都是中小公司混口饭吃的，偶尔项目需要用点 Three.js 啥的，远够不上 WebGL 开发，更称不上研究 GLSL ，确实没用。
如有得罪，还望您大人不计小人过，宰相肚里能撑船。在此向您道歉。

[connection]

@jin5354 绝大情况下，为了面试

[SayHelloHi]

Next.js + tailwindcss + shadcn/ui

[orzorzorzorz]

提一嘴 angular ，填空式开发。五六年前我也在前端圈的三座大山前陷入囹圄，后来懒得折腾了，发现 angular 就是我想要的。那之后我可以去研究要用各类前端、后端库做的那个东西的来源了。
你要爱折腾，可以去把精力花在 webgl 这种，代表是 three.js 。搞来搞去，什么 ts(x)、nxxx.js ，最后都会转化成“你需要做什么”、“怎么做协作效率最高”的问题。到那时候回过头来看，当初争什么 react 、vue ，空格缩进的一万种 lint ，性能的虚空靶，都是浮云，最后还是可能还是要回到 java 跟 js 这种生态圈比较丰富的语言上，然后再在这上面挑。
如果我回到刚入行那会，我只会劝自己学好看文档和 debug 的能力，并用空余时间学好乐理，以保证自己平和稳定的情绪。
最后回到正题。图酷炫的东西可以去看看阮老师的周报，http://www.ruanyifeng.com/blog/atom.xml ，我个人觉得挺开阔视野的。

[jin5354]

@rabbbit 你本身就在 webgl 行业那精进一下挺好的。我是不推荐新人花力气研究这几项，没啥性价比。我最早在酷家乐入行，后来想跳槽出来发现头部厂子 webgl 项目就那么几个，招人很少（ echart ，antv ，XX 地图，还有美团无人机这种奇怪的部门），web3D 行业太小了，去美团就不搞 3d 了，只搞钱。Rxjs 也是，过重了，99.9%的前端项目都用不到。说到面试，不是垂类的话，面试官也不懂这些，也不好判断你的水平高低。我现在连欧拉角四元数啥的都忘光了，我是废物。

[rabbbit]

@jin5354
确实，WebGL 行业岗位很少，而且都是大厂。估计比起只懂一点 Threejs 前端，他们更喜欢招会 OpenGL 图形学的来写 WebGL 。
大部分公司都是用 Three.js 做数字孪生，说不好听一点就是加载了一堆模型然后加上点酷炫的动画和交互。
其实国外 Webgl 在网页 UI 、交互方面用的也挺多的，例如很多酷炫的网页动效都是用的 Shader ，例如： https://hape.io/

我个人是希望往这种类似于前端的“游戏行业技术美术”的方向发展，不过国内貌似这种岗位也挺少的，希望以后能有发展吧，权当是技术储备了。

[chuck1in]

@jin5354
@rabbbit
两位大佬，请问下 threejs 用的很少吗？
怎么听说有些小公司对这个还是有需求哦，比如弄一个模型放在网上用来给客户展示，这种难道没有需求吗？

[rabbbit]

@chuck1in
会用 Three.js 和 WebGL 开发是两回事，Three.js 是一个封装度很高的 3D 库，而 WebGL 是底层的 API 。粗略的比较可以说 WebgGL 开发就是开发针对某特定行业、需求的 Three.js 。
很多做传统制造业、toG 业务的公都司有 3D 可视化的需求，这些需求大部分都可以用 Three.js 完成，不需要都太多的图形学知识。

[subframe75361]

同样的情况，有一条心得：自己怎么舒服怎么来

从来不写 js ，脚本都是用 esno 启动的，vite/vitest/solid.js/unocss/kysely ，只用 eslint 不用 prettier ，原理啥的感兴趣的看一看，dom 操作全靠框架，没有轮子就造一个，主打一个开心就好

[chuck1in]

@rabbbit 明白了。我就是想问这个问题，也就是说如果这种传统行业如果有 3d 可视化的需求的话，只需要直接上手学 three.js 就可以了，不用再去 webgGL 了吧（如果自身没有深入需求，只需要完成业务功能）

[chuck1in]

@rabbbit 另外请教一下两位大佬现在 2D 动画还有必要学吗。不是 css 动画，是指 js 动画，canvas 那一套。单纯只讨论哪种国内的普通的公司，对这个是否还有需求，仅仅完成业务需求。不谈深入和精通。

[rabbbit]

@chuck1in
我不是大佬
初级前端 WebgGL 没必要去学，这个涉及的知识内容其实都不能算前端了。
Three.js 需不需要学也不好说，个人感觉这玩意跟一般的前端库没啥区别，有业务需求翻翻文档、谷歌啥的参考别人写的基本都能实现，可能就是 Shader 麻烦点，这玩意语法类似 C 不好调试，写起来像在做数学题。
普通的 UI 动效没啥难度，找个 js 动效库例如 GSAP 看文档都能写。
至于高级点的涉及 shader 的动效、canvas 啥的，这种要求会的公司也少。
感觉初级的时候还是应该打好基础，HTML CSS JavaScript Vue 和 React 选一个学习。

[courtier]

我感觉只要不是打算拿去面试，只是单纯的自己研究自己玩，随便选一个技术栈学下去都能用上好几年吧，没必要强求追新，面试除外...可能会问各种东西的原理源码之类

[wpzz]

专注后端吧，职业厚度比前端好

[cdlnls]

我觉得可以看看 Flutter ，兼容所有前端，ios android windows macos web 一步到位。
正好你也是后端，再写写接口，嘿嘿

[jin5354]

@chuck1in 2D 动画业务上现在用 lottie 的很多，不咋需要自己写。lottie 是设计师的工具直接导出来的，你直接调用就行，没难度（只要公司还有正经设计师，不是啥都让前端自己想着做）。3D 中小厂有需求，大厂需求比较少。

[Immortal]

自己项目我都是 sveltekit 写得爽
公司的一般都是 React/NextJS 和 Vue/NuxtJS 多,毕竟生态好

[wm5d8b]

如果只是热爱前端，不想拿起饭碗的话，我觉得还是学学前端框架的设计思想吧，对后端的借鉴意义蛮大的
node.js = jre
html 、js 、css = java
react 、vue = 语法糖

[cocong]

不要期待一次选对，选错就重来，问题不大，没什么好纠结。

[theprimone]

@huijiewei #11 SSR 呢？

[zhhbstudio]

喜欢 vue 想用 nextjs => nuxtjs

[hesetiema]

3D 动画业务上现在也有用 spline 的，不过它刚出来那时候性能不怎么样，不知道现在优化得怎么样。

[chuck1in]

@Immortal 用过 sveltekit ，别的没用过。不过想问下这个和 NuxtJS 相比哪个便利性更强呢？目前一直用的 svelte ，国内似乎用这个的很少。

[Immortal]

@chuck1in #34
理论数据上是 Svelte,体感上差异不大.具体数据来自: https://krausest.github.io/js-framework-benchmark/
国内用 Vue 多我的理解是一些原因:
1. 简单好上手,所以很多培训机构主推.
2. 国人开发,对中文文档的支持较好,不像 React 那些虽然有中文站,但是有时候会落后一些版本
3. 生态丰富,和 React 可以有一拼

[chuck1in]

@Immortal 感谢。不过 svelte 我理解应该也很好简单上手，估计国内用 vue 多就是因为中文文档支持的很好。
不知道现在前端今后发展的趋势是什么？ react 真的有点不想学了，同样只是为了把页面做出来，同样也能实现工程化，react 那么重的思维负担是不是有点本末倒置了。

[Immortal]

@chuck1in #36
Svelte 和 Vue 有点像,都挺好上手的,但是单文件组件不如 React 那样灵活,我还在观察 SolidJs.
前端趋势还是和之前 1-2 年差不多,并没有像前几年那么一天一个样了.主流还是 Vue 和 React.如果你是做前端的,React 是避不开的,也没必要太抵触.
而且我的理解上 React 更好做工程化一些.虽然现在 NextJS 到处被吐槽,但也出了个 Astro+React/Svelte 的组合以及 Remix 来替代.
React 在国外的前端圈子我感觉比重还是很大的,油管上能找到很多 React 模仿项目的视频,Vue 相对少一些.

[Immortal]

@Immortal #37
补充说明下,推特上很多国内的开发者都是做前端的,看看他们交流基本就能对前端环境感觉个 7788.

[chuck1in]

@Immortal 感谢，非常详细的回复。