協(xié)作流程

Web 系統(tǒng)

http://wiki.jikexueyuan.com/project/fend_note/images/W/websevice.png" alt="" />

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

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

http://wiki.jikexueyuan.com/project/fend_note/images/M/MVC.png" alt="" />

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

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

下面以用戶請(qǐng)求頁面為例：

http://wiki.jikexueyuan.com/project/fend_note/images/M/MVC_Process.png" alt="" />

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

技術(shù)棧全覽

http://wiki.jikexueyuan.com/project/fend_note/images/M/mvc-before.png" alt="" />

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

弊端

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

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

http://wiki.jikexueyuan.com/project/fend_note/images/M/mvc-after.png" alt="" />

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

角色定義

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

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

前端工程師

http://wiki.jikexueyuan.com/project/fend_note/images/F/frontend-developer.png" alt="" />

前端部分又可再細(xì)分為頁面工程師和前端工程師**。前者更注重和視覺工程師的協(xié)作， 后者則更多的與后端工程師進(jìn)行協(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）

項(xiàng)目工時(shí)分配比

http://wiki.jikexueyuan.com/project/fend_note/images/T/tasks-assign.png" alt="" />

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

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

協(xié)作流程

開發(fā)過程

http://wiki.jikexueyuan.com/project/fend_note/images/C/collaboration-process.png" alt="" />

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

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

維護(hù)過程

http://wiki.jikexueyuan.com/project/fend_note/images/C/collaboration-mataince.png" alt="" />

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

職責(zé)說明

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

頁面工程師

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

前端工程師

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

后端工程師

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

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