Skip to content

rostislavbobo/mould

 
 

Repository files navigation

Mould

简体中文 | English

Mould 是一个试验性项目,它通过在 GUI 和 Code 间建立接口,帮设计师和工程师在各自的侧达成自治。 预想中,Mould 可以解决以下在现有条件下较难解决的问题:

  • 设计师和工程师相互制约
  • GUI 程序难以测试
  • 本地化难题
  • Design system

使用

使用 Mould 的 GUI 工程中,预设了三个不可或缺的角色(但不一定需要三个人):

  • 架构(对业务逻辑和 GUI 组织负责:构建接口、分解工程复杂度)
  • 视觉(对最终呈现的效果负责:进行组件化设计)
  • 程序(对业务逻辑的实现负责:根据接口生成的函数签名,写具体实现)

具体工作流程是,首先架构根据业务需求,梳理出需要哪些界面,将界面分解为小颗粒的组件(Mould),定义组件的功能和接口:

  • input: 组件接受的输入参数,通过动态表单生成字段和 Controller
  • scope:组件的内部数据
  • kits:与内部数据绑定的组件,与 scope 绑定
  • states:不同状态下显示不同的界面

架构定义完毕之后,视觉和程序可以同步进行各自的工作。

视觉需要对架构给出的每一个组件进行设计。需要理解架构对业务的定义,正确地结合 kits 进行设计。

对 kits 可以这样理解:我们小时候玩过的注塑拼装玩具(高达模型),厂商规定好玩具的设计蓝图,组成模型的每一个构件都会给出来,我们只需要根据说明书组装这些构件即可。这里的 Mould 即为蓝图,kits 则是要完成拼装所需的构件。

程序需要完成每一个组件定义的函数。带类型的函数签名可以根据架构给到的接口信息自动生成,辅助程序开发。函数的模型为:input -> [state, scope]

视觉和程序是完全自治的。即,程序不需要等待视觉的设计,可同步进行工作。而设计也不依赖程序对界面的实现,且可随时对不满意的部分进行修改。

一句话总结 Mould 工程的角色分工:架构定义骨架 -> 视觉填充血肉 -> 程序注入魔法。

Roadmap

  • MVP
  • 自举
  • 产品化
  • 跨平台

相关链接

知乎提问

Packages

No packages published

Languages

  • TypeScript 88.4%
  • CSS 7.5%
  • JavaScript 4.1%