从2023看2024前端发展趋势

前端 | 从2023看2024前端发展趋势.png

前言

流光溯影,纵观2023全年,整个前端业界呈现出百业凋零之状,更不乏有“前端已死”等论调甚嚣尘上。从全局视角看IT行业,除了AI领域的大语言模型爆发外,整体都鲜有特别亮眼及突出的技术展现。故而,作为IT领域中细分方向的前端行业,加之整体经济周期的影响,今年的这种形势也算因之有素。然则,行有不得则需反求诸己,私以为各位前端同学应该以“守正”之心念搏“出新”之机遇。因此,以下个人将分享一些各位前端同学应该调整的策略以及未来一年中一些可能出现的机会与趋势。

守正

“持中守正,方可行稳致远”,作为前端工程师,个人认为在当下情势下需舍弃虚妄无用的奇技淫巧,而着力提升底层内核。何谓“奇技淫巧”?私以为前端中的奇技淫巧无外乎各种绚丽效果之呈现技巧,而不探究其内在底层内核,即:仅着眼于当下一时之实现,而无论内在之原理,所谓“不求甚解”大致如此。个人认为,过度关注于技法则易陷入细节完成后之满足,而唯有透过现象看到本质内层,才可触类旁通。“点动成线,线动成面,面动成体”,抓住底层相通之处,形成自己的体系化系统,由内核带动外延才能真正保持一个高水平的眼界与格局。所谓“大巧不工,重剑无锋”,保持对底层原理的探索与思考,才能守道之法而行术之器。举个例子,对JavaScript语言本身的探究就较之实现一个页面逻辑本身来的重要,当内修固稳之后才能形成质的飞跃,内固而外化,厚积而薄发,而内功心法的修炼往往却十分枯燥难以坚持。所以,“仰之弥高,钻之弥坚”,内核强大才能催动外物的延展。

出新

“知常明变者赢,守正出新者进”,诚然,大环境的变化也催化了整个前端走向的变化,近几年以来前端业界大部分的出新大体都来自其他领域的延展融合。为了更好的适应当下的变化,前端工程师不能仅仅局限于本身工作范畴而不去拓展新的边界。个人认为,未来几年一定会朝着更加整合多元的趋势发展,一专多能、具备“特种化作战能力”的前端才是真正意义上的现代化前端。一个前端如果只会前端,那也成不了最好的前端,想要能够高效拓展自己的边界则正需要源于“守正”沉淀下来的内核系统而带来的无限放大。故,“凡战者,以正合,以奇胜”,抱朴守拙才能推陈出新。

综上,作为新时代的前端工程师,前端不会消亡而只会演化。或者更准确的说,传统意义上的前端确实已死,但是现代化的前端则会要求是有一专长且具备更加全面“特种化单兵作战能力”的T型人才。那么,对于专项能力方面,个人认为未来一年在工程化方向、Node.js方向、跨端方向、智能化方向、互动方向、中后台方向以及可视化方向将会有如下变化:

工程化方向

首先,对于工程化方向,个人认为会有以下几个趋势:

  1. 锈(Rust)化:Rust对前端工程领域的侵入已成不可逆之势,但现有JavaScript工具链不会消亡,终局来看应该形成一个融合优化的平衡形态,如:rust和js串并联组合使用等,工具参考:swcTurbopackRspackRolldown等;
  2. Low Code:谈了几年的Low Code能火的形式其实早就存在了,不是近几年才突现的,而且“低代码不是银弹”!在工程2D(to Developer)领域,低代码的亮点在于出码,并且Pro Code和Low Code的复杂度会有一个临界值,超过临界值,Low Code复杂度会成指数级上升;
  3. 供应链建设:前端工程化的走向未来会像传统供应链那样形成上下游链路,而这其中的安全及构件协议等内容会是未来降本增效的一个重要发力点;
  4. 平台工程:当下的技术爆炸导致的选择困难,平台工程其实是一个化繁为简的思路,方式未必正确,但收敛方向是对的;
  5. 大库处理:算是monorepo出现后的必然结果,对仓库管理及Git CLI扩展的变革会有新的挑战。

