Hm.js

where model and view should live in

Workflow/activity

In Hm.js, subscription handler are implemented as workflow. Event handler and workflow are synonyms here, they can be used exchangeably. A workflow consists of minimum 1 activity ("get") and max 5 activities ("initialize", "get", "convert", "set", "finalize"). Each activity is a function, the "get" activity and "convert" activity can be asynchronous , as long as they return a jQuery promise. When Hm.js executes a workflow, it execute the functions in sequence and pass the result of previous function to next one as input. The reason to use workflow and activity is to increase code reusability and composability.

The de-composability of workflow into activities and composability of actvities to workflow is based on following facts mentioned in Unified Subscription.

  1. Workflow is stateless, it has not knowledge of subscriber and publisher until it is executed.
  2. Workflow does very simple things, subscriber get some information from publisher, and make some change of himself.

In Unified Subscription, we have a programmatic subscription example, it use several function handlers, which can be decomposed into the following activities.


function (e) {
 this.set(e.publisher.val());
}
//can be decomposed to to the the following
{
  get: "val",
  set: "set"
}
//or shorter
"val set";
//or even shorter
"val";

function (e) {
  this.set(e.publisher.val());
}
//can be decomposed to
{
   get: "get",
   set: "val"
}
//or shorter
"get val";
//or even shorter
"val";

function (e) {
 this.text(e.publisher.get());
}
//can be decomposed to
{
  get: "get",
  set: "text"
}
//or shorter
"get text",
//or even shorter
"text"

Composability is also heavily used in declarative subscriptions. In the following, we create a workflow type slideDown, and then create a subscription group by composing two subscription, one composed by workflow type show which is built-in with Hm.js, one composed by slideDown workflow type created previously. And then we use create declarative subscription with the group and the model isVisible like the following:



<label><input type="checkbox" data-sub="val:isVisible" />toggle visibility </label>

<!--build declarative subscription to model "isVisible"
using subscription group "show" -->
<div class="showBox" data-sub="show:isVisible">
   show or hide
</div>

<!-- build declarative subscription to model "isVisible"
using subscription group "slideDown" -->
<div class="slideBox" data-sub="slideDown:isVisible">
 slide up or slide down
</div>
//create a model
hm("isVisible", true);

//create a workflow
hm.workflow( "slideDown", function( e ) {
  this[e.publisher.get() ? "slideDown" : "slideUp"]();
} );

//create a subscription group
hm.behavior.slideDown =
  //after model update try to apply workflow
  //"slideDown" to the view
  "!afterUpdate:.|*slideDown;" +
  //initially apply model value to
  //the workflow "show"
  "!init:.|*show";