这里主要记录可视化工具制作的规划，包括开发时、构建时以及项目里程碑划分。

开发环境

1. 编码规范

统一开发环境、编码规范

• vscode
• typescript
• eslint

2. 构建工具

可以使用目前生态最完备的 webpack，或者 rollup

• webpack

  • 生态完善

• rollup

  • 构建更快，构建后的文件体积更小

3. 项目文件组织管理

这里采用 monorepo 的项目管理方式，通过 yarn workspace 来实现。

• yarn workspace 模块切割工具
• lerna 模块关系管理工具

4. 技术选型

• React

  • JS 开发思维
  • 单向数据管理
  • 专注视图渲染，并且渲染与数据分离

• Redux

  • Redux saga
  • 管理复杂应用程序的数据变化
  • Reselector
  • memoized

• RxJS

  • 函数试库
  • 学习难度大，增加项目复杂度

5. 测试

• 单元测试：jest
• 可视化 e2e 测试：cypress
• 持续集成 CI：Jenkins

6. 团队协作

• git

  • branch
  • code review
  • pull request
• svn（不推荐）

构建环境

• webpack 构建工具

• Jenkins 持续集成（CI）

  • 集成单元测试 & e2e 测试
  • 持续部署到指定环境

项目架构（初步）

核心是 DSL 的定义、DSL parser、DSL editor，随着项目的深入会逐步完善

• 基础组件（UI lib）

• DSL （Core）

  • parser
  • UI
  • 模版引擎（template engine）
  • 编辑器（存疑）
  • 元素
  • 组件
  • 布局容器
  • 舞台
  • 项目
  • 属性编辑器

• DSL 服务（存疑）

  • 布局信息
  • DSL 数据

• API

  • 纯粹的 fetch remote data

项目进度规划

1. 前期准备

1. 技术选型

   1. FQA
   2. 为什么使用 react
   3. 为什么选择 redux

2. 项目搭建

   1. 工程化

3. 模块组织设计

   1. workspace

2. 核心模块开发

1. DSL 规则制定
2. DSL 解析器引擎开发
3. 可视化编辑器引擎开发
4. 存储服务

3. 业务模块开发

在核心模块开发以后进行，加入其他前端开发，这里主要是工作量。

4. 产品化定制

根据产品需求定制「工具如何使用」，即回答「如何让产品使用者更方便操作使用，更高效率完成工作」这个问题。