最新前端技术趋势——菜鸟必看

news2025/1/10 5:59:00

前端的车轮滚滚向前,轮子造的越来越圆,速度造的越来越快,每个人都在适应这个轮子的节奏,稍微不注意就会被甩出车轮之外。狼狈不堪之外还会发自心底的大喊一声:别卷了!!

话虽这么说,但现实就是这样,无论是客观还是主观因素都不得不让你继续的往前走。既然是往前走, 那么能知道一些前面有啥东西岂不是更好,也许能少走弯路。

自己对前端23年大概的技术做了一些展望,想到什么写什么。毕竟谁都不知道会不会突然间又出了个frontEndGPT打翻了所有人的饭碗。

1 AI

最先说的肯定是AI,22年末,23年初的chatgpt让AI话题火的一塌糊涂,同时也被认为是一次重大的技术革新,技术革新带来的就是重塑,一切都要被重塑,你的职业,你的工作。 视觉层面的stable diffusion和midjourney已经对设计师产生了重大影响,而涉及到视觉ui层面的话,前端肯定是绕不开的部分。虽然目前没有直接的对前端产生影响,但下面的就一个就不只是对前端了,而是对整个程序员都产生了影响。

  • copilot

Your AI pair programmer. Trained on billions of lines of code, GitHub Copilot turns natural language prompts into coding suggestions across dozens of languages.

看看醒目的文字就知道,程序员或多或少都会被影响了。

还有什么CodeWhisperer, Cursor等也都是AI辅助编程。

更有Fronty,Locofy等将图片AI分析为HTML文档,无代码快速建站,figma快速解析成代码等,虽然是提效不少,但谁能说这些不是对前端的一种重塑呢。

微信截图_20231117143214.png

​2 主流框架

随着React,Vue等框架进一步的普及,现在前端想要脱离它们的场景越来越少了。那么它们的下一步规划,也会对我们产生一些不小的影响。

react

react 18以后,react似乎是对create-react-app这种项目启动方式也不怎么主推了,毕竟速度摆在那里,没有任何优势。而使用直接竞争对手的产品似乎又不太合适,而直接说又不用又显得跟开源精神不吻合(当然竞争对手的一些基本特性也确实和现有的构建思想不太吻合)。

他们似乎采取一种围魏救赵的方式,着重宣传next的方式。next不仅仅是一个ssr的框架,同时它也支持csr,ssg等不同的方式(next13开始,对于客户端组件和服务端组件可以有了比较好的区分)。同时next与react有着千丝万缕的联系,而next正在进行一个新的构建工具的替换。 next采用了turbopack,也是Webpack作者TobiasKoppers的作品,官方说它更新速度比Vite也要快10倍、比Webpack快700倍

而react也应该大概率会引入turbopack(当然它如果继续搞前端脚手架的话)。当然也可能会直接使用next环境。

至于快多少,以及评价基准等我们可以看下turbopack真比Vite快10倍吗?

next

next最新版本也加入了很多的特性,比如server component理念,约定式路由的更改,流式渲染,客户端组件与服务端组件分离更简单,更好的构建速度等等功能。可以让开发体验,用户体验更好,性能也会有响应的提升。

vite

这个不用说了,优秀的构建速度以及越来越丰富的社区,让其在22年有了很大提升。随着浏览器的逐步升级,23年vite肯定也会是重大的一年。

webpack

虽然5有了好多的功能提升,不过速度似乎一直是一个绕不过去的坎。就连作者也已经开始搞turbopack了,虽然加入swc能让编译有很大提升,但是目前从我身边的人的了解看,越来越多的人开始转向vite等其它方式了

turbopack

是webpack作者去的新公司开发的一款基于rust的打包工具。官方明确说明就是为了替换webpack。 同时强调webpack是这十年最火的工具,那turbopack就定位成未来几年的工具。由于作者和webpack, Vercel, next, React这些之间千丝万缕的联系,很难不说未来React也许会和这个打包工具绑定上。下面是官方提供的速度参考

Alt

而除了turbopack外,同一团队还在做Turborepo。

这是一款项目管理的工具,最主要的面向场景是Monorepo这种复杂的多项目管理

Monorepo有很多优势,但是在多个项目中会有很多复杂的构建过程和相对闭塞的构建步骤,每一次上线都是耗时严重。所以Turborepo是为了解决这个问题出现的,让一些构建重复的构建步骤提炼出来,基于整个Monorepo项目的维度来管理多个子项目。

同时对于单个CI的构建步骤,解决每台机器,每个人都要单独构建的问题,还提炼了类似store的方案,脱离了构建环境,只跟项目绑定,当然这个方案是否使用要看你自己,毕竟原理是把构建产物放到第三方储存,而第三方又不是一个类似npm的开源机构。

