前端協(xié)作流程

1、前端協(xié)作流程前面的話(huà)在拿到交互原型或視覺(jué)稿以后，前端工程師要能夠靈活應(yīng)用前端知識(shí)技能，完成相應(yīng)的功能。在實(shí)際的企業(yè)環(huán)境中，不只是有前端工程師，更多的場(chǎng)景和項(xiàng)目是通過(guò)團(tuán)隊(duì)多人協(xié)作完成的。作為前端工程師如何與團(tuán)隊(duì)中其他角色進(jìn)行協(xié)作呢？本文將詳細(xì)介紹前端工程師協(xié)作流程Web系統(tǒng)在介紹協(xié)作流程之前，首先簡(jiǎn)單地了解Web系統(tǒng)的結(jié)構(gòu)從宏觀上來(lái)說(shuō)，Web系統(tǒng)是部署在服務(wù)器上用于為web客戶(hù)端提供服務(wù)的系統(tǒng)。不同的Web客戶(hù)端根據(jù)不同的需求，發(fā)送請(qǐng)求到服務(wù)器上部署的Web系統(tǒng)上。Web系統(tǒng)根據(jù)需求，返回相應(yīng)的結(jié)果，最后，通過(guò)Web客戶(hù)端展示給用戶(hù)視圖層(View):展示數(shù)據(jù)模型，提供人機(jī)交互ontroer數(shù)據(jù)

2、層(Model):Brcwser管作(如數(shù)據(jù)的CRUD)控制層(Controller):處理用戶(hù)請(qǐng)求，委托數(shù)據(jù)層進(jìn)行數(shù)據(jù)相關(guān)操作，并選擇合適的視圖層返回給用戶(hù)當(dāng)Web客戶(hù)端向服務(wù)器發(fā)起請(qǐng)求時(shí)，服務(wù)器的Web系統(tǒng)要做如下處理1、客戶(hù)端發(fā)送請(qǐng)求，服務(wù)器Web系統(tǒng)的控制層接受到請(qǐng)求，并進(jìn)行解析2、控制層請(qǐng)求數(shù)據(jù)層進(jìn)行數(shù)據(jù)的相關(guān)操作3、數(shù)據(jù)層根據(jù)需求篩選出相關(guān)的數(shù)據(jù)模型，并返回給控制層4、控制層將收集的數(shù)據(jù)模型轉(zhuǎn)交給合適的視圖層進(jìn)行模板整合5、視圖層將數(shù)據(jù)模型和模板整合之后生成頁(yè)面代碼，返回給控制層6、控制層將結(jié)果返回給Web客戶(hù)端進(jìn)行展示控制層ontroiler視圖層Ol在Web系統(tǒng)的各個(gè)分層結(jié)構(gòu)中

3、,的內(nèi)容圖層下面是用于完成視圖層需要掌握的知識(shí)技能圖，每個(gè)知識(shí)技能都具備了完成視圖層某一部分的能力PHOTOSHOPTEMPLATEphotoshop切圖html+c；javascript:前端交互邏輯頁(yè)面制卩HP/No血java/php/Node后端業(yè)務(wù)邏輯前端工程師職位出現(xiàn)之前，是一個(gè)美工的職位，需要使用photoshop、html和CSS來(lái)進(jìn)行切圖和頁(yè)面制作PHOTOSHOPJAVASCRIPTTEMPLATEJAV4/PHP/Node隨著ajax的出現(xiàn)，產(chǎn)品的用戶(hù)體驗(yàn)有了更高的要求，web系統(tǒng)也變得越來(lái)越復(fù)雜，這種協(xié)作方式的弊端就越來(lái)越明顯首先，從工作方式來(lái)看，美工輸出的靜態(tài)頁(yè)面交給后

4、端之后，轉(zhuǎn)換成模板。這樣，一個(gè)相同的內(nèi)容以?xún)煞N不同的形式存在，并且由兩個(gè)技能差距較大的角色維護(hù)，這樣就為復(fù)雜系統(tǒng)的后期維護(hù)帶來(lái)了隱患其次，為了提升用戶(hù)的體驗(yàn)，系統(tǒng)的人機(jī)交互變得越來(lái)越復(fù)雜。因此，前端所需的專(zhuān)業(yè)化技能也越來(lái)越高，這時(shí)再由后端來(lái)兼做前端的工作顯然已經(jīng)無(wú)法滿(mǎn)足需求最后，Web產(chǎn)品的一個(gè)重要特性就是更新非?？臁Ｒ虼?，需要分工協(xié)作方式快速響應(yīng)需求的變更。而在這種分工模式下，一個(gè)需求必須由視覺(jué)和后端共同來(lái)完成，很大程序降低了需求的響應(yīng)速度視覺(jué)1PHOTOSHOP1因此，在整個(gè)技術(shù)環(huán)境的推動(dòng)和項(xiàng)目實(shí)際需求的驅(qū)動(dòng)下，前端工程師的職位就出現(xiàn)了。有了前端工程師之后，分工模式發(fā)生了變化CSSTEMP

