AIGC浪潮下，鹅厂新一代前端人的真实工作感受
腾小云导读
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 已然如此，此时就不得不问那个老生常谈的问题了，前端工程师们该何去何从呢？
|
我想说的是，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 的插件中就用到了正则，但他也没写全，导致匹配问题。
希望匹配的字符串是：
// 一眼看起来没啥问题，可是，这个正则没匹配到换行的场景。
遗漏很正常，且看如何利用 AI 来修复这个问题：
ChatGPT 生成正则
ChatGPT 对生成的正则进行解释
只需要简单地描述清楚需求，就能得到答案。也许最终答案并非完全正确，但至少它能给你巨大的帮助和启发。
复杂逻辑编写：
对于大部分做中后台前端项目的前端来说，似乎自己更多的是 js 工程师，要做的就是逻辑上的处理，比如想要实现文件切片上传，每一片 512 kb，如果文件小于 1M，不需要分片，同时，分片的情况下为每一片打好标记以便于后端接口。将此任务交给 GPT，让其完成功能方案设计，逻辑编写。
ChatGPT 生成功能方案
具体的结果这里就不展示了。
代码检查：只要是人写的，就难保不会出错，所以 CR 基本都植入到了工作流之中。现在完全可以让 AI 来帮忙完成这一过程。当然，要注意资产隐私问题。
ChatGPT 进行代码检查
3.2 要纵观全局
声明范式下，前端工程师是作为 “框架” 与 “产品” 之间的桥梁。AIGC 下，前端工程师成为了 “AIGC” 与 “产品” 之间的桥梁。
可能有些同学不太理解这段话，下面我们来从开发流程上来解释一下。
在以前，从需求文档到最终产品上线，存在 4 个层级：
|
其实，前端工程师在整个流程中充当一个什么样的角色呢？很简单，就是 “框架” 和 “需求文档” 间的中间人，前端工程师将需求文档翻译成框架语言，就这么简单。
在 AIGC 下，整个开发流程发生了变化，层级只有 3 个了：
|
此时，前端工程师仅需要用自然语言来描述业务逻辑，然后交给 AI，让模型输出代码。自然，此时，前端工程师的角色就是将业务逻辑搬运给 AI。
比如，某产品（网页）上希望能实现一个定时推送消息的功能（用户持续访问网页 30s 后推送）。此时，在前端工程师看来，其代码逻辑就是一个定时器，用自然语言就给 AI 来实现即可：
业务逻辑转化为代码逻辑
在 AI 进入开发流程后，前端工程师能做的不仅仅只有简单的逻辑转义到框架了，还能做地更多。
-
设计系统
前端设计系统描述了系统的主题、复用的组件以及区域等，然后基于此来搭建一个或多个产品的最终的网页或者应用程序，从而简化大规模的设计。 之前，这样一套设计系统几乎都是由设计和交互同学来进行制定。但是使用 AI 辅助下，前端工程师同样可以做到，比如：
|
-
产品设计
产品的设计需要考虑非常多的因素，市场、人群、地域等等，基于对这些因素的了解缺乏，前端工程师对于产品功能的设计几乎很难提供有效的建议，而前端工程师是真正离用户最近的一环，应当具备相应的敏感度。在 AI 的辅助下，这些因素不再是困扰前端工程师参与产品设计的障碍了。
3.3 要懂得批判
把 AI 用到平时的开发中能够极大地提高效率，但 AI 所给到的信息就一定是符合的吗？
除了与 AI 工具合作，控制它们产生的输出，前端工程师还应该花更多时间专注于 AI 的产出的准确性。我们可以用 AIGC 的产物来增强和改善网站和应用的用户体验。但是，这些产物可能并不完美，存在一些缺陷和问题，因此进行评估和解决。
AI 可以给工程师赋能，工程师也应当发挥领域专业知识和判断力，以确保最佳结果。
-
评估 AI 产物的可靠性和效果
需要对使用 AI 产物的效果进行评估，以确保其能够达到预期的效果。这包括对 AI 产物的性能、准确性、稳定性等方面进行评估，以确保其能够满足用户的需求和期望。
-
改进 AI 产物的设计和实现
AI 辅助完成了重复性劳动工作，但对于不完美的 AI 产物，设计和实现进行改进，以提高其可靠性、效果和用户体验。
3.4 要合理使用
工具是来辅助你的，不是替代你的。
需要明确的是，AI 工具并不能替代我们的工作，它们只是辅助我们完成工作的工具。因此，掌握好专业领域知识，才能更好地利用 AI 工具，提高工作效率。
同时，请不要滥用 AI，AI 协助无可厚非，但所有的事情都交给 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 呢？
我的观点是：“依赖没什么不好，如今你我不是每天都依赖电脑，依赖手机吗？看你怎么用罢了，工具没有好坏，人才会有。” 好的工具被人们所依赖，这是天道自然，我们要做的就是，不要过分依赖。有了电脑，我们依旧要学习用手写字；有了汽车，我们依旧要迈开双腿跑步；学会合理利用，自然就不会过分依赖。如果觉得本篇分享对你有帮助，欢迎转发分享。
参考链接：
[1] ChatCPT：https://openai.com/blog/chatgpt
[2] What is the Impact of AI and ML on Front-End Development?：https://www.projectcubicle.com/what-is-the-impact-of-ai-and-ml-on-front-end-development/
[3] 生成式 AI 颠覆前端：https://foresightnews.pro/article/detail/27847
[4] 预测前端开发模式的变化：https://juejin.cn/post/7216182763237818425
-End-
原创作者｜张波
技术责编｜小苏、花叔
AIGC 的出现给你提供了什么便利？又或者对你造成了什么影响？欢迎在腾讯云开发者公众号评论区分享讨论。我们将选取1则最有意义的分享，送出腾讯云开发者-鼠标垫1个（见下图）。7月18日中午12点开奖。
➤ 算法工程师深度解构ChatGPT技术
➤ 这波可以，终于有内行人把 GPT-4 说透了
➤ ChatGPT深度解析：GPT家族进化史
➤ 对标ChatGPT，新AI助手Claude来了
➤ 白话科普：10分钟从零看懂AI绘画原理
➤ 鹅厂专家讲透AI文本生成解码策略与代码实现
➤ GPT4结对编程实战，鹅厂研发真实使用感受
➤ 低代码结合ChatGPT开发，每天多出1小时摸鱼
➤ 鹅厂程序员怎么用ChatGPT？如何高效Prompt？
➤ 让AI替你打工？GPT提升开发效率指南
➤ 不写代码也能年薪百万？Prompt+低代码开发实战
➤ 从玩具到工具｜社畜程序员用AI提效的神仙操作
➤ 我把一句话需求交给AI，它竟然给我返回了……
➤ 你还在用听不懂人话的 ChatGPT 吗？
➤“GPT们”背后谁来支撑大模型训练的极致算力
➤ QQGC？揭秘QQ的AI绘画大模型技术
➤ 给想玩AIGC的小白：教你从0搭图文视频网站
➤ 快收藏！手把手教你用AI绘画
➤ 3小时开发ChatGPT微信小程序
➤ 十问ChatGPT：一个新的时代正拉开序幕
➤ 154页GPT-4报告刷屏：提到了这些新能力和缺陷
➤ TVP专家夜聊：不用ChatGPT的开发都该被炒掉
➤ AI低代码编程崛起，23年还要不要学软件？
AIGC 知识专题持续更新中...
欢迎关注星标腾讯云开发者
第一时间看鹅厂技术与 AIGC 实用技巧