从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率

简介: 从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率


本次分享内容主要包括以下几部分:
首先,我将从前端开发的角度介绍对通义灵码的基本认识;其次,我将展示通义灵码在日常研发中的应用案例;然后,我将通过实例说明,良好的设计能够显著提升通义灵码的效果。此外,我将介绍通义灵码的企业知识库以及如何利用 RAG 构建团队智能研发助手。最后,我将总结本次分享并展望未来方向。01

从前端的视角认识通义灵码


接下来,我们将深入探讨主题,以更好地利用通义灵码。首先,我们需要了解通义灵码能够做些什么。简而言之,通义灵码是大模型在研发中的应用。其基础的应用能力主要包括四个方面:


  • 在代码生成方面,通义灵码能够实现代码补全、生成注释和代码块;
  • 在生成解读方面,它可以生成单元测试和注释等;
  • 此外,我们还可以向通义灵码提出代码优化、修复的需求,并获取解决方案;
  • 通义灵码还可以作为智能问答助手,帮助我们解答研发和科技方面的问题。


通过使用通义灵码,可以显著提高编码速度,减少重复工作,并简化知识获取过程,从而使前端团队能够更专注于业务和技术。同时,团队可以通过利用通义灵码的企业知识库功能,实现研发效能的整体提升。接下来,我将分别从个人和团队两个层面,介绍如何更好地利用通义灵码。
02

将通义灵码融入日常研发场景


首先,让我们探讨通义灵码在个人日常研发场景中的应用。作为灵码的早期用户,通义灵码几乎重塑了我的研发习惯。我称之为“丝滑”的编码体验。我们具体来看。


2.1 代码补全:减少编码量,提升编码速度


其中,对我影响最深的功能是通义灵码的代码补全。它通过分析代码上下文和编程习惯,能够实时生成相应的代码。在大多数情况下,其补全能力相当强大。设想在编码过程中,你只需输入较少的代码,后面的代码便能被自动补全,这是不是很酷。无论是函数组件的代码,还是常规函数或 JSX 函数的代码,都能得到很好的生成效果。

通过使用通义灵码对函数进行描述,我们可以得到一个清晰的函数功能说明。只要函数涉及的内容与业务的关联性不强,我们就能得到一个高采纳率的函数定义和实现。通常,我们只需要对这个定义进行简单的修改、乃至不做任何修改,就可以直接采用了。

2.2 注释生成代码:通过自然语言生成代码


注释生成代码也是一个有趣的场景。在编程过程中,我们给出自然语言的描述,通义灵码就能基于当前上下文生成所需的代码,既可以是代码行,也可以是代码块。如截图所示,我描述了接口的定义,并得到了相应的接口实现。

2.3 代码优化:提供优化建议与示例


通义灵码的代码优化能力。在视频中,我选用了一段既复杂又结构混乱的代码作为示例,旨在重构这段代码。我选择了通义灵码的优化代码功能。可以看到,灵码对这段代码进行了分析,并提供了优化建议。它还生成了优化后的代码示例,这使得我们可以根据其建议和提供的代码示例进行相应的分析,从而快速得到一个可用的优化结果。在进行老旧代码重构时,这个功能十分有用。

2.4 代码修复:一键修复代码问题


另一个是代码问题修复能力。在这方面,我通过选择问题代码并使用通义灵码的一键修复功能,通义灵码能够基于整个工程和项目分析错误原因,并提供修复建议。我们可以看到,它能够从整体工程角度进行判断,这与我们曾经接触的问题分析工具显著不同。以往的代码修复工具往往给出的建议不够清晰,而通义灵码的修复建议具有很高的结构化程度。


2.5 代码解读:快速理解复杂代码


接下来,我们探讨代码解读能力。视频中的代码是一个历史债务缠身的示例。该代码文件包含超过两千行代码。在日常项目维护中,我们经常遇到这类历史遗留问题,原因各异。初次面对时,我们感到相当棘手。没有像通义灵码这样的代码解读能力,我们不得不逐行检查代码,或者求助于相关专家。但借助通义灵码的代码解读功能,我们可以迅速获得结构化的代码解读。

,时长04:06