Node.js方向

其次,对Node.js方向而言,Node.js本身已经难有新的变化,未来会向着安全平稳的方向发展,而伴随的环境生态才是变化的重心,包括:

  1. 边缘计算:Node.js在边缘侧有着天然的优势,本身JavaScript引擎及函数第一优先级的特性就十分适合边缘场景,而对边缘运行时(Edge Runtime)的争夺会是各大云厂商争夺的焦点;
  2. tRPC:正如Go有gRPC一样,基于TypeScript的远程调用也是一种RPC的实现,在边缘场景下也更加适用;
  3. 流量计算:云边端协同场景下,对于边缘侧产物的协同更新会涉及流量计算、edge KV等,参考:蚂蚁金服Unio框架。

跨端方向

再者,对于跨端方向而言,2C领域日渐乏力,新的终端形态会是主流,包括:

  1. TS + Wasm:将TypeScript直接编译为wasm的工具链,让前端真正的能够使用Wasm、真正的能够跨平台,案例参考:WASMR、TS2WASM等;
  2. IoT:考虑不同IoT设备开发使用,包括:手表、眼镜等;
  3. 鸿蒙:基于鸿蒙操作系统的应用开发,如:ArkUI、ArkTS等;
  4. 多终端模式:一家独大不会实现,多终端模式才是未来;
  5. 内核:基于现有内核调优优化,形成多端增强能力统一。

智能化方向

智能化是今年最热的一个话题,前端也不另外,对前端领域的冲击可能会有如下变化:

  1. AIGC:前端对大语言模型等底层的研究很难介入,更多的是对其上游应用层的改革创新,可能会出现相对GUI(Graphic UI)的LUI(Langchain UI)或者AUI(Artificial UI);
  2. ChatGPT:已有GPT的最佳实践在前端侧的应用目前来看主要包括:单元测试和Code Review等场景;
  3. 编辑器:所有编辑器都是大语言模型接入的入口,包括:开发者IDE以及低代码编辑器等;
  4. WebNN:Web领域直接调用机器学习能力,当前已发布候选推荐草案,可以关注后续变化;
  5. SDK:前端基于大语言模型能力提供上层的开发者封装,包括:Vercel AI SDK等。

互动方向

互动方向看似被智能化方向占了风头,但其内在潜力也是很大的,可能会成为今年的爆发口:

  1. DAPP UI:前端在区块链领域主要还是在DApp的相关实践,可以参考:蚂蚁金服新出的Ant Design Web3组件库;
  2. 数字孪生:结合Unity、Unreal等现有游戏引擎实现各端互动渲染,如:WebF等;
  3. 空间小程序:在AR空间开发小程序,对于Vision Pro等新的头显设备进行应用实现,如:JSAR等;
  4. 隐私计算:隐私链等新兴方向的应用开发。

中后台方向

随着阿里等大厂拆中台将业务体系划分后,中后台方向也从单体、微前端等逐步发生了变化:

  1. Web Components:所有基于类Single Spa的微前端都是对现有技术的一种拟合和妥协,Web Components的全面推广才有可能实现浏览器侧的前端组件化,对应的组件库形态也将不依赖于框架,参考:Quarkc、Lit等;
  2. 微应用:和之前的island架构类似,以微组件(Widget)形态对中后台应用进行构建;
  3. 可视化配置:为实现更好的编辑定制效果,对单个页面进行配置化,参考:Builder.io;
  4. 页面模板:抽离更多页面模板而不是整个的页面应用Template,化整为零。

可视化方向

可视化方向则是出现了许多新兴的形式展现,包括:

  1. 可视化叙事:提供叙事形态的可视化呈现,将静态图标进行动态化展现,参考:VisActor等;
  2. 混合渲染:渲染方式上借鉴更多其他渲染方案,如:rust+wasm+webgl 3d渲染;
  3. Web BIM/CIM:重业务领域的web可视化呈现,包括:建筑信息模型BIM(Building Information Modeling)、城市信息模型CIM(City Information Modeling)等。

