2024 年让我想疯狂学习的几个框架。。

news2025/2/3 6:56:36

2024 年即将到来,可以为新的一年做计划了,思考我们可以在未来一年中做些什么或学习些什么。这篇文章想做的是寻找新的一年中可以学习的框架,了解它们的功能,并找出它们特别之处。

我们参考了 2023 年JS Rising Stars[1]列表,并尽可能客观地进行选择。对于每个被介绍的框架,我们都强调了它们最大的优点,以便你了解它们在哪些方面表现出色,以及哪些方面可能会让你自己尝试一下!

HTMX - 回归基础

htmx-demo

适合人群:

  • 你希望编写更少的 JavaScript
  • 你希望代码更简单,更专注于 hypermedia(超媒体)

HTMX 在 2023 年迅速崛起,在过去一年中获得了超多 GitHub Stars。HTMX 不是平常的 JS 框架。如果你在HTMX[2]中工作,你将大部分时间在 hypermedia(超媒体)的世界中度过,以完全不同的视角看待网络开发,而不是我们通常对现代网络开发的重 JS 视角。HTMX 利用了 HATEOAS(Hypermedia as the Engine of Application State)的概念,使开发人员可以直接从 HTML 访问浏览器功能,而不是使用 JavaScript。

Solid.js - 一流的 reactivity ↔️

Solid.js示例

适合人群:

  • 如果你想要高度 reactivity 的代码
  • 现有 React 开发者,希望尝试性能高、学习曲线低的框架

Solid.js[3]是一个非常高效的前端框架,与 React 有一些相似之处。例如,两者都使用 JSX,采用基于函数的组件方法,但 Solid.js 不是使用虚拟 DOM,而是将你的代码转换为纯 JavaScript。而且它更独特的是其细粒度 reactivity 的方法,通过使用 signal、memos 和 effects。signal 是 Solid 中最简单的原语。包含值以及 getter 和 setter 函数,允许框架观察和更新 DOM 中所需的确切位置的变化,而 React 则重新渲染整个组件。

Solid.js 不仅使用 JSX,还对其进行了增强。它提供了一些很棒的新功能,例如 Show 组件,可以启用条件渲染 JSX 元素,以及 For 组件,允许在 JSX 中更轻松地遍历集合。另一个重要的事情是,它还有一个名为 Solid Start 的元框架(目前处于测试版),它允许用户根据自己的偏好以不同的方式渲染应用程序,具有基于文件的路由、actions、API 路由和中间件等功能。

Astro - 静态网站之王

Astro示例

适合人群:

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

如果你在 2023 年构建了一个内容驱动的网站,那么你很可能会选到Astro[4]作为你的首选框架来实现它!Astro 是另一个通过不同的架构概念脱颖而出的框架。它是岛屿架构。在 Astro 的上下文中,岛屿是页面上的一切交互式 UI 组件,从静态内容的海洋中脱颖而出。页面可以有任意数量的岛屿,因为它们彼此独立运行,但它们也可以共享状态并相互通信,非常的好用。

Astro 的另一个有趣之处在于,他们的实现方式允许用户使用不同的前端框架[5],如 React、Vue、Solid 来构建网站。因此,开发人员可以基于他们当前的知识轻松构建网站,并利用可以集成到 Astro 网站的现有组件。

Svelte - 简单而有效

Svelte演示

适合人群:

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

Svelte[6]是另一个试图通过尽可能简单和初学者友好来简化并加快 Web 开发的框架。它是一个非常简单的框架,框架里有一个 reactive 属性,你只需要声明它并在 HTML 模板中使用它。每当在 JavaScript 中更新值(例如,通过触发 onClick 事件按钮)时,它将反映在 UI 上,反之亦然。

Svelte 的下一步将是引入 Runes。Runes 将是 Svelte 处理 reactivity 的方式,这样能够更轻松地应对大型应用。类似于 Solid.js 的 signal,Runes 提供了一种直接用函数语句的方式来接入应用的 reactivity 状态。与 Svelte 当前的工作方式相比,它们将允许用户精确定义哪个部分是 reactivity 的,这样组件可以优化性能。

类似于 Solid 和 Solid Start,Svelte 也有自己的框架,称为 SvelteKit。SvelteKit 为用户提供了一种快速启动 Svelte 应用的方法,由 Vite 提供支持。它提供了路由器、构建优化、不同的渲染和预渲染方式、图像优化等。

