1-1 需求分析和架构设计

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. 主要内容

• 分析需求，确定需要创建的项目(业务复杂，需要多个项目)
• 搭建独立的业务组件库
• 自研自定义事件统计服务
• 作品的数据结构设计
• 写《技术方案设计》文档