本文作者：来自MoonWebTeam的nicolasxiao、yamachen

本文编辑：kanedongliu

1. 前言

前端行业的发展速度非常迅速，新的技术和工具不断涌现，前端开发人员需要不断学习和适应这些变化。在“大前端”概念下，前端不止前端。

MoonWeb通过调研学习前端行业技术演进方向及优秀实践，结合应用宝业务特点和应用宝前端团队情况，制定未来团队的技术方向。

2. 行业趋势及借鉴点总结

前端技术	行业趋势	可借鉴点
D2C	D2C适应各种前端框架、组件识别、结合低码的二次编辑能力	页面级别：结合设计规范、组件规范搭建组件物料为基础，往C2D2C方向实现组件识别，产出高质量的代码组件级别：解决视图层开发工作，结合AI生成代码，快速生成HTML、css代码
跨端	各大厂自研跨端框架、不同框架适应不同的业务场景有差异（客户端、小程序、web、桌面端）	PC app 选型可以采用现在已经日渐成熟的 tauri 方案
监控	传统监控告警系统已经很成熟，基于经验做智能解决问题归因、错误定位、解决方案	更有价值的日志信息：整合日志、埋点、服务器状态等信息，结合LLM做错误分析、归因、定位、解决方案推荐
框架	开箱即用、完善的周边生态、开发辅助能力	框架能力搭建的借鉴点：前后端一体化架构：可以在前端代码直接调用后端逻辑，使前后端的开发体验能融为一体，免去大量的胶水代码的编写，大幅度提升全栈开发的体验和效率，代表有 next.js ，modern.js 整合解决方案：主流企业级框架的趋势，即在一个框架里整合进所有解决方案，做到开箱即用，降低方案接入的成本，缩短项目开发周期极速构建能力：新兴框架的趋势，底层采用基于 rust 的工具链，为调试，构建带来10～100x的速度提升。开发的项目规模越大，带来的提升更为明显
工具链建设	主要是以提升构建性能为目标，以 rust 重构现有的工具链，包含打包工具，lint，转译器等	框架工具链搭建：开发角度：使用rust开发框架的生产力工具以提升工具的性能，加速研发流程；通过 IDE 插件形式提供代码工具，例如：代码片段，代码模版，调试等，来提升研发的体验和效率使用角度：引入这些新兴的高性能工具链来加速框架开发，调试，构建，发布等流程
低代码	大厂正在做自由的低代码通用框架，已有低码产品团队：低代码 + AI降低搭建复杂度	降低搭建复杂度：探索在无极和MOKA平台中尝试加入AI辅助配置的能力，提高配置效率
活动游戏	通常是基于现有的H5游戏引擎开发活动游戏，如果在体验上有极致追求，则更多是走开发自研的H5游戏引擎的路线，从机型兼容和细节上做极致优化	搭建游戏型活动玩法能力：引入游戏引擎能力，如3D 渲染，物理特效，动画等，丰富活动玩法
E2E	录制回放为主，AI+E2E很理想，暂时市面上未有相关成熟产品出现	代码级别测试用例：腾讯文档思维导图生成测试用例的形式
AI辅助开发	基于IDE的辅助编码插件、主要集中在代码生成、测试用例、注释为主	应用和集成：选择一个合适的开源工具定制化训练，增加司内基建集成，如埋点、日志、cdn、告警
图片处理	运用 web assembly 和 web gpu 技术来解决 web 上图片处理的性能问题，引入更多的视觉处理效果	云游超分：运用 webgpu 开发超分算法，提升H5 云游的整体画质
webAssembly	目前主要用途有两个承载 web 应用的计算密集型任务移植其他语言开发的功能模块到 web 应用	解决密集计算问题：部分需要密集计算的视觉效果，可以采用 rust 开发，再编译成 web assembly引入项目复用现有的第三库：一些其他语言实现的第三方库，可以通过 web assembly 的方式引入，而没必要采用 javascript 的低效版本或者重复造轮子

3. 框架与工具

3.1. D2C

在当今高速发展的互联网时代，提高软件开发效率, 降低研发成本是互联网企业日益关注的问题。为了解决前端视觉还原的问题，许多团队都开始研发或使用智能化工具 Design2Code（简称D2C）。

