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 转换实践经验

目标

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

期间难点

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

针对工期评估，一般是采用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等，可自由编排
* 必须包含"前端思维转变和理解"章节