前端開發(fā)是做什么的？工作職責(zé)有哪些？
時(shí)間：2023-12-05 05:00:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-12-05 05:00:02 來源：網(wǎng)站運(yùn)營
前端開發(fā)是做什么的？工作職責(zé)有哪些？：
什么是前端
我們學(xué)習(xí)新知識之初，有必要自上而下，從抽象到具體地對前端的整套體系建立基本的認(rèn)知。這有助于我們快速地入門前端，并為深入學(xué)習(xí)奠定基礎(chǔ)。
在本課程中，我們不涉及具體的技術(shù)講解，而是用更輕松的方式閑談漫步，
明確前端的定義，回顧前端技術(shù)的發(fā)展歷史，了解前端崗位的職責(zé)，展望前端美好未來。 初識“前端”
前端是什么？無論是帶團(tuán)隊(duì)還是教學(xué)生，都有很多的人問過我這個(gè)問題。這其實(shí)并不好回答！
因?yàn)榍岸耸菍儆谟?jì)算機(jī)應(yīng)用范疇，有著龐雜的體系和眾多晦澀專有名詞的概念。為了便于理解，我將帶你
從具體到抽象，全面且深刻的認(rèn)知前端。
我們先從字面意思下手，看看什么是“端”：一條線段，它的起點(diǎn)和終點(diǎn)，我們都可以稱之為“端”。
“端”，也就是東西的一頭。而
前端（Front-End），顧名思義，就是“前面”的那一頭，或者是“外在”的那一頭。
這樣來看，筆的筆頭、衣服光鮮的一面、手機(jī)的外殼和屏幕，這些生活中具體的事物，我們能
直接看得見，摸得著，用得上的部分，都可以稱作“前端”。- 但是在計(jì)算機(jī)/軟件領(lǐng)域，我們需要換一種角度去理解前端。
相信你平時(shí)也會使用的淘寶、京東、百度等軟件應(yīng)用
，它們雖然不是具體的“實(shí)物”，但本質(zhì)上也是為了“
適應(yīng)需要，以供使用”而誕生的。這和你坐的椅子，躺的床沒有區(qū)別，也有著能夠
看得見，摸得著，用得上的部分。我們可以從軟件或系統(tǒng)界面中“看”到信息，用鼠標(biāo)鍵盤或手指“摸”到圖片和文字，并“使用“軟件實(shí)現(xiàn)我們的需求。因此，你瀏覽的網(wǎng)站、手機(jī)中的app、電腦上的應(yīng)用程序、車載導(dǎo)航，甚至是家里智能家居的數(shù)顯，都可以稱得上
計(jì)算機(jī)領(lǐng)域的前端。
當(dāng)然，每個(gè)行業(yè)都有一些專屬于自己的高大上的專業(yè)術(shù)語，前端也一樣！我們將那些
“看得見”叫做“視覺效果”，將“摸得著”叫做“交互”，將“用得上”稱為“功能”。具體到上面的示例中，
“視覺效果”，就是按鈕、卡片、圖片等元素的配色和排布；
“交互”，就是點(diǎn)擊、滑動等動作和反饋；而
“功能”，就是這個(gè)軟件能做的事情，瀏覽、挑選、購物。
因此，計(jì)算機(jī)領(lǐng)域的前端可以抽象地描述為：
產(chǎn)品中，能給用戶提供視覺效果，完成用戶的交互，并且能夠借此實(shí)現(xiàn)一定功能的部分。你可能也注意到，針對前端概念的描述，并沒有提及前端用什么技術(shù)，以怎樣的方式去實(shí)現(xiàn)。
因?yàn)榍岸吮緛砭?/b>與用戶緊密相連，與技術(shù)無關(guān)。它是軟件應(yīng)用中，最貼近用戶的那一“端”。如果將應(yīng)用比作一道美食，前端工程師的工作就是讓這道美食**色澤誘人，香氣撲鼻。
當(dāng)然，要深刻地認(rèn)知前端，不能只從其自身進(jìn)行單方面解析，要辯證性地理解；前端，字面上既然有個(gè)“前”，那么一定存在一個(gè)與“前”相對的“后”，二者共同構(gòu)成某一個(gè)事物的整體，它們在這個(gè)整體中發(fā)揮各自的長處。
而與前端相對的，應(yīng)用中遠(yuǎn)離用戶的那一端，更籠統(tǒng)的表述就是蘊(yùn)藏在背后的大部分你看不到的部分，我們稱之為“后端（Back-End）”。具體一點(diǎn)地說，百度云盤存儲的東西在哪兒？為什么就能下載？為什么微信與QQ能夠?qū)崿F(xiàn)即時(shí)通訊呢？為什么淘寶購物的流程是這樣？這都是“后端”要解決的問題。
與前端相反，后端工程師的工作，更關(guān)注的是應(yīng)用這道美食背后的故事：如何取材，如何配料，如何烹制；其負(fù)責(zé)設(shè)計(jì)并實(shí)現(xiàn)應(yīng)用的結(jié)構(gòu)、流程、功能，并為前端提供數(shù)據(jù)和服務(wù)的支持。
就像上圖所示，在軟件應(yīng)用中，有了前端的瞭望，信息采集才會充分，有了后端的維護(hù)，程序運(yùn)行才會穩(wěn)定。
并且，由于承擔(dān)的職責(zé)不同，前端和后端所使用的技術(shù)也有所不同。只不過，我們作為使用者，一般情況下是“看”不到后端程序員所實(shí)現(xiàn)的邏輯和對數(shù)據(jù)的處理。
總之，前端重點(diǎn)解決的是應(yīng)用好不好用的問題，而后端重點(diǎn)解決的是應(yīng)用能不能用的問題；二者是表象與內(nèi)在的關(guān)系，缺一不可，需要相互配合才能完成軟件應(yīng)用的全部功能。
初識“前端開發(fā)”
講解完前端的概念，我們再從具體的工作崗位看看，“前端開發(fā)”是什么？
目前，普遍認(rèn)知的前端開發(fā)特指 Web 前端開發(fā)，通俗點(diǎn)說就是做網(wǎng)頁軟件應(yīng)用開發(fā)。其屬于狹義的前端，是“大”前端的一部分，也是程序員中的一個(gè)細(xì)分崗位。
備注：下文所提到的前端，若不做特殊說明，均指 Web 前端。
你可能會有疑惑，網(wǎng)頁和軟件應(yīng)用怎么能有關(guān)系呢？瀏覽器才是應(yīng)用吧！
其實(shí)不然，瀏覽器只是網(wǎng)站運(yùn)行的一個(gè)環(huán)境，你可以將它看作 Windows 系統(tǒng)，而我們的網(wǎng)站就是跑在這個(gè)系統(tǒng)上的應(yīng)用。同樣，作為用戶的我們，是在網(wǎng)站上瀏覽內(nèi)容，進(jìn)行交互。
如上圖所示：我們在使用上面的網(wǎng)站（Word網(wǎng)頁版）時(shí)，所接觸到的所有視覺內(nèi)容和交互動作 -- 從字體到顏色，從選項(xiàng)卡到下拉菜單，從鍵盤操作到鼠標(biāo)點(diǎn)擊，都是 Web 前端所需要開發(fā)的內(nèi)容。
為了讓你更加全面且深刻地理解前端開發(fā)這個(gè)概念，接下來我會從前端的發(fā)展歷史、前端工程師的職責(zé)和工作、前端的發(fā)展方向這幾大方面，進(jìn)一步介紹說明。
歷史：前端的“獨(dú)立之路”
互聯(lián)網(wǎng)技術(shù)發(fā)展日新月異，行業(yè)相關(guān)崗位也在不斷地興替。為了認(rèn)識現(xiàn)在的前端，我們先簡單回顧一下過去，看一看前端這個(gè)崗位的發(fā)展歷程。
在互聯(lián)網(wǎng)剛剛興起的那十年，受網(wǎng)速和設(shè)備的制約，網(wǎng)頁應(yīng)用主要用作“內(nèi)容呈現(xiàn)”。設(shè)計(jì)人員在設(shè)計(jì)視覺效果的同時(shí)會完成頁面的構(gòu)建，而少量的交互部分則交由善于操作數(shù)據(jù)的后端程序員處理。
以上是2003年的淘寶網(wǎng)首頁，當(dāng)時(shí)網(wǎng)站的內(nèi)容和結(jié)構(gòu)都非常簡單，大部分交互都是單調(diào)的登錄、注冊、搜索商品，僅靠簡單的輸入框就可以完成，頁面上也沒有各種各樣的效果呈現(xiàn)。
這也導(dǎo)致當(dāng)時(shí)前端并不是一個(gè)必需的崗位，從業(yè)者更多地像是打下手的，大部分工作都是幫助網(wǎng)站設(shè)計(jì)人員切割頁面的素材，順帶完成一些簡單的代碼編寫。直到現(xiàn)在，很多前端也會在自嘲時(shí)，稱自己為“切圖仔”。
直到不久前的上一個(gè)十年，個(gè)人電腦、移動設(shè)備、智能家居等各種平臺，伴隨著互聯(lián)網(wǎng)的普及和蓬勃發(fā)展，接踵而至！
相比之前，人民的物質(zhì)水平提高了，精神需求也提高了。簡單的網(wǎng)站應(yīng)用不僅在內(nèi)容呈現(xiàn)上滿足不了網(wǎng)民的需求，也無法在功能上面對更復(fù)雜的場景。更生動地呈現(xiàn)、更豐富的交互逐漸成為網(wǎng)站應(yīng)用的需求，我們也能從淘寶網(wǎng)今昔的對比中，窺得一二！2020年淘寶網(wǎng)首頁：
為了適應(yīng)新時(shí)代，網(wǎng)站的設(shè)計(jì)工作變得更加純粹！
- 設(shè)計(jì)師更專心于風(fēng)格與樣式，不再關(guān)注網(wǎng)頁的具體實(shí)現(xiàn)，由此設(shè)計(jì)也細(xì)分出了用戶界面設(shè)計(jì)師(UI)、用戶體驗(yàn)設(shè)計(jì)師(UE) 和用戶交互設(shè)計(jì)師 (Ixd) 等崗位。
- 用戶的增多、業(yè)務(wù)的復(fù)雜度提升，也使得后端程序員的工作更加后移，專注于處理龐大的數(shù)據(jù)和復(fù)雜的邏輯。
- 前端這個(gè)崗位慢慢地被獨(dú)立了出來，用以填補(bǔ)設(shè)計(jì)和數(shù)據(jù)之間的空白，完成具體的頁面構(gòu)建。
尷尬的是，此時(shí)的前端，既不能決定設(shè)計(jì)，也不能全權(quán)操作數(shù)據(jù)。雖然叫做前端，卻不能獨(dú)立地在產(chǎn)品中實(shí)現(xiàn)視覺效果和交互動作的功能。所以，直到現(xiàn)在，前端程序員一直也不能稱得上是“真正的前端程序員”。
歷史的車輪還在不斷地前進(jìn)，17年前的我們，不會想象到淘寶網(wǎng)的現(xiàn)在的樣子。在智能平臺百花齊放的今天，我們也無法預(yù)測前端的未來，但我相信，它一定會有一個(gè)萬丈光芒的明天！
為什么？既然前端的地位稍有尷尬，我仍相信前端的未來發(fā)展呢？我們不妨把視角轉(zhuǎn)到現(xiàn)在，看看現(xiàn)在的前端到底在做什么！
職責(zé)：溝通協(xié)作橋梁
想要了解前端從業(yè)者的工作職責(zé)，需要從一個(gè)完整網(wǎng)站應(yīng)用產(chǎn)生流程入手，一個(gè)網(wǎng)站應(yīng)用從無到有的過程大致如下 ：
1）產(chǎn)品經(jīng)理與甲方反復(fù)溝通交流，逐步確定產(chǎn)品需求完成設(shè)計(jì)草圖；
2）產(chǎn)品經(jīng)理根據(jù)需求和草圖進(jìn)行分析，提交 PRD（需求文檔），并與開發(fā)人員協(xié)商軟件功能； 3）若PRD（需求文檔）協(xié)商通過，后端開發(fā)團(tuán)隊(duì)進(jìn)行可行性分析并完善方案；在一定的準(zhǔn)備過后，進(jìn)入后端開發(fā)，并給出開發(fā)文檔；
4）產(chǎn)品經(jīng)理根據(jù)協(xié)商通過后的PRD，制作原型和設(shè)計(jì)文檔，并交付設(shè)計(jì)團(tuán)隊(duì)；
5）UI/IxD等不同職責(zé)的設(shè)計(jì)師，根據(jù)設(shè)計(jì)文檔和原型產(chǎn)出高保真原型；
6）前端參與視覺和交互的評審，進(jìn)而完成原型圖切圖；
7）前端根據(jù)后端/接口文檔，進(jìn)行頁面構(gòu)建和開發(fā)，并且不斷針對數(shù)據(jù)和功能相關(guān)內(nèi)容與后端溝通和交流；
8）前后端功能實(shí)現(xiàn)，數(shù)據(jù)流通之后，測試人員進(jìn)行功能測試，并記錄 bug（漏洞），形成文檔并交付 bug 產(chǎn)生方，前后端修補(bǔ)各自的 bug ，并重復(fù)測試；
9）測試完畢之后的產(chǎn)品，可以交付給甲方。
從以上流程中我們可以看到：Web 應(yīng)用開發(fā)過程中，后端先行，設(shè)計(jì)師出稿后，前端才能進(jìn)行開發(fā)。
前端確實(shí)在造物，他們是做了一個(gè)又一個(gè)的 Web 應(yīng)用，只不過設(shè)計(jì)是別人的，數(shù)據(jù)也是別人的，自己的自主權(quán)被壓縮了太多，這導(dǎo)致前端工作看上去像是僅僅將別人的設(shè)計(jì)實(shí)現(xiàn)。在整個(gè)團(tuán)隊(duì)中，可能功勞不多，但是苦勞肯定不少！
不過，這并不代表前端是“雞肋”。從上一章前端發(fā)展歷史來看，前端崗位獨(dú)立出來，恰恰是因?yàn)樗兊迷絹碓街匾?/b>
在整個(gè)項(xiàng)目團(tuán)隊(duì)中，前端除了寫好自己的代碼之外，更重要的是團(tuán)隊(duì)的潤滑劑。一個(gè)小型團(tuán)隊(duì)一般就五個(gè)人：產(chǎn)品經(jīng)理、設(shè)計(jì)師、前端、后端和測試。前端不僅要參與需求文檔的開發(fā)，視覺交互的評審，還要與后端交流，與測試溝通；實(shí)際上，整個(gè)應(yīng)用開發(fā)過程中，前端處于交流的中心位置。
而在整個(gè)應(yīng)用中，前端就像一道橋梁，溝通用戶和軟件背后的服務(wù)，不僅實(shí)現(xiàn)了設(shè)計(jì)，還賦予整個(gè)產(chǎn)品活力。如果網(wǎng)頁應(yīng)用只是單純地將內(nèi)容呈現(xiàn)給用戶，那跟圖文小說沒什么區(qū)別，比較死板。如果只是單純從用戶身上獲取信息，就跟問卷調(diào)查沒什么區(qū)別，缺乏反饋感。
后端需要理解代碼邏輯，產(chǎn)品經(jīng)理需要理解人的邏輯，而前端需要同時(shí)理解兩者，寫的是代碼，產(chǎn)出的卻不是程序，而是產(chǎn)品！
實(shí)際上，沒有一成不變的工作，也沒有一成不變的職責(zé)。就像我在課程開始時(shí)提到的一樣，前端的概念現(xiàn)在很“大”，并且一直在變化；提升自己，保持精進(jìn)，跟緊潮流，才是你真正的職責(zé)！
如果對你有幫助的話，點(diǎn)個(gè)贊收個(gè)藏，給作者一個(gè)鼓勵(lì)。也方便你下次能夠快速查找。其他優(yōu)質(zhì)文章 ：
前端行業(yè)發(fā)展：
- Web 前端分為哪幾個(gè)大方向，工資待遇如何，辛苦嗎？
- 找前端工作會不會很難？
- 現(xiàn)在web前端的工資怎樣？
- 前端開發(fā)就業(yè)情況如何？
前端工作內(nèi)容：
- 前端工程師主要工作內(nèi)容是什么？
- 前端開發(fā)是做什么的？工作職責(zé)有哪些？
前端學(xué)習(xí)路線：
- 怎么學(xué)習(xí)前端開發(fā)？求推薦學(xué)習(xí)路線？
前端必讀書籍：
面試相關(guān)：
- 關(guān)于前端Vue框架的面試題，面試官可能會問到哪些？
- 【一定要收藏】32000字的前端面試題總結(jié)?。?！
- web前端簡歷個(gè)人技能該怎么寫?
- 前端簡歷中項(xiàng)目描述怎么寫能夠更加的優(yōu)雅？
- 面試前端工程師簡歷應(yīng)該怎么寫才容易通過？
- 自學(xué) web 前端人怎么找工作？
- 自學(xué)前端簡歷怎么寫??？
HTML教程：
- HTML5入門教程（含新特性），從入門到精通
- HTML圖文教程（表單域/文本框與密碼框/單選按鈕與復(fù)選框）
- HTML圖文教程（選按鈕與復(fù)選框/input標(biāo)簽/提交按鈕與重置按鈕）
- HTML圖文教程（通按鈕/文件域/label/下拉表單）
- HTML零基礎(chǔ)入門教程， 零基礎(chǔ)學(xué)習(xí)HTML網(wǎng)頁制作（HTML基本結(jié)構(gòu)）
- HTML零基礎(chǔ)入門教程， 零基礎(chǔ)學(xué)習(xí)HTML網(wǎng)頁制作（HTML 標(biāo)簽）
Koa2教程：
- Koa2框架是什么？Koa框架教程快速入門Koa中間件
- Koa2框架路由應(yīng)用，Koa2前景、Koa2中間件
- Koa2異常處理
VUE教程：
- 最全的vue學(xué)習(xí)教程來了，vue模塊化組件超級好用，vue項(xiàng)目推薦，vue項(xiàng)目結(jié)構(gòu)搭建，案例分析
其他：
- 13 個(gè)有趣且實(shí)用的 CSS 框架 / 組件
- 有哪些好的前端社區(qū)？
在線咨詢