通义灵码从多个角度提供了一个解决方案。然而,我认为这个结果并不完全令人满意。因此,我再次向它提出一个问题,这次我要求它基于具体的代码片段来解释这些片段的含义。
我向通义灵码提出要求,我需要对当前文件进行模块化处理,以便进行代码解读。然后通义灵码采取了一种全新的代码解读策略。在此,我将不再为大家演示更多,但可以明显看出通义灵码在代码解读方面的强大功能。
最后再给大家演示通义灵码生成的单元测试。

,时长00:36

2.6 智能问答:定制化答案,提升效率


在探索通义灵码的应用时,我尝试利用智能问答功能询问与 MongoDB 相关的问题。在以往,我们可能需要查阅文档或向搜索引擎提问,但通过通义灵码,我可以直接在插件中提出问题,而通义灵码会给出显著个性化的答案,这是不是对提升工作效率很有帮助?此外,我还请求通义灵码推荐一个将 json 转换为 excel 的 NPM 包,它迅速提供了两个令人满意的方案。

综上所述,我们可以看到通义灵码在编码过程中的重要作用。它通过获取和整理上下文及外部信息,使编码过程形成闭环,而且非常流畅。这反映了通义灵码在研发流程中对我们编码习惯的重塑。随着通义灵码的潜移默化的影响,我们的编码习惯将与以往大不相同,直到你再也回不到过去。接下来,在下一章节我将介绍如何使用通义灵码以增强代码的理解能力。
03

良好的设计可以提升灵码效率

接下来,我们将探讨如何利用优秀的设计来提升通义灵码的生成效果。在深入本章之前,我提出一个问题供大家深思:随着通义灵码等AI编程工具的出现,作为开发者的我们是否正面临价值被稀释的挑战?


在日常开发中,我们经常遇到下图左侧的代码案例。不难看出,这段代码的问题在于业务逻辑与具体实现过程的紧密耦合。即便我们使用了通义灵码的补全能力,生成的代码依然遵循这种模式,无法摆脱业务与实现的耦合。因此,我们只能在这种模式下不断地实现后续的业务逻辑。然而,通过对代码进行提炼,将可复用的部分提取为可复用组件,并解耦业务逻辑与组件的实现,我们可以得到右侧结构清晰的实现方案。在此过程中,我们可以利用灵码来实现组件。一旦我们有一个通用组件实现,灵码将利用模块级上下文,在此基础上继续补全所需的业务逻辑。


大家可以看到,尽管这种技术思维是由我们开发者提供的,但若对比整个实现过程,会发现灵码在两种实现场景下为我们提供的整体研发效率提升是完全不同的。


接下来的案例类似,主要是指在业务实现过程中,可以将一些数据处理提炼为通用的 hook。然后将这个 hook 提供给灵码,它就能基于上下文,在后续实践中为我们生成相应的代码逻辑。



与前两个案例不同的是,本例对组件进行了高阶抽象。左侧的代码展示了对一个完全定制化的组件的实现。在实现这样的组件时,若存在多个相似组件,每个组件都需要从零开始编写代码。让灵码自动生成这样的强定制化组件的代码是困难的。


然而,如果我们对相似组件进行更高级的抽象,灵码就能基于这种抽象得到模块级上下文,从而让灵码能够为这些组件生成更完整的代码。右侧展示了经过抽象和代码生成后,我们得到了一个更优秀的生成结果。



接下来的案例是函数的实现。通过避免副作用,让灵码去生成遵循单一职责的函数,可以有效的降低灵码的推理难度。利用它已有的知识,可以得到更高采纳率的函数实现。这里有一个问题,就是为什么要避免副作用?


可以设想,如果一个函数包含副作用或者耦合较多业务,那么灵码将很难推理出我们需要的是什么。但是,如果去除了副作用,那么灵码就能从它自身所学习的知识中了解我们想要的函数是一个具有通用能力的函数,并且会提供一个非常明确的实现。


此外,通过为我们的代码提供明确的类型定义、枚举,可以让灵码基于清晰的定义去约定它的逻辑边界,从而提升代码生成的准确性。



