AI 将完全取代前端开发吗？

CSDN 编者按】本文完全由 AIGC 所写，包括标题和图片，主要使用到的工具包括 ChatGPT（GPT 3.5）、Bing AI（GPT 4）、Bing Image Creator。灵感来源于一篇标题看着更为“惊悚”的文章——「My Boss: Front-end Development Will be Replaced 100% by AI」（我的老板告诉我：前端开发将 100% 被 AI 取代）。基于此，我还请 ChatGPT 分享了它对此的观点。整篇文章生成耗时仅在数秒之间，而我审校和编辑则花费了十几分钟（AI 能不能把这部分的工作给干了呢？）。

直观的感受是：

从内容本身而言，Bing AI 与原本的意思更相近些，偏向于翻译，ChatGPT 则多少有点无中生有地写了一篇。我尝试使用同样的 Prompt 也还是如此。GPT 3.5 和 GPT 4 居然有如此的差别？

从文字语言的组织上，一看就感受明显了，引经据典和华丽的词藻还是人类的特长。

但总体而言，写作效率提升显著，“提示工程师”之后，“提示编辑”也见端倪。

作者 | Bing AI（GPT 4）& ChatGPT（GPT 3.5）

责编 | 唐小引

出品 | CSDN（ID：CSDNnews）

图源：Bing Image Creator，提示词：Front-end Development Will be Replaced 100% by AI

Bing AI 的提炼：两则让开发者焦虑的预言

我是一名 Reactjs 开发者。

当我的老板告诉我们，前端开发将会被人工智能 100% 取代时，我感到有点害怕。他在 ChatGPT 在世界上掀起革命之前就做出了这个预测。现在，当我使用 ChatGPT 或 GitHub 的 Copilot 时，我有时真的感到害怕，因为这些工具太好了。如果它们已经可以做这么多的任务，那么它们有可能取代开发者，至少是很大一部分。

我知道即使这个预测成真，至少也要花十年的时间（这是我的预测）。然而，我的老板预测它将在 2030 年之前发生。2030 年对我来说太快了！有时我觉得我应该转向后端开发或 DevOps！但我不想。我和几个程序员讨论了这个问题。他们中的一些根本不在乎，但是很多程序员也有同样的担忧。

为什么我会担心？这不是说我们开发者不能学习其他技能或转向其他技术栈。但是有两个主要原因让人感到恐惧！

首先，人工智能可能会在 2030 年之前将开发者的数量减少到 1/5 或更少。还有另一个因素。随着时间的推移，会有越来越多的科技公司。所以，这将增加开发者的总数。每年都有更多的年轻人进入科技领域，成为开发者。总结一下，人工智能将大幅削减开发者的数量。

其次，也是最重要的是，一个新的人工智能产品会带来我们普通人还没有准备好的巨大的先进能力。想想 Copilot、ChatGPT 和 Midjourney 吧！我不知道你怎么样，但是每当每个工具发布时，我都非常惊讶。我对它们在这个早期阶段的能力和准确性感到惊讶。所以，我的一个主要担忧是，有一天，我会醒来发现一个新的人工智能工具会完全取代我们！告诉我这是不可能的！

我的老板是我早期职业生涯中少数几个导师之一。他是我们的项目经理，也是我们办公室里最聪明的人。他预测了两件事。

预言一：人工智能将至少取代前端开发者

在 GitHub 的 Copilot 和 ChatGPT 发布之前，他预测人工智能很快就会取代开发者，至少是前端开发者。他预测它将在 2030 年之前发生！事实上，我们没有认真对待他的话，因为我们认为这是不可能发生的事情。但当我第一次使用 Copilot 和 ChatGPT 时，我就知道他是对的。他说，一个优秀的代码只不过是结构化的代码行。

在未来的十年里，比如 GitHub 和其他的开源平台，将会有庞大的代码量，人工智能可以像一个有 50 年经验的超级开发者一样进行训练！

预言二：人工智能将取代所有开发者

