最新前端技术趋势

news2024/11/20 20:33:04

本文作者系360奇舞团前端开发工程师

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

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

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

1 AI

最先说的肯定是AI,22年末,23年初的chatgpt让AI话题火的一塌糊涂,同时也被认为是一次重大的技术革新,技术革新带来的就是重塑,一切都要被重塑,你的职业,你的工作。
视觉层面的stable diffusionmidjourney已经对设计师产生了重大影响,而涉及到视觉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.

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

还有什么CodeWhispererCursor等也都是AI辅助编程。

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

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也许会和这个打包工具绑定上。下面是官方提供的速度参考

82c60dbef25533d992e79a73e4618d79.png

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

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

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

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

3 服务端

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,微前端?

引用:

https://www.infoq.cn/article/9qu4erfjnmnjidpjrkui
https://turbo.build/pack/docs/why-turbopack
https://www.robinwieruch.de/web-development-trends/

关于奇舞团

奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

df915fdc80e4ab09dfb2576023e05518.png

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

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

相关文章

数据空间基础设施的技术挑战及数联网解决方案

数据空间基础设施的技术挑战及数联网解决方案 罗超然1,2, 马郓1,2,3, 景翔1,2,4,黄罡1,2,5 1 数据空间技术与系统全国重点实验室,北京 100091 2 北京大数据先进技术研究院,北京 100091 3 北京大学人工智能研究院,北京 100871 4 北…

学了三年,一文告诉你物联网到底如何实现万物互联?

前言:作为计算机相关专业的你,绝对听说过物联网这个词,它的解释相比你也听过,叫万物互联,也就是所谓的IOT,但是说实话它到底如何实现的万物互联的你可能还真不知道。不是每个物体都有一个网络接口或者实体接…

线程同步(二)

目录 死锁 加锁之后忘记解锁: 重复加锁,造成死锁 在程序中有多个共享资源,因此有很多把锁,随意加锁,导致相互被阻塞 在使用多线程编程的时候,如何避免死锁呢? 读写锁 在程序中对读写锁加…

Rust每日一练(Leetday0029) 柱状图、最大矩形、扰乱字符串

目录 84. 柱状图中最大的矩形 Largest-rectangle-in-histogram 🌟🌟🌟 85. 最大矩形 Maximal Rectangle 🌟🌟🌟 87. 扰乱字符串 Scramble String 🌟🌟🌟 &#x1…

WebTransport 开播的应用实践之路

动手点关注 干货不迷路 Web开播的业务挑战 无论是本地软件推流还是Web推流,都需要解决推流抖动、画面高糊、音频卡顿等问题。在现有的Web技术环境下,如何稳定地把高质量的音视频流呈现给更多用户,是我们技术团队攻克的重点。从技术角度来解读…

lua编程——air724二次开发之串口通信教程

有了上一章文章《lua编程——air724二次开发之点亮led教程》的基础,接下来将介绍如何使用lua语言进行串口通信。 一、硬件连接 根据银尔达硬件资料的介绍,如下图: 直接将usb转ttl工具和4G模块进行连接,接收和发送线需要交叉连接。…

【IMX6ULL驱动开发学习】07.cdev注册驱动设备_设置次设备号范围

一、register_chrdev 在之前的hello驱动中,注册驱动设备的方式如下 /*初始化设备方法1:自动分配设备号,占用所有次设备号*/ major register_chrdev(0,"hello_drv",&hello_fops);使用 register_chrdev 分配设备号的方式比较…

从玩具到工具|社畜程序员用AI提效的神仙操作

👉腾小云导读 随着 AI 技术的日益发展,前端开发模式和提效工具也在不断地变化。作为一名前端工程师,如何应对 AI 带来的挑战和机遇?在这篇文章中,作者将介绍什么是 AIGC,并深入探讨 AI 在低代码平台的应用。…

【数据结构】顺序表及其实现

目录 1.线性表 2.顺序表 2.1顺序表的概念及结构 2.2顺序表的实现 1.线性表 线性表:是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构,常见的线性表:顺序表,链表,栈,队…

