Hm.js

where model and view should live in

Get started

Hm.js is a lightweight JavaScript library for building large scale Single Page Application or simple widget. It implements object's behavior using publish-subscribe pattern, regardless whether the object is a view or a model. . Here are some of its features.

  1. Lightweight model supporting event propagation, and cascading.
  2. Unified subscription for both view and model
  3. Subscription can be registered declaratively or imperative.
  4. Reusable behavior implemented by functional, asynchronous event handler, workflow and activity.
  5. Bundled with lots of reusable, composable behavior, workflow types, activities, and subscriptions

Hm.js is hosted on Github, it is available for use under the MIT software license.

Download

You can download Hm.js from here. Hm.js comes with two version, Hm.core.js (13KB) and Hm.js (20KB) which includes 10 plugins. The file size is after minified and gzipped.

Dependencies

  1. jQuery 1.5+
  2. jsRender (optional, required by jsRender template adapter)
  3. handlebars.js (optional, required by handlebars.js template adapter)

Installation

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.semanticsworks.com/assets/js/jsrender.js"></script>
<script src="http://code.semanticsworks.com/assets/js/Hm.js"></script>

Is Hm.js a MVC framework?

No. Firstly, it does not use controller, secondly, it is not framework, but a library. You can call it Model-View-Subscription library.

MVC pattern works very well at server side. But client-side has some differences from server side, such as:

Server side Client side
Style Predetermined machine to machine request/response Not so predictable user/machine interaction
State Stateless, state is created and destroyed for every request/response session Stateful, state accumulates for every user interaction,and accumulates with time.
Event No event Events drive the application.
Controller simple and well-controlled complicated and hard to control

Because of the differences, Hm.js use publisher-subscriber pattern. In this pattern, views and models take control of themselves by subscriptions. Below are the rules the library follows.

  1. Views and models are all objects.
  2. Objects control themselves.
  3. No object control any other object.
  4. An object can trigger events of himself.
  5. An object cannot trigger events of others.
  6. Objects can subscribe events and react.
  7. Objects do not act without subscription.

Philosophy

When designing client application, we normally think like, "When this happens, I want to change this like this", such as "When view change, I want to change the model like this", or "When model change, I want to change view like this", or "Let's create a two-way binding between this view and this model, so that they can be synchronized".

Hm.js use a different mindset, "When this happens, I want to change myself like this, other people will take care of themselves".

Can I use controller?

Yes, as long as it controls well. For whatever reason, such as performance, directly manipulating others is still required in some cases, you as a developer control what needs to be done.

Can I use with Hm.js other MVC frameworks/libraries?

Yes. In Hm.js, objects without subscriptions will do nothing, objects with subscriptions will only change themselves not others, so they are very harmless. Hm.js is just a library about subscriptions, and it plays well with others.

The core of Hm.js is based on the following modules.

  1. Model
  2. Unified Subscription
  3. Workflow/activity
  4. Template

Is the view module missing from the list? Yes, but it is deliberate. Most of the view features are taken care by jQuery, Hm.js just add a couple of methods to jQuery object. In the following, I will give a overview on how each modules works. For details of each API, please refer to documentation.