Skip to content

Instantly share code, notes, and snippets.

@luckyadam
Last active June 17, 2022 07:45
Show Gist options
  • Save luckyadam/90d0a7da0fd952a364439175ad55c061 to your computer and use it in GitHub Desktop.
Save luckyadam/90d0a7da0fd952a364439175ad55c061 to your computer and use it in GitHub Desktop.
Taro IDE 设计

Taro IDE 设计

项目背景

为了提升 Taro 的产品形象,让 Taro 能够为更多层次的人群接受,我们需要将 Taro 包装成一个完整的、专业的平台产品,来降低人们的认知、接入成本,同时,Taro 一直以来都是作为一个免费、开源的框架,但除了框架之外我们还有很多不适合开源的能力沉淀,我们需要一个商业化的版本,来将我们沉淀的服务能力开放出去,在带来收益的同时,为公司打造一个企业级的多端建站工具。

目标

  • 将 Taro 包装成平台化产品,降低认知与接入成本
  • 探索 Taro 商业化模式

功能设计

Taro IDE 兼顾研发体验提升以及企业级多端建站的目标,将由以下功能模块组成。

接下来将详细介绍每一个模块的功能设计。

账号体系

由于 Taro IDE 在后续存在商业化的计划,所以在初期我们也需要建立一套完整的账号体系,当然,为了初期吸引用户,Taro IDE 会分为两种账号模式,登录用户,以及 访客模式

登录用户

登录功能将接入统一的登录服务,账号与玲珑体系打通,这样便于后续 Taro IDE 与玲珑商业化版本进行合作,探索更优的解决方案。

访客模式

同时也支持用户不注册登录进行使用,提供访客模式,进入该模式后,会给用户分配一个唯一的 UUID,用以标记用户身份,这样可以达到如下目的:

  • 记录用户操作,进行用户分析;
  • 当用户成为登录用户之后,之前的操作可以与用户登录账号进行关联。

项目管理

相比于使用命令行工具时代,用户可以在 Taro IDE 中进行更加便捷的项目管理,具体将包括以下功能。

旧有项目导入

Taro IDE 支持导入旧项目进行开发,分为两种导入方式

  • 导入 Taro 项目,支持导入 Taro 项目,导入过程中将对 Taro 项目进行扫描分析
  • 导入微信小程序项目,在导入过程中选择自动转成 Taro 项目

创建项目

支持通过选择模板创建项目,分为两种模式

  • 开发模式,可以选择空白模板进行创建
  • 行业模板模式,通过从模板市场选择现成的行业模板进行创建,关于模板的介绍,将在后面章节进行介绍

而对于项目中的组件、页面也是同样的道理,可以选择空白模板来创建组件、页面,同时也能选择从组件、模板市场中选择下载需要的东西来进行添加

项目 Dashbord

无论是导入的项目,还是直接创建的项目,都会生成当前项目的概况统计。

项目 Dashbord分为研发、可视化两种模式,通过顶部项目名旁边的按钮进行切换。

研发模式

包括如下内容

  • 项目预览按钮区域
  • 项目页面列表,列出当前项目所有页面,可以选择进入页面代码,同时也能在项目编译完成后直接选择页面进行预览
  • 项目页面组件引用关系图,厘清页面、组件之间的引用关系,对项目有一个完整的认识
  • 项目所包含的依赖,列出当前项目的所有依赖,可以选择单独更新某一依赖,同时也能自由地安装删除依赖
  • 项目预览时编译信息日志
  • 腾讯云 OSS 服务,为用户提供 OSS 服务管理
可视化模式

嵌入 Atom 可视化编辑器

两种模式都会包含配置管理、发布管理、运营管理的入口。

配置管理

为了满足不同的开发需求,在 Taro 中包含了很多配置,修改配置,需要通过阅读文档才能很好完成,以往的配置修改方式还是非常繁琐的,为了简化配置操作,在 Taro IDE 中增加了配置管理的功能,通过可视化的方式对配置进行管理。

在 Taro 中包括两种配置:

  • 项目配置,各端的对应配置,包括小程序平台自身的配置文件
  • 编译配置,Taro 自身的编译处理配置

发布管理

见统一发布部分

运营管理

见监控统计部分

插件市场

提供插件市场丰富 Taro IDE 功能,例如针对编译阶段提供文件处理插件,可以将静态资源等文件自动上传到 CDN 等功能。

云转换

Taro IDE 提供对项目进行转换编译的功能,包括 Taro 编译到各端

模板、组件市场

Taro IDE 提供丰富模板、组件以供用户选择。

模板

模板是指项目级模板,用户在创建项目时可以选择,项目级别模板以行业属性进行分类,例如电商、酒店、旅游、工具类等等,在创建项目时选择对应模板可获得行业全套解决方案。

同时用户可以通过 IDE 模板这一 Tab,浏览到模板市场里所有的模板,通过选择模板,重新创建项目。

组件

Taro IDE 将提供各式各样的组件以供选择,组件将和模板一样,以行业属性进行分类,方便用户检索,而组件的概念不仅仅局限于页面中的局部挂件,组件也可以指一个完整的页面,用户可以选择下载某一组件,随后就能在编辑页面的时候插入组件。

可视化搭建

Taro IDE 中将内置 Atom 页面可视化编辑器来对项目进行可视化搭建,可视化编辑以页面为维度进行编辑,具体依赖 Atom 页面可视化编辑器设计。

同时,在开发初期计划提供一个简版的可视化功能,所见即所得,可以通过预览的页面直接进入页面以及页面上组件对应的代码,降低研发成本。

监控统计

如果是通过行业模板创建的项目,将会获得完整的项目监控统计数据,一般包含如下数据:

  • PV 、UV 统计
  • 页面关键位置点击量,可以自行定义
  • 用户画像,用户地域、性别
  • 订单量数据,等等

用户可以根据这些数据来获得项目运行情况的了解。

统一发布

用户可以通过 Taro IDE 管理项目发布情况,可以直接在 Taro IDE 中将一个项目通过编译生成对应平台可运行应用,并且发布到对应的平台中,例如微信小程序应用可以直接发布到微信小程序平台上,不再需要再通过小程序管理平台进行发布。

同时,用户也能在 IDE 中管理每个端应用发布的版本,查看各版本日志,而且也能直接将应用回滚到某一版本。

IDE 设置

可以对 IDE 进行个性化设置,例如设置使用哪个代码编辑器来打开代码,项目默认进入开发模式还是可视化模式。

版本更新

采用提醒用户更新的方式。

版本规划

Taro IDE 开发分为两个阶段。

Milestone 1

目标

建立 Taro IDE 架构,完成开发体验提升,将 Taro 通过 Taro IDE 的方式包装成一个接受度非常高的产品

任务

  • 用户模块
  • 项目管理
    • 导入和创建项目
    • 项目 Dashbord
    • 配置管理
    • 发布管理
  • 可视化,所见即所得
  • 更新机制
  • IDE 设置

Milestone 2

目标

接入完整可视化搭建,模板及组件市场,进行商业化探索尝试

任务

  • 可视化搭建
  • 模板、组件市场
  • 运营管理,监控统计
  • 数据服务
  • 插件市场

技术选型

Electron + React

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment