盘点2023前端技术,谁才是当红炸子鸡

在平时的学习或工作中,有没有那么一些代码让你觉得写的比较好,具有复用性,并且今后的项目可能会用到?肯定会有,如果没有,说明你代码写的太少了。那么这些代码应该保存在哪里比较合适呢?这里我推荐大家尝试 CodeGist,它是一款在线的代码片段管理工具。

大家好,我是程序员凌览。2023已成过去式,让我们一起来看看2023年前端圈流行哪些技术?

最受欢迎的项目排行榜

榜一为shadcn/ui,它是一个用 React 编写的用户界面组库,允许通过 TailwindCSS 定制样式。

shadcn/ui建立在Radix之上,Radix是一套无头组件,为可访问性和键盘交互等问题提供了原型,shadcn/ui区别于其他流行的库(如MUI、ChakraUI、React Spectrum),它不是一个可下载的NPM包。相反,你可以通过一个终端命令来集成 shadcn/ui 组件,该命令会安装底层依赖项,并将组件源代码直接拷贝到你的代码库中,以便进一步修改

shadcn/ui的成功与 Tailwind CSS 的广泛流行(总排名第 20 位)、与 React Server Components 的兼容性以及出色的文档密切相关。

似乎所有新的 React 项目都采用了 shadcn/ui。Kent C. Dodds 甚至在他最前沿的 Epic Stack 中选择了它。

另一个涉及人工智能的例子:根据用户描述应用界面的功能和外观的提示,Ai应用程序 v0.dev 生成了由 shadcn/ui 组件组成的 JSX 代码。

榜二是Bun,作为 2022 年的冠军,小馒头保持着强劲的势头。Bun 的目标是成为一个快速、一体化的工具包,运行、构建、测试和调试 JavaScript 和 TypeScript编译一条龙服务。

Bun v1.0已于 9 月正式发布,Bun 声称自己已经 可以投入生产环境。

榜三、榜四都是绘图工具。

前端框架排行榜

榜一还是老大哥 React。

榜二htmx,它是一个采用不同方法为 HTML 页面提供交互性的库,开发人员无需编写数行 JavaScript 代码,而是通过特定属性来增强 HTML,从而实现实时交互和动态更新。

htmx 因其小巧的文件大小和与现有服务器端框架的无缝集成而备受赞誉,因为它是 "通过网络发送 HTML ",服务器只需要发送部分 HTML 代码块,而不是在客户端处理 JSON。

榜三Svelte,一个类似Vue的前端框架,Svelte移除了虚拟 DOM、处理 diff 算法。Svelte会将组件编译成与 DOM 直接交互的原生 JavaScript 代码,

排行榜值的一提的是Vue3已经超过Vue2,Vue2官方已于2023 年 12 月 31 日停止维护。技术栈还是Vue2的读者要考虑升级为Vue3啦。

React生态排行榜

榜一、榜二已在前方提过,不再赘述。

榜三Next.js,它是一个用于构建全栈 web 应用程序的 React 框架,它属于Vercel公司亲儿子。

社区经常性看到某某大佬加入Vercel。

Vue生态排行榜

榜一Nuxt.js,一个构建全栈 web 应用程序的 Vue 框架,与Next.js一样,而Nuxt.js是Vue框架

榜二Slidev,旨在让开发者使用 Markdown 编写PPT

值得提的是榜四 VueUse,Vue Hook函数工具库,提供了非常多的工具函数。作者我也经常把它集成到项目,它帮我节省了非常多的时间。

后端/全栈框架排行榜

对全栈框架作者没有实践过,这里不过多评价。据我了解国内流行程度:Next.js>Nuxt>Nest。

构建工具排行榜

字节跳动开源的Rspack上榜,排行榜却没有Webpack、Rollup身影。

Vite占据榜二。

榜单中绝大多数是以Rust编写的构建工具,可想而知Rust的火热🔥程度。

最后

数据来源2023 JavaScript Rising Stars,其中还有移动端排行榜、桌面端排行榜等等,有兴趣的读者请移步浏览。

关注公粽号【程序员凌览】回复"666",拉您进【人类高质量前端交流群~】
往期推荐:linglan01.cn/about

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

武汉灰京文化的全方位、立体式推广策略解析!

在竞争日趋激烈的市场环境下,武汉灰京文化以独有的创新思考和全方位推广策略,赢得了业界瞩目的成绩。一场打破传统推广思维模式,散发全新光芒的战役正悄然展开。本文将深度解析该企业所采用的一系列卓越策略以及取得的突出成绩,为…

H266/VVC率失真优化与速率控制概述

率失真优化技术 率失真优化: 视频编码的主要目的是在保证一定视频质量的条件下尽量降低视频的编码比特率,或者在一定编码比特率限制条件下尽量地减小编码失真。在固定的编码框架下,为了应对不同的视频内容,往往有多种候选的编码方…

Cross-Site-Request-Forgery

一、CSRF是什么? CSRF(Cross-site request forgery)是一种网络攻击方法,中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/XSRF。 二、CS…

oh-my-zsh nvm command not found

如果你在使用 oh-my-zsh 并且在终端输入 nvm 命令时提示 "command not found",这可能是因为 oh-my-zsh 没有配置 nvm 插件导致的。 a、确保你已经在系统中安装了 nvm。如果没有安装,请参考 nvm 的文档安装。 b、打开 oh-my-zsh 的配置文件&a…

