前端協做流程

Web系統

　　在介紹協做流程以前，首先簡單地瞭解Web系統的結構

　　從宏觀上來講，Web系統是部署在服務器上用於爲web客戶端提供服務的系統。不一樣的Web客戶端根據不一樣的需求，發送請求到服務器上部署的Web系統上。Web系統根據需求，返回相應的結果，最後，經過Web客戶端展現給用戶

　　Web系統在服務器上的組織結構通常爲MVC架構，MVC分別表明數據層、視圖層和控制層

　　數據層(Model)：封裝數據管理操做(如數據的CRUD)

　　視圖層(View)：展現數據模型，提供人機交互

　　控制層(Controller)：處理用戶請求，委託數據層進行數據相關操做，並選擇合適的視圖層返回給用戶

　　當Web客戶端向服務器發起請求時，服務器的Web系統要作以下處理

　　一、客戶端發送請求，服務器Web系統的控制層接受到請求，並進行解析

　　二、控制層請求數據層進行數據的相關操做

　　三、數據層根據需求篩選出相關的數據模型，並返回給控制層

　　四、控制層將收集的數據模型轉交給合適的視圖層進行模板整合

　　五、視圖層將數據模型和模板整合以後生成頁面代碼，返回給控制層

　　六、控制層將結果返回給Web客戶端進行展現

　　在Web系統的各個分層結構中，與前端密切相關的是視圖層。接下來，從技術棧角度，來介紹視圖層的內容

　　下面是用於完成視圖層須要掌握的知識技能圖，每一個知識技能都具有了完成視圖層某一部分的能力

photoshop:切圖
html+css:頁面製做
javascript:前端交互邏輯
template:結構與數據分離和整合
java/php/Node:後端業務邏輯

　　前端工程師職位出現以前，是一個美工的職位，須要使用photoshop、html和CSS來進行切圖和頁面製做

　　隨着ajax的出現，產品的用戶體驗有了更高的要求，web系統也變得愈來愈複雜，這種協做方式的弊端就愈來愈明顯

　　首先，從工做方式來看，美工輸出的靜態頁面交給後端以後，轉換成模板。這樣，一個相同的內容以兩種不一樣的形式存在，而且由兩個技能差距較大的角色維護，這樣就爲複雜系統的後期維護帶來了隱患

　　其次，爲了提高用戶的體驗，系統的人機交互變得愈來愈複雜。所以，前端所需的專業化技能也愈來愈高，這時再由後端來兼作前端的工做顯然已經沒法知足需求

　　最後，Web產品的一個重要特性就是更新很是快。所以，須要分工協做方式快速響應需求的變動。而在這種分工模式下，一個需求必須由視覺和後端共同來完成，很大程序下降了需求的響應速度

　　所以，在整個技術環境的推進和項目實際需求的驅動下，前端工程師的職位就出現了。有了前端工程師以後，分工模式發生了變化

　　視覺工程師完成視覺稿，輸出視覺稿給前端；後端工程師完成後端的主要業務邏輯，給前端提供數據和接口；剩下的工做都由前端工程師來完成，包括切圖、頁面製做、前端交互邏輯、模板轉換等工做

　　在這種模式下，各個角色輸出的內容完整，且相互獨立，互相之間沒有耦合性，各個角色專一的也是本身領域內的技能，產品的各個部分均可以作到極致，也更容易產出高質量的產品

　　隨着Web技術的進一步發展，如Nodejs的出現，使得javascript腳本也能夠運行在服務器上。既然控制層是爲視圖層服務的，控制層的業務邏輯很大程度也取決於視圖層的交互需求。這樣，控制層也能夠由前端工程師來負責。這樣的話，前端也會涉及到部分後端相關的業務邏輯

　　這樣使前端工程師能夠在後期轉換成全棧工程師(Fullstack Developer)。固然，這種分工模式還處於探索實踐的階段

 

角色定義

　　由前面的Web系統得知，完成一個Web系統，至少須要三種角色的相互協做：視覺工程師、前端工程師、後端工程師

　　視覺工程師須要精通視覺相關的技術，主要負責交互原型到視覺稿的轉化

　　前端工程師須要精通Web開發技術，主要負責系統前端交互邏輯

　　後端工程師須要精通後端開發技術，主要負責系統後端業務邏輯，爲前端提供數據和接口服務的支持

　　做爲前端工程師須要完成系統前端交互邏輯，須要具有PHOTOSHOP、HTML、CSS、JAVASCRIPT、TEMPLATE、Node等技能

