上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

前端趋势:全栈也许已经是必选项

[复制链接]
  • TA的每日心情
    开心
    10 小时前
  • 签到天数: 38 天

    [LV.5]常住居民I

    61

    主题

    37

    回帖

    204

    积分

    高级工程师

    积分
    204
    发表于 2025-2-13 11:47:39 | 显示全部楼层 | 阅读模式

    过年期间,回想起来前端,似乎感觉到这次有一点不一样:也许,全栈的时代已经到来了。

    React 与 Vue 生态对比

    首先,我们来看看 React 与 Vue 生态的星趋势对比:

    上图中,React 整个生态的星星数远超于 Vue,第十名都要比 Vue 第一名的多。我们将其做一个分类:

    可以看到 React 这边的生态链基本成熟,几乎每一个分类都有一个上榜的库,不再像 Vue 那样还在卷 UI 框架。

    在全栈方面,Vue 的首位就是全栈 Nuxt。

    React 的 Next.js 虽然不在首位,但是服务端/全栈相关的内容就占了 4 个,其中包含第 10 名的无服务栈。另外值得注意的是,React 这边还有服务端组件的概念。Shadcn/ui 能占到第一位,因为它基于无头 UI Radix 实现的,在服务端组件也能运用。所以,服务端/全栈在 React 中占的比重相当大的。

    这样看来,前端往服务端进发已经成为一个必然趋势。

    htmx 框架的倒退

    再看看框架这边,htmx 在星趋势里,排行第二位,2023增长的星星数为 15.6K,与第一位的 React 颇为相近。

    而 htmx 也是今年讨论度最高的。

    在我经历过前后端不分离的阶段中,使用 jsp 生成前端页面,js 更多是页面炫技的工具。然后在 jQuery + Ajax 得到广泛应用之后,才真正有前后端分离的项目。

    htmx 的出现,不了解的人,可能觉得是倒退到 Java + jQuery + Ajax 的前后端分离状态。但是,写过例子之后,我发现,它其实是倒退到了前后端不分离的阶段。

    用 java 也好,世界上最好的 php 也好,或者用现在的 nodejs 服务,都能接入 htmx。你只要在服务端返回 html 即可。

    ** nodejs fastity 写的一个例子 **/
    
    import fastify from 'fastify'
    
    import fastifyHtml from 'fastify-html'
    
    import formbody from '@fastify/formbody';
    
    const app = fastify()
    
    await app.register(fastifyHtml)
    
    await app.register(formbody);
    
    // 省略首页引入 htmx
    
    // 首页的模板,提供一个按钮,点击后请求 html,然后将请求返回的内容渲染到 parent-div 中
    
    app.get('/', async (req, reply) => {
    
      const name = req.query.name || 'World'
    
      return reply.html`
    
    <h1>Hello ${name}</h1><button hx-post="/clicked"
    
      hx-trigger="click"
    
      hx-target="#parent-div"
    
      hx-swap="outerHTML">
    
      Click Me!
    
    </button>
    
    <div id="parent-div"></div>`, reply
    
    })
    
    // 请求返回 html
    
    app.post('/clicked', (req, reply) => {
    
      reply.html`<h1>Clicked!</h1>`;
    
    })
    
    await app.listen({ port: 3000 })
    

    也许大家会觉得离谱,但是很显然,事情已经开始发生了变化,后端也来抢前端饭碗了。

    htmx 在 github 上已经有不少跟随者,能搜出前端代码已有不少,前三就有基于 Python 语言的 Django 服务端框架。

    jQuery 见势头不错,今年也更新了 4.0 的 beta 版本,对现代浏览器提供了更好的支持。这一切似乎为旧架构重回大众视野做好了准备。

    企业角度

    站在企业角度来看,一个人把前后端都干了不是更好吗?

    的确如此。前后端一把撸更符合企业的利益。国外的小公司更以全栈作为首选项。

    也许有人觉得国情不同,但是在我接触的前端群里,这两年都有人在群里说他们公司前后端分离的情况。

    还有的人还喜欢大厂那一套,注意分工合作,但是其实大厂里遗留项目也不少,有的甚至是 php;还有新的实验项目,如果能投入最少人力,快速试错,这种全栈的框架自然也是最优选择。

    我并不是说,前后端分离不值得。但是目前已经进入 AI 赛道,企业对后台系统的开发,并不愿意投入更多了。能用就行已经成为当前企业的目标,自然我们也应该跟着变化。

    全栈破局

    再说说前端已死的论调。我恰恰觉得这是最好做改变的时机。

    在浏览器对新技术支持稳定,UI 框架趋同,UI 组件库稳定之后,前端不再需要为浏览器不兼容素手无策了,不再需要苦哈哈地为1个像素争辩不停了,也不再需要为产品莫名其妙的交互焦头烂额了。

    这并不意味着前端已死,反而可能我们某个阶段的任务完成了,后面有更重要的任务交给我们。也许,全栈就是一个破局。

    在云服务/云原生如此普遍的情况下,语言不再是企业开发考虑的主要因素,这也为 nodejs 全栈铺平了道路。

    前端一直拣最苦最脏的话来做,从 UI 中拿到了切图的工作,然后接手了浏览器兼容的活,后来又从后端拿到了渲染页面的工作。

    那我们为何不再进一步,主动把 API 开发的工作也拿过来?

    这里顺便给大家分享一下,民族企业大厂,前后端测试捞人,感兴趣的来试一试!

  • TA的每日心情
    开心
    7 小时前
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    0

    主题

    19

    回帖

    14

    积分

    助理工程师

    积分
    14
    发表于 2025-2-13 12:01:52 | 显示全部楼层
    我的偶像 tampermonkey 937.0159751619618
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表