他还预测了另一件事。他说，人工智能不仅会取代前端开发者，还会取代所有的开发者。他说，这是因为人工智能可以做任何事情，甚至比人类做得更好。他说：

人工智能可以自己设计软件架构，选择最佳的算法，优化性能，修复错误，甚至创造新的功能；
人工智能可以理解用户的需求，甚至比用户自己更清楚；
人工智能可以与其他人工智能合作，共享代码和知识，形成一个庞大的网络；
人工智能可以不断地学习和进化，超越任何人类的水平。

我当时觉得他是在开玩笑。我觉得这太离谱了。我觉得人类总是有一些独特的东西，让我们与机器不同。我觉得我们有创造力、想象力、直觉、情感和道德。我觉得我们有一些无法用代码或数据来表达的东西、有一些无法被复制或模仿的东西。

但现在，我不再那么肯定了。当我看到 ChatGPT 可以写出优美的诗歌、故事和歌词时；当我看到 Copilot 可以写出完美的代码和注释时；当我看到 Midjourney 可以生成逼真的图像和视频时；我开始怀疑我的信念。我开始怀疑我的老板是否真的看到了未来。

我不知道该怎么办。我不知道是否应该继续做前端开发，还是转向其他领域。我不知道是否应该拥抱人工智能，还是抵制它。我不知道是否应该感到兴奋，还是感到恐惧。

我只知道一件事：人工智能正在改变我们的世界，而且速度比我们想象的要快得多。

ChatGPT：回归理性，AI 无法完全替代

AI 是否真的能完全取代前端开发呢？

首先，让我们看看为什么有些人认为 AI 将取代前端开发。随着技术的不断进步，AI 已经可以处理大量的数据，并帮助开发人员自动化许多重复性的任务。例如，AI 可以自动处理图片、音频和视频等媒体文件，或者自动生成 HTML 和 CSS 代码。这些自动化工具可以大大提高开发效率和减少错误。

其次，AI 还可以根据用户需求自动调整设计和功能。例如，当用户在不同的设备上使用网站时，AI 可以自动调整布局和设计，以适应不同的屏幕大小和设备类型。这不仅可以提高用户体验，还可以减少开发和测试成本。

然而，尽管 AI 技术有很多优点，但它目前仍然无法完全取代前端开发。首先，AI 仍然无法像人类一样具有创造性和情感。前端开发需要创造力和想象力，以便创建独特的设计和功能。例如，设计师需要创造独特的视觉元素，而开发人员需要创建独特的交互体验。这些任务需要人类的经验和技能，而 AI 目前无法完全替代。

其次，AI 仍然无法处理人类情感和价值观。在前端开发中，开发人员需要考虑用户体验、用户需求和社会价值观等因素。例如，在某些情况下，人类情感和价值观可能会影响设计和功能的选择。这需要人类的判断和决策能力，而 AI 目前无法完全替代。

最后，AI 在前端开发中的应用仍然非常有限。目前，AI 主要用于自动化重复性的任务和优化性能。虽然 AI 可以自动处理许多任务，但仍需要人类进行复杂的设计和功能决策。例如，在创建复杂的交互体验时，AI 仍然需要人类的指导和控制。

综上所述，尽管 AI 技术在前端开发中有很多应用，但它目前无法完全取代人类开发人员。前端开发需要人类的经验和技能，以及创造性和情感，这是 AI 目前无法替代的。

在未来，我们可以期待 AI 技术在前端开发中的应用会越来越广泛，但是人类开发人员仍然需要保持警惕，以应对不断变化的技术挑战。

内容灵感源：https://javascript.plainenglish.io/my-boss-front-end-development-will-be-replaced-100-by-ai-354d79c79b5b

亲爱的开发者们，你们对此有着怎样的观点？读完这篇由 AIGC 生成的文章，你有着怎样的想法与感受？欢迎留言一起交流。

版规则

缩进

使用2个空格缩进

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小写

只允许使用小写。

