2024年你觉得前端圈会有哪些变化?

趋势一：新的样式解决方案和组件库将持续涌现

在 Web 网站样式方案的选择上，开发人员可谓是富得流油。除了大量的基于 Angular、React 和 Vue 的组件库之外，还有 40 种以上的 CSS 框架和 40 种以上的 CSS-in-JS 库可以选择。

2023 年，我们看到了诸如 Shadcn UI、Ark UI、Panda CSS 和 StyleX（来自 Meta）等新发布的样式解决方案。除此之外，还有 Lemon Squeezy 开源的 React UI 库 Wedges，该库在本文撰写的前几天才刚刚发布。

随着开发人员和开源社区不断分享他们在 UI 设计和网站构建上的独特方法，将来我们有望看到更多的网站样式解决方案的出现。

除了新的样式解决方案会不断发布之外，未来以下这些方面也值得我们期待：

现有解决方案的持续更新。
CSS-in-JS 解决方案将被抛弃，因为该方案不仅会增加运行时开销、构建包的大小，还无法很好地与 SSR 配合使用。
Open Props 将取代 Tailwind CSS 的宝座。根据《2023 年 CSS 现态》这篇文章的数据，开发人员对 Tailwind CSS 的兴趣值从 2022 年的 50.1% 下降到了 2023 年的 47%。与此同时，Open Props 的关注度从 2022 年的不到 10% 上升到了 2023 年的 60%。

趋势二：利用 AI 来增强开发流程

毫不夸张地说，生成式 AI 已经在全球的许多行业中掀起了风暴。它也将彻底改变 Web 开发的现状和众多开发人员构建网站的方式。

Vercel 发布的 v0 就是一个活生生的例子，它是一个基于提示词生成用户界面的工具。例如，我们可以通过提示词让 v0 创建一个电子商务风格的 dashboard 页面。下图就是 v0 的输出结果。

除了 v0，Vercel 在推动 AI 的应用落地上也是不遗余力。他们发布了 AI SDK ，帮助开发者轻松构建 AI 驱动的应用程序。目前该 SDK 每周的 npm 下载量已超过 85000 次，这也是人们在 Vercel 上注册和创建 API 应用程序的原因之一（译注：在 Vercel 上，基于其提供的 AI 能力可以很轻松的创建 AI 驱动的应用）。

虽然人工智能不会抢走我们的饭碗，但越来越多的开发人员正将其整合到开发流程中。根据 Retool 的《2023 年 AI 现状》报告，自 2022 年以来，57% 的开发人员减少了对 Stack Overflow 的使用，甚至有 10% 的开发人员因为有了 ChatGPT 和 GitHub Copilot 而不再使用 Stack Overflow。

除了越来越多的开发人员将通过 AI 来简化开发流程之外，预计会有更多的公司将 AI 集成到自己的产品中，GitHub 的 Copilot 和 Sourcegraph 的 AI 编码助手 Cody 都是很好的例子。

趋势三：前端、后端和全栈开发之间的界限将越来越模糊

在早期的 Web 开发中，开发人员遵循的原则是 "关注点分离 "。因此，前端、后端和全栈开发人员被分配在了不同的系统和领域中。

然而，随着时间的推移，这些界限变得越来越模糊：

Next.js 提供了路由处理程序（Route Handlers），它允许我们处理 HTTP 请求、从数据库获取数据、运行服务器端逻辑以及执行从数据库获取数据等任务。
React 18 内置了 RSC（React Server Components），该功能允许我们预渲染应用程序，并在服务器端而不是客户端进行数据库查询，从而进一步模糊了两者之间的界限。这意味着我们可以直接在 React 组件中编写数据库查询功能。
Next.js 还发布了 Server Actions 功能，该功能允许我们直接在客户端上定义函数操作服务器上的数据。

除了这些发展之外，诸如 Supabase、Appwrite 和 Xata 等后端即服务（BaaS）解决方案的出现和流行，也让前端开发人员可以更容易地创建全栈应用程序。借助这些新工具和技术，随着前端开发人员对后端和全栈开发的不断探索，我们可以期待更多跨领域专业人才的出现。