湖南彩票网站开发,网页游戏折扣,管理网络的应用软件,公司要搭建网站AIGC 这一时代潮流已然不可阻挡#xff0c;我们要做的不是慌乱#xff0c;而是把握住这个时代的机会。本文就和大家一起来探索在 AIGC 下#xff0c;前端工程师即将面临的挑战和机遇。聊聊从以前到现在#xff0c;AIGC 给我们带来了怎么样的变化#xff0c;下一代前端工程…AIGC 这一时代潮流已然不可阻挡我们要做的不是慌乱而是把握住这个时代的机会。本文就和大家一起来探索在 AIGC 下前端工程师即将面临的挑战和机遇。聊聊从以前到现在AIGC 给我们带来了怎么样的变化下一代前端工程师又该何去何从
目录
1 疯狂的 AIGC
2 范式迁移 —— AIGC 下开发模式改变的本质
2.1 命令式 - 声明式
2.2 声明式 - AIGC 式
3 下一代前端工程师
3.1 要善于利用
3.2 要纵观全局
3.3 要懂得批判
3.4 要合理使用
4 未来可期
5 望天下再无码农
6 探讨 6.1 AIGC 下前端会消失吗
6.2 前端开发工程师会过分依赖 AI 吗
01疯狂的 AIGC
记得 ChatGPT4 刚出来的时候OpenAI 总裁 Greg Brockman 用笔和纸画了一个网页草图GPT4 仅用几秒的时间便完成了网页的设计和代码的编写。 不知道当时前端同学们看到是个怎样的想法哈反正我当时心都凉了好不容易把 vue 的源码搞懂了这就没啥用了饭碗砸了蓝瘦香菇。
好吧开个玩笑 。AI 已然如此此时就不得不问那个老生常谈的问题了前端工程师们该何去何从呢
想来定有一些同学持悲观态度前端已死不值得做下去了AI 马上就替代了。也会有些同学与之相反吧AI 降临神级辅助又不吃经济又有大用。
我想说的是AIGC 一定会对前端开发的未来会产生重大影响至于这个影响对于前端工程师来说是正是反从来都不是工具决定的而是用工具的人来决定的。我们要做的不是去担忧焦虑而是把握住它。
02、范式迁移 —— AIGC 下开发模式改变的本质
在这之前我们先来聊聊前端开发这些年的发展。
2.1 命令式 - 声明式
命令式关注过程代码能够与自然语言产生一一对应的关系代码本身描述的是“做事的过程”。
声明式关注结果过程在背后暴露给用户的是声明的结果。 前端开发范式演变命令式 - 声明式
jQuery 是命令式开发的典型代表。这种范式的出现让前端开发变得高效但还远远不够。因此随着 Vue React 的现世前端开发迅速地从命令式迁移到了声明式。
可能经常会在社区看到这样的提问“该学 Vue 还是 React 呢项目该用 Vue 还是 React 呢”这个问题一直都在争论一直也没有一个明确的答案。可如果有人问到“该用 jQuery 呢还是 MVVM 框架开发呢”我想这个问题是有标准答案的。
为什么会这样呢很简单jQuery 和 Vue React 的最本质的区别就在于范式的不同从命令式到声明式的进化。
为什么前端领域普遍接受了这种范式的迁移在我看来有两个原因
效率的极大提高
业务逻辑越复杂命令式需要做的工作便越多因为你要完整去描述整个过程才能实现。而声明式却不需要只要把结果交给声明式框架声明式框架背后的命令帮忙做了大量的工作所以在效率上命令式和声明式不可同日而语。
更完整更系统
jQuery 只是一个工具它能做的仅仅是在使用层面加一点速无法带来质变。而声明式的框架带来了完整的开发体验、系统的打包和发布。
2.2 声明式 - AIGC 式
我也不知道该如何命名索性就将其称为 “AIGC式” 了。 前端开发范式演变声明式 - AIGC 式
虽然声明式为前端开发带来了极大提升从效率和完整性皆是。但有一点它还是没有解决还是有大量的重复劳动性的工作需要开发者来实现比如模板编写、样式开发、基础函数编写等等
这也是为什么社区出现了大量的诸如低码这样工具来力图解决此问题。
设计稿转代码像我这样的切图仔几乎每天都在使用的 CoDesign/Figma能够很大程度上解决手动写模板写样式的工作。 图片转代码相较设计稿转代码它想要做得更多直接生成模板结构和样式一键复制即可在项目中运行比如 imgcook。低代码/零代码似乎几乎每隔几年就会在社区里炒起来以腾讯的 UICore 为代表的在声明式范式下为能够更加彻底地解决重复劳动降低开发成本而出现。
工具虽多也很好用但这些工具发展了这么多年似乎并没有能够彻底改变前端开发。
为什么呢因为这些工具相对于声明式而言其实和 jQuery 相对于原生 js 是一样的。都没有逃离所处的范式jQuery 没有逃离 js 的命令式这些工具也没有逃离声明式。
原地打圈不得始终。
那 AIGC 式做到了吗当然否则也不用讲了对吧。声明式仍然需要前端工程师辛苦地码代码即便有工具可以提效但码农依旧得不到解放至少大部分业务情况下是无法解放的。
而 AIGC 彻底地颠覆了这一范式具体如何颠覆的相信文章开头的视频已经给出了答案从理解到设计再到编码甚至部署发布 AI 已经不可阻挡了。
那在这样的范式下作为前端工程师要怎么样才能亦步亦趋紧跟紧跟再紧跟呢
03、下一代前端工程师
AIGC 对前端工程师准确来说对所有人都是福音而绝不是洪水猛兽。接纳它用好它让它成为自己的 copilot。
很多同学会担心 AI 会取代自己或多或少都有些许担忧居安思危是没错的但完全没必要过多焦虑我们要做的很简单
学会使用工具人类和动物的区别不就是因为人类会探索会使用工具吗工具的出现绝不是为了取代人类而是服务于人类。 拥抱它、融入它不知道五六十年代的前辈们刚接触电脑时是怎样的想法想来也会有些人会觉得电脑会替代自己吧。例如电子邮件的出现那些靠写信为生人一定会有这样的担忧吧此时如果他们故步自封不懂得接纳和拥抱电脑那么在时代潮流之下等待他们的一定是被取代可如果他们拥抱它并且融入它把电子邮件当做一个工具以此来提高写信的效率和质量甚至拓展自己的领域那么浪潮带来的一定是肥美的大餐。
3.1 要善于利用
用好你就已经超越了大部分人了所谓的码农不就是用好了某个领域的计算机语言。对于前端开发而言AI 无疑是最趁手的帮手。
快速生成
正如文章开头视频所示一个草图就能生成网页代码如果这个图不是草图而是完整的设计稿呢当然很多同学会问这与 imgcook 不就差不多了非也非也imgcook 是固定模式下的产物而这个生成是自由、灵活且方便的。除了图以外文本描述同样能实现相应的效果。 ChatGPT 生成网页
实现的基本效果如下做到如下看起来是简陋了一些但是可以在此基础上继续让 AI 进行丰富。 ChatGPT 生成网页的结果
代码编写
相信非常多的同学都已经用 GPT 来辅助写过代码了写个冒泡啥但这似乎无法用在我们工作中哈下面就举几个在我实际工作中 AI 辅助写代码的例子吧算是简单地抛一块砖
辅助写正则
正则本身不难但要想写好写全以避免遗漏还是有难度的而且我们的工作中经常会遇到些正则的场景。
前端大神 antfu 的一个用于在 vue2 中写 script setup 的插件中就用到了正则但他也没写全导致匹配问题。
希望匹配的字符串是
script 任意字符 setup 任意字符 /
库中写的正则如下
/script\s(.*\s)?setup(\s.*)?/
一眼看起来没啥问题可是这个正则没匹配到换行的场景。
script任意字符setup任意字符
/
遗漏很正常且看如何利用 AI 来修复这个问题 ChatGPT 生成正则 ChatGPT 对生成的正则进行解释
只需要简单地描述清楚需求就能得到答案。也许最终答案并非完全正确但至少它能给你巨大的帮助和启发。
复杂逻辑编写
对于大部分做中后台前端项目的前端来说似乎自己更多的是 js 工程师要做的就是逻辑上的处理比如想要实现文件切片上传每一片 512 kb如果文件小于 1M不需要分片同时分片的情况下为每一片打好标记以便于后端接口。
将此任务交给 GPT让其完成功能方案设计逻辑编写。 ChatGPT 生成功能方案
具体的结果这里就不展示了。
代码检查 只要是人写的就难保不会出错所以 CR 基本都植入到了工作流之中。现在完全可以让 AI 来帮忙完成这一过程。当然要注意资产隐私问题。 ChatGPT 进行代码检查
3.2 要纵观全局
声明范式下前端工程师是作为 “框架” 与 “产品” 之间的桥梁。 AIGC 下前端工程师成为了 “AIGC” 与 “产品” 之间的桥梁。
可能有些同学不太理解这段话下面我们来从开发流程上来解释一下。
在以前从需求文档到最终产品上线存在 4 个层级
产品经理自然语言编写的需求文档 产品经理描述需求时前端工程师构建的业务逻辑 前端工程师将业务逻辑转化为代码逻辑 用框架语言实现业务逻辑。
其实前端工程师在整个流程中充当一个什么样的角色呢很简单就是 “框架” 和 “需求文档” 间的中间人前端工程师将需求文档翻译成框架语言就这么简单。
在 AIGC 下整个开发流程发生了变化层级只有 3 个了
产品经理自然语言编写的需求文档 产品经理描述需求时前端工程师构建的业务逻辑 前端工程师利用 AI 来实现业务逻辑。
此时前端工程师仅需要用自然语言来描述业务逻辑然后交给 AI让模型输出代码。自然此时前端工程师的角色就是将业务逻辑搬运给 AI。
比如某产品网页上希望能实现一个定时推送消息的功能用户持续访问网页 30s 后推送。此时在前端工程师看来其代码逻辑就是一个定时器用自然语言就给 AI 来实现即可 业务逻辑转化为代码逻辑
在 AI 进入开发流程后前端工程师能做的不仅仅只有简单的逻辑转义到框架了还能做地更多。
设计系统
前端设计系统描述了系统的主题、复用的组件以及区域等然后基于此来搭建一个或多个产品的最终的网页或者应用程序从而简化大规模的设计。 之前这样一套设计系统几乎都是由设计和交互同学来进行制定。但是使用 AI 辅助下前端工程师同样可以做到比如
利用 AI 设计一套定制的主题、组件、设计语言和研发框架。 或者基于现有设计系统获得更优设计系统的建议。
产品设计
产品的设计需要考虑非常多的因素市场、人群、地域等等基于对这些因素的了解缺乏前端工程师对于产品功能的设计几乎很难提供有效的建议而前端工程师是真正离用户最近的一环应当具备相应的敏感度。在 AI 的辅助下这些因素不再是困扰前端工程师参与产品设计的障碍了。
3.3 要懂得批判
把 AI 用到平时的开发中能够极大地提高效率但 AI 所给到的信息就一定是符合的吗
除了与 AI 工具合作控制它们产生的输出前端工程师还应该花更多时间专注于 AI 的产出的准确性。我们可以用 AIGC 的产物来增强和改善网站和应用的用户体验。但是这些产物可能并不完美存在一些缺陷和问题因此进行评估和解决。
AI 可以给工程师赋能工程师也应当发挥领域专业知识和判断力以确保最佳结果。
评估 AI 产物的可靠性和效果
需要对使用 AI 产物的效果进行评估以确保其能够达到预期的效果。这包括对 AI 产物的性能、准确性、稳定性等方面进行评估以确保其能够满足用户的需求和期望。
改进 AI 产物的设计和实现
AI 辅助完成了重复性劳动工作但对于不完美的 AI 产物设计和实现进行改进以提高其可靠性、效果和用户体验。
3.4 要合理使用
工具是来辅助你的不是替代你的。
需要明确的是AI 工具并不能替代我们的工作它们只是辅助我们完成工作的工具。因此掌握好专业领域知识才能更好地利用 AI 工具提高工作效率。
同时请不要滥用 AIAI 协助无可厚非但所有的事情都交给 AI 不可取。
04、未来可期
AI 技术是前端工程师的一种有力工具可以帮助我们提高开发效率消除重复劳动。相信 AIGC 下的前端工程师们不再需要把时间花在曾经的切图上而是更加专注于领域深层的思考。
随着 AI 技术的进步一定会有越来越多的前端工程会被自动化这是必然的趋势。这就需要前端开发者所掌握的技能组合发生转变紧跟技术的趋势。重要的是前端工程师们要相信自己永远不会被机器彻底取代。虽然 AI 能够让许多任务自动化但它无法拥有你的创造力和独创性。
总的来说未来乃至现在的前端工程师们需要对新技术要有高适应度并且需能够融入 AI学会与 AI 协作同时不断结合自己领域知识。如此未来的工程师们定未来可期。
05、望天下再无码农
其实一直有一个愿望望天下再无码农。
希望 AI 迅猛发展吧让一切的无聊重复劳动都交给 AI让未来的前端工程师能够更多地从事创新性的工作让机器去完成重复性的任务让人类的智慧更好地服务于人类的社会。
愿天下再无码农。
06、探讨
6.1 AIGC 下前端会消失吗
之前看到一篇文章是这样说的前端从 jQ 发展到 MVVM门槛降了一波只要会一点代码就能拿起脚手架开撸如今前端从 MVVM 发展到 AIGC前端已死呀。
我的观点是“前端工程师永远都不会消失它可能换了一种形态也可能变了一种展示方式但它绝不会消失。” 我赞同一个观点 AI 工具将会被整合进开发者工具当中用来扩大熟练开发者的生产能力。木匠并没有被电动工具所替代会计师没有被电子表格替代摄影师没有被数码相机/智能手机替代所以前端工程师也不会被 AI 替代。只是未来前端工程师到底需要怎样的技能这个不得而知但可以预见的是学会使用 AI 是必经之路。
6.2 前端开发工程师会过分依赖 AI 吗
很多同学认为AI 的强大会让开发者不由自主地去使用它未来开发同学会不会过分地依赖 AI 呢
我的观点是“依赖没什么不好如今你我不是每天都依赖电脑依赖手机吗看你怎么用罢了工具没有好坏人才会有。” 好的工具被人们所依赖这是天道自然我们要做的就是不要过分依赖。有了电脑我们依旧要学习用手写字有了汽车我们依旧要迈开双腿跑步学会合理利用自然就不会过分依赖。如果觉得本篇分享对你有帮助欢迎转发分享。
写在最后
感兴趣的小伙伴赠送全套AIGC学习资料包含AI绘画、AI人工智能等前沿科技教程和软件工具具体看这里。
AIGC技术的未来发展前景广阔随着人工智能技术的不断发展AIGC技术也将不断提高。未来AIGC技术将在游戏和计算领域得到更广泛的应用使游戏和计算系统具有更高效、更智能、更灵活的特性。同时AIGC技术也将与人工智能技术紧密结合在更多的领域得到广泛应用对程序员来说影响至关重要。未来AIGC技术将继续得到提高同时也将与人工智能技术紧密结合在更多的领域得到广泛应用。
一、AIGC所有方向的学习路线
AIGC所有方向的技术点做的整理形成各个领域的知识点汇总它的用处就在于你可以按照下面的知识点去找对应的学习资源保证自己学得较为全面。 二、AIGC必备工具
工具都帮大家整理好了安装就可直接上手
三、最新AIGC学习笔记
当我学到一定基础有自己的理解能力的时候会去阅读一些前辈整理的书籍或者手写的笔记资料这些笔记详细记载了他们对一些技术点的理解这些理解是比较独到可以学到不一样的思路。
四、AIGC视频教程合集
观看全面零基础学习视频看视频学习是最快捷也是最有效果的方式跟着视频中老师的思路从基础到深入还是很容易入门的。 五、实战案例
纸上得来终觉浅要学会跟着视频一起敲要动手实操才能将自己的所学运用到实际当中去这时候可以搞点实战案例来学习。
