前端众多技术栈中,当今主流的技术框架究竟该怎么选? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lalalaXxx
V2EX    前端开发

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

  •  
  •   lalalaXxx 2024-03-10 11:55:38 +08:00 9788 次点击
    这是一个创建于 655 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    我是一名特别热爱前端的后端仔,自己平时就是学习前端技术,目前可以写 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 来装依赖, 就会产生各种而样的问题,我真的很头大,所以我想问问,针对我这种,就是纯对前端的热爱,喜欢最新的技术,而且喜欢写一些设计感的页面,大家推荐我学的主方向是什么? 
    39 条回复    2024-03-15 17:50:58 +08:00
    estk
        1
    estk  
       2024-03-10 12:37:32 +08:00 via iPhone   1
    nextui.org 一把梭
    BeiChuanAlex
        2
    BeiChuanAlex  
       2024-03-10 13:01:56 +08:00
    前端搞来搞去其实底子还是:js 、css 、html 三剑客。
    MorningStar0
        3
    MorningStar0  
       2024-03-10 13:21:01 +08:00
    有一说一,如果你对 SEO 没有要求的话,nextjs 可以不太关注。
    你可以只用 react 然后用 nginx 来启动一个 static source server 。
    vite 和 webpack 真的会为开发体验带来很多优化么?我觉不一定,尤其 vite 的 build 和 dev 是两种不同的路线,如果你想在 complie 阶段搞点花活,可能还需要额外的关注兼容问题。
    mogita
        4
    mogita  
       2024-03-10 13:31:27 +08:00   1
    目前转向了 remix + vite + tailwind 的技术栈,开发体验很不错,部署也非常轻松,不挑运行时想部署在哪很自由
    rabbbit
        5
    rabbbit  
       2024-03-10 13:49:02 +08:00
    我自己是觉得 Webpack Vite Rollup 这种东西都是工具,指不定啥时候就淘汰了(例如曾经的 Gulp Grunt 。选一个拿来用就好,用的时候翻翻文档。
    也懒得去研究底层原理,又不是大厂手脚架开发。
    自己写小项目就 Vite ,开发 package 就 Vite 、Rollup ,公司里就 Webpack 。
    还有 npm yarn pnpm 也没感觉有啥区别,换个国内的镜像速度都差不多。就 npm 还不用担心某些包不兼容。

    个人还是觉得研究不会过时的东西性价比更高,例如 CSS Javascript 算法 图形学 WASM
    rabbbit
        6
    rabbbit  
       2024-03-10 13:58:52 +08:00
    前端很多页面一年的能写、三年的也能写,很轻易的就被替代了。
    所以我现在就喜欢学那些不容易上手学习曲线陡峭的,例如 GLSL 、RxJs 、WASM 。
    jin5354
        7
    jin5354  
       2024-03-10 15:05:46 +08:00
    @rabbbit 你搁那研究 glsl ,rxjs 有啥用,前端没几个落地应用
    讲个笑话,我毕业前三年就是做 webgl 的,后来找不到工作转传统前端,还是切图写营销页面。
    rxjs 更搞,我们团队现在用的就是某前端知名轮子哥手撸的 rxjs 数据流状态管理工具,因为太他妈难用了今年全部下线换成标准的 zustand valtio 那一套。不过轮子哥已经趁这个刷了一波简历跳槽出去当 CTO 了
    rabbbit
        8
    rabbbit  
       2024-03-10 15:13:07 +08:00
    @jin5354 我这里公司用啊,Web 3D 模型啥的用 Shader 写动画,部分组件或者页面内部用 Rxjs ,例如上传文件点击取消的时候中断某些操作很方便。
    全局 Rxjs 管理数据状态是什么鬼?纯折腾人吧。
    rabbbit
        9
    rabbbit  
       2024-03-10 15:14:57 +08:00
    @jin5354
    除了 AngularJS ,前端项目全部用 RxJs 那一套就是折腾人。谁建议的啊?不拉出去打一顿。
    rabbbit
        10
    rabbbit  
       2024-03-10 15:18:53 +08:00
    @jin5354
    翻了下帖子,美团出来的找不到工作?现在经济这么差吗?
    huijiewei
        11
    huijiewei  
       2024-03-10 15:38:41 +08:00   2
    remix + vite + tailwindcss + shadcn ui 最大灵活性
    rabbbit
        12
    rabbbit  
       2024-03-10 15:40:15 +08:00
    @jin5354
    看了下 Github ,原来是大佬。失敬失敬。想必找不到应该是指找不到大厂 30+ 的 WebGL 工作。
    咱都是中小公司混口饭吃的,偶尔项目需要用点 Three.js 啥的,远够不上 WebGL 开发,更称不上研究 GLSL ,确实没用。
    如有得罪,还望您大人不计小人过,宰相肚里能撑船。在此向您道歉。
    connection
        13
    connection  
       2024-03-10 15:57:44 +08:00
    @jin5354 绝大情况下,为了面试
    SayHelloHi
        14
    SayHelloHi  
       2024-03-10 18:23:44 +08:00   1
    Next.js + tailwindcss + shadcn/ui
    orzorzorzorz
        15
    orzorzorzorz  
       2024-03-10 19:27:18 +08:00   1
    提一嘴 angular ,填空式开发。五六年前我也在前端圈的三座大山前陷入囹圄,后来懒得折腾了,发现 angular 就是我想要的。那之后我可以去研究要用各类前端、后端库做的那个东西的来源了。
    你要爱折腾,可以去把精力花在 webgl 这种,代表是 three.js 。搞来搞去,什么 ts(x)、nxxx.js ,最后都会转化成“你需要做什么”、“怎么做协作效率最高”的问题。到那时候回过头来看,当初争什么 react 、vue ,空格缩进的一万种 lint ,性能的虚空靶,都是浮云,最后还是可能还是要回到 java 跟 js 这种生态圈比较丰富的语言上,然后再在这上面挑。
    如果我回到刚入行那会,我只会劝自己学好看文档和 debug 的能力,并用空余时间学好乐理,以保证自己平和稳定的情绪。
    最后回到正题。图酷炫的东西可以去看看阮老师的周报,http://www.ruanyifeng.com/blog/atom.xml ,我个人觉得挺开阔视野的。
    jin5354
        16
    jin5354  
       2024-03-10 20:00:55 +08:00   2
    @rabbbit 你本身就在 webgl 行业那精进一下挺好的。我是不推荐新人花力气研究这几项,没啥性价比。我最早在酷家乐入行,后来想跳槽出来发现头部厂子 webgl 项目就那么几个,招人很少( echart ,antv ,XX 地图,还有美团无人机这种奇怪的部门),web3D 行业太小了,去美团就不搞 3d 了,只搞钱。Rxjs 也是,过重了,99.9%的前端项目都用不到。说到面试,不是垂类的话,面试官也不懂这些,也不好判断你的水平高低。我现在连欧拉角四元数啥的都忘光了,我是废物。
    rabbbit
        17
    rabbbit  
       2024-03-10 20:34:38 +08:00
    @jin5354
    确实,WebGL 行业岗位很少,而且都是大厂。估计比起只懂一点 Threejs 前端,他们更喜欢招会 OpenGL 图形学的来写 WebGL 。
    大部分公司都是用 Three.js 做数字孪生,说不好听一点就是加载了一堆模型然后加上点酷炫的动画和交互。
    其实国外 Webgl 在网页 UI 、交互方面用的也挺多的,例如很多酷炫的网页动效都是用的 Shader ,例如: https://hape.io/

    我个人是希望往这种类似于前端的“游戏行业技术美术”的方向发展,不过国内貌似这种岗位也挺少的,希望以后能有发展吧,权当是技术储备了。
    chuck1in
        18
    chuck1in  
       2024-03-10 21:01:56 +08:00
    @jin5354
    @rabbbit
    两位大佬,请问下 threejs 用的很少吗?
    怎么听说有些小公司对这个还是有需求哦,比如弄一个模型放在网上用来给客户展示,这种难道没有需求吗?
    rabbbit
        19
    rabbbit  
       2024-03-10 21:20:36 +08:00
    @chuck1in
    会用 Three.js 和 WebGL 开发是两回事,Three.js 是一个封装度很高的 3D 库,而 WebGL 是底层的 API 。粗略的比较可以说 WebgGL 开发就是开发针对某特定行业、需求的 Three.js 。
    很多做传统制造业、toG 业务的公都司有 3D 可视化的需求,这些需求大部分都可以用 Three.js 完成,不需要都太多的图形学知识。
    subframe75361
        20
    subframe75361  
       2024-03-10 21:23:27 +08:00
    同样的情况,有一条心得:自己怎么舒服怎么来

    从来不写 js ,脚本都是用 esno 启动的,vite/vitest/solid.js/unocss/kysely ,只用 eslint 不用 prettier ,原理啥的感兴趣的看一看,dom 操作全靠框架,没有轮子就造一个,主打一个开心就好
    chuck1in
        21
    chuck1in  
       2024-03-10 21:31:00 +08:00
    @rabbbit 明白了。我就是想问这个问题,也就是说如果这种传统行业如果有 3d 可视化的需求的话,只需要直接上手学 three.js 就可以了,不用再去 webgGL 了吧(如果自身没有深入需求,只需要完成业务功能)
    chuck1in
        22
    chuck1in  
       2024-03-10 21:32:39 +08:00
    @rabbbit 另外请教一下两位大佬现在 2D 动画还有必要学吗。不是 css 动画,是指 js 动画,canvas 那一套。单纯只讨论哪种国内的普通的公司,对这个是否还有需求,仅仅完成业务需求。不谈深入和精通。
    rabbbit
        23
    rabbbit  
       2024-03-10 21:57:58 +08:00   1
    @chuck1in
    我不是大佬
    初级前端 WebgGL 没必要去学,这个涉及的知识内容其实都不能算前端了。
    Three.js 需不需要学也不好说,个人感觉这玩意跟一般的前端库没啥区别,有业务需求翻翻文档、谷歌啥的参考别人写的基本都能实现,可能就是 Shader 麻烦点,这玩意语法类似 C 不好调试,写起来像在做数学题。
    普通的 UI 动效没啥难度,找个 js 动效库例如 GSAP 看文档都能写。
    至于高级点的涉及 shader 的动效、canvas 啥的,这种要求会的公司也少。
    感觉初级的时候还是应该打好基础,HTML CSS Javascript Vue 和 React 选一个学习。
    courtier
        24
    courtier  
       2024-03-10 22:40:11 +08:00
    我感觉只要不是打算拿去面试,只是单纯的自己研究自己玩,随便选一个技术栈学下去都能用上好几年吧,没必要强求追新,面试除外...可能会问各种东西的原理源码之类
    wpzz
        25
    wpzz  
       2024-03-10 22:47:33 +08:00
    专注后端吧,职业厚度比前端好
    cctv6
        26
    cctv6  
       2024-03-10 22:51:04 +08:00
    我觉得可以看看 Flutter ,兼容所有前端,ios android windows macos web 一步到位。
    正好你也是后端,再写写接口,嘿嘿
    jin5354
        27
    jin5354  
       2024-03-10 23:38:27 +08:00   1
    @chuck1in 2D 动画业务上现在用 lottie 的很多,不咋需要自己写。lottie 是设计师的工具直接导出来的,你直接调用就行,没难度(只要公司还有正经设计师,不是啥都让前端自己想着做)。3D 中小厂有需求,大厂需求比较少。
    Immortal
        28
    Immortal  
       2024-03-11 02:27:48 +08:00
    自己项目我都是 sveltekit 写得爽
    公司的一般都是 React/NextJS 和 Vue/NuxtJS 多,毕竟生态好
    wm5d8b
        29
    wm5d8b  
       2024-03-11 08:46:49 +08:00 via Android   1
    如果只是热爱前端,不想拿起饭碗的话,我觉得还是学学前端框架的设计思想吧,对后端的借鉴意义蛮大的
    node.js = jre
    html 、js 、css = java
    react 、vue = 语法糖
    cocong
        30
    cocong  
       2024-03-11 08:52:05 +08:00
    不要期待一次选对,选错就重来,问题不大,没什么好纠结。
    theprimone
        31
    theprimone  
       2024-03-11 09:11:10 +08:00
    @huijiewei #11 SSR 呢?
    zhhbstudio
        32
    zhhbstudio  
       2024-03-11 09:29:54 +08:00
    喜欢 vue 想用 nextjs => nuxtjs
    hesetiema
        33
    hesetiema  
       2024-03-12 17:57:39 +08:00
    3D 动画业务上现在也有用 spline 的,不过它刚出来那时候性能不怎么样,不知道现在优化得怎么样。
    chuck1in
        34
    chuck1in  
       2024-03-13 12:18:24 +08:00
    @Immortal 用过 sveltekit ,别的没用过。不过想问下这个和 NuxtJS 相比哪个便利性更强呢?目前一直用的 svelte ,国内似乎用这个的很少。
    Immortal
        35
    Immortal  
       2024-03-13 22:25:02 +08:00
    @chuck1in #34
    理论数据上是 Svelte,体感上差异不大.具体数据来自: https://krausest.github.io/js-framework-benchmark/
    国内用 Vue 多我的理解是一些原因:
    1. 简单好上手,所以很多培训机构主推.
    2. 国人开发,对中文文档的支持较好,不像 React 那些虽然有中文站,但是有时候会落后一些版本
    3. 生态丰富,和 React 可以有一拼
    chuck1in
        36
    chuck1in  
       2024-03-14 08:06:54 +08:00
    @Immortal 感谢。不过 svelte 我理解应该也很好简单上手,估计国内用 vue 多就是因为中文文档支持的很好。
    不知道现在前端今后发展的趋势是什么? react 真的有点不想学了,同样只是为了把页面做出来,同样也能实现工程化,react 那么重的思维负担是不是有点本末倒置了。
    Immortal
        37
    Immortal  
       2024-03-15 15:11:44 +08:00
    @chuck1in #36
    Svelte 和 Vue 有点像,都挺好上手的,但是单文件组件不如 React 那样灵活,我还在观察 SolidJs.
    前端趋势还是和之前 1-2 年差不多,并没有像前几年那么一天一个样了.主流还是 Vue 和 React.如果你是做前端的,React 是避不开的,也没必要太抵触.
    而且我的理解上 React 更好做工程化一些.虽然现在 NextJS 到处被吐槽,但也出了个 Astro+React/Svelte 的组合以及 Remix 来替代.
    React 在国外的前端圈子我感觉比重还是很大的,油管上能找到很多 React 模仿项目的视频,Vue 相对少一些.
    Immortal
        38
    Immortal  
       2024-03-15 15:12:28 +08:00
    @Immortal #37
    补充说明下,推特上很多国内的开发者都是做前端的,看看他们交流基本就能对前端环境感觉个 7788.
    chuck1in
        39
    chuck1in  
       2024-03-15 17:50:58 +08:00
    @Immortal 感谢,非常详细的回复。
    关于     帮助文档     自助推广系统/a>     博客     API     FAQ     Solana     2768 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 25ms UTC 14:41 PVG 22:41 LAX 06:41 JFK 09:41
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86