1 一周导读
主要内容
- 学习如何以架构师思维分析需求
- 由浅入深的需求分析
- 架构设计-多项目的关系
- 核心数据结构设计
- 写《技术方案设计》文档
关键词
- 流程图 -- 分析需求的工具
- 全局思维、整体思维、闭环思维 -- 架构师思维来分析需求
- 业务组件库 -- 独立拆分出来，复用
- 自定义事件统计 -- 业务的重要性，如何实现
学习方法
- 要坚信: 技术永远都是为业务服务的，技术是实现业务增长的工具
注意事项
- 不要关注细节，要看整体，看范围
- 考虑扩展性
- 设计时判断可行性，不确定的就调研一下(这需要大量的工作经验积累，技术能力)
- 设计要考虑复杂度，越简单越好，不要过度设计，不要为了设计而设计
2 需求分析
- 如何以架构师思维分析需求
- 项目的浅层需求
- 项目的深度需求
- 需求总揽
2.1 以架构师思维分析需求
2.2 项目的浅层需求
- 表面的需求
- 登录
- 创建一个作品，编辑，发布
- 访问作品h5
- 补充和分组
- 用户信息
- 登录(短信验证码登录)
- 注册
- 获取用户信息
- 作品
- 创建
- 保存
- 发布
- 获取作品信息
- 获取作品列表
- 模板
- 模板列表
- 使用模板创建
- 用户信息
2.3 项目的深度需求
1. 作品的管理
- 删除和恢复
- 转赠(例如，员工离职交接工作)
- 复制
2. 作品统计
需求闭环
- 统计
- 分渠道统计，渠道对于运营人员非常重要
3. 作品发布
- url 不能变
- 支持多渠道
4. H5
- 分享 -- 对业务增长负责
5. 后台管理
- 数据统计
- 作品管理，能快速下线作品，防止有违规内容
- 用户管理，能快速冻结用户，防止有违规用户
- 模板管理，能控制哪些模块展示、哪些不展示
2.4 需求总揽
主要产出
- 熟悉产品需求
- 学会以架构师的思维分析需求
- 全局思维、整体思维、闭环思维
附:I和PM的关系
- 程序员和PM的关系: 水火不容，势不两立
- 架构师和PM的关系: 统一战线，对业务负责
3 架构设计
3.1 分析需求，确定需要创建的项目
- 确定范围
1. 需要哪些项目
从需求来看，比较重要的几个方面: B端和编辑器, H5, 管理后台
-
B端和编辑器, 做前后端分离
- biz-editor-fe
- biz-editor-server
-
H5适合做SSR, 因为要考虑性能
- H5-server
-
管理后台，做前端分析
- admin-fe
- admin-server
2. 业务组件库
3.2 为何自研统计服务
- 支持自定义事件统计
- 支持
OpenAPI-- 重要
pv/uv 统计网站级别数据，参数级别需要自定义事件
3.3 各个项目之间的关系图
3.4 作品的数据结构设计
- 这个项目可以用
vue+vuex来实现，提问- 在点“保存”按钮的时候，往服务端传递的数据结构是什么样子的?
vnode形式
- 如何保证画布和属性面板是同步更新的?
- 数组是可排序的
- 如何用
vuex表示当前选中的数组
- 如果在扩展一个“图层”面板，数据结构该怎么设计?
computed计算
- 在点“保存”按钮的时候，往服务端传递的数据结构是什么样子的?
正确的设计思路
正确的设计思路
- vuex store
{
// 作品
work: {
title: '作品标题'，
setting: { /*一些可能的配置项，用不到就先预留*/ },
props: { /*页面body的一些设置，如背景色*/ },
components: [
//components 要用数组，有序结构
// 单个 node 要符合常见的vnode 格式
{
id: 'xxx', //每个组件都有id，不重复
name:'文本1',
tag:'text',
attrs: { fontsize:'20px'},
children: [
'文本1'// 文本内容，有时候放在children，有时候放在attrs或者props，没有标准，看实际情况来确定
]
},{
id:'yyy',
name:'图片1',
tag:'image',
attrs:{ src: 'xxx.png', width: '100px'},
children: null
}
]
},
// 画布当前选中的数组
activeComponentId: 'xxx'
}
- vuex getter
{
layers() => {
store.work.components.map(c => {
return {
id: c.id,
name: c.name
}
})
}
}
- 总之，基本思路就是
- 每个组件尽量符合
vnode规范 - 用数组来组织数据，有序
- 尽量使用引用关系，不要冗余
- 每个组件尽量符合
3.5 数据流转
- 核心: B端、c端、管理后台，共用一个数据库
- 创建作品: 初始化一个
JSON数据 - 保存作品: 修改
JSON数据 - 发布作品: 修改一个标记，仅此而已
- C端浏览作品: 获取
JSON数据，SSR渲染页面 - 屏蔽作品: 修改一个标记，C端来判断
当然，其中C端还有缓存，防止频繁访问数据库
注意事项
- 论证：可行性、扩展性、复杂性
3.6 写技术方案设计文档
3.7 总结
1. 主要产出
- 《整体技术方案设计》文档
- 学会如何写技术方案设计
2. 主要内容
- 分析需求，确定需要创建的项目(业务复杂，需要多个项目)
- 搭建独立的业务组件库
- 自研自定义事件统计服务
- 作品的数据结构设计
- 写《技术方案设计》文档