協(xié)作流程

Web 系統(tǒng)

Web 系統(tǒng)部署在服務(wù)器上為提出不同需求的外部客戶端服務(wù)。

MVC (Model, View, Controller) 它們分別代表數(shù)據(jù)層，視圖層， 和控制層。

• 數(shù)據(jù)層，封裝數(shù)據(jù)管理操作（例如數(shù)據(jù)的 CRUD ）
• 視圖層，展示數(shù)據(jù)模型提供人機交互
• 控制層，處理用戶請求，委托數(shù)據(jù)層，選擇視圖層進行展示

NOTE：CRUD 代表 Create、Read、Update、Delete。

下面以用戶請求頁面為例：

1. 客戶端發(fā)送請求，服務(wù)器控制層接受到請求
2. 請求數(shù)據(jù)層獲取數(shù)據(jù)，返回控制層
3. 控制層根據(jù)數(shù)據(jù)選擇合適的視圖層進行展示
4. 視圖層生成頁面代碼，返回控制層
5. 控制層返回客戶端進行展示

技術(shù)棧全覽

• Photoshop，獲取圖片資源
• CSS 與 HTML，制作頁面
• JavaScript 前端交互邏輯
• Template 結(jié)構(gòu)與內(nèi)容分離整合
• Java/PHP/Node 后端邏輯

弊端

• 后期維護性差（相同內(nèi)容，不同形成存在）
• 專業(yè)化程度低
• 需求響應(yīng)速度慢

前端工程師新責(zé)任

隨著視圖層也會存在業(yè)務(wù)邏輯的需求，前端工程師也會參與到業(yè)務(wù)邏輯的實現(xiàn)中去。 這樣使前端工程師可以在后期轉(zhuǎn)換成全棧工程師（Fullstack Developer)。

角色定義

完成一個 Web 系統(tǒng)需要至少以下三種角色：

• 視覺工程師，視覺稿到交互原型的轉(zhuǎn)化
• 前端工程師，實現(xiàn)系統(tǒng)前端交互邏輯
• 后端工程師，系統(tǒng)后端業(yè)務(wù)邏輯

前端工程師

前端部分又可再細分為頁面工程師和前端工程師**。前者更注重和視覺工程師的協(xié)作， 后者則更多的與后端工程師進行協(xié)作。

頁面工程師

• 精通切圖技術(shù) （Photoshop，Sketch）
• 精通頁面制作 （CSS，HTML）
• 熟悉前端開發(fā)技術(shù) （JavaScript，Template）
• 了解后端開發(fā)技術(shù) （Java，Node）

前端工程師

• 精通頁面制作 （CSS，HTML）
• 精通前端開發(fā)技術(shù) （JavaScript，Template）
• 熟悉切圖技術(shù) （Photoshop，Sketch）
• 熟悉后端開發(fā)技術(shù) （Java，Node）

項目工時分配比

• 頁面制作：3天
• 前端邏輯：7天
• 后端邏輯：10天

NOTE：多角色開發(fā)會比單人工程增加工作溝通成本。

協(xié)作流程

開發(fā)過程

按照流程規(guī)范可以明確角色和其對應(yīng)的職責(zé)，這樣可以大大減少角色間的溝通成本。

• 頁面入口規(guī)范，定義系統(tǒng)對外可訪問入口和配置信息
• 同步數(shù)據(jù)規(guī)范，定義系統(tǒng)對模板文件的預(yù)填信息
• 異步接口規(guī)范，定義前后端接口信息

維護過程

NOTE：紅色路徑為不需要改變規(guī)范的前提下，響應(yīng)需求變更。

職責(zé)說明

下面將總結(jié)各個角色職責(zé)具體任務(wù)：

頁面工程師

• 切圖、圖片優(yōu)化
• 頁面制作、優(yōu)化頁面效果與結(jié)構(gòu)（適合業(yè)務(wù)邏輯開發(fā)）
• 完成簡單的前端業(yè)務(wù)邏輯開發(fā)

前端工程師

• 主導(dǎo)制定前后端分離規(guī)范
• 主導(dǎo)前端聯(lián)調(diào)對接測試
• 系統(tǒng)前端設(shè)計架構(gòu)、滿足一定的非功能性需求
• 完成系統(tǒng)前端的業(yè)務(wù)邏輯實現(xiàn)、優(yōu)化實現(xiàn)邏輯

后端工程師

• 協(xié)助定制前后端分離規(guī)范
• 協(xié)作前后端聯(lián)調(diào)對接測試
• 完成后端系統(tǒng)框架及業(yè)務(wù)邏輯實現(xiàn)

角色與人之間不一定需要一一對應(yīng)，前端工程師和頁面工程師可能是一人。 全棧工程師則有能力包攬一切。