You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Now a lot of features are task flow based. You could break features into a seriese of tasks with order and dependency. For example, to start task C, you have to wait for task A / B and then take their outputs for further process. To express and reuse task flow easily and visually, it could help improve development efficiency. We would refer task flow as Workflow in code.
2
+
Now a lot of features are task flow based. You could break features into a seriese of tasks with order and dependency. For example, to start task C, you have to wait for task A / B and then take their outputs for further process. To express and reuse task flow easily and visually, it could help improve development efficiency. In this repo, task flow and workflow are the same.
3
3
4
4
## Example
5
+
### Simple taskflow expression
5
6
Take the task flow below, there are 4 params for input. The task flow would add all 4 params with 3 add nodes and then double the sum with double node. Then the double node's result would be set as task flow's output.
6
7
7
8
@@ -17,9 +18,21 @@ The task flow above could be expressed with react jsx style below,
17
18
<OutputNodeComponent name="res" dep="double" />
18
19
</WorkflowComponent>
19
20
```
20
-
As you could tell from the code above, there is a container tag *WorkflowComponent*. Inside the container, there is first a *InputNodeComponent* node with *params* which is a array of name of the input parameters. *NodeComponent* add1 would take num1 and num2 defined within *InputNodeComponent* node to compute the add result with addFunc. After two node add1 and add2 finish work, add3 would take their outputs to run addFunc again with result passed to double node. Finally the result of double node computed by doubleFunc, would be set as task flow's output with alias res.
21
+
In the jsx code above, there is a container with tag *WorkflowComponent*. Inside the container, there is first a *InputNodeComponent* node with *params* which is a array of name of the input parameters. *NodeComponent* add1 would take num1 and num2 defined within *InputNodeComponent* node to compute the add result with addFunc. After two node add1 and add2 finish work, add3 would take their outputs to run addFunc again with result passed to double node. Finally the result of double node computed by doubleFunc, would be set as task flow's output with alias res. The input parameter and output of a node
22
+
are all refferenced by name.
21
23
22
-
If you want to define a re-usable task flow, then you could define a function with props to wrap the workflow.
24
+
The jsx code expression above is simple, clear and visual. You don't have to write code with long and chainning expressions.
25
+
26
+
For each *NodeComponent*, you need to specify a function that could genrate *WorkflowExecutionNode* as below,
27
+
```typescript
28
+
export interface WorkflowExecutionNode {
29
+
run: (...params:any[]) =>any;
30
+
cancel?: () =>void;
31
+
}
32
+
```
33
+
34
+
### Re-usable taskflow expression
35
+
If you want to define a re-usable task flow, then you could define a function with props to wrap the workflow. For example,
23
36
```typescript
24
37
function ComputationWorkflow(props:WorkflowInputProps) {
25
38
return (<WorkflowComponent {...props}>
@@ -42,8 +55,32 @@ And in a new task flow, reuse the task flow by passsing the params. Then chain t
42
55
</WorkflowComponent>
43
56
44
57
```
45
-
Once you have defined jsx task flow, you could use buildJsxWorkflow to generate the task flow data structure. And with createWorkflowExecutor, then you could run workflow with the executor. Please reference **example** and **test** folder for more.
58
+
### Taskflow conversion
59
+
The example above is about taskflow expression. Once you have defined jsx taskflow, you could use buildJsxWorkflow to generate the task flows with ndoes and its depdencies. For example,
*createWorkflowExecutor* is for create task flow executor by passing the task flow structure. Call the run method, then wait for the outputs of promise and reference the result by alias . For example,
Please reference *example* and *test* folder for more.
47
84
## Development Setup
48
85
Please install vscode as IDE
49
86
```ini
@@ -61,22 +98,93 @@ npm run lint
61
98
```
62
99
To debug test case, set sourceMap to be true in tsconfig.json, set configuration to be Jest Current File, open test file and run Start Debugging from vscode menu.
63
100
64
-
## Notes
65
-
Currently the task flow expression only supports **react functional component**. And it would be better to add test for build and run the task flow.
-**addNodeName**-falsebydefault, if true it would generate id to node name mapping.
111
+
112
+
**Return**
66
113
67
-
For task that needs to wait for user's input like clicking button, please keep the resolve function. When user clicks the button, you run the resolve function with input needed.
114
+
The task flow instance
68
115
69
-
For UI specify task flow, it is recommended to define something like bridge to keep state and callback functions to update UI.
116
+
****
117
+
createWorkflowExecutor(wf:Workflow)
118
+
****
119
+
Create task flow executor with task flow instance.
70
120
71
-
Although the library has dependency on **react**, however we don't need to actually need it at run time. There is an interface **dumpWorkflow** which would dump the workflow into code. Then you could create the workflow without react. For example, in **./test/DumpWorkflow.test.tsx**
121
+
**Parameters**
122
+
123
+
- **wf** - the task flow instance, not the task flow jsx expression
Here you need to import **unitNodeGenerator** from the library, and other node generator functions.
76
175
77
-
Also, if you are using typescript, there is cli which could generate the code by specifying the file path and exported workflow instance. Please check packages of **example/client/**,
176
+
## About react
177
+
The library uses *react* to express task flow. It would add extra bundle size. as 1) *react* is included, 2) the jsx taskflow expression would actually be converted to code to create react elements.
178
+
179
+
If you don't want to depends on *react* and minize the bundle size. You could 1) dump the workflow instance code with *dumpWorkflow* method at runtime or test code. And use the generated code to generate task flow instance, 2) use cli and package target to print the genrated code for pure typescript project. Please reference the workflow target in **./example/client**.
-w specifies the file path and -n specfies the name of workflow instance exported.
184
+
-w specifies the file path and -n specfies the name of workflow instance exported. Here you need to import unitNodeGenerator from the library, and other node generator functions.
185
+
186
+
187
+
## UI application
188
+
The best scenario for task flow is pure data flow. For task that needs to wait for user's input like clicking button, please keep the resolve function. When user clicks the button, you run the resolve function with input needed.
189
+
190
+
For UI specify task flow, it is recommended to define something like bridge to keep state and callback functions to update UI. Please check **./example/client** for reference.
0 commit comments