前端项目负责人在项目初期需要做什么？

灰太狼 2022-10-09 15:18 205阅读 0赞

# 前言 #

本篇写一下前端项目负责人在项目初期需要做什么？

![图片][abf5449c0175ea2a3810e022a9de417f.png]

主要分四个方面

![图片][bf4b42b5fa7333018e550ae3c8db9fd6.png]

# 项目相关 #

![图片][9827bbe5d676112cd65718ffc0c1a0c8.png]

这一部分可能看起来没那么重要，但是做项目对于项目的关键信息还是要了解的。因为可能当我们在和其他不了解目前我们在做的东西的时候，会问下面的一些东西。

## 项目背景 ##

通过项目背景了解当前业务痛点，想通过我们的产品达到什么样的效果。  
举例：

• A：营销增长（如：针对个体要货订单预测不准，店铺运营可视化程度不够，会员缺失有效管理等）• B：供应链（如：生产与销售预测不匹配，物流配送可能存在食品安全风险等）• C：共享与组织能力（如：出账较慢，对账效率低等）• D：技术与架构（如：现存各系统协同不足，性能和功能影响业务等）

## 项目愿景 ##

以公司项目为例：这里说的比较简单。  
基于中台架构完整构建业务应用，实现业务全流程贯通，实现业务实施在线和数据口径统一，并通过中台能力，实现自动化营销，财务自动化对账并持续优化。

## 项目价值是什么 ##

• 增加收入• 提升效率• 降低成本• 加强内控

## 项目阶段和周期安排 ##

这个还是比较重要的，因为负责的开发任务是具有阶段性的，分为几个阶段，几个迭代，每个时间段需要做什么，有什么样的产出，是不是在业务流程上面达成共识。这个很重要。这个在下面进行**任务排期**的时候也会考虑进来。

# 团队相关 #

这里主要是对于团队内部的**人员熟悉**和**周会早会**的汇报形式和内容形式的了解。有利于后期的协作。

![图片][ea2db81e85b419357ecc8ed63a25b799.png]

image.png

# 前端相关 #

![图片][54ad6d05105b1b7b3fcfccc439acadee.png]

image.png

## 架构相关 ##

![图片][9ea22f17ff62ac139230d8c7ede9314b.png]

image.png

这一部分主要是为了能够给予业务，满足业务的情况下设计书写出技术架构图。前面三个是为了能够做好技术架构的基础信息了解。

### 如何书写架构方案 ###

这个其实我个人也没有很好的方法论。贴两张以前画过的图：

![图片][2d8dc1bfd389e86e3513d3b20aa15155.png]

image.png

![图片][ed4e012912511bdf99c45f1c95485ff5.png]

image.png

但是到底技术架构图的标准是什么？

下面这些条件是公司大佬【阿里p8】和我过技术架构图【上面第二张图】反馈给我的。

• 技术架构：上面图主要表现的是技术架构• 业务边界：针对不同的业务场景，边界清晰，走不通的业务架构• 业务架构：针对具体的业务场景进行技术支持。例如我们遇到pos离线的场景，这属于业务架构• 动态流程：业务流程 pos 下单，查商品 商品流程如何在架构图体现【缺失】• 集成架构：其他系统集成• 部署架构：部署

## 技术相关 ##

![图片][bfe68f58e20c2b1a48882ae371e4d393.png]

image.png

### 脚手架 ###

技术选型 & 脚手架选型

这里主要是做技术选型和脚手架选型。因为我们相对统一，所以基本没这个问题。

系统模块处理

这里是列举了三个例子

• 权限• 多页签• 登陆校验

公共模块处理

• 公共方法：公共方法的放置• 公共枚举值：可参照用dumi发布一个用于处理枚举值的npm包\[2\]• 公共service：数据接口处理• 公共组件：位置放置和规范【也可通过dumi发布公有包或者私有包 参照：用react手写一个简单的日历\[3\]】

### 技术调研 & 技术落地 ###

疑难问题的技术调研和技术落地方案。

• 以前做过：react - 多页签页面缓存\[4\]• 现在在做：electron 做pos【js控制打印机，js加载动态库dll适配ic卡等等】

### 业务开发demo ###

这是为了最大化的解决项目当中初级开发的开发问题。

• 代码demo：业务开发的demo代码• 开发讲解：同步讲解demo的开发模式• 文档说明：沉淀文档说明

## 任务划分相关 ##

![图片][da4aa11cf2b744a646a17587f517444a.png]

image.png

这里的内容就不多说了，以前的文章提到过一些：前端项目负责人需要具有的能力\[5\]。

### 根据阶段目标check任务排期是否合适 ###

这里着重提出来，是和团队相关部分提到的阶段目标有关系。需要和阶段目标契合，这样在一个时间段，我们项目整体协作出来的东西才是完整的东西。

## 规范相关 ##

![图片][408db588a1fbf040d9344b86aab6089a.png]

image.png

### 开发规范 ###

• 代码规范• 协作流程• 提交规范

### 内部协同规范 ###