总结

综上,对整个2023年的前端发展可做如下总结:

守正持中,致远出新

知常明变,合正奇出

工程锈化,边缘运行

多端编译,智能叠加

互动分化,微件组合

动静展现,渲染多光

因势利导,转石于山

前端不死,未来可期

2024已来,愿各位前端开发者在新的一年里慎思明辨、致远笃行,共勉!

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

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

相关文章

【华为机试】2023年真题B卷(python)-猴子爬山

一、题目 题目描述: 一天一只顽猴想去从山脚爬到山顶,途中经过一个有个N个台阶的阶梯,但是这猴子有一个习惯: 每一次只能跳1步或跳3步,试问猴子通过这个阶梯有多少种不同的跳跃方式? 二、输入输出 输入描述…

深度学习核心技术与实践之计算机视觉篇

非书中全部内容,只是写了些自认为有收获的部分 计算机视觉背景 (1)视觉皮层的神经元是一列一列组织起来的,每一列神经元只喜欢某一种特定的形状或者某些简单的线条组合,而不是鱼、老鼠、鲜花 (2&#xf…

记矩阵基础概念

转自up:Naruto_Qcsdn:三维空间几何变换矩阵 先贴个站里分享的基础概念。 learn form 肥猫同学VFX b站:会用transform就会用矩阵 移动 旋转 缩放 1.transofrm ——输出变化矩阵 可以移动transform查看变化去理解 位移 缩放 旋转 由此—…

一个有趣的MOSFET电路-触摸调光电路

来源 刷B站视频,看到一个很新奇的“触摸调光电路”,电路图如下: 视频在这里,只使用了3个元件。 刚好最近在学模拟电路的 MOSFET,我之前的理解是 MOSFET 的控制电压应该加在 Gate 和 Source 之间,也就是 栅…

【ES】es介绍,使用spring-boot-starter-data-elasticsearch整合的ES来进行操作Es

文章目录 倒排索引(Inverted Index)和正排索引(Forward Index)es和MySQL对比IK分词器的总结mapping映射使用springboot整合的ES来进行操作Es1. 实体类中添加注解2. 编写Repository层3. 通过Repository进行增删改查 倒排索引&#…

2023年年度总结,一个小白的CSDN涨粉历程

前言 滚滚长江东逝水,一去不复返。 转眼间已到2024年节点,时间如滚滚长江水向东奔流不息,在长江消失之前,都不会停歇,也不会回头。人亦如此,不管是生活还是学习,都是不断往前走的过程&#xff…

VMware虚拟机之文件夹共享jdk和tomcat安装防火墙设置

目录 一. 配置文件夹共享功能 1.1 为什么需要配置文件夹共享功能 1.2 配置文件共享功能 1.3 普通共享和高级共享的区别 1.3.1 普通共享 1.3.2 高级共享 1.3.3 总结 二. jdk的配置 2.1 安装jdk 2.2 配置jdk的环境配置jdk 2.3 配置成功 三. TomCat的配置 四. 防火墙设置 4.1…

java生产设备效率管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web生产设备效率管理系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为ac…

【SD】一致性角色 - 同一人物 不同姿势 - 2

首先生成4张不同姿势的图片 masterpiece,high quality,(white background:1.6),(simple background:1.4),1gril,solo,black footwear,black hair,brown eyes,closed mouth,full body,glasses,jacket,long hair,long sleeves,lookig at viewer,plaid,plaid skirt,pleated shirt,…

记录 Docker 中安装 ROS2

目录 1 安装 Docker 2 安装 ROS2 3 启动 Docker 4 测试 ROS2 环境 1 安装 Docker 1. 更新软件包sudo apt updatesudo apt upgrade2. 安装 docker 依赖sudo apt-get install ca-certificates curl gnupg lsb-release3. 添加 docker 官方 GPG 密钥curl -fsSL http://mirror…

VUE——IDEA 启动前端工程VS文件启动前端工程

IDEA 启动前端 目录 前言一、打开控制台二、输入npm install三、依赖下载完之后,输入npm run dev,运行前端项目1、IDEA启动前端工程2、文件目录启动前端工程 四、点击http://localhost:8080后续敬请期待 前言 启动已有的vue前端项目 一、打开控制台 选…

【解决复杂链式任务打造全能助手】大模型思维链 CoT 应用:langchain 大模型 结合 做 AutoGPT

大模型思维链 CoT 应用:langchain 大模型 结合 做 AutoGPT,解决复杂链式任务打造全能助手 思维链 CoTlangchainlangchain 大模型结合打造 AutoGPT 思维链 CoT 最初的语言模型都是基于经验的,只能根据词汇之间的相关性输出答案,根…

【分库分表篇】分区和分表的区别

分区和分表的区别 ✔️ 解析✔️拓展知识仓✔️分区的方式✔️MySQL 数据库支持的分区类型为水平分区 ✔️ 解析 数据库中数据量过多,表太大的时候,不仅可以做分库分表,还可以做表分区,分区和分表类似,都是按照一定的规…

Vue-Setup

一、setup概述 小小提示&#xff1a;vue3中可以写多个根标签。 Person.vue中内容 <template><div class"person"><h2>姓名&#xff1a;{{name}}</h2><h2>年龄&#xff1a;{{age}}</h2><!--定义了一个事件&#xff0c;点击这…

PyTorch常用工具(2)预训练模型

文章目录 前言2 预训练模型 前言 在训练神经网络的过程中需要用到很多的工具&#xff0c;最重要的是数据处理、可视化和GPU加速。本章主要介绍PyTorch在这些方面常用的工具模块&#xff0c;合理使用这些工具可以极大地提高编程效率。 由于内容较多&#xff0c;本文分成了五篇…

一起学量化之KDJ指标

KDJ指标,也称为随机指数,是一个常用的技术分析工具。它由三条线组成:K线、D线和J线,分别代表不同的市场动态。KDJ指标通过分析最高价、最低价和收盘价计算得出。 1. KDJ指标理解 J线是移动速度最快的线,可以提供更加敏锐的市场信号。K线是指标的核心,显示市场的即时动态。…

[每周一更]-(第46期):Linux下配置Java所需环境及Java架构选型

Linux下配置Java所需环境及Java架构选型 一、配置基础环境 1.配置tomcat 环境变量 wget https://dlcdn.apache.org/tomcat/tomcat-10/v10.1.8/src/apache-tomcat-10.1.8-src.tar.gz tar -zxvf apache-tomcat-10.1.8-src.tar.gz 在/etc/profile 末尾追加export CATALINA_HOME…

异常控制流ECF

大家好&#xff0c;我叫徐锦桐&#xff0c;个人博客地址为www.xujintong.com&#xff0c;github地址为https://github.com/xjintong。平时记录一下学习计算机过程中获取的知识&#xff0c;还有日常折腾的经验&#xff0c;欢迎大家访问。 一、异常控制流&#xff08;ECF) 现代系…

[BUG]Datax写入数据到psql报不能序列化特殊字符

1.问题描述 Datax从mongodb写入数据到psql报错如下 org.postgresql.util.PSQLException: ERROR: invalid bytesequence for encoding "UTF8": 0x002.原因分析 此为psql独有的错误&#xff0c;不能对特殊字符’/u0000’,进行序列化&#xff0c;需要将此特殊字符替…

webrtc中的接口代理框架

文章目录 接口代理框架Proxy体系类结构导出接口 webrtc的实际运用PeerConnectionFactoyPeerConnection使用 接口代理框架 webrtc体系庞大&#xff0c;模块化极好&#xff0c;大多数模块都可以独立使用。模块提供接口&#xff0c;外部代码通过接口来使用模块功能。 在webrtc中通…