5、LATE視覺(jué)工程師完成視覺(jué)稿，輸出視覺(jué)稿給前端;包括切圖、頁(yè)面制作、前端交互邏輯、師來(lái)完成切圖、后端工程師完成后端的主要業(yè)務(wù)邏輯，給前端提供數(shù)據(jù)和接口；剩下的工作都由前端工程模板轉(zhuǎn)換等工彳HTWLJAVASCRIPT在這種模式下，各個(gè)角色輸出的內(nèi)容完整，且相互獨(dú)立，互相之間沒(méi)有耦合性，各個(gè)角色專(zhuān)注的也是自己領(lǐng)域內(nèi)的技能，產(chǎn)品的各個(gè)部分都可以做到極致，也更容易產(chǎn)出高質(zhì)量的產(chǎn)品隨著Web技術(shù)的進(jìn)一步發(fā)展，如Nodejs的出現(xiàn)，使得javascript腳本也可以運(yùn)行在服務(wù)器上。既然控制層是為視圖層服務(wù)的，控制層的業(yè)務(wù)邏輯很大程度也取決于視圖層的交互需求。這樣，控制層也可以由前端工程師來(lái)負(fù)責(zé)。這樣的話(huà)

6、，前端也會(huì)涉及到部分后端相關(guān)的業(yè)務(wù)邏輯這樣使前端工程師可以在后期轉(zhuǎn)換成全棧工程師(FullstackDeveloper)o當(dāng)然，這種分工模式還處于探索實(shí)踐的階段角色定義由前面的Web系統(tǒng)得知，完成一個(gè)Web系統(tǒng)，至少需要三種角色的相互協(xié)作：視覺(jué)工程師、前端工程師、后端工程師視覺(jué)工程師需要精通視覺(jué)相關(guān)的技術(shù)，主要負(fù)責(zé)交互原型到視覺(jué)稿的轉(zhuǎn)化前端工程師需要精通Web開(kāi)發(fā)技術(shù)，主要負(fù)責(zé)系統(tǒng)前端交互邏輯后端工程師需要精通后端開(kāi)發(fā)技術(shù)，主要負(fù)責(zé)系統(tǒng)后端業(yè)務(wù)邏輯，為前端提供數(shù)據(jù)和接口服務(wù)的支持作為前端工程師需要完成系統(tǒng)前端交互邏輯，需要具備PHOTOSHOP、HTML、CSS、JAVASCRIPT、TEMP

7、LATE、Node等技能如果每個(gè)技能都進(jìn)行深入研究，需要大量的精力和相關(guān)的經(jīng)驗(yàn)?？紤]到不同角色的協(xié)作效率，前端部分根據(jù)其偏重方向的差異再做切分前端又可再細(xì)分為頁(yè)面工程師和前端工程師。前者偏重于視覺(jué)稿的還原和頁(yè)面的制作，更注重和視覺(jué)工程師的協(xié)作；后者則偏重于前端交互邏輯的實(shí)現(xiàn)，更多的與后端工程師進(jìn)行協(xié)作前端工程師精通切圖技術(shù)(Photoshop)精通頁(yè)面制作(CSS,HTML)熟悉前端開(kāi)發(fā)技術(shù)(JavaScript,Template)了解后端開(kāi)發(fā)技術(shù)(Java,Node.)前端工程師技能要求如下精通頁(yè)面制作(CSS,HTML)精通前端開(kāi)發(fā)技術(shù)(JavaScript,Template)熟悉切圖技術(shù)

8、(Photoshop)熟悉后端開(kāi)發(fā)技術(shù)(Java,Node.)項(xiàng)目開(kāi)發(fā)時(shí)間】以一個(gè)單角色開(kāi)發(fā)一個(gè)項(xiàng)目的時(shí)間為20天為例，則各個(gè)角色時(shí)間分工可能如下所示頁(yè)面制作：15%(3天)前端邏輯：35%(7天)后端邏輯：50%(20天)而如果采用多角色開(kāi)發(fā)，頁(yè)面開(kāi)始制作時(shí)，后端工程師可以開(kāi)始梳理后端的業(yè)務(wù)邏輯。當(dāng)頁(yè)面有輸出時(shí)，前端工程師可以開(kāi)始進(jìn)行前端的業(yè)務(wù)邏輯。整個(gè)項(xiàng)目大概縮短了50%的開(kāi)發(fā)時(shí)間031020采用多角色開(kāi)發(fā)，大大提高了項(xiàng)目的開(kāi)發(fā)效率。要注意的是，多角色開(kāi)發(fā)會(huì)比單人開(kāi)發(fā)增加了溝通成本。這時(shí)，就需要按照一定的協(xié)作流程來(lái)減少溝通成本協(xié)作流程按照一定的流程和規(guī)范可以明確各個(gè)角色和其對(duì)應(yīng)的職責(zé)，以及

