Brian Peacock

Subview.js: A hierarchical view framework

February 2014

Update: Subview.js is now available at!

Subview.js is an effort to create a Hierarchical Model-View-Controller framework for JavaScript. It is built on the concept that nested, small, modular views should be used to develop flexible web applications. More specifically I’ve developed 10 fundamental tenets for this framework:

  1. App interfaces shall be organized into a hierarchical sub-view structure.
  2. The structure of this hierarchy shall be defined only by the relative positions of view wrapper elements in the DOM.
  3. Views shall have no knowledge or dependency on their parents except for listening to events broadcast by them.
  4. Views shall have state attributes who’s values are reflected in the DOM (for styling purposes) and when these attributes are changed, events are broadcast to the view’s children.
  5. Parents may bind to their children’s events.
  6. All DOM updates shall be handled manually, not to punish the developer, but to ensure full control for high-performance applications.
  7. Views shall be be recycled automatically using an Object Pool to prevent memory leaks and improve performance.
  8. Given a DOM element, one should be able to get it’s corresponding view.
  9. Initialization functions should not fire until the document is ready since views deal with the DOM by their very nature.
  10. Applications shall aptly render server-side and views can be bound to their DOM wrapper elements client-side without redrawing the application.

By following these principles, I expect to build a flexible, highly modular view framework that can be used with a variety of models and controllers (see my on3.js controller suite). In combination with a dependency management solution such as Browserify (my preference) or RequireJS, I believe that subview.js will represent close to absolute modularity for web user interface components.