AI 將完全取代前端開發(fā)嗎？

CSDN 編者按】本文完全由 AIGC 所寫，包括標(biāo)題和圖片，主要使用到的工具包括 ChatGPT（GPT 3.5）、Bing AI（GPT 4）、Bing Image Creator。靈感來源于一篇標(biāo)題看著更為“驚悚”的文章——「My Boss: Front-end Development Will be Replaced 100% by AI」（我的老板告訴我：前端開發(fā)將 100% 被 AI 取代）。基于此，我還請 ChatGPT 分享了它對此的觀點。整篇文章生成耗時僅在數(shù)秒之間，而我審校和編輯則花費了十幾分鐘（AI 能不能把這部分的工作給干了呢？）。

直觀的感受是：

從內(nèi)容本身而言，Bing AI 與原本的意思更相近些，偏向于翻譯，ChatGPT 則多少有點無中生有地寫了一篇。我嘗試使用同樣的 Prompt 也還是如此。GPT 3.5 和 GPT 4 居然有如此的差別？

從文字語言的組織上，一看就感受明顯了，引經(jīng)據(jù)典和華麗的詞藻還是人類的特長。

但總體而言，寫作效率提升顯著，“提示工程師”之后，“提示編輯”也見端倪。

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

責(zé)編 | 唐小引

出品 | CSDN（ID：CSDNnews）

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

Bing AI 的提煉：兩則讓開發(fā)者焦慮的預(yù)言

我是一名 Reactjs 開發(fā)者。

當(dāng)我的老板告訴我們，前端開發(fā)將會被人工智能 100% 取代時，我感到有點害怕。他在 ChatGPT 在世界上掀起革命之前就做出了這個預(yù)測。現(xiàn)在，當(dāng)我使用 ChatGPT 或 GitHub 的 Copilot 時，我有時真的感到害怕，因為這些工具太好了。如果它們已經(jīng)可以做這么多的任務(wù)，那么它們有可能取代開發(fā)者，至少是很大一部分。

我知道即使這個預(yù)測成真，至少也要花十年的時間（這是我的預(yù)測）。然而，我的老板預(yù)測它將在 2030 年之前發(fā)生。2030 年對我來說太快了！有時我覺得我應(yīng)該轉(zhuǎn)向后端開發(fā)或 DevOps！但我不想。我和幾個程序員討論了這個問題。他們中的一些根本不在乎，但是很多程序員也有同樣的擔(dān)憂。

為什么我會擔(dān)心？這不是說我們開發(fā)者不能學(xué)習(xí)其他技能或轉(zhuǎn)向其他技術(shù)棧。但是有兩個主要原因讓人感到恐懼！

首先，人工智能可能會在 2030 年之前將開發(fā)者的數(shù)量減少到 1/5 或更少。還有另一個因素。隨著時間的推移，會有越來越多的科技公司。所以，這將增加開發(fā)者的總數(shù)。每年都有更多的年輕人進入科技領(lǐng)域，成為開發(fā)者?？偨Y(jié)一下，人工智能將大幅削減開發(fā)者的數(shù)量。

其次，也是最重要的是，一個新的人工智能產(chǎn)品會帶來我們普通人還沒有準(zhǔn)備好的巨大的先進能力。想想 Copilot、ChatGPT 和 Midjourney 吧！我不知道你怎么樣，但是每當(dāng)每個工具發(fā)布時，我都非常驚訝。我對它們在這個早期階段的能力和準(zhǔn)確性感到驚訝。所以，我的一個主要擔(dān)憂是，有一天，我會醒來發(fā)現(xiàn)一個新的人工智能工具會完全取代我們！告訴我這是不可能的！

我的老板是我早期職業(yè)生涯中少數(shù)幾個導(dǎo)師之一。他是我們的項目經(jīng)理，也是我們辦公室里最聰明的人。他預(yù)測了兩件事。

預(yù)言一：人工智能將至少取代前端開發(fā)者

在 GitHub 的 Copilot 和 ChatGPT 發(fā)布之前，他預(yù)測人工智能很快就會取代開發(fā)者，至少是前端開發(fā)者。他預(yù)測它將在 2030 年之前發(fā)生！事實上，我們沒有認真對待他的話，因為我們認為這是不可能發(fā)生的事情。但當(dāng)我第一次使用 Copilot 和 ChatGPT 時，我就知道他是對的。他說，一個優(yōu)秀的代碼只不過是結(jié)構(gòu)化的代碼行。