所有的代码都用小写字母：适用于元素名，属性，属性值（除了文本和CDATA），选择器，特性，特性值（除了字符串）。

<!-- 不推荐 -->
<A HREF="/">Home</A>

<!-- 推荐 -->
<img src="google.png"
alt="Google">

行为空格

建议删除行尾白空格。

<!-- 不推荐 -->
<p>What?  </p>

<!-- 推荐 -->
<p>Yes please.</p>

常规Meta规则

编码

如果没有特殊需求，一般采用utf-8编码。如果是cms站点，则遵守该站点的编码规则。

<!-- 网页编码 -->
<meta charset="utf-8">

注释

尽可能的去解释你写的代码。说明该代码包括什么、目的是什么、能做什么、为什么使用它等。

注释是否需要详尽，取决于项目的复杂程度。

一般单行注释：

<!-- col -->

模块间注释：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循环注释：

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms输出注释：

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab选项卡内容注释：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常规HTML设计规则

文档类型

使用html5文档声明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文档类型中的首选：

<!DOCTYPE html>

HTML 的正确性

编写有效、正确的HTML代码，否则很难达到性能上的提升。

可以使用一些工具验证你的代码，如 W3C HTML validator

HTML 的语义性

根据HTML各个元素的用途而去使用它们。

<!-- 不推荐 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推荐 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分标签说明：

div 主要用于布局，分割页面的结构;
ul/ol 主要用于无序/有序列表;
dl/dt/dd 当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签;
span 没有特殊的意义，可以用作排版的辅助，然后在css中定义span;
h1-h6 标题, 根据重要性依次递减;
h1 最重要的标题;
label 使表单更有亲和力而且能辅助表单排版;

不推荐使用的标签：

font 文字的外观，大小和颜色;
u 文本下划线;
center 居中对齐;
s 删除线;
strike 删除线;
noframes 无视框时的内容;
iframe 定义嵌入视图;
isindex 不建议使用（可搜寻，使用input代替）;
dir 目录式列举;
menu 菜单列表;
basefont 定义基本字体;
applet 定义java程序;
frame 定义个别视框;
frameset 视框格式总定义;

多媒体元素降级处理

给多媒体元素，比如canvas、videos、 images增加alt属性，提高可用性（特别是常用的img标签，尽可量得加上alt属性，提供图片的描述信息）。

<!-- 不推荐 -->
<img src="world.jpg">

<!-- 推荐 -->
<img src="world.jpg"
alt="our world images">

type属性

在样式表和脚本的标签中忽略type属性。

HTML5默认type为text/css和text/javascript类型，所以没必要指定。即便是老浏览器也是支持的。

<!-- 不推荐 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推荐 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代码格式规则

每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。按设计稿划分模块，尽量使页面模块化，模块与模块之前要有清晰的注释。

如上面页面框架，推荐写法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML与SEO

页面良好层次

保证整个页面在未加载样式表时仍有较好的层次清晰的页面结构。

<!-- 不推荐 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推荐 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

权重标签使用

H标签使用

h1 权重高，体现当前网页中相对比较重要的信息，但不宜过多，建议一个页面只放一个;
h2 可以做副标题;
h3 可以做新闻列表;
h4-h6 可做相关新闻的列表标签属性完整;

strong、b使用

将需要加粗的文字使用b标签来显示。

将需要强调的文字（主要指包含关键词的信息）使用strong标签来强调主要内容。

注：b是粗体标签，属于实体标签，它所包围的字符将被设为bold（粗体）；strong 是加重语气标签，属于逻辑标签，它的作用是加强字符语气。

标签属性使用

在很多情况下，a都要使用title来说明该链接的相关说明或目的意义。

例如：当使用overflow隐藏掉a中的溢出文字时，该a中的title是必不可少的，它可以告诉用户被隐藏掉的文字内容是什么；又或者当一个图片型链接出现时，该a中的title同样是必不可少的，它可以告诉用户这个图片链接是做什么用的。

