Friday, August 31, 2012

Introducing knockout.composite

*UPDATE* Tribe is here! Tribe is a complete platform for building distributed composite HTML5 web and mobile applications and is the next evolution of knockout.composite. Check out for guides and API reference.

This is part 1 of a multi-part post. The posts are relatively short and contain plenty of code examples where relevant.

Part 1: Introducing knockout.composite
Part 2: The Basics
Part 3: Getting Around
Part 4: Putting it All Together
Part 5: Unit Testing: Model Citizens 
Part 6: Integration Testing: Playing Nicely Together
Part 7: Functional Testing: Automated UI Tests, Anywhere, Any Time
Part 8: Pack Your App and Make it Fly
Part 9: Parting Thoughts and Future Directions


It’s not that far off a year since the adventure began. On the surface, it can be a little difficult to see how much effort has been invested in my product thus far. However, under the covers, there ticks a different story, a story that is the result of waging war on pain, a crusade against the persistent and painful issues plaguing JavaScript development. That story is knockout.composite.

OK, maybe that’s a little over dramatic, but the main focus of this framework has been to remove as many of the pain points that I encountered with JavaScript development. There are already many web frameworks out there, so why another? knockout.composite has some significant differences to other frameworks, differences that come with some significant benefits!

We’ll show you some of the basic concepts in part 2 and 3. We’ll actually build something functional and show you how easy it is in part 4.

So what is it?

knockout.composite is a free, open source (MIT license) framework for developing composite single page JavaScript applications, loosely based on some of the concepts expressed in the Microsoft Composite Application Library (Prism). It’s built on top of the popular knockout.js MVVM framework for JavaScript. Here’s what you get:

  • The power of knockout.js data binding and observables
  • Simple but powerful mechanism for composition of UIs
  • Loosely coupled pubsub style communication between components
  • Dynamic combining, minification, loading and preloading of resources
  • Awesome debugging support (at least in Chrome!)
  • Highly testable code at all levels from unit testing individual models to functional testing the entire app
  • Declarative dependency management
  • Automatic back button support
  • Extensible page transitions
  • Automatic memory management
  • So very little plumbing code

So what is it really?

At it’s core, knockout.composite is a set of simple components:

  • Resource management system
  • Binding handlers for knockout.js
  • Publish / subscribe mechanism
  • Resource combining and minification tool

We’ll cover these in more detail in future posts, but I’ll leave you with a bit of a teaser for now…

Show me!

Development with knockout.composite revolves around the concept of a “pane”. A pane consists of three resources – a HTML template, a JavaScript model and a CSS style sheet. The following image is taken from the second example included with the source code:


Rendering a pane is as simple as invoking the knockout binding handler:

<div data-bind="pane: 'left'"></div>

Using a simple path based convention, the resource management system ensures that the three pane resources are loaded. It ensures resources are only loaded once, even across concurrent requests. The convention allows for arbitrarily nested folders, giving you full control over the structure of your project.

An instance of the model is constructed and bound to the associated template each time the pane binding handler is invoked. Declaring a model is as simple as:

ko.composite.registerModel(function (pubsub, data, pane) { = function () {

It’s as simple as that. No stuffing around with script tags or async AJAX calls to load scripts or templates. Everything just works.

All resources can be combined and minified using the resPack tool based on simple XML configuration files and loaded at defined points in your application’s lifecycle. You can even load your entire app up front, minified and gzipped, from a high performance CDN.

Cool Stuff?

We’ve been tinkering with some other interesting stuff as well.

  • Mobile devices. Things are looking promising for using knockout.composite as part of hybrid native / web applications on mobile devices.
  • Push capabilities. Integrating with server side message buses such as NServiceBus using signalR – publish a message on the server event bus and it’s transparently published on the client event bus (and vice versa). Web, mobile, desktop all talking transparently.
  • Using state machines to control application navigation and other user interactions – really simple and elegant app navigation
  • Transparent support for client side persistence mechanisms using knockout observable extensions
  • Integration with the knockout validation library
  • A suite of common UI components such as dialogs, dropdowns, tooltips, grids, graphs, etc.

Before You Check Out Part 2…

Head over to to see a fairly complex example of the framework in use.

Check out the unit and functional tests for the site at, and

Check out the unit tests for the framework at They run a bit slow online due to so many individual resource requests, but are fine when run locally or over a local network.

Grab the source code and examples from It’s worth noting at this point that this is version 0.1. The code base has grown and evolved over time as requirements have emerged and while it’s stable, the code itself requires a bit of refactoring. The next version will clarify some of the concepts and greatly simplify the code.

If at any time you’re playing with knockout.composite and have any problem, please feel free to drop me a tweet @danderson00.

If you’re already reasonably familiar with JavaScript development and knockout.js concepts, skip over to part 4, otherwise, see ya in part 2!

*UPDATE*: v0.2 is coming, and it’s part of a much bigger vision we want you to see – get a glimpse here.

Labels: , , , , , ,


Post a Comment

Note: Only a member of this blog may post a comment.

<< Home