## 前言
隨著前后端分離,前端越來越多的承擔著產品開發的工作,而且更多的涉及產品邏輯尤其是頁面之間的邏輯以及關聯,而后端從繁雜的頁面邏輯中脫離出來,更多的是會開發微服務的部分,當然過度階段,后端還會寫為某些頁面服務的接口代碼,我們稱之為膠水代碼。
## 人員能力分層
首先不可避免的前端技術人員會出現能力的差別,從入門級別的p3,到總監級別的阿里p7-8,很多公司或者領導會講,我們是扁平式的管理,但是這不等于所有人的能力是扁平的,更不意味著所有人最終是扁平的,責任和權限也是和能力掛鉤的。
那么首先需要對人員進行分層,我們將人員按照阿里技術水平首先分層,按照簡單的評級標準:
- 初中級:對應技術等級4-5 ,初級專員、高級工程師,可以完成簡單的業務需求,,在有較好較完整的項目基礎上可以復制粘貼代碼;
- 技術專家:對應等級6-7,資深工程師、技術專家,可以完成項目的完整開發,獨立的完成技術攻關,項目的整體把控,和其他職能共同推進項目;
- 高級專家&&資深專家:對應等級8-9 ,可以組織團隊或者搭建平臺,完成團隊目標,進行項目立項等。
- 研究員:對應阿里10,對應的為公司技術總監。
那么進行分層之后,對應能力的人就應該做對應的事情,而不是全部按部就班的做常規業務,在其他方向毫無建樹。同樣,在職能方向上,每個人也應該有其可以管轄和請教的上下級。在每個員工的技術等級晉升通道上,為其準備較為詳細的技術棧的補充以及提升的機會。
## 研發分層
很早之前有分析過,實際公司研發人員達到一定規模,項目達到一定的復雜度,具體的研發任務會分層。簡單的可以分為業務以及技術基礎建設,復雜的會分為業務組,技術基礎建設組,架構組。
**其中業務層:**
主要負責依賴于基礎建設的部分,完成業務開發,要求對業務邏輯更加清楚。
**基礎建設層:**
主要是根據業務提煉技術方向的基礎平臺和組件部分,前端服務部分,也可以做一些對開發流程有幫助、優化的工具。
**架構層:**
主要是進行技術的預研究,大型技術架構的整理與搭建,時興技術的學習與成品演示。
然而就算這樣分層,其實其具體的工作還是分不開的,不太可能有些人只做業務或者架構,也和大家的職業訴求有關。比較好的融合是每個人的各個層次的工作都有涉及,只是比重不同。就結果論導向而言,是需要各個層次有其對應的負責人,首先保證技術成果,業務成果,然后是盡可能的滿足大家每個階段對技術的成長、使用的需求。
## 與其他職能耦合關系
### 與后端
主要體現在后端提供業務需要的數據接口或者業務邏輯接口。所以開發開始之前會有詳細的接口評審,接口文檔約定,數據的mock部分。
而后端除了這部分工作,還有的工作是提供微服務,以及支撐業務的底層服務。
### 與產品
恐怕與產品溝通最多的是前端了,這里溝通的部分主要工作會分為以下幾種:
1 ui驗收,符合設計稿,ui驗收有時候也會與設計師溝通。
2 交互驗收,保證用戶體驗,也可能是與交互設計師、測試溝通。
3 性能,尤其用戶高頻頁面,保證用戶在各種條件下的性能包括顯示速度、動畫、延遲等。
4 兼容問題,需要知道產品對兼容性的要求
5 功能開發以及驗收,主要是與需求對應,主要是產品驗收
### 與測試
1 確認測試用例范圍以及細節
2 測試用例的自我測試以及與測試的對照,寫對應的自測報告
3 測試階段的測試以及驗收,可以抽樣檢測
4 不同測試環境以及不同功能的回歸測試
5 測試的常識:測試問題分類,以及對應不同問題的處理方案,責任問題鑒定以及分工
### 與設計
1 確認ui效果,包括基本效果以及交互效果
2 確認需要從設計中獲取的素材
3 確認需要從設計中年獲取的樣式代碼
4 與設計統一ui標準,減少重復工作量,約定組件標準以及可復用組件
## 大前端團隊矩陣
### 業務模塊設計
包括分業務線的模塊,以及二級業務線的關系
### 前端底層服務
包括公共ui組件,前端服務比如圖片上傳,自動部署等,性能監控
### 研究院
主要是做架構層的工作,預先完成需求的技術攻關,項目的長久規劃,解決歷史債務以及未來的技術儲備問題。
### 內部工具展示層
比如除了基本業務之外,很多內部工具包括前端、后端、測試、ui甚至客服、銷售的系統都是需要界面,而需要界面就需要前端完成。
### 網關&&bff架構
主要負責前端為主的產品接口集中管理,安全性校驗。
其中BFF架構主要是為客戶端,h5,pc等前端產品提供專業化的接口服務,其主要工作是根據微服務完成接口整合和數據整合,讓其更符合前端業務和交互的需求需要。
## 人員歸屬方式
### 資源池
如果按照資源池的形式,是最符合人員層次以及大前端團隊的矩陣的,可以最大程度的實現價值最大化,以及充分利用人員資源,也可以抽調部分人完成較大的技術突破,同時也可以較好的完成前端內部職能的技術溝通以及學習。
缺點:對業務會相對不夠清楚,尤其是業務模塊沒有固定歸屬,隨機分配的時候。所以針對這種情況,建議分業務流分模塊分配具體的人,其次針對每個業務都設置ab角色。
### 項目組
按照項目組的優勢就是人員可以長期投入到項目中,對項目以及業務流要較大的熟悉,更容易形成與其他職能的默契協作。
缺點:資源不能更好的集中使用,對技術的視野也會因為這個受限。對其他人的業務范圍以及技術細節并不清楚。建議,即使按照項目團隊,也要在職能角度,讓一些人有公共的上級可以進行職能的輔助以及考核。
## 其他
待續 。。。。。。
- 前端工程化
- 架構總綱
- 001
- 美團技術架構
- 前端工程化說明
- 歷史背景說明
- 架構說明
- 前端工程化技術棧
- 技術文檔說明
- 功能模塊說明
- 前端模塊管理器簡介
- 框架對比分析
- vue&react&ng對比分析(一)
- vue&react&ng對比分析(二)
- vue&react&ng對比分析(三)
- 工程化專題系列
- 需要解決的問題
- 001
- 002
- 003
- 常見代碼錯誤
- jslint中常見的錯誤
- css規范常見錯誤
- html規范常見錯誤
- 工程化目錄
- 工程化初始化
- 項目構建流程
- 項目打包優化
- 上線與迭代注意事項
- 前端部署發布
- jetkins部署
- 部署需求整理
- 前端監控
- 工程化實踐指南
- dock持續部署
- 系列文章
- 插拔式前端的設計
- 其他實踐
- 工程化的前端管理
- 宋小菜借鑒
- 大前端團隊介紹
- 人員組成
- 人員發展
- 研發流程
- 任務分類
- 前端基礎建設與架構
- 技術棧以及技術方案
- 業務目錄大綱
- 前端大綱
- api管理
- 后端api工具
- 前端easymock
- api攔截與代理
- api優化
- api請求時長策略設計
- 前端架構專題
- 架構專題一
- 產品原型對接
- 與ui對接
- 圖片專題
- 圖片工程化大綱
- 圖片優化
- 圖標字體
- 圖標字體vs雪碧圖
- 工程化的前端矩陣
- 螞蟻金服前端矩陣分享
- BFF架構
- 概念解析
- 前端腳手架
- 初始化項目
- 個性化配置
- 部署與發布
- 性能優化專題
- http專題
- https常識
- http優化1
- http優化2
- http優化3
- http緩存
- 常規web性能優化攻略
- 性能優化大綱
- 樣式優化
- js優化
- 第三方依賴優化
- 代碼分割優化
- 圖片優化
- 打包優化
- 服務器優化
- 緩存優化
- 交互優化
- pc事件優化
- 手機事件優化
- 推薦文章
- 01
- 前端安全專題
- 前端安全大綱
- 前端第三方庫
- seo優化
- web框架的對比
- 001
- 學習資源
- 珠峰前端架構
- npm教程
- npm入門
- cnpm入門
- cnpm搭建
- 你該知道的js模塊
- browserSync
- opn
- js-cookie
- npm-script進階
- 入門篇
- 進階篇
- 高階篇
- 實踐篇
- yarn入門
- nodejs教程
- axios&&fetch
- xhr
- axios
- fetch
- babel專題
- babel入門
- profill入門
- nodejs入門
- 快速入門
- 大綱介紹
- node基礎
- global obj
- assert斷言
- procss-進程
- child_process子進程
- cluster集群
- console控制臺
- crypto-加密
- dgram-數據報
- dns-域名服務器
- error-異常
- events-事件
- global-全局變量
- http-基本協議
- https-安全協議
- modules-模塊
- os-操作系統
- path-路徑
- querystring-查詢字符串
- readline-逐行讀取
- fs-文件系統
- net-網絡操作
- 命令行工具
- 內存泄露
- 代碼的組織與部署
- 異步編程
- orm模塊
- 異步編程解決方案
- node-lessons
- 環境準備
- nodejs實踐
- 項目搭建
- 異步優化
- 創建web和tcp服務器
- 終端問答程序
- 爬蟲系統
- mongleDb
- mongoDB簡介
- 基本使用
- 實用技巧
- 匯總001
- 餓了么后臺搭建
- nodejs干貨
- 滬江基于node的實踐
- 蘇寧基于nodejs優化
- 基于nodejs開發腳手架
- 書籍干貨
- 深入淺出nodejs
- 異步I/O(一)
- gulp教程
- gulp入門
- gulp常用插件(1)
- gulp常用插件(2)
- gulp創建目錄
- 經驗普及貼
- webpack教程
- webpack入門
- 簡單入門
- entry配置
- output配置
- 插件使用01
- 插件使用02
- loader使用
- dev-server介紹
- 構建css
- css模塊化
- 使用less和sass
- 構建圖片
- 引入字體
- babel配置攻略
- eslint
- 001
- webpack進階
- 分不同文件檢出
- 優化打包大小
- 優化打包速度
- 自定義配置
- 單頁以及多頁如何配置
- 優化實踐
- 文章導讀
- 001
- 優化指南
- 參考列表
- webpack4
- 多入口程序構建
- 參考教程
- 項目實踐
- 環境區分
- 常見問題
- 解讀webpack
- 從vuejs權威指南中解決
- 深入淺出webpack
- rollup
- 入門
- parcel
- 入門篇
- express教程
- nuxt教程
- 入門
- 基本入門
- koa教程
- koa基本入門
- koa開發注意事項
- koa實踐指南
- 關于路由
- koa優化指南
- 001
- Vuejs
- vuejs入門系列
- vue-cli入門
- vue2基本認識
- vuejs入門教程
- 樣式綁定
- vuex入門學習筆記
- vue組件生命周期
- 組件的使用
- vue-router入門
- vue-filter
- 計算屬性使用
- 開發注意事項
- mixins
- 組件通訊
- vuejs進階
- 進階資源
- router進階
- 官網介紹
- 前進與后退優化
- keep-alive基本使用
- keep-alive原理詳解
- 鉤子函數進階
- 計算屬性&監聽&方法
- vue服務端渲染技術
- 項目實踐之路
- 實踐大綱
- 插槽專題篇
- vue-cli升級
- 進階入門
- vuejs架構
- nuxt
- vuejs項目實踐
- vue實踐常見問題
- 001
- 002
- 003
- 004
- 005
- 改造api參數探索
- 007
- 008
- 009
- 010
- 項目技術棧
- vue性能問題以及優化方案
- vue-spa應用的理解
- vue-ssr的部署與使用
- 滴滴出行實踐案例
- 2.0重構
- vue-element-admin實踐
- 準備工作
- 菜單設計
- 權限設計
- 依賴模塊
- vue-betterScroll
- 性能優化懶加載
- 京東組件實踐
- vue2項目小結
- vue探索與實踐
- 去哪實踐
- 介紹
- 餓了么項目實踐
- 項目解析
- vue骨架屏實踐
- vue生態推薦
- ui框架
- elementUI
- 001
- 002
- VUE-material
- vant-ui
- 解讀入門
- iview
- 使用問題匯總
- vux
- mint-ui
- loadmore
- vue資源導航
- vueconf
- 源碼解讀
- vm
- 雙向綁定
- 基本原理
- 數組雙向綁定
- 報錯機制
- 封裝方法
- 運行環境
- 入門
- 指令
- vue-router解讀
- util
- vue-props
- 流程邏輯
- 推薦文章
- 源碼解讀
- 文章導讀
- 001
- vuejs實戰
- 基礎篇
- 進階篇
- 實踐篇
- 面試專題
- angularjs教程
- angularjs入門系列
- 基本入門
- ng2入門
- ng進階
- ng項目實踐
- 源碼解讀
- typescript
- reactjs教程
- reactjs入門系列
- react的基本入門
- react組件
- virtalDom認識
- react-cli入門
- react組件的生命周期
- 基本知識點
- react-router教程
- react進階
- 基本實踐
- react加載性能優化指南
- react屬性封裝
- 進階45講
- 01概述
- 02jsx
- 06高階組件&函數子組件
- contextApi
- react-router
- 入門章節
- 進階
- 高階組件
- react進階組件
- 基本介紹
- render props
- render props的封裝
- render props getter
- react-native入門
- 源碼解讀
- 001
- 002-reactDemo
- 參考教程
- 參考教程1
- 了解react-hooks
- ui框架
- pc端ui框架推薦
- 項目實踐
- weatherApp
- 001
- 002
- 不同生命周期使用場景
- react項目結構和組件的命名
- 常見問題解答
- 參考書籍
- react全棧
- 前言
- react與redux進階
- 常見誤解
- 反模式
- react設計模式與最佳實踐
- 7美化組件
- 7.2行內樣式
- 7.4css模塊
- 深入react技術棧
- react學習手冊
- 序
- mobx教程
- 入門
- 大佬推薦
- 001
- react面試
- 001
- linux教程
- linux入門
- 基本入門
- 文件管理
- 文件傳輸
- 文檔編輯
- 磁盤管理
- 磁盤維護
- 網絡通訊
- 系統管理
- 系統設置
- 備份壓縮
- 設備管理
- 查看系統信息
- linux其他
- webhook
- rsync入門教程
- ssh免登陸設置
- 安裝nodejs
- nginx教程
- 入門教程
- 安裝
- 基本配置
- 服務基本使用
- 高性能nginx
- 001
- pm2教程
- shell教程
- 入門大綱
- echo命令
- 參考文獻
- linux常用命令2
- linux常見問題
- 001
- python
- 入門教程
- 機器學習
- 準備工作
- 服務器常識
- tomcat
- 入門常識
- iis
- redis教程
- 入門第一篇
- redis進階
- 項目實踐
- redis使用問題
- mongleDB
- 入門
- 使用進階
- 項目實踐
- 常見問題
- electron
- 入門系列
- 前言
- 小程序
- 入門
- 準備工作
- 路由
- 參考文檔
- 001
- 小程序開發--雙路視頻調研
- 準備工作
- 參考資源
- 參考網址
- docker
- 入門
- 基本認識
- 安裝與使用
- docker安裝nginx
- docker安裝jetkins(1)
- docker部署jenkins(2)
- 進階
- 實踐總結
- docker群分享
- docker部署前端應用
- 文章導讀
- docker其他
- 網絡安全
- 入門
- 大綱
- 項目解析
- schoolpal.web
- 功能模塊大綱
- 目錄結構大綱
- 前端國際化
- 國際化方案
- 其他
- bower入門教程
- weex
- 入門
- memcached
- 入門
- sails
- 入門