前端架构 —— 产品研发流程

一、准备工作

产品研发流程（SDLC - 软件开发生命周期）：

需求分析 -> 设计 -> 开发 -> 测试 -> 部署 -> 维护

1、需求分析

需求指导设计，设计指导开发

① 模板

• 模板列表
• 使用模板创建

②用户

• 获取验证码
• 手机登录
• 获取用户信息

③作品

• 创建
• 保存
• 发布
• 获取作品列表及信息
• 分享 到H5

④渠道

• 获取渠道
• 创建渠道
• 删除渠道

2、技术架构设计

一个原则就是要看整体，从上帝视觉，不要特别关注细节

所需项目

前后端分离项目

前端（SPA项目，使用Vue或者React）

• 编辑器
• 其他页面

后端 - backend

• RESTful API
• H5页面 SSR

组件库 - components

项目之间的关系

3、核心问题分析

海报的组成

• 背景 ——  纯色、背景图
• 元素  ——  位置、展示属性、元素组件

数据结构

数据流转

• 向画布添加或删除组件
• 更新组件某个属性
• 渲染画布或作品

扩展性 - 场景设计

• 海报添加对应的背景音乐
• 新的组件类型 - 例如：当前日期

结论：不要过分关注细节， 宏观的去设计产品架构

技术方案设计，寻找一个方向，论证：可行性、扩展性、复杂度高低