回顾本章开头,我们探讨了一个核心问题:开发者的价值究竟何在?我认为灵码反而可以让开发者的价值更加凸显。为什么会这么说呢?因为灵码作为 AI 本质上是帮我们节省研发的精力,这让我们可以专注更有价值的东西。因此,通过人在整个研发过程中的技术参与,可以促进灵码与人的技术成长相互促进。同时我们还可以通过巧妙的应用,提高为你量身打造的 AI 的成长。这便是第一个标题“让灵码在你手中展现出不一样的魔力”的含义。04

建设团队的智能研发助手


记得在我的一次分享中,一位听众提出了这样一个疑问:如果未来人们都通过AI方式实现编程,那么优秀的代码将会越来越少。当烂代码成山时,在这种上下文中学习出来的 AI,又能写出多少高质量的代码呢?这反映的就是“好的会越好,坏的会越坏”现象。
因此,AI 的参与并不是让开发者退出历史舞台,而是促使他们在追求卓越技术的道路上更加坚定。这也是我最希望在整个分享过程中表达的观点。
由于时间关系,我只能为大家简要阐述我的理念,并期待大家的继续关注。讲了一些个人如何利用通义灵码提高效率的例子,下面我们探讨如何应用通义灵码提升团队效率。


那么我们简单介绍一个利用通义灵码的企业知识库建设团队智能研发助手的应用案例。首先,让我们了解一下通义灵码的企业知识库是什么。
通义灵码通过检索增强生成能力,将组织的知识融入自身体系,从而提升服务的精准度。企业知识库包含编码规范、安全规范和代码文档等,涵盖了团队在研发流程中积累的各种知识文档。通过整合这些知识,通义灵码能够使团队成员在代码生成、代码优化等场景中更贴近自身业务需求。
将通义灵码的企业知识库融入团队的研发流程,实际上能够重新定义团队研发资产的价值。前端研发资产包括工作工程规范、研发工具等,例如代码库、组件和文档等都属于前端资产。
传统资产的痛点包括存储分散、消费成本高,例如版本管理较为粗放,文档缺乏规范,代码类资产缺乏整合,导致团队成员重复实践缺乏沉淀,另外由于缺乏有效管理,资产种类繁多,新员工上手难度高。通过引入知识库概念,我们便可以重新对资产价值进行评估,并更有效地管理资产。

未来的资产将转变为智能资产,其价值在于统一管理和规范化。统一的资产将被汇聚为团队级知识库的基础。通过积累和沉淀资产,不仅能够实现业务和技术知识的传承与共享,还能提升团队的影响力。拥有这样的智能资产,将为我们的智能研发助手提供基础语料,也就是基本的知识体系。

上面的流程介绍了如何利用通义灵码的企业知识库搭建基础的团队智能研发助手,更为强大的定制化能力,则需要团队亲自去探索,从而搭建符合业务需要的系统。首先,我们需要开通通义灵码的企业标准版。在团队资产管理规范建立的基础上,将团队资产上传到通义灵码的企业知识库。之后通过一系列配置,可以构建一个 IDE,在该 IDE 插件上可以消费知识库,从而有效提升通义零码的生成效果。右侧是一个案例,展示了如何在 IDE 中消费通义灵码的 RAG 能力。通过添加 #team docs 的 tag,即可调用知识库中的资产。05

结论与展望

经过以上几个章节的讲述,我本期对通义灵码的分享内容即将结束,本期分享更多是抛砖引玉,如何深入挖掘通义灵码的能力,还需要我们一起行动起来。


最后我给出一些个人总结,这张图片是我定义的我与通义灵码的协作关系。以业务需求的实现为例,可以看出,需求理解、技术设计这些仍然需要人为的全程参与,但在逻辑抽象方面,已经可以有通义灵码的介入。此外,通义灵码在后续编码实现中提供的助力也非常明显。



最后,我想分享一些展望和感想。随着未来像通义灵码这样的 AI 工具的介入,我们的一些经典研发平台,例如低代码研发平台将会得到重塑。通过引入 AI,可以降低低代码研发系统的学习和配置成本,构建智能化的低代码平台。未来,通过将 AI 全面融入研发流程,我们有望创建一个集成的一站式研发助理。



我的感想主要可以归纳为两点。


首先,AI 实质上是作为我们技术能力的延伸,而非替代品。因此,AI 能发挥多大的效果,很大程度上取决于我们如何利用它。通义灵码通过大模型体系,提供了强大的研发知识生成能力。借助这一核心功能,团队和个人得以在不同层面提升研发效率。


