2024 年我们最期待的 Web 框架

介绍

2024 年即将到来，我们正计划着新的一年，思考在新的一年里可以做什么或学习什么。现在正是寻找新的一年值得学习的框架、了解它们的功能并发现它们的独特之处的最佳时机。我们参考了 2023 年JS 新星榜单，力求做到尽可能客观。对于每个推荐的框架，我们都重点介绍了它们最大的优势，以便您了解它们的优势所在，并了解哪些因素会让您跃跃欲试！

HTMX——回归基础🚲

适用对象：

• 你想少写 JavaScript
• 您想要更简单、以超媒体为中心的代码

如果不从一个以和平的前端库为荣的库开始，那将是一种罪过。HTMX​​ 在 2023 年人气飙升，在过去一年中获得了大部分 GitHub 星标。HTMX​​ 不是普通的 JS 框架。如果您使用 HTMX 工作，那么您的大部分时间都会花在超媒体的世界中，与我们通常对现代 Web 开发的 JS 重度视角完全不同，从一双完全不同的眼睛看待 Web 开发。HTMX​​ 利用 HATEOAS（超媒体作为应用程序状态的引擎）概念的强大功能，使开发人员能够直接从 HTML 访问浏览器功能，而无需使用 JavaScript。

这也证明了，通过发布精彩的表情包并利用口碑作为主要营销手段，你就能获得人气和认可。不仅如此，你还可以成为HTMX 的CEO！它吸引了许多开发者尝试这种网站建设方式，并重新思考他们目前的做法。所有这些都让这个库在 2024 年的未来充满期待。

Wasp - 全栈，开箱即用🚀

适用对象：

• 你想快速发布全栈应用程序
• 你想在一个优秀的一体化解决方案中继续使用 React 和 Node.js，而不需要手动挑选堆栈的每个部分
• 你想要一个免费的 React & Node.js saas 模板，里面所有东西都是预先配置好的 - Open SaaS

对于那些希望通过这款工具轻松掌控自身堆栈的人来说，Wasp 就是最佳选择！Wasp是一个专业的全栈框架，它利用其编译器，快速轻松地为您的应用创建数据库、后端和前端。它使用了 React、Node.js 和 Prisma，这些都是全栈 Web 开发人员最常用的工具。

Wasp 的核心是 main.wasp 文件，它可以满足您的大多数需求。在这里，您可以定义：

• 全栈身份验证
• 数据库架构
• 异步作业，无需额外的基础设施
• 简单灵活的部署
• 全栈类型安全
• 电子邮件发送（Sendgrid、MailGun、SMTP 服务器等）
• 以及更多……

最酷的是？你的 Wasp 应用经过编译步骤后，输出是一个标准的 React + Vite 前端、Node.js 后端和 PostgreSQL 数据库。之后，你只需一个命令就能轻松将所有内容部署到Fly.io等应用。

尽管有些人可能认为 Wasp 固执己见的立场是负面的，但这恰恰是 Wasp 众多全栈功能背后的驱动力。有了 Wasp，单个开发者或小型团队启动全栈项目变得更加容易，尤其是在使用预制模板或OpenSaaS作为 SaaS 启动器的情况下。由于项目核心定义明确，因此项目启动非常容易，甚至可能在几天内就打造出自己的全栈 SaaS 系统！
更棒的是，由于 Wasp 使用的技术已经成熟，大多数 Web 开发者的既有知识仍然适用于 Wasp。

Solid.js - 一流的反应性 ↔️

适用对象：

• 如果你想要高度反应的代码
• 现有的 React 开发人员想要尝试一些性能高、学习曲线低的东西

Solid.js是一个性能非常强大的 Web 框架，与 React 有一些相似之处。例如，两者都使用 JSX，利用基于函数的方法处理组件，但它不使用虚拟 DOM，而是将代码转换为原生 JS。尽管如此，它更以其利用信号、备忘录和效果实现细粒度响应的方法而闻名。信号仍然是 Solid 中最简单、最广为人知的原语。它们包含值以及它们的 getter 和 setter 函数，允许框架根据需要在 DOM 中的精确位置观察和更新更改，而 React 则重新渲染整个组件。

