腾小云导读
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 工具，进步工作效率。
同时，请不要滥用 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 点开奖。