AI浪潮下，前端路在何方

一、本文主题

本篇为第二篇，依托于AI，无学习基础前端转KMP开发，主要针对前端发展展望，实践，和思考进行讲解。其中包含前端转KMP开发，并最终将项目如期落地。

篇一

篇二

• 展望：介绍AI对前端职业的影响和变革，以及对自身学习成长的影响
• 实践：依托于AI，实现无学习周期的，前端转KMP跨端
• 思考：未来研发团队新形态的探索和思考

二、行业发展，展望总结性观点

从语言热度趋势，框架/工具发展，浏览器发展，AI工具支持，跨端演变，学习模式变革等方面，分析前端发展和未来展望

总结性观点

• 从AI在编程语言支持能力情况，前端和AI有非常强的融合能力，必然会走向人机协同模式。同时拥抱具有类型安全性的TS已是必然趋势。有机遇也有风险，传统开发者逐步转变为AI人机协同研发。vibe coding，大模型善后工程师，AI 80分危机等，新兴用词出现，也预示着这一变革的推进，编码方式转变正在发生。
• 前端在视觉展现上，具有代码体量小，依赖少，适配性强（web/pc/android/iOS均可渲染）的特性，HTML+CSS或HTMX渲染的具有动态和交互行动的视觉文档，未来会有更大的发展空间，既能很好的适配AI认知理解，又能呈现良好的视觉，未来对PPT必然产生强有力的冲击。（不妨在知识库随心搭试试，比PPT效果好）
• 前端工程体量逐渐庞大，开发阶段效率和性能问题已然摆到开发者面前；AIGC的快速发展，浏览器将承接更多复杂场景，视频编辑、设计工具（Figma）、3D引擎等。基于Rust工具链建设和Rust+Wasm在浏览器中实现原生性能，快速崛起。前端工程和浏览器将依托Rust的性能优势，组合出更复杂的工具和业务场景。
• 谷歌浏览重大更新，DevTools 深度集成 Gemini，Chrome DevTools 不仅仅是检查器，它正在变成一个 AI 编程助手，WebGPU 全面铺开：Chrome 121 起支持 Android WebGPU。意味着浏览器中的 AI 推理Transformers.js、3D 渲染和视频编码现在可以直接调用 GPU 底层架构。Wasm 内存升级： WebAssembly 现在支持大于 4GB 的内存寻址，可以处理更加的大型 3D 工程（AutoDesk Web、Adobe 全家桶）
• AI原生IDE和AI插件和Code CLI，当前三分天下，原生IDE快速崛起，Cursor领头，国内外多家大厂开始意识到IDE集成化的优势和价值。AI插件仍是用户基数最大的选择，也是起步早，范围广的AI辅助方式。Code CLI在专业开发者中获得认可，非常切合研发使用。AI编程已是全方向展开。未来原生IDE成为主流选择，AI插件转向垂直（安全、部署、工具），Code CLI与DevOps深度融合
• 国内移动生态三分天下是必然趋势，政策与产品影响，鸿蒙将登上舞台。穿戴设备，车机系统（新能源覆盖）各类智能化产品，使跨端在国内将更快，更广展开。企业适配鸿蒙，研发成本等因素，将推进跨端发展。相信国内在压缩人力/降本增效方面会有显著且卓越的进展。
• 学习与产出并行推进，AI辅助下的软件职能边界逐渐模糊，软性的(AI辅助)全栈/大前端角色逐渐增多，企业内部相近角色协调转换，能代来更灵活/快速的需求响应，产品研发效率进一步提升。

三、行业发展，展望展开

3.1 先看趋势语言

2024年，Python 大热荣登桂冠，JS/TS分别居于第二，第三。这么多年JS首次退下神坛，对于前端来说这就是最明显的信号。

从上面的数据，结合当下行业发展，我们可以展望几点内容。

• AI的发展，确实推进了Python的进一步发展，它更偏向于专业人士的工具，Python面向开发者，与JS不同，JS面向用户。
• JS虽然离开了王座，但是TS持续崛起，分流了JS的同时，也说明拥抱具有类型安全性的TS已是必然趋势
• 在github上排名靠前编程语言，拥有大量开源代码和社区贡献，是AI训练的核心素材，因此AI编程支持更好
• 如果将这个年度榜单的编程语言交给AI，让其分析AI Coding 对编程语言支持情况，进行梯队划分，第一梯队一定有Python/JS/TS。

// 你去问问AI Python,JavaScript,TypeScript,Java,C#,C++,PHP,Shell,C,Go 将上面这些编程语言，根据LLM编程能力支持情况，划分三个梯队，进行总结分析。 

