从2023看2024前端发展趋势

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

前言

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

守正

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

出新

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

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

工程化方向

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

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

Node.js方向

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

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

跨端方向

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

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

智能化方向

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

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

互动方向

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

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

中后台方向

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

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

可视化方向

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

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