Web開發(fā)工程師是什么？詳解前端開發(fā)工程師的工作內(nèi)容、工作要求及常用工具

2023-09-17 09:44:14

Web開發(fā)工程師是什么

一、Web開發(fā)工程師是什么

Web開發(fā)工程師（英文：Web Development Engineer）又稱為We前端開發(fā)工程師或前端開發(fā)工程師，是指從事Web前端開發(fā)工作的工程師。Web的"前端"是與用戶直接交互的部分，包括在瀏覽網(wǎng)頁時接觸的所有視覺內(nèi)容--從字體到顏色，以及下拉菜單和側(cè)邊欄。這些視覺內(nèi)容，都是由瀏覽器解析、處理、渲染相關(guān)Html, CSS, Javascript文件后呈現(xiàn)而來。

無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后端開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)。Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好，這方面的專業(yè)人才近兩年來備受青睞。Web前端開發(fā)是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術(shù)，又有抽象的理念。簡單地說，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。

二、Web開發(fā)工程師工作內(nèi)容

在用戶終端產(chǎn)品與視覺和交互領(lǐng)域，運(yùn)用 HTML、CSS、JavaScript 等專業(yè)技能和工具，從事產(chǎn)品研發(fā)的專業(yè)技術(shù)人員。

1、負(fù)責(zé)前端項目框架、架構(gòu)的設(shè)計和開發(fā)；

2、負(fù)責(zé)解決前端開發(fā)流程中的各種痛點，攻克技術(shù)難關(guān)，改進(jìn)和優(yōu)化開發(fā)流程、工具和架構(gòu)；

3、持續(xù)優(yōu)化項目技術(shù)、保證代碼質(zhì)量和服務(wù)穩(wěn)定、提升用戶體驗；

4、跟蹤新技術(shù)發(fā)展并運(yùn)用到實際項目中；

5、與設(shè)計團(tuán)隊緊密配合，能夠?qū)崿F(xiàn)設(shè)計師的設(shè)計想法；

6、與后端開發(fā)團(tuán)隊緊密配合，確保代碼有效對接，優(yōu)化頁面前端性能。

三、Web開發(fā)工程師的工作要求

一位好的Web前端開發(fā)工程師在知識體系上既要有廣度，又要有深度，所以很多大公司即使出高薪也很難招聘到理想的前端開發(fā)工程師。一名優(yōu)秀的前端開發(fā)工程師，不單單需要掌握前端必須的各種技術(shù)，同時還要掌握其它技術(shù)，需要掌握一點后臺的知識，同時也要對網(wǎng)站構(gòu)架有一定的了解，同時還要掌握一定的SEO 網(wǎng)站優(yōu)化技術(shù)，這樣才可以稱之為一個"優(yōu)秀的web前端開發(fā)工程師"。除了技術(shù)以外，還需要一定的時間來沉淀自己。一名資深的優(yōu)秀web前端開發(fā)工程師，是每個大型企業(yè)都渴望的人才。

1、必須掌握基本的Web前端開發(fā)技術(shù)，其中包括：html5、CSS3、JavaScript、DOM、BOM、Ajax、SEO等，在掌握這些技術(shù)的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。

2、在一名合格的前端工程師的知識結(jié)構(gòu)中，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識也是必須掌握的。

3、必須學(xué)會運(yùn)用各種工具進(jìn)行輔助開發(fā)。

4、除了要掌握技術(shù)層面的知識，還要掌握理論層面的知識，包括代碼的可維護(hù)性、組件的易用性、分層語義模板和瀏覽器分級支持，等等。

四、Web開發(fā)工程師的技能

前端開發(fā)，就是要創(chuàng)造上面提到的網(wǎng)站面向用戶的部分背后的代碼，并通過建立框架，構(gòu)建沉浸性的用戶體驗。為了實現(xiàn)這個目標(biāo)，開發(fā)需要熟練運(yùn)用下列語言、框架、工具庫：

1、三大語言：HTML, CSS, 和 JavaScript，了解各項技術(shù)的相關(guān)標(biāo)準(zhǔn)；

2、此外，掌握 jQuery 和 LESS 等工具庫也很重要，它們能幫助開發(fā)者以更高效的方式編碼；

3、很多前端開發(fā)崗也要求 Ajax 方法的使用經(jīng)驗，它可以幫助你使用 Javascript 在后臺從服務(wù)器拉取數(shù)據(jù)，協(xié)助實現(xiàn)頁面的動態(tài)加載；

4、對OO、MVC、MVVM等編程思想、前端框架有深刻理解，熟練掌握一個前端框架（常用前端框架Vuejs，AngularJS，React，Bootstrap，QUICK UI，移動端有：Frozen UI，weUI ，SUI，MUI，AUI）了解其原理（框架有很多，選擇兩三個主流的框架，熟練，深度了解才可以）；

5、熟悉常見JS開發(fā)框架源碼實現(xiàn)，（如：prototype、jQuery、Mootools，Ext，Dojo，underscore、YUI、Kissy），至少熟練一種（當(dāng)然也不要去選一些用的人很少的框架，要明白大項目都是團(tuán)隊做，不能自己搞一套）；

6、前端安全機(jī)制，熟悉HTTP協(xié)議以及瀏覽器緩存策略。

五、Web開發(fā)工程師常用工具

1、Vscode

這是前端開發(fā)人員必備的開發(fā)工具，安裝簡單，需要什么插件直接在里面安裝。

Visual Studio Code是針對于編寫現(xiàn)代Web和云應(yīng)用的跨平臺源代碼編輯器，可在桌面上運(yùn)行，并且可用于Windows，macOS和Linux。它具有對JavaScript，TypeScript和Node.js的內(nèi)置支持，并具有豐富的其他語言擴(kuò)展的生態(tài)系統(tǒng)。

