Giter Site home page Giter Site logo

mould's Introduction

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
  • 自举
  • 产品化
  • 跨平台

相关链接

知乎提问

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.