　　若是每一個技能都進行深刻研究，須要大量的精力和相關的經驗。考慮到不一樣角色的協做效率，前端部分根據其偏重方向的差別再作切分

　　前端又可再細分爲頁面工程師和前端工程師。前者偏重於視覺稿的還原和頁面的製做，更注重和視覺工程師的協做；後者則偏重於前端交互邏輯的實現，更多的與後端工程師進行協做

　　頁面工程師技能要求以下

精通切圖技術 (Photoshop)
精通頁面製做 (CSS，HTML)
熟悉前端開發技術 (JavaScript，Template)
瞭解後端開發技術 (Java，Node...)

　　前端工程師技能要求以下

精通頁面製做 (CSS，HTML)
精通前端開發技術 (JavaScript，Template)
熟悉切圖技術 (Photoshop)
熟悉後端開發技術 (Java，Node...)

【項目開發時間】

　　以一個單角色開發一個項目的時間爲20天爲例，則各個角色時間分工可能以下所示

頁面製做：15%(3天)
前端邏輯：35%(7天)
後端邏輯：50%(20天)

　　而若是採用多角色開發，頁面開始製做時，後端工程師能夠開始梳理後端的業務邏輯。當頁面有輸出時，前端工程師能夠開始進行前端的業務邏輯。整個項目大概縮短了50%的開發時間

　　採用多角色開發，大大提升了項目的開發效率。要注意的是，多角色開發會比單人開發增長了溝通成本。這時，就須要按照必定的協做流程來減小溝通成本

 

協做流程

　　按照必定的流程和規範能夠明確各個角色和其對應的職責，以及結果輸出的時間，這樣能夠大大減小角色間的溝通成本 

　　Web系統至少須要視覺工程師、前端工程師、後端工程師這三個角色的分工協做。當獲得交互原型和視覺稿時，首先，前端工程師和後端工程師進行溝通，肯定頁面入口規範、同步數據規範和異步接口規範。而與此同時，頁面工程師根據視覺稿進行相關的頁面製做；接下來，前端工程師和後端工程師並行開發。後端工程師根據同步數據規範實現一些配置、控制層相關的業務邏輯，根據異步接口規範，實現接口服務。前端工程師根據頁面入口規範和同步數據規範實現系統架構，當頁面工程師有頁面輸出時，實現模板層的業務邏輯，根據異步接口規範進行具體的一些業務邏輯的實現；當先後端功能開發完成以後，進行聯調操做；最後測試並上線

　　根據上面的說明，有3個規範的輸出，包括頁面入口規範、同步數據規範和異步接口規範

　　頁面入口規範定義系統對外可訪問入口和配置信息

　　同步數據規範定義系統對模板文件的預填數據信息

　　異步接口規範定義先後端異步數據交互的接口信息

【維護流程】

　　項目除了須要前期的開發以外，還須要後期的維護。在維護的過程當中，須要遵循如下流程

　　當獲得需求變動後，前、後端工程師都要進行需求分析，若是該需求僅僅須要前端的簡單實現，則前端工程師進行需求實現；若是需求涉及到規範上的改動，就須要更新規範，而後遵循協做流程，來完成項目的需求變動

　　項目進行穩按期後，大部分需求變動都僅僅須要前端工程師的需求實現。因此，能夠快速的響應需求變動

 

職責說明

　　下面總結各個角色的職責和具體任務

【頁面工程師職責】

　　一、切圖、圖片優化

　　二、規範頁面格式、保證頁面質量、處理瀏覽器兼容性問題，以及各個端的頁面呈現

　　三、頁面製做、優化頁面效果與結構

　　四、具有必定的業務邏輯的相關技能，使其輸出的效果和結構更加適合前端工程師作業務邏輯開發

　　五、完成簡單的前端業務邏輯開發，好比廣告頁、活動專題頁等。針對包含大量的頁面製做以及少許的頁面特效的這類項目，頁面工程師就能夠直接完成

【前端工程師職責】

　　一、主導制定前、後端分離規範，輸出三個核心規範，包括頁面入口規範、同步數據規範和異步接口規範

　　二、主導前、後端聯調對接測試

　　三、系統前端設計架構、知足必定的非功能性需求，包括性能、可擴展性等

　　四、完成系統前端的業務邏輯實現、優化實現邏輯

【後端工程師職責】

　　一、協助定製先後端分離規範

　　二、協做先後端聯調對接測試

　　三、完成後端系統架構及業務邏輯實現

　　角色與人的關係？

　　角色與人之間不必定須要一一對應，前端工程師和頁面工程師多是同一我的，全棧工程師則有能力包攬一切