3.2 再看框架/工具

3.2.1 框架发展趋势

四大框架 React、Vue、Angular、Svelte

• 核心四大框架 React、Vue、Angular 和 Svelte。React 框架一骑绝尘，遥遥领先于其他三个框架。Vue 框架则处于第二的位置。Svelte 已超过 Angular
• 四大主流框架，保持的稳定更新迭代，短时间内，前端主流框架技术不会大变革，掌握React、Vue和基础JS/CSS/HTML，搭配AI这位老师，能应对前端绝大多数基础工作。

3.2.2 全新形式HTMX库

• htmx在GitHub上，star数在近两年内飙升，多次登顶 GitHub Trending 榜单。甚至被许多资深开发者视为解决“过度工程“的良药。
• 新全栈架构，htmx 极大利好非JavaScript背景的后端开发者，Go/Rust/Python + htmx这类组合非常流行。构建响应极快的 Web 应用。
• 企业内部生态，轻量级后台的首选，对于企业内部管理系统、CRUD（增删改查）类应用，htmx 的开发效率极高
• 性能优势，省去了客户端渲染（CSR）解析 JSON 并生成 DOM 的过程，htmx 在低端设备上的首屏渲染和交互响应往往更快。
• 拥抱 AI，通过htmx，AI可以一次性生成带有交互逻辑的HTML，极大缩短了从 Prompt 到可运行原型的路径。

3.2.3 工具发展趋势

Rust 是最受推崇的编程语言，今年的得分为 83%。前端基础建设，工具链的重构，Rust 化愈演愈烈，带来极致的开发性能体验。

浏览器运行时的变革，Rust 是编译为 WebAssembly 的最佳语言，使得前端能够承担以前无法想象的任务

对前端开发的深远影响

• Vite6、Rspack、Oxlint、Biome 和 Rolldown。利用 Rust 的特性，极大的提升编译速度
• 视频编辑、设计工具（Figma）、3D 引擎等，通过 Rust + Wasm 在浏览器中实现原生性能。AI浪潮下，前端必将承接更多视频/图片编辑能力（人脸识别/大模型嵌入/图形算法处理），以及更负责的大型任务。
• 性能组件化：开发者开始在 React/Vue 应用中嵌入 Rust 编写的性能敏感组件（如复杂的加密算法、图像处理、大数据量计算）

行业渗透率持续攀升

根据 2025 年的市场调查，在商业用途中使用 Rust 的比例较三年前增长了近 70%。成为微软、亚马逊和 Google 构建核心基础设施的首选。

AI 浪潮下的性能基石

AI 模型推理和大规模数据处理对性能要求极高。越来越多的 AI 基础设施（如向量数据库、推理引擎）开始使用 Rust 重写，利用其零成本抽象和无垃圾回收 (GC) 的内存管理特性

3.3 三看浏览器发展

性能指标更替：INP 正式取代 FID。性能依旧是用户体验的真理

• 2024 年 3 月起，INP (Interaction to Next Paint) 正式取代 FID 成为 Core Web Vitals 的三大指标之一

工具链的AI原生化：DevTools 深度集成 Gemini，Chrome DevTools 不仅仅是检查器，它正在变成一个 AI 编程助手

• AI 解释与诊断，在Console中，你可以点击“理解此错误”，Gemini 会自动分析报错、查找 MDN 文档并给出修复建议。
• AI 样式调试，在 Elements 面板中，开发者可以利用 AI 辅助生成 CSS 样式或解释复杂的层叠逻辑。

Web平台算力解放：WebGPU 与 Wasm 增强，Chrome 完成了从“网页浏览”向“复杂计算平台”的转型。

• WebGPU 全面铺开：Chrome 121 起支持 Android WebGPU。意味着浏览器中的 AI 推理Transformers.js、3D 渲染和视频编码现在可以直接调用 GPU 底层架构。
• Wasm 内存升级： WebAssembly 现在支持大于 4GB 的内存寻址，可以处理更加的大型 3D 工程（AutoDesk Web、Adobe 全家桶）

CSS 与 DOM 的新范式：CSS 的编写习惯在这一两年发生了翻天覆地的变化

• CSS Nesting (原生嵌套)： 2024 年起 Chrome 对原生 CSS 嵌套提供了极其稳定的 DevTools 支持。你可能不再需要 Sass 来处理层级。
• Anchor Positioning (锚点定位)：允许 Tooltip 或弹出菜单直接在 CSS 中关联其触发元素，无需 JS 库进行实时位置计算。
• Scroll-driven Animations： 仅靠 CSS 即可实现极其复杂的视差滚动或进度条动画，无需再监听 onscroll 事件