D2C行业中已有很多成熟的方案，国内的如阿里ImgCook、京东 Deco、字节Semi、网易海豹D2C、CodeFun；海外的如Locofy、微软 AI Lab，都是值得学习的优秀实践。从近期各大技术大会分享可见2023年D2C领域的技术趋势是结合AI能力帮助生成对开发者更友好的代码，组件识别上降低对设计干预的依赖。

3.1.1. 业界方案介绍

视觉稿标注方案：（腾讯QPilot、字节Semi、网易海豹D2C）

代表作：网易海豹D2C – 云音乐D2C设计稿转代码建设实践 – 知乎

视觉稿标注方案是常见的D2C的解决思路，依赖figma的openApi可以提取设计稿中的图层信息，再通过识别其中的标准信息转化成前端领域的组件。这种方式存在提效陷阱，将工作复杂度从前端转移到设计。对设计同学而言，要遵守严格的设计规范、额外增加图层的标识工作。

基于上述问题网易海豹D2C的解决思路是C2D2C，将组件的代码库，通过 C2D 技术，也就是 Code to Design，将其转换成设计软件的 Library，并同步诸如组件相关的元数据。这样设计师在使用 Library 的时候，通过元数据就自动实现了对组件的标注，最后在 D2C 的过程中将就会被识别出来。

024年前端技术演进&优秀实践技术扫描"

总结：通过这种方式海豹D2C解决了设计同学的标注，但也不可避免对前端团队和设计团队的强绑定，设计团队需要使用固定的设计物料。

图像识别+AI方案：（阿里ImgCook、京东 Deco、CodeFun、Locofy、微软 AI Lab）

代表作：codeFun – CodeFun – UI 设计稿智能生成源代码

对比视觉稿标注方式，CodeFun通过算法的识别过程并不依赖于设计稿中任何的手工标注、特殊编组或特定规范，所以设计师按照原有的流程和设计风格正常输出即可，零新增工作量、零学习成本。
使用codefun需求研发流程如下：

024年前端技术演进&优秀实践技术扫描"

在组件识别方面CodeFun提供用户自行上传自定义组件库，作为图像识别的物料。支持识别前端业务中常见的循环输出的列表图形，生成listItem循环语句，其产物代码更符合开发思维。

可借鉴的：

从D2C的实际生产场景看，小团队或稳定团队中，使用视觉稿标注方案是足够满足业务需求。对于大团队图像识别方案是更适合的前端视觉还原开发流程，复杂度也更高，codeFun的创始人曾经分享中说过他们AI算法的工作量占95%。而今大语言模型的出现是个很好的机会，利用LLM实现D2C。

3.2. 跨端

跨端技术主要是采用web开发技术，来开发原生客户端，桌面端，以及小程序端的技术。跨端技术的价值是，可以编写一份代码，运行在多个平台，提升了研发效率，以往开发需要专门为安卓，ios，小程序，PC端各写一份代码，运用了跨端技术，可以只写一份代码，就能运行到上述多个系统。

目前已经在市面上多种成熟产品上落地。比如：facebook 的 app 基本采用了 react native 技术，国内大部份主流 app 都集成有类似 react native 或者 flutter的跨端框架，并采用跨端技术承载一部份客户端的交互界面。再比如，微软开发的知名 IDE vscode，就是完全采用网页开发的模式编写而成，底层的技术采用的是 electron，一个桌面端的跨端解决方案。

3.2.1. 业界方向

跨端的方向主要分为：移动端跨端，小程序跨端，桌面跨端和鸿蒙跨端。

3.2.1.1. 移动端跨端技术

用于解决 iOS，安卓，web端的跨平台问题，
代表方案如下：

react native：facebook 开发的框架，目前除 flutter 以外最流行的方案
flutter：google 基于 blink 引擎简化而来的跨端框架，以极致性能为亮点
hippy：腾讯内部模仿 react native 的框架，主要是腾讯系 app 在使用
weex：阿里内部的类 react native 框架，主要运用在阿里系 app
原理简析：
除了 flutter 其他三种方案原理上都近似，这里以 react native 为例：