Qwik - 非常快

Qwik演示

适合人群:

  • 如果你想要一个高性能的 Web 应用
  • 现有 React 开发者,希望尝试性能高、学习曲线低的框架

我们最后但同等重要的框架是Qwik[7]。Qwik 是另一个使用 JSX 和函数式组件的框架,类似于 Solid.js,为基于 React 的开发者提供一个熟悉的环境,以便尽可能快的上手。正如其名称,Qwik 的主要关注点是实现应用程序的最高性能和执行速度

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

结论

我们提到的所有框架和库之间最大的共同点是熟悉度。每个人都寻求以一种建立在他们当前知识基础上的方式来吸引潜在的新开发者,而不是做完全新的事情,这是一个非常酷的概念

当然,这里可能还有更多的图书馆和框架在整个文章中没有提及,但至少值得带一笔。例如 ngular,除了新的 Logo 和文档外,还包括 Signal 和新的控制流。还有 Remix 正在增加对 Vite,React Server Component 和新的 Remix Spa 模式的支持。最后,我们也不能忘记 Next.js,在过去几年中,某种程度上成为了 React 开发人员的默认配置,为大家使用新的 React 功能铺平了道路。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1599568.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

力扣练习题(2024/4/15)

1打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个房屋…

数字孪生技术在医疗培训方面的应用

数字孪生技术在医疗培训方面的应用主要体现在以下几个方面,通过这些应用,数字孪生技术在医疗培训领域展现出巨大的潜力,有望改变传统的医学教育模式,提高医疗培训的效率和质量。北京木奇移动技术有限公司,专业的软件外…

记录 OpenHarmony 使用 request.uploadFile 时踩的坑

​ 开发环境 设备环境:OpenHarmony 4.1.x SDK 版本:API 10 开发模型:Stage 模型 IDLE: Dev Eco 4.1 官方文档 踩坑一:后台服务地址 上传文件依赖后台服务器,如果使用本地搭建的服务,是无法访问的&…

✌粤嵌—2024/4/10—简化路径

代码实现&#xff1a; 栈 // 分割/得到名字 char **split(const char *s, int *returnSize) {int n strlen(s);char **ans (char**)malloc(sizeof(char*) * n);int l 0, r;*returnSize 0;while (l < n) {while (l < n && s[l] /) { // 左&#xff1a;ll;}r …

鑫鹿助贷CRM系统:助力助贷行业实现智能商业转型

数字化时代&#xff0c;商业竞争愈发激烈&#xff0c;助贷行业如何把握商机、实现高效管理、打造高回报率的商业模式&#xff0c;成为了助贷行业老板们比较关注的问题&#xff0c;而鑫鹿助贷CRM管理系统&#xff0c;正是这场商业变革中的得力助手&#xff0c;系统功能完善&…

多普勒频移

下面从频谱的角度理解多普勒频移。 设目标以速度接近雷达&#xff0c;在时刻距离&#xff0c;则在任意时刻目标与雷达的距离为 设雷达发射信号为。设时刻发射的信号经过遇到目标&#xff0c;则由于目标与信号相向运动&#xff0c;有 得到&#xff0c;从而时刻发射的信号经过返回…

Nacos多服务共享配置 和集群搭建

多种配置优先级: Nacos本地集群搭建&#xff1a; 1.根据黑马的课&#xff1a;我们下载nacos&#xff0c;有安装包 解压到没中文的目录 2.进入conf目录&#xff0c;修改配置名字为cluster.conf 3.然后进入cluster.conf&#xff0c;添加内容。 127.0.0.1:8845 127.0.0.1.8846 1…

打一把王者的时间,学会web页面测试方法与测试用例编写

一、输入框 1、字符型输入框&#xff1a; &#xff08;1&#xff09;字符型输入框&#xff1a;英文全角、英文半角、数字、空或者空格、特殊字符“~&#xff01;#&#xffe5;%……&*&#xff1f;[]{}”特别要注意单引号和&符号。禁止直接输入特殊字符时&#xff0c;…

四.吊打面试官系列-数据库优化-Mysql锁和事务原理