• 早会• 周会• 下发任务沟通：下发任务明确，讲清楚技术重点难点，开发人员了解并确认。• 完成任务汇报：任务完成及时汇报，更多是通过项目管理工具完成。• 疑难问题协同

### 文档规范 ###

• 相关文档汇总地址• 技术文档• 规范文档• 周会文档汇总

## 前端部门相关 ##

![图片][0f504af552d0b1986d7c084721473e31.png]

image.png

# 协作相关 #

![图片][faef0f4108b7b7261a49466c4477c590.png]

image.png

## 与产品 ##

![图片][a2113774586d31160442710f429cc0a3.png]

image.png

### 统一原型规范 ###

这里着重说明：统一原型规范，就是原型的输出同样的交互页面风格要保持统一，不允许有很大差距。

![图片][24e576ac5cd1771844305903b0b93798.png]

image.png

• 原型输出不像一个系统• 代码开发内耗

## 与后端 ##

![图片][71ba87f59cc710799d211d772b2ce728.png]

image.png

### 统一前端后共识 ###

![图片][06ad87646c4c778435124b829c2d5475.png]

image.png

这里着重说明：前后端对于一些事情处理需要达成共识，这样会节省很多沟通问题。

## 与测试 ##

![图片][d4665cef3d471dca52536d784216ab72.png]

image.png

### 统一交付测试认知 ###

• 界面无明显的UI类型BUG，与原型图、UI设计图保持一致，关于页面的设计、排版都能够符合产品需求。如有修改应和产品、UI沟通一致并且进行修改。• 功能能够实现产品的需求，且输入文本框、选择框、翻页按钮、新增校验等能够与产品原型一致。还需要考虑字段长度过长的情况如何处理。• 当前所做的功能应该是流程性功能，不止需要考虑当前页面的功能实现，需要考虑一下前置的数据是从哪里来，在当前的数据展示是否合理。前置的业务数据是否能够在当前页面跑下去或者完成。• 每次做完当前页面或者修改当前页面的功能时，跑两次调接口，看当前页面是否可以传输数据给后端，并且成功返回响应。

### 公共模块的统一处理认知 ###

页面提示语的确定

• 表单页面提交不需要confirm提示语• 数据删除/列表页更新状态需要confirm提示语• 新建页面路由跳转离开是否需要提示语

form表单的处理

• form表单必填项验证form表单必填项/非必填项的长度验证（依赖于数据库设定或者也存在统一长度限制）• form表单数字验证/电话验证/邮件验证• form表单日期范围验证的设定，startDate的日期范围验证是否是只可以点击当天之前/当天之后，endDate的选择开始日期一般为startDate的日期之后• form表单的特殊字符验证

[abf5449c0175ea2a3810e022a9de417f.png]: /images/20221005/423b7642e62b4e27b31ae5c09a3ed776.png
[bf4b42b5fa7333018e550ae3c8db9fd6.png]: /images/20221005/cd5960e81ece4d38a22b77c64aa23e43.png
[9827bbe5d676112cd65718ffc0c1a0c8.png]: /images/20221005/5d2069dcf2364bd8acc5e404eddd7477.png
[ea2db81e85b419357ecc8ed63a25b799.png]: /images/20221005/5c16a94b11f94f1ebe576f04c75164a5.png
[54ad6d05105b1b7b3fcfccc439acadee.png]: /images/20221005/a95831e3b58c45f8b99ca59eb180e4c7.png
[9ea22f17ff62ac139230d8c7ede9314b.png]: /images/20221005/5aace7ae995e46b9b8f1dc686720bcc6.png
[2d8dc1bfd389e86e3513d3b20aa15155.png]: /images/20221005/6b8a093bdcb5473c8d3039252ceebed4.png
[ed4e012912511bdf99c45f1c95485ff5.png]: /images/20221005/49ec9a344df0428a83a8ac03ff1938ad.png
[bfe68f58e20c2b1a48882ae371e4d393.png]: /images/20221005/7fdf600a8ec54970bac3991c291c2dd2.png
[da4aa11cf2b744a646a17587f517444a.png]: /images/20221005/7ab59c8fe65a4610a6c08bc814b33fb1.png
[408db588a1fbf040d9344b86aab6089a.png]: /images/20221005/49c7d3b01e01457f99953f820d4219ed.png
[0f504af552d0b1986d7c084721473e31.png]: /images/20221005/4c7ad76b64334136b796b71e59b6f8fa.png
[faef0f4108b7b7261a49466c4477c590.png]: /images/20221005/6ca04a08244f4aed97e962fa3532dc1c.png
[a2113774586d31160442710f429cc0a3.png]: /images/20221005/15b86dc947c54620b901bdf8249833bc.png
[24e576ac5cd1771844305903b0b93798.png]: /images/20221005/a53238c289b84e9ab2c875cb944406c7.png
[71ba87f59cc710799d211d772b2ce728.png]: /images/20221005/82d1d8204559482e8e06549f76942fab.png
[06ad87646c4c778435124b829c2d5475.png]: /images/20221005/b7e934f548264858b730990f67aea9fa.png
[d4665cef3d471dca52536d784216ab72.png]: /images/20221005/916d2f45fa98433cbf3f2df6bc494e2b.png