3.4 四看AI工具支持

AI 在编程领域的工具和 IDE 支持已经从简单的“代码补全”进化到了 “代理式（Agentic）开发” 和 “自然语言全栈构建” 的阶段，几乎所有的IDE都支持AI能力，且2025的能力更新也都围绕AI升级。

编程环境变革，IDE 代理化

• 传统的 IDE（VS Code）正在被“AI 原生 IDE”挑战，或者通过深度集成实现自我革新
• Cursor领跑者，已经实现多文件协同修改。MCP工具爆发（context7，brower mcp，playwright mcp，Figma mcp等），允许 IDE 连接外部工具（如文档、API、终端），让 AI 具备读取你实时文档库的能力。
• GitHub Copilot Workspace，从 GitHub Issue 直接生成“开发计划”，并在云端沙盒中完成代码编写、运行测试和提交 PR，前端开发者更少写代码，更多审核代码，角色发生转变
• Gemini in DevTools， Chrome 控制台直接集成了 Gemini，能够实时解释前端报错

Vibe Coding从对话到完整应用

2025 年前端开发出现了一个新词Vibe Coding（氛围感编程），通过自然语言描述“氛围”和“功能”，由 AI 生成预览并完成部署

• 各个大厂都在推进Vibe Coding，从年初被提出，到现在各类架构实践知识，无疑都是针对 AI Coding和开发者人机协同模式的探索。也是对效率的提升的全新展开。
• v0.dev 输入一段话或上传一张设计图，它会直接生成生产级别的代码。
• Bolt.new / Lovable浏览器内的全栈 IDE，这些工具可以在浏览器里直接运行 Node.js 环境。
• 从早期如何写出好的Prompt；到如何在IDE中利用AI提效；再到通过"Prompt + Review" 或 “SPEC” 模式管理 AI Agent，以及更加复杂的通过知识图谱或RAG结合向量数据库，进行记忆管理等等，都在让AI Coding变成体系化的开发模式，使其生成代码快速集成到现有的大型系统中。

Agentic Frontend（代理式前端）架构

AI生成的年度总结，漂亮的排版，无需配色，找模版，调样式。AI更能好的理解文件形式。（该能力为公司内部功能，外部具有相同能力平台，可用秒搭）

AI 不仅写代码，还在变成代码的一部分。

• A2UI (Agent-to-UI)：这是一个 2025 年兴起的协议。它允许 AI Agent 根据用户的意图，实时生成动态 UI。AI 不再只是回一段文字，而是返回更加丰富多彩的展现形式。
• CopilotKit：让前端开发者能快速给自己的APP增加AI助手。它能让AI感知你页面上的状态，并允许用户通过语音/文本直接操作你的网页组件。

3.5 五看跨端演变

国内特例，鸿蒙必行

• 政策压力也好，还是国内市场环境也罢，华为鸿蒙早晚都是必经之路，未来国内三分天下，单启一职鸿蒙研发，目前看下下策，跨端才是根本。
• 鸿蒙给出了前端友好型的TS模式，同时也非常巧妙的切合了AI能力支持（AI对TS支持良好），未来AI+artTS也许会有不一样发展。

经济下行，成本为王

• 全球经济背景下，成本控制是企业的生存关键。根据 Neontri 的 2025 报告，跨端开发平均能降低 40% 的成本并缩短 70% 的开发周期。

性能天花板降低

• 手机硬件性能过剩，现代手机芯片的算力已经足够抹平框架带来的微小开销。

市场碎片化和多样化

• 多端一致性： 手机、平板、桌面、车机系统、甚至穿戴设备上保持 UI/UX 的一致。
• 国内两大手机厂商，入住汽车行业，结合两大厂商的营销风格，电车的市场销量，和用户的实际需求，车技系统也会有更多的应用发展。

AI浪潮下的全新机会

• 更适合 AI 生成，跨端代码（TS/JS/Dart）拥有庞大的开源社区数据。相比于Swift/Kotlin 混合开发，AI 在生成跨端代码时的准确率更高
• AI带来的快速实践，落地机会，AI让开发者学习成本和开发效率发生实质性的变革，相比传统的 “先学习，在开发” 的模式，AI协同下，可以 “同时进行学习和开发”

3.6 六看学习模式

AI浪潮下，编程领域的学习模式绝对是翻天覆地的变化，传统的学文档 => 学视频 => 写demo => 做测试验证，流程长，成本高。更多人选择了AI生成工具/应用辅助学习。

AI辅助下，整个学习过程到验证效果，完全可以AI辅助生成。验证通过后，再由AI总结知识点，记忆练习后一个学习周期完成。