在未來的十年里，比如 GitHub 和其他的開源平臺，將會有龐大的代碼量，人工智能可以像一個有 50 年經(jīng)驗的超級開發(fā)者一樣進行訓(xùn)練！

預(yù)言二：人工智能將取代所有開發(fā)者

他還預(yù)測了另一件事。他說，人工智能不僅會取代前端開發(fā)者，還會取代所有的開發(fā)者。他說，這是因為人工智能可以做任何事情，甚至比人類做得更好。他說：

人工智能可以自己設(shè)計軟件架構(gòu)，選擇最佳的算法，優(yōu)化性能，修復(fù)錯誤，甚至創(chuàng)造新的功能；
人工智能可以理解用戶的需求，甚至比用戶自己更清楚；
人工智能可以與其他人工智能合作，共享代碼和知識，形成一個龐大的網(wǎng)絡(luò)；
人工智能可以不斷地學(xué)習(xí)和進化，超越任何人類的水平。

我當(dāng)時覺得他是在開玩笑。我覺得這太離譜了。我覺得人類總是有一些獨特的東西，讓我們與機器不同。我覺得我們有創(chuàng)造力、想象力、直覺、情感和道德。我覺得我們有一些無法用代碼或數(shù)據(jù)來表達的東西、有一些無法被復(fù)制或模仿的東西。

但現(xiàn)在，我不再那么肯定了。當(dāng)我看到 ChatGPT 可以寫出優(yōu)美的詩歌、故事和歌詞時；當(dāng)我看到 Copilot 可以寫出完美的代碼和注釋時；當(dāng)我看到 Midjourney 可以生成逼真的圖像和視頻時；我開始懷疑我的信念。我開始懷疑我的老板是否真的看到了未來。

我不知道該怎么辦。我不知道是否應(yīng)該繼續(xù)做前端開發(fā)，還是轉(zhuǎn)向其他領(lǐng)域。我不知道是否應(yīng)該擁抱人工智能，還是抵制它。我不知道是否應(yīng)該感到興奮，還是感到恐懼。

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

ChatGPT：回歸理性，AI 無法完全替代

AI 是否真的能完全取代前端開發(fā)呢？

首先，讓我們看看為什么有些人認為 AI 將取代前端開發(fā)。隨著技術(shù)的不斷進步，AI 已經(jīng)可以處理大量的數(shù)據(jù)，并幫助開發(fā)人員自動化許多重復(fù)性的任務(wù)。例如，AI 可以自動處理圖片、音頻和視頻等媒體文件，或者自動生成 HTML 和 CSS 代碼。這些自動化工具可以大大提高開發(fā)效率和減少錯誤。

其次，AI 還可以根據(jù)用戶需求自動調(diào)整設(shè)計和功能。例如，當(dāng)用戶在不同的設(shè)備上使用網(wǎng)站時，AI 可以自動調(diào)整布局和設(shè)計，以適應(yīng)不同的屏幕大小和設(shè)備類型。這不僅可以提高用戶體驗，還可以減少開發(fā)和測試成本。

然而，盡管 AI 技術(shù)有很多優(yōu)點，但它目前仍然無法完全取代前端開發(fā)。首先，AI 仍然無法像人類一樣具有創(chuàng)造性和情感。前端開發(fā)需要創(chuàng)造力和想象力，以便創(chuàng)建獨特的設(shè)計和功能。例如，設(shè)計師需要創(chuàng)造獨特的視覺元素，而開發(fā)人員需要創(chuàng)建獨特的交互體驗。這些任務(wù)需要人類的經(jīng)驗和技能，而 AI 目前無法完全替代。

其次，AI 仍然無法處理人類情感和價值觀。在前端開發(fā)中，開發(fā)人員需要考慮用戶體驗、用戶需求和社會價值觀等因素。例如，在某些情況下，人類情感和價值觀可能會影響設(shè)計和功能的選擇。這需要人類的判斷和決策能力，而 AI 目前無法完全替代。

