Web 系統(tǒng)

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

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

技術棧全覽

• Photoshop，獲取圖片資源
• CSS 與 HTML，制作頁面
• JavaScript 前端交互邏輯
• Template 結構與內容分離整合
• Java/PHP/Node 后端邏輯

弊端

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

前端工程師新責任

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

角色定義

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

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

前端工程師

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

頁面工程師

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

前端工程師

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

項目工時分配比

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

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

協(xié)作流程

開發(fā)過程

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

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

維護過程

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

職責說明

下面將總結各個角色職責具體任務：

頁面工程師

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

前端工程師

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

后端工程師

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

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