3 轻量级的低代码开发平台

前端技术在不断更新和迭代,新的技术和框架层出不穷。大佬们都说要追求高复用、高内聚、低耦合、易拓展,大家开始忙不停蹄的学习这些概念和应用实践,讨论到低代码,大家好像都蛮兴奋的。

在低代码领域,JNPF开发平台还不错,很多人都用过它,是功能的集大成者,任何信息化系统都可以基于它开发出来。

依托自身的技术生态,不仅可以在一个平台内搭建OA、ERP、MES、EHR等各种传统管理系统,也可以通过API接口,对接企业原有的管理系统和数据,企业微信、钉钉、公众号等平台,JNPF支持搭建聚合已有系统、平台和设备,承载20万+用户体系的并发和数据处理能力,支持大规模复合式业务场景使用。

应用地址:https://www.jnpfsoft.com/?csdn ,找个有空的时间自己试试。

5.2-第三方登录1.png

4 服务端

node从7,8年前的爆火,到现在的不温不火,前端语言介入服务端这个命题似乎现在是越来越清晰了。那就是定位,可以做网关,可以做转发,可以做一些数据代理合并,定位清晰node依然有自己的使用场景。 node也马上到了20版本,迎来了一些特性

  • esm的更好支持,

  • 测试功能更加丰富

  • V8 引擎更新至 11.3,与Chromium113版本大部分相同

  • 支持以虚拟机的方式,动态运行js代码

  • WebAssembly的支持(实验性的)

于此同时,node曾经的作者Ryan Dahl几年前搞的Deno似乎没有太多的消息,似乎在向商业化方向前进。打造出Deno Deploy及其即时边缘渲染SSR框架Deno Fresh

4 其它

WebAssembly, 元框架,ts,微前端?

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

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

相关文章

MyCat基础入门

1. MyCat安装 去官网下载安装包: 下载路径: 官方网站:http://www.mycat.org.cn/ github地址https://github.com/MyCATApache 上传到服务器上并解压: 它解压后是一个叫mycat的文件夹 去maycat的bin目录下,执行命令 ./my…

查看libc版本

查看libc库版本 查看系统libc版本 $ ldd --version ldd (Ubuntu GLIBC 2.27-3ubuntu1.2) 2.27 Copyright (C) 2018 Free Software Foundation, Inc. This is free software; see the source for copying conditions. There is NO warranty; not even for MERCHANTABILITY or …

nodejs spawn

