Web前端開發流程

開發前準備

瞭解產品和設計

• 參加需求、交互、視覺會議，瞭解產品設計和項目成員。
• 瞭解產品面向的設備和平臺。
• 瞭解產品對兼容性的要求以及是否採用響應式設計等。

提出疑問和看法

• 按需求結合現有技術，提出疑問和看法。
• 提出可能存在的問題（技術實現，性能問題等），協商解決方案（如優雅降級、漸進加強）並達成共識。
• 提出當下已掌握新技術可能在項目中的應用場景，協助產品創新。不要採用未掌握的技術創新。

預算人力和時間

• 根據項目工期要求及工做量，預算人力和時間。
• 挑選前端成員組成前端小組，擬定技術選型。
• 肯定功能開發優先級，預算開發週期和階段性產出。
• 提醒需求方在項目管理平臺（禪道）中建立項目並加入項目成員。
• 提醒需求方在項目企業溝通工具（企業微信或釘釘）中建立項目交流羣並加入項目成員。
• 提醒項目負責人建立git倉庫並設置成員權限。

開發過程

職責任務

• 肯定前端小組長，負責對整個頁面開發工做作統籌規劃、分配協調等管理工做和主開發職責
• 確認交互原型或視覺效果已經定稿，再開始開發工做。
• 若是採起並行模式（視覺設計和頁面開發同時進行），則以交互原型定稿爲準（當視覺效果定稿後，頁面工程師再補充細節），開始分配。
• 按頁面類型分配，同一類型頁面分配給同一我的。
• 每一個人都要了解頁面公共元素（多個頁面中相同或類似部分），一個公共元素只分配到一我的，每人完成自身頁面的同時完成「提取剝離」。
• 在項目管理平臺中細分開發任務，填寫任務詳情和時間，若是任務間存在關係，則設置好關聯或從屬關係。

頁面開發

• 由小組長建立前端目錄，包含「頁面開發」目錄（如:js、css、html、images）及「提取剝離」目錄（如：demo）。
• 由小組長建立公共樣式和引入js庫版本以及工具包（如：reset.css、jquery3.2.1.js、resize.js、util.js）
• 和交互、視覺及其餘前端工程師或後端工程師保持良好的溝通。
• 對交互原型和視覺設計有疑問，上報小組長，由小組長統一對外（需求方和設計師）反饋問題和建議。
• 若是採起並行模式，先後端有數據交互的頁面，先與後端小夥伴約定好API字段（如圖片接口用imgorimg_urlorimage）

提取剝離

• 提取剝離相同或類似結構，封裝成模板或組件。
• 提取剝離公共js方法，保存到util.js。
• 若要修改提取剝離出的公共部分，需小組討論可行性後，方可由小組長修改。

開發產出

自測聯調

• 首先對本身的代碼進行全面的多設備測試和兼容性測試。
• 多人協同項目，git先拉取再提交，若有衝突上報小組長解決衝突。
• 自測過程當中發現別人寫的代碼有問題，及時反饋。

提交驗收

• 當有階段性產出後，小組長上報主管，安排經驗豐富的前端工程師進行代碼驗收。
• 代碼驗收將主要檢查兼容性、HTML、CSS、JS規範。
• 同時小組長將頁面提交給設計師，進行效果驗收。
• 效果驗收將主要檢查視覺效果符合度（尺寸、位置、顏色、切圖等）。

交接說明

• 當完成驗收後，通知並交給後端小夥伴，進行後續開發，前端須要交代可能須要他們注意的地方或者對代碼的解釋說明。
• 若是你的工做須要與別人交接，也須要交代清楚總體架構部署和代碼解釋。

變動維護

• 需求變動必須在項目交流羣中提出，由小組長與需求方確認，若有必要，需求方召集項目組開會說明
• 前端代碼優化維護，必須上報主管，需小組討論可行性後，方可由修改。

參考 Nec工程師規範