What is Shipyard?

At our recent Mozilla All Hands, I shared some slides about Shipyard, a JavaScript MVC framework that is making it’s way into Add-on Builder. It’s not finished, but since I shared it there, it felt appropriate to share what there currently is here.


Shipyard is an application framework that covers all the common things any JavaScript application would need to deal with: interacting with a server, storing data, rendering said data in the browser, and responding to user actions. An application built on Shipyard should only have to write the parts to pull all those things together.

If you’re application is going to have 1000 lines of JavaScript, would you rather write all those yourself, or have 900 of them be in a framework that is tested and used by others?

When starting a web application, you would reach for Django, or CakePHP, or Rails; never would you decide to use just the language itself. Why shouldn’t you do the same when the target language is JavaScript?

Framework-wide Goals

  1. Be able to declare dependencies inside the code, and not be bothered with managing them during development or deployment.
  2. Be easily testable, using a node test runner.
  3. Not reliant on any other language. Build scripts will use JavaScript. The End.


It’s heavily influenced by MooTools, since they have an excellent modular design, but turned into CommonJS modules while Moo 2.0 figures itself out. There’s slides, and the repository, again. You could even discuss what true Controllers should do.

4 responses

  1. Wil Clouser wrote on :


  2. skierpage wrote on :

    How does it compare to Backbone.js ? http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/

  3. Schalk Neethling wrote on :

    Addi Osmani has a project underway here on Github (https://github.com/addyosmani/todomvc) to write the defacto to-de application using the various MVC’s out there. This should make it easier for people to evaluate which one to use for their project.

    I reckon adding Shipyard there and creating a todo will give one a good feel for how it compares to, as you asked backbone.js

  4. Sean McArthur wrote on :

    I see Backbone as a light-weight way of helping you structure an application into an MVC paradigm, whereas I see Shipyard as providing a lot of the defaults for you. Various common persistence methods (not just ajax), and common views should be included, and hopefully developers only need focus the specifics.

    Backbone, while great for its purpose, still requires you write a lot of the same stuff in each application.