2024 款:最新前端技术趋势

Hello,大家好,我是 Sunday。

上一次的时候聊了 那么些已经落后的前端开发技术 。但是光知道什么技术落后了是不够的,咱们还得知道 前端最新的技术趋势是什么。所以,今天这篇文章,咱们就来聊一聊,2023 最新前端技术趋势

01:反 TypeScript

大家先不要着急骂我,大家先想一想:“JS 的免于强类型是否为你带来了便利,TS 的强类型是否为你带来了不便”。

在很多中小厂的日常项目开发之中,你真的有必要使用 TypeScript 吗?它所谓的严谨性,真的能避免了屎山代码的出现吗?

应该是不能的吧。同时恰恰相反,当团队的平均技术能力不足时, TS 反而会带来更多的不便,让原先没有那么屎山的代码,变得彻底屎山了。

我们要知道:任何的一个技术都将会是一把双刃剑,它带来了改进的同时,也会带来新的不便。 这个在 TS 和 JS 的对比中,尤其明显。

所以,今年陆陆续续有开发者开始 反 TypeScript。比如:Svelte、Turbo 等等等等。后面可能会有越来越多的开发者加入反 TypeScript 的阵营。

02:Vue && React

Vue 和 React 算是前端的常青树,目前也是国内最火的两个框架。

上一次的时候,我提到 Angular,并且建议大家不要再学习 Angular 了。有很多同学不认同这个观点,并且提出了很多 Angular 的好处。但是我在这里非常负责任的告诉大家,如果你想要学习前端,并且找到一份工作的话,那么真的不要去选择 Angular。

Vue 的话,建议大家直接从 Vue3 开始学起,不需要 学习 setup函数,直接从 <script setup> 搞起就可以。

React 的话,建议至少从 16.8 以上学习,直接学习 函数式组件与 Hooks 即可

03:webpack && vite

虽说 vite 是为了颠覆 webpack 而存在的,同时 vite 也确实提供了 10 倍以上的构建速度。但是 webpack 足够丰富的生态,所以 vite 想要彻底颠覆 webpack 短时间之内并不现实。

这就导致,webpack 和 vite 我们需要一起进行学习。从现实的角度来看 vite 非但没有带来取代 webpack,反而增加了打包工具的学习成本(毕竟之前只需要学一个,现在需要学两个…)

04:Turbopack

Turbopack 是 webpack 作者使用 Rust 开发的新的打包工具,其目的就是为了对抗 vite 。

目前,国内企业使用 Turbopack 这应该是值得我们庆幸的一个事情,否则我们就又要多学习一个新的打包工具了 😭。

05:Rust

Rust 最近可是火的不行啊。在今年的 ViteConf 中尤雨溪宣布 Vite 的底层即将用 Rust 重写,即开发一个基于 Rust 的打包工具 Rolldown,以此替换掉原有的 Esbuild 和 Rollup。

当这个消息传出后,不少前端开发者开始关注起了 Rust,很多同学也开始问我:作为一个前端,我有必要学 Rust 吗?

其实,真的是没有必要的。

Rust 并不是一个新的开发语言了,早在 2010 年的时候 Rust 就可以发布了。而基于 Rust 开发的打包工具也很多,比如 Turbopack、Rspack。

而大家之所以突然关注 Rust 了,只不过是因为尤大突然提到了使用 Rust 重构 vite 而已。那么对于咱们这些本就已经被卷弄得生不如死的程序员,在 Rust 无法带来直接的收入增加时,就没有必要去凑这个热闹了。

06:NestJS

NestJS 是一个基于 Node 开发服务端的框架,结合了 OOP (面向对象编程)、FP (函数式编程)和 FRP (函数响应式编程)。很多同学把它比作前端的 Spring 框架。

在目前互联网行业这么卷的情况下,很多 java 的同学开始卷前端,而前端的同学如果想要卷后端的话,那么除了直接学习 Spring 之外,NestJS 也是一个可以快速从前端切入到后端的框架。

特别是针对一些想要自己接项目开发的同学,NestJS 的学习成本相对于 Spring 更低,是一个不错的选择。

07:低代码 && 无代码 平台

低代码和无代码平台在 3 年前开始被大规模的应用,发展到现在已经逐渐成熟起来了。

最初的低代码平台旨在:通过可拖拽、可配置的方式,实现不需要手写代码就可以搭建一个应用。

发展到现在,低代码平台的应用场景开始越来越广泛,营销页面、大屏可视化、后台管理系统 都开始出现了低代码构建的影子。