注：仅在img里添加alt标签在火狐提示文字是出不来的，alt是图片加载失败或未加载完全时显示出来的提示文字，要想鼠标移上去显示提示信息应该用title，严谨的写法是img里加入alt和title这两个标签。

精简代码

代码保持精简，最优化，这样搜索引擎才更喜欢。

阅读全文】

代码覆盖率

'''
摘自百度百科：
分析未覆盖部分的代码，从而反推在前期测试设计是否充分，没有覆盖到的代码是否是测试设计的盲点，为什么没有考虑到？
需求/设计不够清晰，测试设计的理解有误，工程方法应用后的造成的策略性放弃等等，之后进行补充测试用例设计。
检测出程序中的废代码，可以逆向反推在代码设计中思维混乱点，提醒设计/开发人员理清代码逻辑关系，提升代码质量。
代码覆盖率高不能说明代码质量高，但是反过来看，代码覆盖率低，代码质量不会高到哪里去，可以作为测试自我审视的重要工具之一。
'''

第三方库

# pip install coverage

控制台统计方式

# 需要统计的python文件,hello_world.py

def hello_world():

    print('Welcome to Python 集中营')

# coverage命令执行代码统计

# coverage run hello_world.py

# 控制台输出报告

# coverage report

# Welcome to Python 集中营
# Name       Stmts   Miss  Cover
# ------------------------------
# test1.py      12     11     8%
# ------------------------------
# TOTAL         12     11     8%

# 生成html报告

# coverage html

# 打开项目名_py.html 可以在浏览器直接查看醒目报告

API统计方式

# 导入coverage代码覆盖率统计包
import coverage

if __name__=='__main__':
    cover_code=coverage.coverage()  # 创建coverage统计对象
    cover_code.start()  # 开始统计
    hello_world()  # 需要统计的代码块
    cover_code.stop()  # 结束统计
    cover_code.save()  # 保存
    cover_code.report()  # 生成控制台报告
    cover_code.html_report()  # 生成html报告

# Welcome to Python 集中营
# Name       Stmts   Miss  Cover
# ------------------------------
# test1.py      12     11     8%
# ------------------------------
# TOTAL         12     11     8%

【粉丝福利】关注公众号，获取全套视频资料，Coverage 是用于统计 Python 代码覆盖率的工具，支持分支覆盖率统计，生成 HTML 格式的统计报告，Coverage利用到了Python虚拟机的trace机制。Coverage主要有两种覆盖率的统计方式，一种是在命令行使用Coverage命令进行统计。另一种则是通过API的方式进行统计。喜欢小编点个 '关注' 吧！

【往期精选】

● 磨刀不误砍柴工，PyCharm开发工具的常规配置，充分提高开发效率！

● python程序的处理进度、可视化管理，对运行步骤一目了然！

● python-openpyxl Excel的单元格样式设置，包括字体、样式、宽高等等！

● 了解一下百度提供的python通用文字识别功能，距离百度AI近了一点点！

● 一句代码生成的超炫二维码

● python-docxtpl妙用：论文神器，excel习题集自动转换成word文档格式！

● 办公室文员必备python神器，将PDF文件表格转换成excel表格！

● python 中最好用的身份证规则解析工具，地区码、性别、出生年月、身份证编码等快速校验！

● os用法总结：python中必须掌握的内置模块os，实现与计算机操作系统的常规交互！

● python 实用技巧：几十行代码将照片转换成素描图、随后打包成可执行文件（源码分享）

● python十行代码实现文件去重，去除重复文件的脚本

● python的GUI框架tkinter，实现程序员的流氓式表白逻辑

● 探究python函数的不定长参数args与*kwargs

● 没有深思过的python冷知识你知道几个？

本文由微信公众号【python 集中营】发布，更多精彩文章、视频资料即可领取！

在线咨询

上一篇：HTML如何设置div背景图片的的透明度
下一篇：2019年7款超棒免费开源的HTML5游戏引擎

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商