2、WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。目前已經(jīng)被廣大中國JS開發(fā)者譽(yù)為"Web前端開發(fā)神器"、"最強(qiáng)大的HTML5編輯器"、"最智能的JavaScript IDE"等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強(qiáng)大的JS部分的功能。

3、Hbuilder

Hbuilder這個工具可以和微信web開發(fā)者工具一起使用，開發(fā)微信小程序，還可以開發(fā)app，開發(fā)的程序可以同時在安卓手機(jī)和蘋果手機(jī)上運(yùn)行，不需要分別寫兩套代碼。HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。

4、微信web開發(fā)者工具

主要用戶開發(fā)微信小程序。微信web開發(fā)者工具是一款便捷實用的微信調(diào)試工具。微信web開發(fā)者工具采用的是集成Chrome DevTools和基本的移動調(diào)試模塊，小伙伴們可以借助微信web開發(fā)者工具更方便、安全的開發(fā)或是針對調(diào)試基于微信開發(fā)的網(wǎng)頁代碼。

5、Bootstrap

Bootstrap是一個用于快速開發(fā)Web應(yīng)用程序的前端工具包。它是CSS和HTML的集合，使用最新的瀏覽器技術(shù)，為你的Web開發(fā)提供時尚的版式、表單、buttons、表格、網(wǎng)格系統(tǒng)等等。

6、GitHub

GitHub是目前世界上最大、最先進(jìn)的源代碼平臺。在此，您能發(fā)現(xiàn)6500萬名用戶和數(shù)億個存儲庫，其中有2800萬個是公開的。

由于任何人都可以注冊GitHub，并免費托管自己的所有代碼，因此全球各地的開發(fā)者都會持續(xù)使用GitHub來構(gòu)建、發(fā)布和維護(hù)他們的軟件。當(dāng)然，它也允許用戶在已完成構(gòu)建的基礎(chǔ)上，進(jìn)行迭代式構(gòu)建，從而減少了用戶的重復(fù)工作量，并提高代碼的整體質(zhì)量。

同時，它帶有內(nèi)置的代碼審查、超凡的協(xié)作功能(如處理錯誤跟蹤和功能請求)。用戶可以通過增強(qiáng)的DevOps模式，以及為整個工作流編寫的腳本，來自動化GitHub的各項操作。

7、Atom

由GitHub開發(fā)的Atom，是一款適用于macOS、Linux和Microsoft Windows的免費開源式文本和源代碼編輯器。它不但支持用JavaScript編寫的插件，而且嵌入了Git控件。

Atom備受開發(fā)人員歡迎之處在于，您可以按需對其進(jìn)行自定義，而無需編輯配置文件。除了支持跨平臺的編輯之外，Atom的自動完成功能還可以幫助用戶更快地編寫出程序代碼。

8、Notepad++

Notepad++是一個非常獨特的編輯器，是開源軟件，可以免費使用。是開發(fā)人員的必需軟件。支持的語言有：C、C++、 Java、C#、XML、HTML、 PHP、Javascript。

六、Web開發(fā)工程師工作流程

1、需求分析

與產(chǎn)品經(jīng)理、網(wǎng)頁設(shè)計師進(jìn)行需求溝通，深入了解網(wǎng)頁策劃情況、交互過程、設(shè)備適配要求等具體實現(xiàn)要求?？丛趺磳崿F(xiàn)需求，選什么框架等。重點是找出不合理的需求，然后和產(chǎn)品經(jīng)理溝通怎么更改需求。

2、前端代碼編寫

根據(jù)網(wǎng)頁設(shè)計效果圖及網(wǎng)頁設(shè)計師的頁面標(biāo)注，按照W3C規(guī)范，采用DIV+CSS技術(shù)對網(wǎng)頁設(shè)計圖進(jìn)行"復(fù)原"，制作成Html文件。并對網(wǎng)頁樣式和js交互效果進(jìn)行代碼編寫，如添加鼠標(biāo)移上移出效果、頭圖自動播放效果等，讓用戶在使用網(wǎng)頁的過程中具有"交互"感。

3、聯(lián)調(diào)

聯(lián)調(diào)指的是與后端開發(fā)人員進(jìn)行接口數(shù)據(jù)上的調(diào)用傳參核對。后端開發(fā)工程師給數(shù)據(jù)接口后，可以聯(lián)調(diào)接口相關(guān)功能，前端工程師要注意后端工程師的接口開發(fā)計劃，配合好聯(lián)調(diào)時間。

4、自測

自測指的是在聯(lián)調(diào)結(jié)束后，確認(rèn)接口及請求返回數(shù)據(jù)正常的情況下，進(jìn)一步針對多場景的交互情況，傳遞不同的參數(shù)給后臺，查看是否會出現(xiàn)問題，以及按照需求和UI圖檢查是否開發(fā)完成、并且達(dá)到需求效果。

5、提測

在自測結(jié)束，就可以把相應(yīng)最新的開發(fā)代碼合并到提測分支進(jìn)行整合，代碼整合就緒以后，首先是去工作系統(tǒng)中創(chuàng)建相應(yīng)的提測單，一般會在規(guī)定的提測時間前一天晚上之前整合好測試分支的代碼，以免耽誤測試工作。

6、反饋與修改

根據(jù)產(chǎn)品經(jīng)理、網(wǎng)頁設(shè)計師以及客戶的反饋，對提測的產(chǎn)品反復(fù)進(jìn)行修改調(diào)整，以達(dá)到最優(yōu)的瀏覽以及交互效果。