Solid.js 不仅使用了 JSX，还对其进行了增强。它提供了一些很酷的新功能，例如 Show 组件，可以启用 JSX 元素的条件渲染；以及 For 组件，可以更轻松地在 JSX 中迭代集合。另一个重要特性是，它还有一个名为 Solid Start（目前处于测试阶段）的元框架，该框架允许用户根据自己的偏好，使用基于文件的路由、操作、API 路由和中间件等功能，以不同的方式渲染应用程序。

Astro - 静态网站之王👑

适用对象：

• 如果你想要一个优秀的博客工具，CMS 密集型网站
• 可以集成其他库和框架的框架

如果您在 2023 年构建了一个内容驱动的网站，那么您很有可能选择了Astro作为实现它的框架！Astro 是另一个使用不同架构理念脱颖而出的框架。Astro 的架构是“岛”架构。在 Astro 的语境中，“岛”是指页面上任何能够从静态内容海洋中脱颖而出的交互式 UI 组件。一个页面可以包含任意数量的“岛”，因为它们彼此独立运行，但它们也可以共享状态并相互通信，这非常实用。

Astro 的另一个有趣之处在于，他们的方法允许用户使用不同的前端框架（例如 React、Vue、Solid）来构建他们的网站。因此，开发人员可以轻松地利用他们现有的知识构建网站，也可以利用现有的组件将其集成到 Astro 网站中。

Svelte - 简单有效🎯

适用对象：

• 你想要一个易于学习的框架
• 编写简单，代码执行速度快

Svelte是另一个试图通过尽可能简单易用且对初学者友好的框架，来简化和加速 Web 开发。它是一个非常容易学习的框架，因为要拥有一个响应式属性，你必须在 HTML 模板中声明并使用它。每当 JavaScript 中的值以编程方式更新时（例如，通过触发按钮的 onClick 事件），它都会反映在 UI 上，反之亦然。

Svelte 的下一步将是引入 Rune。Rune 是 Svelte 处理响应式代码的方式，旨在简化大型应用的处理。类似于 Solid.js 的信号，Rune 提供了一种直接利用函数式语句来访问应用响应式状态的方法。与 Svelte 当前的工作方式不同，Rune 允许用户精确定义整个脚本中哪些部分是响应式的，从而提高组件的性能。与 Solid 和 Solid Start 类似，Svelte 也拥有自己的框架，名为 SvelteKit。SvelteKit 为用户提供了一种快速启动基于 Vite 的 Svelte 应用的方法。它提供路由、构建优化、不同的渲染和预渲染方式、图像优化等功能。

Qwik——非常快🚤

适用对象：

• 如果你想要一个高性能的 Web 应用
• 现有的 React 开发人员想要尝试一些性能高、学习曲线低的东西

我们列表中最后一个，但同样重要的框架是Qwik。Qwik是另一个利用 JSX 和函数式组件的框架，类似于 Solid.js 的做法，它为基于 React 的开发者提供了一个熟悉的环境，以便他们能够尽快上手。正如其名，Qwik 的主要目标是实现应用程序的最高性能和执行速度。

Qwik 通过利用“可恢复性”的概念来实现其速度。简而言之，可恢复性基于在服务器上暂停执行并在客户端恢复执行的理念，而无需重新播放和下载所有应用程序逻辑。这种行为是通过延迟 JavaScript 代码的执行和下载来实现的，除非需要处理用户交互，这是一件非常好的事情。它既可以提高整体速度，又可以将带宽消耗降至最低，从而实现近乎即时的加载。

结论

我们提到的所有这些框架和库之间最大的共同点就是熟悉度。每个人都试图以一种基于现有知识的方式来接触潜在的新开发人员，而不是尝试一些全新的事物，这是一个非常酷的概念。

当然，还有很多库和框架在整篇文章中没有提及，但至少值得一提。例如，我们有 Angular，除了新的 logo 和文档外，它还包含信号和新的控制流。还有 Remix，它正在添加对 Vite、React 服务器组件和新的 Remix SPA 模式的支持。最后，我们不能忘记 Next.js，它在过去几年里几乎成为了 React 开发者的默认工具，并为 React 的新功能铺平了道路。