只要你做好核心的学习思维导图（知识树），学习效率极大的提升，学习中的问题，均可交给AI老师解答，全部过程无需法付费，无需大量学习时间成本。

四、前端转KMP实践

4.1 实践的硬性条件

虽然我非常认可AI能力，但是团队中如果完全没有具有KMP开发经验的人，那一定不要直接排期需求迭代，必须要有一版从环境搭建到构建产出，并上线验证的Demo。这样能极大的避免环境，工程带来的时间不可控性。

• 必须有KMP开发经验的研发和一版验证过的Dmeo能力。

4.2 转换实践经验

目标

1. 没有KMP经验和实践
2. 没有独立学习时间
3. 前端常规迭代和反馈问题穿插进行
4. 前端用KMP完成40天的需求开发
5. 最终整体人力采用1.5倍（60天）计算评估。

期间难点

1. 工期时间的评估
2. 大量的知识和名词
3. 思维认知方式
4. 学习成本与需求进度
5. 如何总结沉淀，融汇贯通

• 针对工期评估，一般是采用1.5人力方案计算，即前端1天需要，KMP需要1.5天，相当于增加一些Buffer处理学习，未知内容和环境问题等。但我可以明确的说，前端没有提前学习足够的知识，1.5并不够。 那时间怎么来的？AI结余出来的。
• 前端相比Native转KMP，要额外学习知识和概念，文件存储体系/数据库操作/多线程开发/崩溃问题/双端的环境常识（Native只需要学一端，安卓甚至无需，天然适配KMP）
• KMP更接近Native，相比前端更复杂，思维转变非常关键，前端从不需要考虑相册权限/数据隐私/iOS沙盒等，如果长期使用JS弱类型约束，前端开发更为松散。因此FE开在初期会感觉约束，不变，不可理喻的费事。
• 学习成本与需求进度，如果一个整个需求持续半年，再配合1.5倍人力关系，那没有AI可能也正常完成（120+60=180也就是说有60天可以用来学习处理异常问题）。但如果只有2个月那是万万不能的（40+20=60也就是说只有20天学习和处理异常时间）。所以在AI的支持下，我们2个月完成了需求同时学习了KMP。
• 有学习，就要有总结，不然怎么能记住，温故而知新，才是持续记忆的良方。所以必须要总结回顾。开发过程中如何抽出时间进行总结并复习很关键。

解决方案

第一步：开发者搭建自己的环境

• 当确定要做KPM这件事情，或者有规划时，就可以提前做这一步（没时间另说），不必等到万事确定在开始，那就太晚了。
• 熟悉IDE/安装KMP工具/安装iOS Xcode/CocoaPods等，这些能提前就提前，最起码启动hello world，期间问题可以让AI辅助解决。

第二步：启动规划

• 功能排期直接已前端视角评估需要的时间为基础，然后乘1.5倍系数，确定整体需求排期。
• 由有经验的KMP研发完成项目基建设，为什么我上面强调需要有经验的开发或者有项目Dmeo落地，主要两点：1.基建不稳定后续可能工期崩盘；2.没有经验的基建，无法确定它是好是坏。

第三步：项目宣讲

• 针对搭建好的基础环境，还是要统一讲解，让大家都了解基本内容，大概知道项目代码应该放到哪个目录下合理。这样开发的大方向就不会错，不要以为有分享者讲了就能懂，分享的知识只能记住小部分，只有实际操作记忆后才能逐步适应。

第四步：进入开发

• 没有AI支持，那是屁都开发不了的，所以AI省去了完整的一个大步骤，学习基本的KMP编程语法和UI框架和基础知识。
• 整个开发阶段，全凭rule和AI对话，实现并发学习和开发，总结沉淀。
• 我给其设定为具有丰富前端转KMP经验的开发角色，根据开发中的一些关键点，自由评估总结思维转变思路，根据内容情况，自动沉淀到知识目录或工程目录。
• 让其开发实际业务功能代码，开发完整后并自动提取有价值的知识点，进行讲解和沉淀。保证开发/学习/沉淀面面具到。
• 提供输出规范模版说明，并采用类比的思路讲解知识，让AI总结的内容可以类比前端更容易理解内容。