前言 本篇文章主要讲解两块内容&#xff1a;Mysql中的锁和ACID原理&#xff0c;这2个部分是面试的时候被问的蛮多的看完本篇文章之后相信你对Mysql事务会有更深层次的理解&#xff0c;如果文章对你有所帮助请记得好评 一.Mysql中的锁 1.锁的分类 在Mysql中锁也分为很多种&a…

Linux高级IO——多路转接之epoll

本章代码Gitee地址&#xff1a;EpollServer 文章目录 1. epoll接口1.1 epoll_create1.2 epoll_wait1.3 epoll_ctl 2. epoll原理3. epoll_server4. epoll两种工作模式 1. epoll接口 1.1 epoll_create #include <sys/epoll.h> int epoll_create(int size);参数int size理…

强化学习(三)基于动态规划 Dynamic Programming 的求解方法

文章目录 1. 动态规划与强化学习的联系2. 利用动态规划求解最优价值函数2.1 案例背景2.2 策略评估&#xff08;预测&#xff09;2.3 策略迭代&#xff08;控制&#xff09; 在前文《强化学习的数学框架&#xff1a;马尔科夫决策过程 MDP》中&#xff0c;我们用马尔可夫过程抽象…

HTML注释标签与标题标签

目录 注释标签 标题标签 注释标签 如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字&#xff0c;就需要使用注释标签。注释不会显示在网页界面上&#xff0c;目的是提高代码的可读性 在HTML中&#xff0c;使用<!-- 和 -->包裹注释的内…

Spring底层如何执行?

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Spring底层如何执行refresh()prepareRefresh() 准备刷新的工作initPropertySources() obtainFreshBeanFactory()refreshBeanFactory()AbstractRefreshableApplicati…

博客系统项目测试(selenium+Junit5)

在做完博客系统项目之后&#xff0c;需要对项目的功能、接口进行测试&#xff0c;利用测试的工具&#xff1a;selenium以及Java的单元测试工具Junit进行测试&#xff0c;下面式测试的思维导图&#xff0c;列出该项目需要测试的所有测试用例&#xff1a; 测试结果&#xff08;全…

链表拓展之双向链表

前言 在前面已经总结了单链表&#xff0c;有了单链表的基础会很好理解双链表的实现&#xff0c;忘记了可以跳转——>http://t.csdnimg.cn/GFPk9 接下来就由我带着各位看官来认识今天的主角吧~ 什么是双向链表 在单链表的基础上&#xff0c;它有两个方向的链接&#xff0c;一…

SpringBlade dict-biz/list SQL 注入漏洞复现

0x01 免责声明 请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;作者不为此承担任何责任。工具来自网络&#xff0c;安全性自测&#xff0c;如有侵权请联系删…

一文看懂动态IP代理API

“动态”意味着每次连接或每隔一段时间&#xff0c;用户的IP地址都会发生改变。由于IP地址的不断变化&#xff0c;用户可以避免因频繁访问同一网站而导致的IP被封锁的问题。API叫做应用程序接口&#xff0c;是一种让软件之间相互通信的接口。API允许用户通过编程方式来调用动态…

【从浅学到熟知Linux】进程控制下篇=>进程程序替换与简易Shell实现(含替换原理、execve、execvp等接口详解)

&#x1f3e0;关于专栏&#xff1a;Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程等内容。 &#x1f3af;每天努力一点点&#xff0c;技术变化看得见 文章目录 进程程序替换什么是程序替换及其原理替换函数execlexeclpexecleexecvexecvpexecvpeexecve 替换函数总结实现…

转行或者跳槽入职一家新公司,应该如何快速上手工作?

不管是干测试也好或者其它任何职业&#xff0c;没有谁会在一家公司待一辈子&#xff0c;转行不一定&#xff0c;但是跳槽是每一个打工人早晚都会面临的事情&#xff0c;今天就来跟大家聊聊这件事~ 入职一家新公司&#xff0c;你应该做什么可以最快速的上手工作&#xff1f; 这…

Python编程之旅:深入探索强大的容器——列表

在Python编程的世界中&#xff0c;容器&#xff08;Containers&#xff09;是一种用于存储多个项目的数据结构。其中&#xff0c;列表&#xff08;List&#xff09;是最常用且功能强大的容器之一。无论是初学者还是资深开发者&#xff0c;掌握列表的使用方法和技巧都是提升Pyth…