產(chǎn)品前端架構(gòu)
專注于引導前端工程師去主導團隊高效協(xié)作，去引領(lǐng)團隊規(guī)范化鸽疾、工程化構(gòu)建復雜系統(tǒng)的實踐過程周循。
本章節(jié)的核心內(nèi)容包括多角色低耦合的協(xié)作流程、協(xié)作規(guī)范份帐、
多角度分析選擇適合具體項目的技術(shù)解決方案、工程化的版本管理楣导、系統(tǒng)構(gòu)建案例分析废境。
協(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箩退。
下面以用戶請求頁面為例：
- 客戶端發(fā)送請求，服務(wù)器控制層接受到請求
- 請求數(shù)據(jù)層獲取數(shù)據(jù)佳谦，返回控制層
- 控制層根據(jù)數(shù)據(jù)選擇合適的視圖層進行展示
- 視圖層生成頁面代碼，返回控制層
- 控制層返回客戶端進行展示
技術(shù)棧全覽
- Photoshop滋戳，獲取圖片資源
- CSS 與 HTML钻蔑，制作頁面
- JavaScript 前端交互邏輯
- Template 結(jié)構(gòu)與內(nèi)容分離整合
- Java/PHP/Node 后端邏輯
弊端
- 后期維護性差（相同內(nèi)容，不同形成存在）
- 專業(yè)化程度低
- 需求響應速度慢
前端工程師新責任
隨著視圖層也會存在業(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ī)范可以明確角色和其對應的職責宛逗，這樣可以大大減少角色間的溝通成本坎匿。
- 頁面入口規(guī)范，定義系統(tǒng)對外可訪問入口和配置信息
- 同步數(shù)據(jù)規(guī)范拧额，定義系統(tǒng)對模板文件的預填信息
- 異步接口規(guī)范碑诉，定義前后端接口信息
維護過程
NOTE：紅色路徑為不需要改變規(guī)范的前提下，響應需求變更侥锦。
職責說明
下面將總結(jié)各個角色職責具體任務(wù)：
頁面工程師
- 切圖进栽、圖片優(yōu)化
- 頁面制作、優(yōu)化頁面效果與結(jié)構(gòu)（適合業(yè)務(wù)邏輯開發(fā)）
- 完成簡單的前端業(yè)務(wù)邏輯開發(fā)
前端工程師
- 主導制定前后端分離規(guī)范
- 主導前端聯(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)
角色與人之間不一定需要一一對應格嗅，前端工程師和頁面工程師可能是一人。
全棧工程師則有能力包攬一切唠帝。