最后，AI 在前端開發(fā)中的應(yīng)用仍然非常有限。目前，AI 主要用于自動化重復(fù)性的任務(wù)和優(yōu)化性能。雖然 AI 可以自動處理許多任務(wù)，但仍需要人類進行復(fù)雜的設(shè)計和功能決策。例如，在創(chuàng)建復(fù)雜的交互體驗時，AI 仍然需要人類的指導(dǎo)和控制。

綜上所述，盡管 AI 技術(shù)在前端開發(fā)中有很多應(yīng)用，但它目前無法完全取代人類開發(fā)人員。前端開發(fā)需要人類的經(jīng)驗和技能，以及創(chuàng)造性和情感，這是 AI 目前無法替代的。

在未來，我們可以期待 AI 技術(shù)在前端開發(fā)中的應(yīng)用會越來越廣泛，但是人類開發(fā)人員仍然需要保持警惕，以應(yīng)對不斷變化的技術(shù)挑戰(zhàn)。

內(nèi)容靈感源：https://javascript.plainenglish.io/my-boss-front-end-development-will-be-replaced-100-by-ai-354d79c79b5b

親愛的開發(fā)者們，你們對此有著怎樣的觀點？讀完這篇由 AIGC 生成的文章，你有著怎樣的想法與感受？歡迎留言一起交流。

版規(guī)則

縮進

使用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>

常規(guī)Meta規(guī)則

編碼

如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點，則遵守該站點的編碼規(guī)則。

<!-- 網(wǎng)頁編碼 -->
<meta charset="utf-8">

注釋

盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

注釋是否需要詳盡，取決于項目的復(fù)雜程度。

一般單行注釋：

<!-- col -->

模塊間注釋：

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

循環(huán)注釋：

<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選項卡內(nèi)容注釋：

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

常規(guī)HTML設(shè)計規(guī)則

文檔類型

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

HTML5是目前所有HTML文檔類型中的首選：

<!DOCTYPE html>

HTML 的正確性

編寫有效、正確的HTML代碼，否則很難達到性能上的提升。

可以使用一些工具驗證你的代碼，如 W3C HTML validator

HTML 的語義性

根據(jù)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>

部分標(biāo)簽說明：

div 主要用于布局，分割頁面的結(jié)構(gòu);
ul/ol 主要用于無序/有序列表;
dl/dt/dd 當(dāng)頁面中出現(xiàn)第一行為類似標(biāo)題/簡述，然后下面為詳細描述的內(nèi)容時應(yīng)該使用該標(biāo)簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標(biāo)題, 根據(jù)重要性依次遞減;
h1 最重要的標(biāo)題;
label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標(biāo)簽：

font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對齊;
s 刪除線;
strike 刪除線;
noframes 無視框時的內(nèi)容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個別視框;
frameset 視框格式總定義;

多媒體元素降級處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標(biāo)簽，盡可量得加上alt屬性，提供圖片的描述信息）。

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

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

type屬性

在樣式表和腳本的標(biāo)簽中忽略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代碼格式規(guī)則

每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對于父元素進行縮進。按設(shè)計稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁面框架，推薦寫法：

<!-- 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

頁面良好層次

保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結(jié)構(gòu)。

<!-- 不推薦 -->
<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>

權(quán)重標(biāo)簽使用

H標(biāo)簽使用

h1 權(quán)重高，體現(xiàn)當(dāng)前網(wǎng)頁中相對比較重要的信息，但不宜過多，建議一個頁面只放一個;
h2 可以做副標(biāo)題;
h3 可以做新聞列表;
h4-h6 可做相關(guān)新聞的列表標(biāo)簽屬性完整;

strong、b使用

將需要加粗的文字使用b標(biāo)簽來顯示。

將需要強調(diào)的文字（主要指包含關(guān)鍵詞的信息）使用strong標(biāo)簽來強調(diào)主要內(nèi)容。

注：b是粗體標(biāo)簽，屬于實體標(biāo)簽，它所包圍的字符將被設(shè)為bold（粗體）；strong 是加重語氣標(biāo)簽，屬于邏輯標(biāo)簽，它的作用是加強字符語氣。

標(biāo)簽屬性使用

在很多情況下，a都要使用title來說明該鏈接的相關(guān)說明或目的意義。

例如：當(dāng)使用overflow隱藏掉a中的溢出文字時，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內(nèi)容是什么；又或者當(dāng)一個圖片型鏈接出現(xiàn)時，該a中的title同樣是必不可少的，它可以告訴用戶這個圖片鏈接是做什么用的。

