WebIDE 需求分析 593 高级软件工程lab6

ReveFestival 2021-12-21 14:24:20

WebIDE 作者：593

项目概述

集成开发环境IDE相信我们都已经很熟悉了，虽然我们在记事本里也能敲代码，但IDE提供的是一套完整流畅的编程体验——自动格式、高亮、纠错、插件等等。随着现代浏览器性能的加强，将这一套系统搬到Web上变得不再遥不可及，同时乘着Web的风口，云端项目开发、代码分享等诸多功能也能一一实现

竞品分析

究竟是WebIDE还是WebEditor？他们有什么区别？

WebIDE提供了更加复杂的机制用于大型项目，文件管理、依赖包的引入让它显著区别于后者，而WebEditor只能算做一个单页面，没有文件和工程化模块系统（例如npm），虽然两者都有其适用范围，没有什么优劣，但我们自然还是希望能在解决编辑器的基础上，将功能做的更加完备，将使用体验和细节打磨到最好，而不是做一个应付工程实践用后就弃掉的玩具

市面上优秀的WebIDE有 codesandbox.io

市面上的WebEditor有菜鸟在线工具

功能核心

无论WebIDE还是WebEditor，他们的前端核心都是一个富文本编辑器，富文本编辑器的演进经过了很长的路线：

1.原生编辑器：
使用contenteditable 特性，可以指定某一容器变成可编辑器区域，即用户可以在容器内直接输入内容，或者删减内容；使用execCommand API，可以对选中的某一段结构体，执行一个命令，缺点是表现力太弱和兼容性差

2.传统编辑器：
摒弃execCommand API，自行封装实现效果，通过工具栏调用，但只是能力扩充，但并没有提供通用扩展接口，缺点自然是扩展性差

3.现代编辑器：
现代编辑器完全抛弃了浏览器提供的编辑器默认行为，完全自实现各种格式、撤销、重做等功能，而且都是基于自建的数据模型，提供通用扩展接口，现代编辑器风风火火发展了几年，的确解决了传统编辑器的老大难问题：扩展性。基于现代编辑器的扩展接口，开发者可以自行定义格式，定义内容等，并且可以实现更复杂的编辑器内交互，使用户体验有所提升，其中最具有代表性的就是Slate.js，但目前处于需求分析阶段，先不去深入了解。

功能分析

功能被拆分为几个主要模块：

工程仓库模块：对某项工程的增删改查
编辑器模块：修改文件内容
文件模块：生成文件树，对文件的增删改查，修改相当于操作编辑器模块
依赖模块：对依赖的增删改查，与文件目录下的依赖内容一一对应
预览模块：后端在一个端口上生成开发环境下的实时预览，或者是生产环境下的项目
个人信息模块：对个人信息的增删改查

由上图可见，一个典型的使用流程是：

用户进行登录操作，进入了自己的工程仓库模块（实际上没有仓库这个概念，只有若干个工程的数组集合），并且从模板新建了一个工程，模板为新工程自动提供了默认的文件和依赖，并且该工程存放在后端服务器的一个隔离沙箱环境内。接下来用户进入工程，并且选择了一个文本类文件打开，此时编辑器模块读入文本并进行编辑操作，每隔若干个短时间或需要运行的时刻，文件内容便会向后端发送数据来使其同步。用户编辑完文本后，紧接着运行这个工程，后端此时检查依赖是否和package.json同步，并且在后端进行开发环境打包并生成实时预览URL返回给前端。用户还可以将该项目进行生产环境打包，将文件生成在该环境的目录下，从而将项目效果分享给别人。

业务数据模型

这里以上图中的用户类型和项目类型为主体，将文件模块、依赖模块、用户模块、项目模块串联起来，以下是前端用户类型和项目类型的业务数据模型

//用户类型
interface UserType{
   id: string,
   name: string,
   avatar: string,
   //索引 ProjectType中的id字段
   //用户拥有的项目集合
   projects: string[],
   createdTime: string,
}
// 项目类型
interface ProjectType{
   id: string,
   isPublic: boolean,
   name: string,
   createdTime: string,
   // 存放开发时依赖 和 运行时依赖 两种依赖集合
   devDependencies: DependencyType[],
   Dependencies: DependencyType[],
   // 项目的文件树结构
   Files: FileType[]
}

上段数据类型中索引的文件类型和依赖类型如下：

type FileType = ({
   type: 'file'
} | {
   type: 'folder',
   children: FileType[]
}) & {
   name: string,
   createdTime: string,
   modifiedTime: string,
}

interface DependencyType{
   name: string,
   version: string,
}