然而,如何更有效地利用 AI 工具以提高生产力,是需要我们创造性的设计新研发流程来解决的问题。通过在恰当环节将 AI 擅长的部分交给 AI,并在整个工作流程中降低人力成本,从而实现全链路效率的提升。最后,我想用一句话鼓励所有收听的朋友——让我们即刻拥抱 AI、拥抱变化吧。

相关文章
|
8月前
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
672 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
3月前
|
人工智能 架构师 大数据
【云故事探索 | No.7 】:「越用越上瘾」,中华财险 60% 研发人员用通义灵码提效
【云故事探索 | No.7 】:「越用越上瘾」,中华财险 60% 研发人员用通义灵码提效
|
5月前
|
IDE 前端开发 开发工具
用通义灵码IDE做产品高保真原型和前端页面
通义灵码IDE助力高效开发,告别传统Axure原型图的繁琐沟通。通过该工具可直接生成高保真产品原型与前端页面,大幅提升客户确认效率及满意度。现已将相关演示发布至B站(https://www.bilibili.com/video/BV18qT7ziEb7/?vd_source=dc6a6864c895818db6ce4170d50b3557),欢迎体验!用直观操作代替反复说明,让交付更流畅。
|
6月前
|
自然语言处理 前端开发 IDE
用通义灵码全新智能体+MCP实现从设计稿到前端代码,个人免费用
通义灵码全新升级,发布国内首个支持“自主决策+工具链闭环”的编程智能体,面向个人免费!新增功能包括智能体模式、混合推理模型Qwen3支持、全面集成MCP中文社区(涵盖2400+服务)及长期记忆能力。用户可通过IDE插件使用,兼容主流开发环境如JetBrains、VS Code和Visual Studio。教程展示如何将MasterGo设计稿转化为前端代码,简化开发流程。探索链接:[通义灵码官网](https://lingma.aliyun.com/)。
|
8月前
|
消息中间件 人工智能 Java
通义灵码2.0深度评测:AI原生研发时代的开发者革命
作为一名五年开发经验的程序员,我深刻感受到从手动编码到AI辅助编程的变革。通义灵码2.0基于Qwen2.5-Coder大模型,通过代码生成、多文件协同、单元测试和跨语言支持等功能,显著提升开发效率。它能生成完整工程代码,自动处理复杂业务逻辑与依赖关系;在系统升级和微服务改造中表现出色;自动生成高质量单元测试用例;还具备跨语言转换能力。尽管存在一些改进空间,但其高频迭代和功能优化展现了巨大潜力。通义灵码2.0正推动软件开发从“体力活”向“架构创造力”转型,是开发者不可错过的生产力工具。
通义灵码2.0深度评测:AI原生研发时代的开发者革命
|
8月前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
1341 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
8月前
|
人工智能 自然语言处理 IDE
通义灵码 2.0 评测:AI 赋能编程,开启高效研发新旅程
通义灵码2.0通过AI赋能编程,显著提升开发效率与代码质量。安装便捷,支持自然语言描述需求自动生成高质量代码框架及注释,大幅简化新功能开发流程。其单元测试Agent能快速生成全面测试用例,覆盖更多边界情况。相比1.0版本,2.0在智能问答和代码生成速度上均有显著提升,为开发者带来高效研发新体验。
427 8
|
7月前
|
人工智能 自然语言处理 算法
通义灵码 CCF 算法大会首秀,解码研发智能落地「黄金三角」| 文末领取PPT
通义灵码在首届中国计算机学会(CCF)算法大会现场亮相,与领域学者、企业专家、学生开发者共话大模型与 AI 辅助编程对算法创新和开发效率带来的改变。现场交流讨论氛围热烈,广大开发者对通义灵码表现出高度关注和实践热情。
|
9月前
|
人工智能 前端开发 JavaScript
详解智能编码在前端研发的创新应用 | 领通义灵码蛇年红包封面
详解智能编码在前端研发的创新应用 | 领通义灵码蛇年红包封面
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
988 14

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    369
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    130
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    144
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    115
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    212
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    245
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    130
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    65
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    124
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    170