npm package: @mouldjs/mould
Description: English | [简体中文](./README.md)
Latest version: 0.4.1

# **Mould**

English | [简体中文](./README.md)

Mould is an experimental project that helps designers and engineers achieve autonomy on their respective sides by establishing an interface between GUI and Code.

In anticipation, Mould can solve the following problems that are hard at this moment:

-   Designers and engineers restrict each other
-   It's difficult to test GUI program
-   Localization challenges
-   Design system

## **Usage**

As concepts, in the engineering project which is using Mould, three different roles is used as defaults.
(but not necessarily 3 people actually)

-   **Architect**: The man who is in charge of business logic and GUI composition.

    -   Construct interface.
    -   Resolve engineering complexity.

-   **Designer**: The man who is in charge of final rendering.
    -   Modularized design.
-   **Programmer**: The man who is in charge of business logic implementation.
    -   Write the specific implementation according to the function signature generated by Mould.

<br/>

In practice, as a normal working flow,

First, **Architect** sorts out which interfaces are needed, and breaks the interface into Components`(as Mould)`.

Then, define the function and interface of the component:

-   **_input_**: Input parameters accepted by the component, fields and controllers are generated via dynamic forms
-   **_scope_**: Internal data in component
-   **_kits_**: Components bound to internal data, which is also going be bound to scope.
-   **_states_**: Different UI in different status.

After the architecture processed, **Designer** and **Programmer** start to do their own work in parallel.

<br/>

**Designer** needs to design each component in the architecture. It is necessary to understand the definition of architecture to the business and design properly with **_Kits_**.

_Tip:_ Like the rule in plastic assembled toy ,like _Gundam Plastic Model_, there's a stipulated _Gundam_ blueprint and components that makes up the big _Gundam_ in toy box.
Correspondingly, the blurprint is for **Mould**, and the components is for **_Kits_**.
The only thing we need to do is compose all the components (**_Kits_**) manually according to the blueprint (**Mould**).

<br/>

**Programmer** needs to finish every function defined in each component. The function signatures with types can be automatically generated based on the architecture, and this is very useful for program development.

The pattern in defined function is: `input -> [state, scope]`

<br/>

As a conclusion,

**Designer**s' and **Programmer**s' own job is completely autonomous. More clearly, **Programmer** does not need to wait for the **Designer**; And **Designer** also does not depend on the program's implementation, and the
UI can be modified at any time.

Summarize the roles in **Mould** briefly:

-   **Architect** defines skeleton.
-   **Designer** fills with flesh.
-   **Programmer** injects magic.

## Roadmap

-   [x] MVP
-   [ ] Bootstrapping
-   [ ] Commercialized
-   [ ] Cross-platform

## Relevant Information

[Discussion in Zhihu](https://www.zhihu.com/question/382742971)