面向开发的是 web 开发技术栈，开发者使用开发网页的方式开发原生界面，代码逻辑通过 javascript bridge 与原生 api 进行交互，而界面呈现通过自定义的渲染引擎，转换为原生的组件。
flutter 整体方案类似，但在底层渲染，采用了组件自绘渲染，不依赖于原生组件。

3.2.1.2. 小程序跨端技术

这类技术主要解决的是：

不同端的小程序的跨平台问题，比如微信小程序，抖音小程序，支付宝小程序等
web 页面与小程序的跨平台问题，比如一套代码即能生成 web 页面，也能生成小程序
小程序与移动端 app 的跨平台问题：比如通过一套代码即能生成小程序，也能生成移动端 app
代表方案如下：
taro：京东开发的小程序跨端框架，是目前主流的小程序跨端解决方案
uniapp：dcloud 公司开发的小程序商业方案，中小公司采用较多
morjs：饿了么的小程序跨端框架
原理简析：
以 taro 为例，taro从版本3开始，切换为解释型框架。原本小程序提供的 api 是不兼容 web 开发的 DOM api，而现有的前端框架 vue，react 底层都依赖于 DOM api。所以 taro 的做法就是在小程序的基础上封装一套兼容 DOM 的 api，让 vue，react等框架可以直接运行在小程序平台上，达到跨小程序的能力。

3.2.1.3. 桌面端跨端技术

这类技术主要解决的是桌面端三端 windows，mac，linux 的跨平台问题。因为这三个操作系统提供的 UI 以及底层的其他接口都不一致，所以通常开发一个应用除了核心逻辑以外需要维护三份不同的跨平台代码。

而桌面端跨端技术，有 Qt，gtk等 C++解决方案，但这类方案开发的门槛还是比较高的。所以就有了基于 web 技术栈的跨端解决方案。

主要代表方案有以下几种：

electron：github 推出的基于chromium的桌面跨端方案，目前有大部分桌面应用是基于此方案开发，其中有著名的开发 IDE vscode，atom，腾讯的 QQ 新架构等
nw.js：英特尔维护的桌面跨端解决方案，早期使用者比较多，目前使用者不多，主要代表是微信开发者工具
tauri：近两年最热门的跨端方案，底层采用 rust 开发，主要解决 electron 打包后体积庞大，代码性能较差等问题。

3.2.1.4. 鸿蒙跨端

这是华为独有的技术，本质是为了解决华为手机 app 生态建设问题。

采用 web 技术栈可以吸引市面上大量的前端开发者快速转型鸿蒙 app 开发，大幅提升鸿蒙 app 生态搭建速度。鸿蒙配套了开发套件 HUAWEI DevEco Studio（IDE）、开发框架 ArkUI、方舟编译器 ArkCompiler、开发语言 ArkTs 以及编译构建工具 HUAWEI DevEco Hvigor。

其中：

ArkUI 框架提供基于 JS 扩展的类 Web 开发范式和基于 ArkTs 的声明式开发范式。
ArkUI更是在底层设计上兼容了前端团队，提供了基于 ArkTS 的声明式开发范式和基于 JS 扩展的类 Web 开发范式。

3.3. 全栈框架

前端的基础框架一直是以 react， vue，angular 主导，后继者有 svelte，solid等。这些框架聚焦做的是 UI 交互和 UI 的状态，解决的是如何接受用户的操作，以及如何展示后端的数据。这类框架要运用到简单的项目，比如一些单页面的活动页，是可以做到搭配一些工具库就开箱即用的。

但如果是要运用在一个中大型的项目上，就需要开发者自己去集成各种功能库，制定开发流程，完成工程化建设，才能让一个项目比较顺畅的跑起来。

3.3.1. 业界方向

为了能够在应对中大型项目的开箱即用，目前国内外已经有一些整合的框架出现，这类框架通常集成了如下的能力：

前端 UI 交互（基于 react，vue等）
前端状态管理（UI 状态管理，数据同构等）
应用路由管理（浏览器路由，服务器路由等）
前端性能优化方案集成（SSR，SSG等）
后端 BFF 方案集成（支持开发后端逻辑）
完善的插件体系（通过插件系统，对接内部，外部的功能模块）
企业级的生态系统（对接大量企业内部中台能力）
完善的工具链（集成开发，调试，构建，发布等能力）