Node.js 的子进程 (child_process) 模块下有一 spawn 函数,可以用于调用系统上的命令,如在 Linux, macOS 等系统上,我们可以执行如下代码来调用通用的 npm 命令。 const spawn require(child_process).spawn; spawn(npm, {stdio: inherit …

【小收获】一维字符数组 与 二维字符数组

一维字符数组 一维字符数组 可以通过数组名直接进行整体输入和输出&#xff08;注意&#xff1a;当使用一维字符数组存储字符串时&#xff0c;因为元素尾部会有一个空字符\0,所以需要给空字符\0留一个位置&#xff09; char a[5]; cin>>a; cout<<a;二维字符数组 …

ZBrush 2024(三维数字雕刻软件)

ZBrush是一款Mac数字雕刻软件&#xff0c;它具有以下功能&#xff1a; 雕刻工具&#xff1a;ZBrush的雕刻工具非常强大&#xff0c;可以让用户在3D模型上进行雕刻&#xff0c;就像使用传统雕塑工具一样。高精度模型创建&#xff1a;ZBrush可以创建高精度的3D模型&#xff0c;适…

【AI】马斯克说大模型要开源,我们缺的是源代码?(附一图看懂6大开源协议)

目录 一、说说开源和闭源 1. GUN GPL协议 2. BSD&#xff08;Berkeley Software Distribution&#xff0c;伯克利软件发布版&#xff09;协议 3. Apache 许可证版本&#xff08;Apache License Version&#xff09;协议 4. MIT&#xff08;Massachusetts Institute of Tec…

Elasticsearch 8.9 Bulk批量给索引增加数据源码

一、相关API的handler二、RestBulkAction&#xff0c;组装bulkRequest调用TransportBulkAction三、TransportBulkAction 会把数据分发到数据该到的数据节点1、把数据按分片分组&#xff0c;按分片分组数据再发送到指定的数据节点(1) 计算此文档发往哪个分片1)根据索引是否是分区…

Flutter NestedScrollView 、SliverAppBar全解析,悬浮菜单的应用

在我们开发过程中经常会使用到悬浮菜单的使用&#xff0c;当我们滑动到指定位置后&#xff0c;菜单会自动悬浮。 实现效果如下&#xff08;左为滑动前、右为滑动后&#xff09;&#xff1a; 上述便是通过NestedScrollView 、SliverAppBar实现的效果&#xff0c;通过两个控件我…

HTTPS加密为什么能保证网络安全?

随着互联网的普及和发展&#xff0c;网络安全问题日益严重。为了保护用户的隐私和数据安全&#xff0c;许多网站都采用了HTTPS加密技术。那么&#xff0c;HTTPS加密为什么可以保证网络安全呢&#xff1f; 原因是HTTP协议采用的是数据明文传输方式。用户从客户端浏览器提交数据…

基于Java的鲜花商店的设计与实现,ssm+jsp,MySQL数据库,前台用户+后台管理,完美运行,有一万字论文

目录 演示视频 基本介绍 选题背景 系统结构 论文目录 系统截图 演示视频 基本介绍 基于Java的鲜花商店的设计与实现&#xff0c;ssmjsp&#xff0c;MySQL数据库&#xff0c;前台用户后台管理&#xff0c;完美运行&#xff0c;有一万字论文。 前台功能&#xff1a;注册登…

Python Web APP在宝塔发布

本地测试运行&#xff1a;uvicorn main:app --host 127.0.0.1 --port 8082 --reload 宝塔发布&#xff1a; 运行配置——>启动模式&#xff1a;worker_class uvicorn.workers.UvicornWorker

Windows安装Elasticsearch并结合内网穿透实现远程访问

文章目录 系统环境1. Windows 安装Elasticsearch2. 本地访问Elasticsearch3. Windows 安装 Cpolar4. 创建Elasticsearch公网访问地址5. 远程访问Elasticsearch6. 设置固定二级子域名 Elasticsearch是一个基于Lucene库的分布式搜索和分析引擎&#xff0c;它提供了一个分布式、多…

Win10远程连接服务器失败,报错:出现了内部错误

背景&#xff1a;本地windows10专业版电脑远程Windows虚拟机报错&#xff0c;但实际检查控制台发现&#xff0c;虚拟机状态正常&#xff0c;只是本地远程连接莫名其妙断开&#xff0c;并报错出现了内部错误&#xff1a; 原因&#xff1a;win10客户端RDP兼容性的问题 解决方法&…

数据资产“入表”是不是红利?国企怎么认识?怎么利用?

毫无疑问&#xff0c;数字资产入表是红利。 数据资产入表意味着将数据资源作为企业资产进行确认和计量&#xff0c;解决了数据资源作为非物质资产未被充分认可和有效计量的问题&#xff0c;意味着数据完成了从自然资源到经济资产的跨越。上海数据交易所总经理汤奇峰此前表示&a…

代码混淆的原理是什么?常见代码混淆方法介绍

目录 一、代码混淆的原理 二、代码混淆的方法 三、常见的代码混淆方式 本文主要想你介绍代码混淆的原理&#xff0c;常见代码混淆方法&#xff0c;欢迎查阅~ 移动应用代码安全非常重要&#xff0c;代码逆向会导致代码逻辑被获取&#xff0c;进一步导致控制流被hook&#xff0…

忆联消费级SSD AH660:将用户体验推向新高度

自1989年IBM推出世界上第一款固态硬盘&#xff08;SSD&#xff09;以来&#xff0c;SSD在三十多年的时间中历经了多次技术革新和市场变革&#xff0c;早已成为个人电脑、汽车电子、数据中心、物联网终端等领域的主流存储产品&#xff0c;并广泛应用于各行各业&#xff0c;在202…

【LeetCode:2736. 最大和查询 | 贪心 + 二分 + 单调栈】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

【学习笔记】Java安全之动态加载字节码

文章目录 什么是Java的字节码利用URLClassLoader加载远程class文件利用ClassLoader#defineClass直接加载字节码利用TemplatesImpl加载字节码利用BCEL ClassLoader加载字节码 最近在学习Phith0n师傅的知识星球的Java安全漫谈系列&#xff0c;随手记下笔记 什么是Java的字节码 J…

双向链表的知识点+例题

1.链表的种类 题中常考查以下两种&#xff1a; 上一讲我们学了无头单向非循环链表&#xff0c;这节&#xff0c;让我们看一下双向链表的操作吧~ 2基本操作 1&#xff0c;定义双向链表 2&#xff0c;创建一个节点 3&#xff0c;初始化双链表 4&#xff0c;尾插一个节点 5打印…

C语言判断素数(ZZULIOJ1057:素数判定)

题目描述 输入一个正整数n&#xff0c;判断n是否是素数&#xff0c;若n是素数&#xff0c;输出”Yes”,否则输出”No”。 注意&#xff1a;1不是素数。 输入&#xff1a;输入一个正整数n(n<1000) 输出&#xff1a;如果n是素数输出"Yes"&#xff0c;否则输出"…