邱紅麗 張舒雅

（河南質(zhì)量工程職業(yè)學(xué)院，河南 平頂山 467000）

隨著互聯(lián)網(wǎng)的迅猛發(fā)展，各種互聯(lián)網(wǎng)項(xiàng)目的不斷興起，前端開發(fā)也由此逐漸成為一個(gè)不可缺少的專業(yè)研發(fā)角色。Web前端開發(fā)在國(guó)內(nèi)開始被重視的時(shí)間不超過五年。從2014年至今，“前端工程師”熱度持續(xù)走高，百度指數(shù)呈現(xiàn)指數(shù)增長(zhǎng)趨勢(shì)。身邊學(xué)前端的人越來越多，前端招聘市場(chǎng)也異常熱鬧。雖然近兩年人工智能、大數(shù)據(jù)很火，但Web前端開發(fā)依然熱門。從招聘網(wǎng)站的數(shù)據(jù)分析來看，Web前端的崗位需求已經(jīng)遠(yuǎn)遠(yuǎn)超過主流編程語言Java的開拓人員的數(shù)量。YouTube、谷歌等大廠也紛紛將視線轉(zhuǎn)向Web前端。據(jù)統(tǒng)計(jì)，我國(guó)對(duì)于Web前端工程師人員的缺口將達(dá)到12萬左右。

與其他計(jì)算機(jī)主流技術(shù)所不同的是，Web前端所包含的知識(shí)模塊很多，且隨著實(shí)際需求的變化一直在更新迭代。目前而言，HTLL、CSS、JS、DOM仍然是目前前端技術(shù)最為基礎(chǔ)也是最為主要的四大基礎(chǔ)模塊。在掌握基礎(chǔ)模塊的基礎(chǔ)上，Web前端工程師還必須進(jìn)一步將技能層次化、系統(tǒng)化，從而能夠勝任頁(yè)面架構(gòu)、移動(dòng)頁(yè)面開發(fā)等任務(wù)。

1 什么是Web前端開發(fā)

Web前端開發(fā)是協(xié)調(diào)前端設(shè)計(jì)師和后端工程師實(shí)現(xiàn)網(wǎng)站前端的開發(fā)、優(yōu)化、交互的一個(gè)職位。在Web前端興起之前，html+css的工作是被視覺人員所承擔(dān)的，而js這部分則是由后端完成的。一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)可能用div+css就可以把它寫出來，但是這里面是充滿經(jīng)驗(yàn)的。隨著智能手機(jī)和移動(dòng)互聯(lián)網(wǎng)的普及，各種定制化的UI風(fēng)格讓兼容問題變得越來越頭疼。因?yàn)橐_保一個(gè)頁(yè)面在任何瀏覽器當(dāng)中能正常顯示是很不容易的，瀏覽器廠商那么多，各自還有自己的專屬屬性，而且有的還要求在手機(jī)中能夠顯示，能夠自適應(yīng)屏幕等。單純的css無法來控制，就需要學(xué)習(xí)javascript。因此，有企業(yè)開始把html+css+js這部分工作獨(dú)立出來，由一個(gè)新的崗位來處理，成為一個(gè)處理視覺和交互的綜合崗位，這才有了Web前端的出現(xiàn)。

因此，Web前端開發(fā)行業(yè)是伴隨Web興起而細(xì)分出來的行業(yè)。實(shí)際上，Web前端是最接近產(chǎn)品和設(shè)計(jì)的工程師，起到銜接產(chǎn)品和技術(shù)的作用，它存在互聯(lián)網(wǎng)的每個(gè)角落。從廣義上來講，所有用戶終端產(chǎn)品與視覺和交互有關(guān)的部分，都屬于前端工程師的專業(yè)領(lǐng)域。從狹義上講，Web前端就是使用HTML、CSS、JavaScript等專業(yè)技能和工具將產(chǎn)品的UI設(shè)計(jì)稿實(shí)現(xiàn)成網(wǎng)站產(chǎn)品，涵蓋用戶PC端、移動(dòng)端等網(wǎng)頁(yè)，處理視覺和交互問題。

2 web前端開發(fā)的主要職責(zé)及技能要求

Web前端開發(fā)的就業(yè)面很廣，選擇的崗位有：前端開發(fā)工程師、資深前端開發(fā)工程師、網(wǎng)站重構(gòu)工程師、前端架構(gòu)師等等。他們既要與上游的交互設(shè)計(jì)師、視覺設(shè)計(jì)師和產(chǎn)品經(jīng)理溝通，又要與下游的服務(wù)器端工程師溝通，需要掌握的技能非常多。所以，不單單要掌握前端必需的各種技術(shù)，同時(shí)還需要對(duì)后臺(tái)的知識(shí)以及網(wǎng)站架構(gòu)和SEO網(wǎng)站優(yōu)化技術(shù)都要有所了解。