3.3.2. 代表方案

vercel next.js：开创全栈框架先河的标杆产品，大部分公司采用的服务端渲染方案。
shopify remix.js：和 next.js 定位接近。由React Router背后的团队开发,最近被Shopify收购
字节 modern.js：结合字节自研的 rspack rust 工具链，并集成了字节内部的一些前端解决方案。主要的设计思路应该是参考了 next.js

3.3.3. 借鉴

前后端一体化架构：可以在前端代码直接调用后端逻辑，使前后端的开发体验能融为一体，免去大量的胶水代码的编写，大幅度提升全栈开发的体验和效率，代表有 next.js ，modern.js

整合解决方案：主流企业级框架的趋势，即在一个框架里整合进所有解决方案，做到开箱即用，降低方案接入的成本，缩短项目开发周期

极速构建能力：新兴框架的趋势，底层采用基于 rust 的工具链，为调试，构建带来10～100x的速度提升。开发的项目规模越大，带来的提升更为明显

3.4. 工具链建设

3.4.1. 业界方向

前端工具链建设近年来的趋势是，不断地追求工具的执行效率，以及工具的智能化。

其中执行效率优化的背景和主要发展方向如下：

早些年前端的工具链由于同源开发的思想，大部分都是采用 javascript 开发的，这些工具由于 javascript 的性能较差的问题，导致工具的执行效率也比较差。
近2年的思路是，通过 go 或者 rust 这种高性能语言，来重写前端的工具链，提升工具的执行性能。
最早做这个尝试的是 figma 的 esbuild，通过用 go 重写 javascript/typescript 转译器，css 转译器，以及模块构建等，实现了构建效率的显著提升，比传统的 webpack 快了接近 100 倍。

3.4.2. 代表方案

字节 rspack：快速的前端打包工具，技术选型 rust，提升调试，构建的效率，支持灵活的配置，支持生产环境的优化能力，通过高性能构建和 webpack 配置兼容解决以下痛点：巨石项目的构建效率太低，大量存量项目使用 webpack配置难以迁移。
oxc：基于 rust 开发的高性能 javascript 编译器套件，用来替换现有用 javascript 开发的编译器套件，可以替换掉以下现有的工具链能力：eslint 的 lint 工具、javascript 解析、代码格式化、模块解析器、代码精简、转译。
rolldown：基于 rollup 改造的 rust 版打包工具，由 vue 团队维护
GPT结合工程化实现智能研发提效： www.w3.org/2023/06/chi…

项目地址：GitHub – airuikun/smart-ide: 在vscode插件中结合chatgpt能力，实现智能研发提效
IDE插件：代码片段、最佳实践、插件管理、CDN资产管理能力，开发辅助工具大集合
基于 rust 的node可视化分析工具：
km.woa.com/articles/sh…
解析堆快照并生成内存节点结构。将节点结构可视化为图表，以便开发者更好地理解内存泄漏的原因。提供分析报告，帮助开发者智能地分析可能导致内存泄漏的地方。支持多快照分析报告，以便在多个快照之间进行对比。
国外其他项目：vercel 公司的 turbopack，figma 的 esbuild等

3.5. E2E

3.5.1. 业界方向

目前 E2E 测试以录制回放为主，可视化编排和运用 AI 将自然语言转成成用例都有方案在尝试，但实际效果并不理想。

3.5.2. 优秀实践

美团可视化 E2E 方案
技术方案：自动化测试在美团外卖的实践与落地 – 美团技术团队
基于录制回放 + 二次可视化编辑生成测试用例，如下图：
腾讯文档 E2E
通过脑图书写自然语言测试用例，通过 LLM 转换为测试用例 DSL，再将 DSL 进一步用 LLM 转换为测试用例代码

3.6. AI辅助开发

ChatGPT 代码生成现状：

ChatGPT 是“懂”代码的，给出一段代码可以正确的添加注释，甚至还可以根据上下文优化变量命名、完善代码；
ChatGPT 是会“猜”代码的，仅仅给出一个函数声明，它可以根据函数命名、参数命名猜测函数的功能，并生成测试用例；
ChatGPT 生成通用代码（例如基础库）比较容易，但是生成特定领域的代码可能不符合该领域的最佳实践；
ChatGPT 生成代码质量和使用者有关，输入越准确生成代码质量越高，输入内容过多或者过少都会导致生成结果变差。
调研业内头部产品化的AI辅助开发工具：