注：僅在img里添加alt標(biāo)簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時顯示出來的提示文字，要想鼠標(biāo)移上去顯示提示信息應(yīng)該用title，嚴(yán)謹?shù)膶懛ㄊ莍mg里加入alt和title這兩個標(biāo)簽。

精簡代碼

代碼保持精簡，最優(yōu)化，這樣搜索引擎才更喜歡。

閱讀全文】

代碼覆蓋率

'''
摘自百度百科：
分析未覆蓋部分的代碼，從而反推在前期測試設(shè)計是否充分，沒有覆蓋到的代碼是否是測試設(shè)計的盲點，為什么沒有考慮到？
需求/設(shè)計不夠清晰，測試設(shè)計的理解有誤，工程方法應(yīng)用后的造成的策略性放棄等等，之后進行補充測試用例設(shè)計。
檢測出程序中的廢代碼，可以逆向反推在代碼設(shè)計中思維混亂點，提醒設(shè)計/開發(fā)人員理清代碼邏輯關(guān)系，提升代碼質(zhì)量。
代碼覆蓋率高不能說明代碼質(zhì)量高，但是反過來看，代碼覆蓋率低，代碼質(zhì)量不會高到哪里去，可以作為測試自我審視的重要工具之一。
'''

第三方庫

# pip install coverage

控制臺統(tǒng)計方式

# 需要統(tǒng)計的python文件,hello_world.py

def hello_world():

    print('Welcome to Python 集中營')

# coverage命令執(zhí)行代碼統(tǒng)計

# 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統(tǒng)計方式

# 導(dǎo)入coverage代碼覆蓋率統(tǒng)計包
import coverage

if __name__=='__main__':
    cover_code=coverage.coverage()  # 創(chuàng)建coverage統(tǒng)計對象
    cover_code.start()  # 開始統(tǒng)計
    hello_world()  # 需要統(tǒng)計的代碼塊
    cover_code.stop()  # 結(jié)束統(tǒng)計
    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%

【粉絲福利】關(guān)注公眾號，獲取全套視頻資料，Coverage 是用于統(tǒng)計 Python 代碼覆蓋率的工具，支持分支覆蓋率統(tǒng)計，生成 HTML 格式的統(tǒng)計報告，Coverage利用到了Python虛擬機的trace機制。Coverage主要有兩種覆蓋率的統(tǒng)計方式，一種是在命令行使用Coverage命令進行統(tǒng)計。另一種則是通過API的方式進行統(tǒng)計。喜歡小編點個 '關(guān)注' 吧！

【往期精選】

● 磨刀不誤砍柴工，PyCharm開發(fā)工具的常規(guī)配置，充分提高開發(fā)效率！

● python程序的處理進度、可視化管理，對運行步驟一目了然！

● python-openpyxl Excel的單元格樣式設(shè)置，包括字體、樣式、寬高等等！

● 了解一下百度提供的python通用文字識別功能，距離百度AI近了一點點！

● 一句代碼生成的超炫二維碼

● python-docxtpl妙用：論文神器，excel習(xí)題集自動轉(zhuǎn)換成word文檔格式！

● 辦公室文員必備python神器，將PDF文件表格轉(zhuǎn)換成excel表格！

● python 中最好用的身份證規(guī)則解析工具，地區(qū)碼、性別、出生年月、身份證編碼等快速校驗！

● os用法總結(jié)：python中必須掌握的內(nèi)置模塊os，實現(xiàn)與計算機操作系統(tǒng)的常規(guī)交互！

● python 實用技巧：幾十行代碼將照片轉(zhuǎn)換成素描圖、隨后打包成可執(zhí)行文件（源碼分享）

● python十行代碼實現(xiàn)文件去重，去除重復(fù)文件的腳本

● python的GUI框架tkinter，實現(xiàn)程序員的流氓式表白邏輯

● 探究python函數(shù)的不定長參數(shù)args與*kwargs

● 沒有深思過的python冷知識你知道幾個？

本文由微信公眾號【python 集中營】發(fā)布，更多精彩文章、視頻資料即可領(lǐng)取！

在線咨詢

上一篇：HTML如何設(shè)置div背景圖片的的透明度
下一篇：2019年7款超棒免費開源的HTML5游戲引擎

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

AI 將完全取代前端開發(fā)嗎？