虽然现在低代码平台可以做的东西还比较少,但是基于目前的场景来看,未来低代码的应用会越来越多。

08:AI大模型

年初的 ChatGPT 火爆全网,随之而来的就是大量的国内 AI 项目。阿里的【通义千问】,百度的【文心一言】都是在这个时间段推出的。

同时大量的 AIGC 公司开始出现,也就是所谓的国内 GPT。

那么在这样的一种环境之下 AI大模型 想不火都难。

写在最后

现在的互联网行业越来越卷,卷技术、卷加班、卷年龄。很多同学也反馈:“被裁员、找工作难”。

如果大家也遇到了这样的情况,或者想要跳槽、涨薪、进阶学习,成为 offer 收割机,那么可以随时私聊我

最后祝大家都能入职心仪的公司,拿到满意的 offer。

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

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

相关文章

Spring后端HttpClient实现微信小程序登录

这是微信官方提供的时序图。我们需要关注的是前后端的交互&#xff0c;以及服务端如何收发网络请求。 小程序端 封装基本网络请求 我们先封装一个基本的网络请求。 const baseUrl"localhost:8080" export default{sendRequsetAsync } /* e url&#xff1a;目标页…

对比国内主流开源 SQL 审核平台 Yearning vs Archery

Yearning, Archery 和 Bytebase 是目前国内最主流的三个开源 SQL 审核平台。其中 Yearning 和 Archery 是社区性质的项目&#xff0c;而 Bytebase 则是商业化产品。通常调研 Bytebase 的用户也会同时比较 Yearning 和 Archery。 下面我们就来展开对比一下 Yearning 和 Archery…

DRAM和SRAM

特点 Static Random Access Memory&#xff1a;速度快、存储一位需要元器件更多、功耗较大、集成度低、更贵 Dynamic Random Access Memory&#xff1a;容量大、需刷新、附属电路更复杂、功耗较小、集成度高 存储位元 SRAM DRAM 逻辑结构 SRAM 典型的SRAM芯片有6116&am…

Layer 2 真的为以太坊扩容了吗?

构建一个安全、对用户友好的去中心化网络的愿景&#xff0c;依赖于关键基础设施的发展。这个愿景由一个共享的经济框架支持&#xff0c;得到了亿万人的拥护。Layer 2 的扩展解决方案在构建这一基础和增强以太坊的能力方面起着至关重要的作用。这些项目相互协作&#xff0c;形成…

数据结构—数组栈的实现

前言&#xff1a;各位小伙伴们我们前面已经学习了带头双向循环链表&#xff0c;数据结构中还有一些特殊的线性表&#xff0c;如栈和队列&#xff0c;那么我们今天就来实现数组栈。 目录&#xff1a; 一、 栈的概念 二、 栈的实现 三、 代码测试 栈的概念&#xff1a; 栈的概念…

【nlp】1.3 文本数据分析(标签数量分布、句子长度分布、词频统计与关键词词云)

文本数据分析 1 文本数据分析介绍2 数据集说明3 获取标签数量分布4 获取句子长度分布5 获取正负样本长度散点分布6 获取不同词汇总数统计7 获取训练集高频形容词词云8 获取验证集形容词词云1 文本数据分析介绍 文本数据分析的作用: 文本数据分析能够有效帮助我们理解数据语料…

