前面的話
在拿到交互原型或視覺稿以后，前端工程師要能夠靈活應用前端知識技能，完成相應的功能。在實際的企業環境中，不只是有前端工程師，更多的場景和項目是通過團隊多人協作完成的。作為前端工程師如何與團隊中其他角色進行協作呢？本文將詳細介紹前端工程師協作流程
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、完成后端系統架構及業務邏輯實現
角色與人的關系？
角色與人之間不一定需要一一對應，前端工程師和頁面工程師可能是同一個人，全棧工程師則有能力包攬一切
最后
本文是蔡劍飛、鄭海波老師的《產品前端架構》課程中《協作流程》章節的學習記錄