Web前端的主要崗位職責(zé)如下：

1）負(fù)責(zé)系統(tǒng)前端的開發(fā)和優(yōu)化，包括PC前端和移動(dòng)端。

2）與后端工程師協(xié)作，完成前端代碼，實(shí)現(xiàn)前后端邏輯分離開發(fā)，實(shí)現(xiàn)交互效果。

3）制作標(biāo)準(zhǔn)優(yōu)化的代碼，優(yōu)化網(wǎng)站前端功能設(shè)計(jì)，解決軟件系統(tǒng)前端相關(guān)的穩(wěn)定性、效率性能的問題。

web前端的主要技能要求如下：

1）精通HTML/HTML5/CSS/CSS3/Javascript/jquery/Ajax/json等前端開發(fā)技術(shù)。

2）熟悉vue、react、angular、nodejs、bootstrap等常用前端框架，并對(duì)框架實(shí)現(xiàn)原理有深入了解； 熟悉ES5、ES6新特性。

3）理解Web標(biāo)準(zhǔn)、語義化，可以解決主流瀏覽器及不同版本的兼容性問題。

4）了解服務(wù)端后臺(tái)技術(shù)。

3 專業(yè)課課程設(shè)置

Web前端處于程序開發(fā)的一個(gè)重要環(huán)節(jié)，既要與UI工程師溝通，又要與服務(wù)端的工程師溝通。

既然涉及視覺和用戶體驗(yàn)，首先對(duì)UI設(shè)計(jì)知識(shí)，要涉及或者懂一些設(shè)計(jì)方面的技能和基本素養(yǎng)，比如PS的一些基本操作、切圖、顏色搭配、尺寸設(shè)計(jì)、屏幕適配方案等。然后，既要精通HTML5、CSS3、JavaScript、JQuery、Ajax等這些核心的Web前端技術(shù)，又要具備互聯(lián)網(wǎng)交互設(shè)計(jì)能力，熟悉后端服務(wù)器運(yùn)行環(huán)境和數(shù)據(jù)通信協(xié)議，掌握響應(yīng)式布局框架、Bootstrap、AngularJS等新的JS框架的軟件技術(shù)人才。

下面根據(jù)web前端工程師的主要職責(zé)，對(duì)專業(yè)課程進(jìn)行了分模塊設(shè)置。

基礎(chǔ)模塊UI設(shè)計(jì)基礎(chǔ)、美學(xué)基礎(chǔ)核心模塊HTML5+CSS3、JavaScript程序設(shè)計(jì)、JQuery框架模塊Bootstrap、Vue、Angular 、React、 NodeJS進(jìn)階模塊面向?qū)ο蟪绦蛟O(shè)計(jì)、數(shù)據(jù)庫(kù)、SEO

其中，基礎(chǔ)模塊和進(jìn)階模塊是與UI設(shè)計(jì)師和服務(wù)端工程師進(jìn)行交互的模塊。作為Web前端工程師，也要有所了解。在制定課程體系時(shí)，可以根據(jù)具體上課情況，對(duì)不同模塊中的課程重新命名、重新重組，并加上相對(duì)應(yīng)的實(shí)訓(xùn)課程。比如：

1）專業(yè)基礎(chǔ)課：把美學(xué)基礎(chǔ)作為一個(gè)章節(jié)融入到UI設(shè)計(jì)基礎(chǔ)中，再加上UI的實(shí)訓(xùn)課程；

2）專業(yè)核心課1：HTML5+CSS3、JavaScript程序設(shè)計(jì)，再加上靜態(tài)前端的實(shí)訓(xùn)課程；

3）專業(yè)核心課2：JQuery 、Bootstrap、java（python或其他的后端開發(fā)語言）、mysql，再加上軟件開發(fā)的實(shí)訓(xùn)課程；

4）專業(yè)核心課3：框架課程（包括Vue、Angular 、React、NodeJS），SEO。

4 總結(jié)

經(jīng)過近幾年的快速發(fā)展，目前Web前端開發(fā)技術(shù)棧已經(jīng)進(jìn)入成熟期。在Angular 、React和Vue等框架出現(xiàn)后，前端在代碼開發(fā)方面的復(fù)雜度已經(jīng)基本得到解決，再加上Node解決前后端分離，前端技術(shù)棧本身其實(shí)已經(jīng)非常成熟，新框架的出現(xiàn)，也已經(jīng)慢慢取代了幾年前的jQuery+Bootstrap模式。在設(shè)置課程體系中，可以根據(jù)實(shí)際情況設(shè)置課程，對(duì)新的框架技術(shù)，可以有所側(cè)重的講解。