产品	简介
GitHub Copilot	微软、OpenAI、GitHub 三家联合打造的 AI 编程辅助工具，数十亿行公共代码上训练的，由 OpenAI 开发的全新 AI 系统 OpenAI Codex 提供支持。
Fitten Code	清华系公司非十科技开发，比GitHub Copilot快两倍的同时，准确度还提高了约20%。
CodeGeeX	CodeGeeX 是清华大学知识工程实验室研发的全能的智能编程助手，其模型是国产深度学习框架计图（Jittor）和非十研发的代码大模型开发。
通义灵码	是阿里云出品的一款基于通义大模型的智能编码辅助工具，并针对阿里云的云服务使用场景调优。

目前业内AI辅助开发工具除了内核模型不同，产品形态上对用户提供的能力和使用方式基本相同。都是以IDE插件形式安装使用，并为用户提供以下能力：根据上下文联想生成代码、通过注释使用自然语言生成代码、生成函数单元测试代码、解析函数生成注释、智能bug查找。

代码生成 – 结合上下文信息能力

众所周知ChatGPT 生成通用代码比较容易，在业务代码上较为难以让人满意，从原理上看结合上下文信息能力受限于token数。

其中只有通义灵码和Github Copilot在生成代码时能够结合跨文件上下文信息，从网上用户实际使用案例看：能够获取目录结构中其他文件TS类型，在生成代码与该类型一致。

案例：引用自使用 GitHub Copilot 一個月心得

第一步：工程目录中创建Address TS类型

024年前端技术演进&优秀实践技术扫描"

第二步：把 address.ts 开启在另一個页签上，使用 Github Copilot 通过注释生成代码

024年前端技术演进&优秀实践技术扫描" 生成的JS代码可以看到函式中使用的 address 参数虽然未有定义 Address 类型，但其实际使用的内容，与我们先前定义的型别完全相同。由此可以看出其他开启的页签内容，也会作为 GitHub Copilot 产出建议内容的上下文使用。

const fullAddress = (address, locale = 'en') => {
        let country, city, state, zip_code, address_1, address_2;
        if (locale === 'en') {
            country = address.country;
            city = address.city;
            state = address.state;
            zip_code = address.zip_code;
            address_1 = address.address_1;
            address_2 = address.address_2;
            return `${address_1}, ${address_2}, ${city}, ${state} ${zip_code}, ${country}`;
        }
        else if (locale === 'zh') {
            country = address.country;
            city = address.city;
            state = address.state;
            zip_code = address.zip_code;
            address_1 = address.address_1;
            address_2 = address.address_2;
            return `${country}${state}${city}${zip_code}${address_1}${address_2}`;
        }
        else {
            throw new Error('locale not allowed');
        }
    }

代码生成 – 单元测试

人工编写高质量的单元测试用例费时费力，结合AI生成单测代码的前景很美好。在网上的测评看目前单元测试效果：

对于逻辑比较简单的代码，ChatGPT 生成的单元测试和集成测试代码质量较高，基本可以直接运行，或做很小的修改即可运行。

对于复杂逻辑代码，ChatGPT 生成的单元测试覆盖率在 30%-40%左右，如果继续要求 ChatGPT 补充更多的单元测试，ChatGPT 可能会生成一些与上一个版本重复的单元测试，或者给私有方法添加单元测试。这表明对于分支逻辑较为复杂的代码，ChatGPT 生成的单元测试覆盖率不够，剩余的部分需要人工进行补充或修正。

3.7. 富交互

3.7.1. 业界方向

主要聚焦于提升复杂交互与渲染的体验，这部分成套的方案比较少，大多是团队内部的技术沉淀。

3.7.2. 代表方案

阿里 bindingx 框架：阿里开发的用于 weex 和 react native 的富交互框架
- 支持复杂交互恒定 60 fps 刷新
- 支持表达式绑定，简化富交互的实现复杂度
  
  材料： alibaba.github.io/bindingx/gu…

4. 平台搭建

