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

《2023 的 Javascript 星趋势》在 1 月就出来了，当时略略看了一下，并没有想太多。

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

React 与 Vue 生态对比

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

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

排名	React	Vue
1	UI	全栈
2	白板	演示文稿
3	全栈	后台管理系统
4	状态管理	hook
5	后台管理系统	UI
6	文档	文档
7	全栈框架集成	UI
8	全栈框架UI	框架
9	后台管理系统	UI
10	无服务栈	状态管理

可以看到 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 开发的工作也拿过来？

欢迎关注公众号：

陈佬昔的编程人生———40岁+程序员的个人生活、学习与工作分享