Web系統
在介紹協作流程之前，首先簡單地瞭解Web系統的結構
從宏觀上來說，Web系統是部署在服務器上用於爲web客戶端提供服務的系統。不同的Web客戶端根據不同的需求，發送請求到服務器上部署的Web系統上。Web系統根據需求，返回相應的結果，最後，通過Web客戶端展示給用戶
Web系統在服務器上的組織結構一般爲MVC架構，MVC分別代表數據層、視圖層和控制層
數據層(Model)：封裝數據管理操作(如數據的CRUD)
視圖層(View)：展示數據模型，提供人機交互
控制層(Controller)：處理用戶請求，委託數據層進行數據相關操作，並選擇合適的視圖層返回給用戶
當Web客戶端向服務器發起請求時，服務器的Web系統要做如下處理
1、客戶端發送請求，服務器Web系統的控制層接受到請求，並進行解析
2、控制層請求數據層進行數據的相關操作
3、數據層根據需求篩選出相關的數據模型，並返回給控制層
4、控制層將收集的數據模型轉交給合適的視圖層進行模板整合
5、視圖層將數據模型和模板整合之後生成頁面代碼，返回給控制層
6、控制層將結果返回給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個規範的輸出，包括頁面入口規範、同步數據規範和異步接口規範
頁面入口規範定義系統對外可訪問入口和配置信息
同步數據規範定義系統對模板文件的預填數據信息
異步接口規範定義前後端異步數據交互的接口信息
【維護流程】
項目除了需要前期的開發之外，還需要後期的維護。在維護的過程中，需要遵循以下流程
當得到需求變更後，前、後端工程師都要進行需求分析，如果該需求僅僅需要前端的簡單實現，則前端工程師進行需求實現；如果需求涉及到規範上的改動，就需要更新規範，然後遵循協作流程，來完成項目的需求變更
項目進行穩定期後，大部分需求變更都僅僅需要前端工程師的需求實現。所以，可以快速的響應需求變更
職責說明
下面總結各個角色的職責和具體任務
【頁面工程師職責】
1、切圖、圖片優化
2、規範頁面格式、保證頁面質量、處理瀏覽器兼容性問題，以及各個端的頁面呈現
3、頁面製作、優化頁面效果與結構
4、具備一定的業務邏輯的相關技能，使其輸出的效果和結構更加適合前端工程師做業務邏輯開發
5、完成簡單的前端業務邏輯開發，比如廣告頁、活動專題頁等。針對包含大量的頁面製作以及少量的頁面特效的這類項目，頁面工程師就可以直接完成
【前端工程師職責】
1、主導制定前、後端分離規範，輸出三個核心規範，包括頁面入口規範、同步數據規範和異步接口規範
2、主導前、後端聯調對接測試
3、系統前端設計架構、滿足一定的非功能性需求，包括性能、可擴展性等
4、完成系統前端的業務邏輯實現、優化實現邏輯
【後端工程師職責】
1、協助定製前後端分離規範
2、協作前後端聯調對接測試
3、完成後端系統架構及業務邏輯實現
角色與人的關係？
角色與人之間不一定需要一一對應，前端工程師和頁面工程師可能是同一個人，全棧工程師則有能力包攬一切