4.1. 监控

4.1.1. 业界方向

业界基础监控的架构已经很成熟，故障告警分析高要求且紧急，尤其在高级别告警触发时引发不安。自动化分析成为SRE和技术团队关注焦点。大型语言模型为解决这一问题带来希望，通过大模型对错误告警分析，智能解决问题归因、错误定位、解决方案。

4.1.2. 代表方案

传统方案：

去哪儿：大前端精细化治理——组件 ID 机制

为了快速定位线上问题，通过建立了组件ID机制并采用以下管理机制：页面分级、业务线标识、页面ID以及组件ID。还引入了页面评分机制，其亮点包括自动生成的全覆盖组件ID，以及可视化的组件管理界面和组件级别数据报表。通过这些措施可以更有效地识别和管理线上问题，提高工作效率。

AI+监控方案：

腾讯：基于大语言模型LLM ChatGPT能力的故障告警自动化分析初步探索分享

当故障告警发生时，系统会自动聚合事件、监控和日志等信息，整理后的数据将推送至大型语言模型进行分析。提供错误告警的问题归因、错误定位及推荐解决方案。还可以在企业微信聊天对话中查询服务状态和管理服务。

故障发生 → 事件/监控/告警信息聚合 → 大模型分析 → 推送企业微信（问题归因、错误定位、解决方案） → 企业微信聊天对话查询服务状态、服务管理。

4.2. 低代码

4.2.1. 业界方向

低代码领域行业已经比较成熟，各大厂内都有大规模使用的落地场景。都在持续打磨低代码产品的能力，主要可以分为两个方向：

技术：标准化低代码通用框架
搭建效率：结合AI增强搭建辅助

4.2.2. 代表方案

阿里：低代码携手AI，让重新变得更简单
低代码项目随着功能的扩展，日益增长复杂度和学习成本让配置人员难以精通。传统的解决方案只有通过模板、文档、输入提示这类效果有限，在AI大火之下低代码+AI辅助解决业务配置复杂度问题，提高搭建效率。
功能：
辅助页面搭建：基于自然语言、图片生成推荐模板、应用、组件
非技术人员难以配置的内容：填充数值公式、正则校验逻辑、业务字段关联关系
智能客服：无需阅读文档，通过自然语言对话得到问题答案
微软：Power Automate Copilot
Power Automate 是一款微软推出的自动化工具，它让用户能自行设计流程，解决数据收集、文件处理、审批流程。自23年10月加入AI助理功能，拥有通过自然语言描述实现页面搭建、创建审批流程等能力，降低低代码开发的学习成本。

4.2.3. 借鉴

目前团队业务无论B端还是C端，都大范围使用低代码平台生产。不造大轮子，将AI应用于辅助能力，从用户使用实际出发提效

4.3. 活动游戏

4.3.1. 业界方向

目前在活动上引入游戏交互主要有两个实践方向：

通常的做法：基于现有的H5游戏引擎开发
体验上极致追求的做法：开发自研的H5游戏引擎，从机型兼容和细节上做极致优化

4.3.2. 代表方案

阿里 galacean：pixi 引擎基础上自研的游戏引擎，支持丰富的特性：
- 2D，3D游戏渲染
- 物理效果
- 运动轨迹编辑器
- 支持 3D 降级
- 游戏资源压缩
  
  这款自研引擎的亮点是支持可视化的游戏场景搭建，方便运营自己搭建游戏，降低研发成本；支持高低端机自动化降级，可以自动适配覆盖更多的机型。
其他主流H5 游戏引擎： cocos，layabox，egret，pixi

5. 浏览器能力运用

5.1. webAssembly

5.1.1. 业界方向

目前 web assembly 主要用途有两个：

承载 web 应用的计算密集型任务
移植其他语言开发的功能模块到 web 应用

5.1.2. 代表方案

