2024年令人眼前一亮的Web框架

本文翻译自 dev.to/wasp/web-fr…

感谢您的阅读！

介绍

2024年正向我们走来，我们怀着满腔热情为新的一年制定计划，探索未来一年可以学习或实现的目标。此时此刻，正是探寻来年值得学习的框架、理解其功能和特色的最佳时刻。我们以2023年JS 新星名单为指引，力求保持客观公正的态度。对于每一个特色框架，我们都将突出其最大的优势，使您能够全面理解它们的优点，从而选择适合自己的框架进行尝试！

HTMX - 返璞归真🚲

为谁而设：

• 
  
• 你希望减少JavaScript的编写量
  
• 你希望代码更简单，以超媒体为中心
  

HTMX在2023年迅速走红，过去一年间在GitHub上赢得了大量星标。HTMX并非普通的JS框架。如果你使用HTMX，你将大部分时间都花在超媒体的世界中，以与我们通常对现代Web开发的JS密集型视角完全不同的视角看待Web开发。HTMX利用HATEOAS（Hypermedia作为应用程序状态的引擎）的概念，使开发人员能够直接从HTML访问浏览器功能，而不是使用Javascript。

此外，它还证明了通过发布令人惊叹的表情符号并以口碑作为主要营销手段，你可以获得人气和认可。不仅如此，你还可能成为HTMX的CEO！它吸引了许多开发人员尝试这种构建网站的方法，并重新思考他们当前的实践。所有这些都使2024年对于这个库的未来发展充满了激动人心的可能性。

Wasp - 全栈，开箱即用🚀

为谁而设：

• 
  
• 你希望快速构建全栈应用
  
• 你希望在一个出色的一体化解决方案中继续使用React和Node.js，而无需手动挑选堆栈的每一部分
  
• 你希望获得一个为React和Node.js预配置的免费SaaS模板—— Open SaaS
  

对于希望简单轻松地全面控制其堆栈的工具的用户，无需再寻找！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变得非常容易！

此外，还有一点很酷的是，大多数Web开发人员对大多数现有技术的预先存在的知识仍然在这里适用，因为Wasp使用的技术已经成熟。

Solid.js - 一流的reactivity库 ↔️

适合人群：

• 
  
• 如果你希望代码具有高响应性
  
• 现有的React开发人员，希望尝试一种对他们来说学习曲线较低的高性能工具
  

Solid.js是一个性能很高的Web框架，与React有一些相似之处。例如，两者都使用JSX，采用基于函数的组件方法，但Solid.js不使用虚拟DOM，而是将你的代码转换为纯JavaScript。然而，Solid.js因其利用信号、备忘录和效果实现细粒度响应性的方法而更加出名。信号是Solid.js中最简单、最知名的基本元素。它们包含值及其获取和设置函数，使框架能够观察并在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的下一步将是引入runes。runes将是Svelte处理响应性的方式，使处理大型应用程序变得更加容易。类似于Solid.js的信号，符文通过使用类似函数的语句提供了一种直接访问应用程序响应性状态的方式。与Svelte当前的工作方式相比，它们将允许用户精确定义整个脚本中哪些部分是响应性的，从而使组件更加高效。类似于Solid和Solid Start，Svelte也有其自己的框架，称为SvelteKit。SvelteKit为用户提供了一种快速启动其由Vite驱动的Svelte应用程序的方式。它提供了路由器、构建优化、不同的渲染和预渲染方式、图像优化等功能。

Qwik - 非常快🚤

适合人群：

• 
  
• 如果您想要一个高性能的Web应用
  
• 现有的React开发人员，希望尝试一种高性能且学习曲线平缓的框架
  

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

Qwik通过利用可恢复性（resumability）的概念来实现其速度。简而言之，可恢复性基于在服务器上暂停执行并在客户端上恢复执行而无需重新播放和下载全部应用程序逻辑的想法。这是通过延迟JavaScript代码的执行和下载来实现的，除非有必要处理用户交互，这是一件非常棒的事情。它使整体速度提高，并将带宽降低到绝对最小值，从而实现近乎瞬间的加载。

结论

在我们所提及的所有框架和库中，最大的共同点是它们的熟悉度。每个框架和库都试图以构建在当前知识基础上的方式吸引潜在的新开发者，而不是做一些全新的事情，这是一个非常棒的理念。

当然，还有许多我们未在整篇文章中提及但值得一提的库和框架。例如，Angular 除了新的标志和文档外，还包括信号和新的控制流。还有 Remix，它增加了对 Vite、React Server Components 和新的 Remix SPA 模式的支持。最后，我们不能忘记 Next.js，它在过去几年中已成为 React 开发者的默认选择，为新的 React 功能铺平了道路。