@mouldjs/mould NPM

Mould

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.

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.

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).

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]

As a conclusion,

Designers' and Programmers' 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: