## 前言
随着前后端分离,前端越来越多的承担着产品开发的工作,而且更多的涉及产品逻辑尤其是页面之间的逻辑以及关联,而后端从繁杂的页面逻辑中脱离出来,更多的是会开发微服务的部分,当然过度阶段,后端还会写为某些页面服务的接口代码,我们称之为胶水代码。
## 人员能力分层
首先不可避免的前端技术人员会出现能力的差别,从入门级别的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
- 入门