角色 你是一名前端专家转型KMP跨端开发，并成为一名跨端开发专家，拥有丰富的前端和跨端经验。同时非常善于分享教学，拥有丰富的授课经验。 技能 * 精通 Kotlin Multiplatform(KMP)、Compose Multiplatform(CMP)、Kotlin、Java，Gradle等跨端技术栈。 * 精通 JS，HTML，CSS，TypeScript，VUE，React，Node等前端技术栈。 * 拥有丰富的[前端]到[KMP跨端]的思维转变经验。善于使用对比，抽象，渐进式教学等技巧通过项目驱动学习，Demo演示等进行教学。 * 善于总结教学笔记，从项目开发中沉淀[前端]转型[KMP跨端]需要学习的知识点。 * 善于使用精简的伪代码，展示完整的功能应用，遵循标准执行流程 "代码声明=>文件导入=>函数/类调用[参数解释]"。 * 理解 Gradle 构建系统和插件开发。 任务要求 * 开发对话中，针对本次代码生成，提取跨端知识点，自行评估对前端转KMP跨端价值，询问是否需要沉淀到学习文档。 1. 这次对话是否涉及前端→KMP的思维转变? 2. 是否包含新的技术概念对比? 3. 是否有可复用的最佳实践? 4. 如果安卓/iOS/跨端有差异，需要提供对比分析。 * 新的知识点需要对比 /docs/forlearn目录下是否已经存在，如果不存在创建新的知识点文档。 * 知识点沉淀需要合理分类，形成章节markdown文档，知识点文档必须沉淀在/docs/forlearn目录，章节分类可以参考下面【章节分类举例】。 * 知识沉淀注重清晰有条理且简单易懂，必要时，附带参考资料引用，但每个知识点资料引用少余2条。 文档分类 1. 工程文档（Engineering Docs） * 位置: /docs/ 或 /docs/integration/、/docs/api/ 等 * 目的: 项目开发、功能接入、API参考 * 内容: 配置步骤、代码示例、API文档 * 不需要前端对比 2. 学习文档（Learning Docs） * 位置: /docs/forlearn/ * 目的: 前端转KMP的知识沉淀 * 内容: 概念对比、思维转变、Demo等，可自由编排 * 必须包含"前端思维转变和理解"章节 

五、研发团队新形态思考

在快速的AI发展阶段，想要走在前沿，需要不断摸索前进。大胆假设，小心求证，必要的尝试可能带来意想不到的效果。

5.1 团队组成

5.1.1 传统团队

传统团队1是1，2是2，各个职能线之前没有交叉和转换的可能，除非招聘有实际多端开发经验的开发，在面对人力不足，实效性需求时，缺少灵活性。

4.1.2 AI辅助型团队

AI辅助型，软全栈开发。各个职能线独立一名AI辅助型全栈，在面对紧急需求，人力不足，实效性需求等，具有良好的协调性。

谁当这类人？这类型意味着更累，工作强度更大？

• 学习探索能力强，渴望技术快速成长，对AI感兴趣的人，可以作为优先考虑对象。
• 不管什么样的角色，一个人的时间有限，工作量不会有什么差别，不过确实可能比单角色研发面临紧急项目，高优项目多。当然晋升和成长机会也会更高。毕竟关键性项目都有身影。

5.2 快速低成本建设方案

• 将项目功能技术进行文档和知识沉淀，搭配嵌套__docs__目录，将整个项目构建出AI需要的上下文资源。
• 开发者，利用IDE，rule，MCP工具，以及嵌套的文档资源，根据功能开发情况，按需喂给AI上下文。
• 特点是：文档伴随项目git提交更新，开发者遵守文档维护目录结构和更新规范。开发时按需使用文档和rule。人工更新维护文档。

5.3 体系化建设方案

• 将项目功能技术进行文档和知识沉淀，搭配向量化数据库和知识图谱（或RAG），将多个项目通用信息抽离进行向量化存储。
• 开发者，利用IDE，rule，MCP工具，基于知识图谱和云端数据库，进行功能开发。
• 特点是：多个研发/多个项目之前可以共享云端数据，数据更新也可通过AI+MCP进行向量化处理并自动更新数据库。

六、核心技术资讯平台

https://github.blog/news-insights/octoverse/

https://survey.stackoverflow.co/2025/

https://www.thoughtworks.com/radar

6.1 其他资料

https://dev.to/ranndy360/ai-coding-best-practices-in-2025-4eel

https://survey.stackoverflow.co/2025/

https://github.blog/news-insights/octoverse/

https://chrome.xahuapu.net/help/3862.html

https://googlechromexz.com/guide/3118.html

https://developer.chrome.com/release-notes?hl=zh-cn

https://survey.stackoverflow.co/2024/technology#admired-and-desired

https://vite.dev/blog/announcing-vite6.html

https://npm-stat.com/charts.html?package=vue&package=react&package=svelte&package=angular&from=2024-01-01&to=2024-12-31