h5 游戏
- 白鹭引擎发布 web 端游戏
- unity游戏移植 web 端
大型 web 应用
- Google Earth 3D地图
- figma设计工具
LLM
- webAI：Web AI 是一个 TypeScript 库，可让您直接在 Web 浏览器或 Node.js 中运行现代深度学习模型。您可以轻松地将 AI 功能添加到您的 Web 应用程序中，无需复杂的服务器端基础设施或第三方 API。 github.com/visheratin/…
音视频处理
- Wasm+vue | 无服务端录屏、转码、转GIF： Wasm+vue | 无服务端录屏、转码、转GIF – 掘金
- 使用 Web Worker + SharedArrayBuffer 并行实现视频实时滤镜效果：使用 Web Worker + SharedArrayBuffer 并行实现视频实时滤镜效果 – 掘金

5.1.3. 材料

5.2. webAR

今年在AR领域最受关注的消息是Apple Vision Pro已经实现量产将于2024年1月发售。其惊艳的实际体验效果，一场AR重构消费电子的战事已经悄然开启，未来通过AR重塑WEB领域内容体验。

5.2.1. 代表方案

ARJS ，基于 WebRTC 和 Three.js 的 AR 框架，支持在浏览器中展现 AR 内容，支持通过VSCode插件进⾏预览调试、适合前端的类DSL描述。

5.2.2. 材料

前阿里TL分享 – 作为前端如何赶上AR的脚步

5.3. 图片处理/音视频

5.3.1. 业界方向

这个应用方向主要的探索趋势是：运用 web assembly 和 web gpu 技术来解决 web 上图片处理的性能问题，引入更多的视觉处理效果

5.3.2. 代表方案

字节：veImageX 演进之路：Web 图片加载提速50%： veImageX 演进之路：Web 图片加载提速50% – 掘金
web 版 photoshop：大量运用前沿的 web 技术搭建的大型 web 应用，功能与桌面版 photoshop 等价，Photoshop 線上版 – Adobe Photoshop，以下为 web photoshop采用的技术方案
- opfs，web 文件系统，运用在本地 psd 文件读写
- web assembly，运用在移植 photoshop c++ 模块， AI 模型运算
- webgpu， AI 模型运算，图像处理
- web components，用于开发整体的 UI
- service work，用于缓存 web assembly 模块

最后，如果客官觉得文章还不错，👏👏👏欢迎点赞、转发、收藏、关注，这是对小编的最大支持和鼓励，鼓励我们持续产出优质内容。

024年前端技术演进&优秀实践技术扫描"

6. 关于我们

MoonWebTeam目前成员均来自于腾讯，我们致力于分享有深度的前端技术，有价值的人生思考。

7. 往期推荐

E2E测试用例生成方案探索

穿越时空：2023年前端技术盘点与2024年技术展望

基于 Appium2 的 H5 E2E 测试实践

一文带你了解前端渲染模式演进史

长文带你深入剖析微内核架构

原文链接：https://juejin.cn/post/7352717985020690442 作者：MoonWebTeam

2024年前端技术演进&优秀实践技术扫描

1. 前言

2. 行业趋势及借鉴点总结

3. 框架与工具

3.1. D2C

3.1.1. 业界方案介绍

3.2. 跨端

3.2.1. 业界方向

3.2.1.1. 移动端跨端技术

3.2.1.2. 小程序跨端技术

3.2.1.3. 桌面端跨端技术

3.2.1.4. 鸿蒙跨端

3.3. 全栈框架

3.3.1. 业界方向

3.3.2. 代表方案

3.3.3. 借鉴

3.4. 工具链建设

3.4.1. 业界方向

3.4.2. 代表方案

3.5. E2E

3.5.1. 业界方向

3.5.2. 优秀实践

3.6. AI辅助开发

3.7. 富交互

3.7.1. 业界方向

3.7.2. 代表方案

4. 平台搭建

4.1. 监控

4.1.1. 业界方向

4.1.2. 代表方案

传统方案：

AI+监控方案：

4.2. 低代码

4.2.1. 业界方向

4.2.2. 代表方案

4.2.3. 借鉴

4.3. 活动游戏

4.3.1. 业界方向

4.3.2. 代表方案

5. 浏览器能力运用

5.1. webAssembly

5.1.1. 业界方向

5.1.2. 代表方案

5.1.3. 材料

5.2. webAR

5.2.1. 代表方案

5.2.2. 材料

5.3. 图片处理/音视频

5.3.1. 业界方向

5.3.2. 代表方案

6. 关于我们

7. 往期推荐

相关推荐

发表回复