@pwf/pure-work v1.0.43

Pure Work

Pure JavaScript Work Modules

Install

npm install @pwf/pure-work --save

What is it?

A set of standards-based modules that help in developing web apps.

1. Flow

Flow is a Workflow Engine with no dependencies, that enables you to run workflows by chaining JavaScript Promises.

Flow can be used to build complex workflows that are triggered by user actions or other events.

Every step in the workflow represents a piece of work that can have a UI representation.

1.1 Features

1. Simplicity (just chain async methods/promises)
2. Customizability (the only requirement is for each step to be an async method)
3. Extensibility (hook into the event model, and extend each step with custom UI)
4. 100% separation of workflow running (Flow) and UI handling (<flow-ui> web component).
5. Imperative, as well as Dynamic/Declarative flows (using the DynamicFlow class)

1.2 Basic Usage (flow-ui Web Component)

The flow-ui Web Component can be used to run visual workflows.

It wraps the Flow class and provides a UI for running flows.

  render(){
    return html`<flow-ui type="full-page" .options=${this.options}></flow-ui>`
  }

  get options() {
    return new FlowOptions("test", this.runFlow.bind(this), (flow) => {
      this.flow = flow;
    });
  }

  async runFlow(){
    const f = this.flow;

    const person = {
      name: await f.ask("What's your name?", UI.text),
      email: await f.ask("And your email address?", UI.email);
    }

    await f.show(`name: ${person.name} (${person.email})`, {
      wait: 5000
    })

  }

1.3 Demo

See the demo page for a live demo.

1.4 Dynamic Flows

While you will often create flows imperatively, you may also want to create flows from declarative data (JSON, dynamic imports, etc.).

These are the first two questions shown on the demo page, turned into a declarative format:

  const result = await new DynamicFlow([
  {
    id: "movieLover",
    topic: "Are you a movie lover?",
    options: "lover",
  },
  {
    id: "best",
    topic: "And what's your favorite movie?",
    options: "favorite",
  }]).run(wf, UI) 

  /* result will look like this:
    {
      movieLover: ...,
      best:...,
    }
  */

1.5 Advanced Usage (Flow class)

Where flow-ui is a UI wrapper around the Flow class, the Flow class is UI-independent, and can be used to build everywhere.

import { Flow } from "pure-work/flow";

const options = new FlowOptions(
  "test",
  this.myFlowStartingpoint.bind(this),
  (flow) => {
    // flow.install("myMethod", this.myFlowMethod.bind(this))
  }
);

const flow = Flow.factory(options);
await flow.start();

2. Broker

A simple singleton message broker based on regular, vanilla DOM eventing.

Acts a a pub/sub messaging system, where actors can publish messages in topics, and consumers can subscribe to topics and listen for new messages on them.

Broker is available as a global singleton.

Subscribing to a topic

Broker.instance
  .subscribe(`my-topic`, async (data) => {
    // do something with the data
  })

Publishing on a topic

Broker.instance.publish(`my-topic`, {
  my: "data"
})