故障诊断 | 基于FFT频谱与小波时频图的双流CNN轴承故障诊断模型(matlab +python)

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 故障诊断 | 基于FFT频谱与小波时频图的双流CNN轴承故障诊断模型(matlab python) 基于FFT频谱与小波时频图的双流CNN轴承故障诊断模型 特征拼接 python(pytorch) 基于2D-…

Flutter桌面软件开发中实现本地通知

Flutter桌面软件开发中实现本地通知可以使用local_notifier ,local_notifier这个插件允许 Flutter 桌面 应用显示本地通知。 Flutter桌面软件开发中实现本地通知 第一步安装依赖 dependencies:local_notifier: ^0.1.5 Flutter桌面软件开发中实现本地通知 第二步配…

vue3 响应式api中特殊的api

系列文章目录 TypeScript 从入门到进阶专栏 文章目录 系列文章目录一、shallowRef()二、triggerRef()三、customRef()四、shallowReactive()五、shallowReadonly()六、toRaw()七、markRaw()八、effectScope()九、getCurrentScope() 一、shallowRef() shallowRef()是一个新的响…

Docker 基础

文章目录 1.Docker概述2.Docker安装3.Docker与虚拟机VM4.Docker命令1.帮助命令2.镜像命令1.images2.search3.pull4.rmi 3.容器命令1.run2.ps3.rm4.start5.stop6.restart7.kill 4.常用其他命令1.后台启动容器2.查看日志(logs)3.查看进程信息(t…

双十一的祈祷【算法赛】

问题描述 双十一,不仅是购物狂欢节,更有 "光棍节" 之称。这源于 11:1111:11 由四个 11 构成,象征着单身。 作为大学生的小蓝也想经历甜甜的校园恋爱,于是他找到了爱神丘比特,向他祈祷能为自己带来一段邂逅…

如何将 element-ui 中的 el-select 默认展开

<el-form-item label"藕粉桂花糖糕" prop"state" required><el-selectref"mySelect"v-model"form.state"style"width: 280px"placeholder"请选择"><el-option label"藕粉" :value"…

摆动排序 II

题目链接 摆动排序 II 题目描述 注意点 将数组重新排列成 nums[0] < nums[1] > nums[2] < nums[3]… 的顺序题目数据保证&#xff0c;对于给定的输入 nums &#xff0c;总能产生满足题目要求的结果用 O(n) 时间复杂度和 / 或原地 O(1) 额外空间来实现 解答思路 如…

第九节HarmonyOS 常用基础组件11-TextPicker

1、描述 滑动选择文本内容的组件。 2、接口 TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string}) 3、参数 参数名称 参数类型 必填 描述 range string[]|Resource 是 选择器的数据。 selected number 否 设置默认选中项在…

Linux系统使用超详细(八)~磁盘管理

目录 一、认识磁盘 二、磁盘运行机制 三、磁盘检查 3.1查找设备名称和分区号 3.1.1使用lsblk命令&#xff1a; 3.1.2使用fdisk命令&#xff1a; 3.1.3使用blkid命令&#xff1a; 3.2检查方向 3.2.1文件系统完整性&#xff1a; 3.2.2磁盘健康状态&#xff1a; 3.2.3磁…

【AI视野·今日NLP 自然语言处理论文速览 第七十期】Thu, 4 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Thu, 4 Jan 2024 Totally 29 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Multilingual Instruction Tuning With Just a Pinch of Multilinguality Authors Uri Shaham, Jonathan Herzi…

概念解析 | ISTA:稀疏信号恢复的优雅算法

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:迭代收缩阈值算法(ISTA)。 概念解析 | ISTA:稀疏信号恢复的优雅算法 https://arxiv.org/pdf/math/0307152.pdf 1. 背景介绍 在信号处理、机器学习等领域,我们常常需要从含有噪声…

【leetcode】力扣热门之反转链表【简单难度】

题目描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 用例 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1] 输入&#xff1a;head [] 输出&#xff1a;[…

海康威视摄像头+服务器+录像机配置校园围墙安全侦测区域入侵侦测+越界侦测

一、适用场景 1、校园内&#xff0c;防止课外时间翻越围墙到校外、从校外翻越围墙到校内&#xff1b; 2、通过服务器摄像头的侦测功能及时抓图保存&#xff0c;为不安全因素提供数字化依据&#xff1b; 3、网络录像机保存监控视频&#xff0c;服务器保存抓拍到的入侵与越界&am…

目标检测COCO数据集与评价体系mAP

1.mAP 2.IoU IoU也就是交并比&#xff0c;也称为 Jaccard 指数&#xff0c;用于计算真实边界框与预测边界框之间的重叠程度。它是真值框与预测边界框的交集和并集之间的比值。Ground Truth边界框是测试集中手工标记的边界框&#xff0c;用于指定目标图像的位置以及预测的边界框…

【AI视野·今日NLP 自然语言处理论文速览 第六十九期】Wed, 3 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Wed, 3 Jan 2024 Totally 24 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers An Autoregressive Text-to-Graph Framework for Joint Entity and Relation Extraction Authors Zaratiana Ur…

鸿蒙系列--组件介绍之Video

接口 Video(value: {src?: string | Resource, currentProgressRate?: number | string |PlaybackSpeed, previewUri?: string |PixelMap | Resource, controller?: VideoController}) 参数&#xff1a; src&#xff1a;视频播放源的路径。支持本地路径和网络路径currentP…