[100天算法】-不同路径 III(day 75)

题目描述 在二维网格 grid 上&#xff0c;有 4 种类型的方格&#xff1a;1 表示起始方格。且只有一个起始方格。 2 表示结束方格&#xff0c;且只有一个结束方格。 0 表示我们可以走过的空方格。 -1 表示我们无法跨越的障碍。 返回在四个方向&#xff08;上、下、左、右&#…

(selenium element not interactable)selenium的send_keys怎么往codemirror中发送数据

简直了&#xff0c;什么方法都试过了&#xff0c;什么鼠标悬停、修改js都不行。最后居然就是定位到textarea域&#xff0c;再定位到想插入文本的位置的前面&#xff08;我理解就是定位到cursor游标&#xff09;&#xff1b;然后点击以显示游标&#xff1b;最后往textarea域send…

【PG】PostgreSQL 预写日志(WAL)、checkpoint、LSN

目录 预写式日志&#xff08;WAL&#xff09; WAL概念 WAL的作用 WAL日志存放路径 WAL日志文件数量 WAL日志文件存储形式 WAL日志文件命名 WAL内容 检查点&#xff08;checkpoint&#xff09; 1 检查点概念 2 检查点作用 触发检查点 触发检查点之后数据库操作 设置合…

【图论实战】Boost学习 01:基本操作

文章目录 头文件图的构建图的可视化基本操作 头文件 #include <boost/graph/adjacency_list.hpp> #include <boost/graph/graphviz.hpp> #include <boost/graph/properties.hpp> #include <boost/property_map/property_map.hpp> #include <boost/…

数据结构之队列

目录 引言 队列的概念与结构 队列的实现 定义 初始化 销毁 入队 判断队列是否为空 出队 获取队头元素 获取队尾元素 检测队列中有效元素个数 元素访问 源代码 queue.h queue.c test.c 引言 数据结构之路经过栈后&#xff0c;就来到了与栈联系紧密的兄弟—…

RabbitMq防止消息丢失

RabbitMq防止消息丢失 消息的传递路径出现消息丢失的位置解决 消息的传递路径 消息发送方 --> MQ --> 消息消费方 出现消息丢失的位置 消息发送方: 消息传输过程中丢失MQ: MQ收到消息后,存在内存中,还未被消费就宕机了,导致数据丢失消息消费方: 消息到达消费方后, 服务…

Docker安装详细步骤及相关环境安装配置(mysql、jdk、redis、自己的私有仓库Gitlab 、C和C++环境以及Nginx服务代理)

目录 一、从空白系统中克隆Centos7系统 二、使用xshell连接docker_tigerhhzz虚拟机​编辑 三、在CentOS7基础上安装Docker容器 四、在Docker中进行安装Portainer 4.1、在Docker中安装MySQL 4.2、在Docker中安装JDK8&#xff0c;安装Java环境 4.3、Docker安装redis&#…

Maya v2024(3D动画制作软件)

Maya 2024是一款三维计算机图形动画制作软件。它被广泛应用于电影、电视、游戏、动画等领域中&#xff0c;用于创建各种三维模型、场景、特效和动画。 以下是Maya的主要特点&#xff1a; 强大的建模工具&#xff1a;Maya提供了各种建模工具&#xff0c;如多边形建模、NURBS建模…

时序数据库 TDengine + 高级分析软件 Seeq,助力企业挖掘时序数据潜力

作为一款制造业和工业互联网&#xff08;IIOT&#xff09;高级分析软件&#xff0c;Seeq 支持在工艺制造组织中使用机器学习创新的新功能。这些功能使组织能够将自己或第三方机器学习算法部署到前线流程工程师和主题专家使用的高级分析应用程序&#xff0c;从而使单个数据科学家…

OpenCV+相机校准和3D重建

相机校准至少需要10个测试图案&#xff0c;所需的重要输入数据是3D现实世界点集以及图像中这些点的相应2D坐标。3D点称为对象点&#xff0c;而2D图像点称为图像点。 准备工作 除了棋盘&#xff0c;我们还可以使用圆形网格。 在这种情况下&#xff0c;我们必须使用函数cv.find…

行业洞察:分布式云如何助力媒体与娱乐业实现创新与增长?

过去数年&#xff0c;流媒体经历了蓬勃的发展过程&#xff0c;观众可以根据喜好收看自己所喜爱的节目内容&#xff0c;并希望在全球范围内访问内容。 繁荣的市场让媒体和娱乐行业的 IT 领导者们竞相发力&#xff0c;用更短的时间去创造互动且令人难忘的内容体验&#xff0c;力求…

20.有效的括号(LeetCode)

思路&#xff1a;用栈的后进先出的特性&#xff0c;来完成题目的要求 因为C有库&#xff0c;可以直接用&#xff0c;而C语言没有&#xff0c;所以我们直接把写好的栈拷贝上来用。 首先&#xff0c;完成框架的搭建 其次&#xff0c;再实现循环内的部分。1.左括号入栈 2.右括…

react函数式组件props形式子向父传参

父组件中定义 子组件中触发回调传值 import { useState } from "react"; function Son(params) {const [count, setCount] useState(0);function handleClick() {console.log(params, paramsparamsparamsparamsparamsparams);params.onClick(111)setCount(count 1…

Skywalking流程分析_3(服务的准备、启动、关闭)

前文将SkyWalkingAgent.premain中的&#xff1a; SnifferConfigInitializer.initializeCoreConfig(agentArgs)pluginFinder new PluginFinder(new PluginBootstrap().loadPlugins())这两个方法分析完毕&#xff0c;下面继续分析premain方法其余部分 创建byteBuddy final By…