#前端开发

2个月前
Anthropic 的第二份经济指数报告,详细研究了 AI 对软件开发的影响,数据来自 Claude AI 和 Claude Code 上 500,000 次编码相关的交互!AI 正在迅速从辅助编码转向自动化编码,特别是在用 Claude Code 这样的专业工具时 。这种转变对前端和移动应用界面开发的影响最为显著,这些领域的入门级工作可能最早被颠覆。 初创公司正积极拥抱这些先进的 AI 工具以获取竞争优势,而大型企业的采用则相对滞后 ,AI 可能加剧不同规模组织之间的发展差距。以下是报告的主要发现: 编码代理(Claude Code)更倾向于自动化 - Claude Code 上的对话中,79% 被识别为“自动化”(AI 直接执行任务),而 Claude AI 上只有 49% 。 这表明,随着 AI 代理变得更加普遍,任务自动化可能会增加; - 在自动化类型中,“反馈循环”(AI 自主完成任务,但需要人类验证帮助)在 Claude Code 上几乎是 Claude AI 的两倍(35.8% 对 21.3%)。 “指令式”(AI 以最少的用户交互完成任务)在 Claude Code 上也更高(43.8% 对 27.5%); - 相比之下,所有“增强”(AI 协作并增强人类能力)的模式,包括“学习”,在 Claude Code 上的使用率都远低于 Claude AI; - 专门的、以编码为重点的代理(如 Claude Code)与用户通过聊天机器人界面与大型语言模型交互的标准方式之间存在差异; 开发者普遍使用 AI 构建面向用户的应用程序 - Web 开发语言(如 JavaScript、TypeScript、HTML、CSS)是数据集中最常用的编程语言,合计占查询的很大比例(JavaScript 和 TypeScript 占 31%,HTML 和 CSS 占 28%); - 用户界面 (UI) 和用户体验 (UX) 相关的任务是主要的编码用途之一,例如“UI/UX 组件开发”和“Web 和移动应用程序开发”分别占对话的 12% 和 8%; - 专注于制作简单应用程序和用户界面的工作可能会比纯粹专注于后端的工作更早受到 AI 系统的颠覆 。 这种趋势被称为“vibe coding”,开发者用自然语言描述期望结果,让 AI 处理实现细节; 初创公司是 Claude Code 的主要早期采用者,而企业采用滞后 - 初步分析估计,Claude Code 上 32.9% 的对话服务于初创公司相关的工作,而只有 23.8% 被识别为企业相关应用; - 这种采用差距表明,灵活的组织在使用尖端 AI 工具方面领先于传统企业 。 这可能转化为显著的竞争优势; - 个人(学生、学者、个人项目开发者)也是编码辅助工具的重要采用者,占两个平台交互的一半; 报告提出了一些问题,例如随着 AI 能力的进步,人类在编码过程中的参与度是否会持续存在,或者是否会转向更完全的自动化 。开发者角色可能会发生转变,更多地转向管理和指导 AI 系统,而不是亲自编写代码 。AI 编码能力的提高可能对 AI 自身的开发产生影响,可能加速 AI 领域的突破👀
4个月前
AI 生成代码,实时预览的几种方案👇 一、 html + srcdoc + iframe 1. AI 生成可以通过浏览器直接打开的 html 文件(单文件,html/css/js 写到一起) 2. 通过 iframe 的 srcdoc 传入 html 源码预览 3. 通过 importmap 指定依赖包的 CDN 资源。 这种方案实现起来简单,预览效率高。 二、react/vue + blob + iframe 1. AI 生成 react / vue 组件代码(单文件组件,无本地 import 依赖) 2. 通过 Babel.transform 转换 react 组件/通过 VueCompiler 编译 vue 组件 3. 使用转换/编译后的组件,构建一个 html 文件 4. 使用 blob 构建预览 url,传入 iframe.src 预览 const blob = new Blob([html], { type: 'text/html' }); iframe.src = URL.createObjectURL(blob); 这种方案稍微复杂一些,适合 react / vue 单文件组件预览。 3. webcontainer 1. AI 生成组件代码(可以返回多个组件文件,组件可以互相 import) 2. 构建一个最小可运行的 vite 项目骨架,把 vite 骨架包含的文件和 AI 生成的组件打包在一起,构建一个文件树 3. 启动 webcontainer 容器,挂载文件树 4. 通过 webcontainer 执行终端命令,安装项目依赖 5. 通过 webcontainer 启动预览服务,得到预览地址 6. 把预览地址传入 webcontainer 容器外的 iframe.src 实现项目预览 这种方案依赖 webcontainer,可以实现多组件预览,灵活性更高,但是涉及到文件挂载,命令行安装依赖等步骤,预览速度会慢一些。 ----- 总结 ----- 方案一适合用户不关心代码,只想快点看到效果的场景,比如用 Pagen 一句话生成 landing page,页面内容都在一个 html 文件里面。 方案二适合辅助前端写组件场景。比如用 CopyWeb 截图复刻设计,生成单个 react 组件,在线预览效果,导出到本地项目使用。 方案三适合一句话生成完整项目场景,比如用 bolt/v0 一句话生成 nextjs 项目骨架,可在线预览,可导出 zip 到本地修改。