关于前端:2024年令人眼前一亮的Web框架

125次阅读

共计 3272 个字符,预计需要花费 9 分钟才能阅读完成。

本文翻译自 https://dev.to/wasp/web-frameworks-we-are-most-excited-for-in-2024-4d15
感谢您的浏览!

介绍

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 性能铺平了路线。

正文完
 0