Parallels Desktop 18 18.3.1激活攻略

如果说虚拟机领域有一位王者,非Parallels不能领袖群伦,毕竟大厂背书,功能满格,美中不足之处就是价格略高,但这也并非是Parallels的错,因为市场上没有任何一款虚拟机产品在产品力层面能和Parallels抗衡&…

使用Typora+PicGo+阿里云搭建图床

1.为什么要使用图床 不知道大家有没有遇到过这样的问题? 在使用Typora的时候,我们传到typora上面的图片,在转到其他地方时,总是加载不出来,造成图片丢失现象或者是在将markdown笔记上传到博客时,总是需要一…

华为OD机试真题 JavaScript 实现【静态代码扫描服务】【2023Q1 100分】

一、题目描述 静态扫描快速识别源代码的缺陷,静态扫描的结果以扫描报告作为输出: 文件扫描的成本和文件大小相关,如果文件大小为N,则扫描成本为N个金币;扫描报告的缓存成本和文件大小无关,每缓存一个报告…

(二)安装 Kafka

文章目录 1.选择操作系统2.配置 Java 环境3.安装 ZooKeeper4.安装 broker(1)安装 broker(2)验证是否安装正确 5.配置 broker(1)常规配置(2)主题的默认配置 6.配置 Kafka 集群&#x…

Netty之协议设计

目录 为什么需要协议 redis协议示例 http协议举例 自定义协议 要素 编解码器 测试 为什么需要协议 TCP/IP 中消息传输基于流的方式,没有边界。 协议的目的就是划定消息的边界,制定通信双方要共同遵守的通信规则 例如:在网络上传输 …

c++11 标准模板(STL)(std::ios_base)(三)

定义于头文件 <ios> class ios_base; 类 ios_base 是作为所有 I/O 流类的基类工作的多用途类。它维护数种数据&#xff1a; 1) 状态信息&#xff1a;流状态标志&#xff1b; 2) 控制信息&#xff1a;控制输入和输出序列格式化和感染的本地环境的标志&#xff1b; 3)…

(一)Flask简介和快速使用

关于Python三大Web框架浅谈一嘴&#xff1a; Django、Flask和Tornado三个框架都是Python Web应用的开发框架&#xff0c;虽然它们都能够开发Web应用&#xff0c;但在使用方式、适用领域和处理方式上还是有很多不同的。 Django Django是一个高层次&#xff08;大而全&#xff0…

Flutter自定义系列之折线波动图,心率图,价格走势图

随着前两篇文章的学习&#xff0c;我今天继续给大家演示下简单的自定义之折线波动图&#xff0c;心率图&#xff0c;价格走势图。 这里&#xff0c;我们创建一个自定义的StatefulWidget&#xff0c;用于显示动态的价格线。 我们将使用CustomPaint和CustomPainter来绘制价格线…

chatgpt赋能python:Python中如何截断字符串

Python中如何截断字符串 Python是一种简单易学、高效的编程语言&#xff0c;旨在让开发人员更快、更方便地完成任务。然而&#xff0c;在实际开发过程中&#xff0c;我们常常需要对字符串进行截断操作。那么&#xff0c;Python中怎么截断字符串呢&#xff1f;接下来就让我们来…

如何最大限度地利用ChatGPT、Bard和其他聊天机器人

作者&#xff1a;Hayden Field 译者&#xff1a;明明如月 当下&#xff0c;随着生成式人工智能的发展&#xff0c;面向消费者的聊天机器人能够处理不同领域的需求&#xff0c;并提供相应的帮助和建议&#xff0c;如制定商业战略、设计数学学习指南、提供薪资谈判建议&#xff…

chatgpt赋能python:Python字符串截断-解决方式及实现方法

Python字符串截断-解决方式及实现方法 在Python编程中&#xff0c;处理字符串是一个非常常见的任务。其中&#xff0c;字符串截断也是在许多场景下必不可少的功能之一。Python不仅提供了许多内置函数来处理字符串&#xff0c;而且还有许多方法来截断字符串。 什么是字符串截断…