9、結(jié)果輸出的時(shí)間，這樣可以大大減少角色間的溝通成本端工程師進(jìn)行溝通，確定頁(yè)面入口規(guī)范、同步數(shù)據(jù)規(guī)范和異步接口規(guī)范。而與此同時(shí)，頁(yè)面工程師根據(jù)視覺(jué)稿進(jìn)行相關(guān)的頁(yè)面制作；接下來(lái)，前端工程師和后端工程師并行開(kāi)發(fā)。后端工程師根據(jù)同步數(shù)據(jù)規(guī)范實(shí)現(xiàn)一些配置、控制層相關(guān)的業(yè)務(wù)邏輯，根據(jù)異步接口規(guī)范，實(shí)現(xiàn)接口服務(wù)。前端工程師根據(jù)頁(yè)面入口規(guī)范和同步數(shù)據(jù)規(guī)范實(shí)現(xiàn)系統(tǒng)架構(gòu)，當(dāng)頁(yè)面工程師有頁(yè)面輸出時(shí)，實(shí)現(xiàn)模板層的業(yè)務(wù)邏輯，根據(jù)異步接口規(guī)范進(jìn)行具體的一些業(yè)務(wù)邏輯的實(shí)現(xiàn)；當(dāng)前后端功能開(kāi)發(fā)完成之后，進(jìn)行聯(lián)調(diào)操作；最后測(cè)試并上線后端工程師前端工程啼前端工程師、后端工程師這三個(gè)角色的分工協(xié)作。當(dāng)?shù)玫浇换ピ秃鸵曈X(jué)稿時(shí)，首先，前端

10、工程師和后交互原型&視覺(jué)稿W根據(jù)上面的說(shuō)明，有3個(gè)規(guī)范的輸出，包括頁(yè)面入口規(guī)范、同步數(shù)據(jù)規(guī)范和異步接口規(guī)范頁(yè)面入口規(guī)范定義系統(tǒng)對(duì)外可訪問(wèn)入口和配置信息同步數(shù)據(jù)規(guī)范定義系統(tǒng)對(duì)模板文件的預(yù)填數(shù)據(jù)信息異步接口規(guī)范定義前后端異步數(shù)據(jù)交互的接口信息【維護(hù)流程】項(xiàng)目除了需要前期的開(kāi)發(fā)之外，還需要后期的維護(hù)。在維護(hù)的過(guò)程中，需要遵循以下流程需求變更當(dāng)?shù)玫叫枨笞兏?，前、后端工程師都要進(jìn)行需求分析，如果該需求僅僅需要前端的簡(jiǎn)單實(shí)現(xiàn)，則前端工程師進(jìn)行需求實(shí)現(xiàn)；如果需求涉及到規(guī)范上的改動(dòng)，就需要更新規(guī)范，然后遵循協(xié)作流程，來(lái)完成項(xiàng)目的需求變更項(xiàng)目進(jìn)行穩(wěn)定期后，大部分需求變更都僅僅需要前端工程師的需求實(shí)現(xiàn)。所以，可

11、以快速的響應(yīng)需求變更職責(zé)說(shuō)明下面總結(jié)各個(gè)角色的職責(zé)和具體任務(wù)頁(yè)面工程師職責(zé)】1、切圖、圖片優(yōu)化2、規(guī)范頁(yè)面格式、保證頁(yè)面質(zhì)量、處理瀏覽器兼容性問(wèn)題，以及各個(gè)端的頁(yè)面呈現(xiàn)3、頁(yè)面制作、優(yōu)化頁(yè)面效果與結(jié)構(gòu)4、具備一定的業(yè)務(wù)邏輯的相關(guān)技能，使其輸出的效果和結(jié)構(gòu)更加適合前端工程師做業(yè)務(wù)邏輯開(kāi)發(fā)5、完成簡(jiǎn)單的前端業(yè)務(wù)邏輯開(kāi)發(fā)，比如廣告頁(yè)、活動(dòng)專(zhuān)題頁(yè)等。針對(duì)包含大量的頁(yè)面制作以及少量的頁(yè)面特效的這類(lèi)項(xiàng)目，頁(yè)面工程師就可以直接完成【前端工程師職責(zé)】1、主導(dǎo)制定前、后端分離規(guī)范，輸出三個(gè)核心規(guī)范，包括頁(yè)面入口規(guī)范、同步數(shù)據(jù)規(guī)范和異步接口規(guī)范2、主導(dǎo)前、后端聯(lián)調(diào)對(duì)接測(cè)試3、系統(tǒng)前端設(shè)計(jì)架構(gòu)、滿(mǎn)足一定的非功能性需求，包括