What is Mojo?


MojoJS is a customizable JavaScript framework inspired by NodeJS, BackboneJS, and many other JavaScript, and non-JavaScript frameworks.

MojoJS was designed with the Strangler Pattern in mind. If you already have a pre-existing application, you can easily build Mojo on-top of it without a full application re-write. This means you can slowly ease into it without worrying about the all-or-nothing approach associated with most JavaScript frameworks.

Mojo's level of abstraction also makes it very easy to re-purpose the framework to do whatever you want. You can use Mojo on the backend without the additional baggage of having other platform-specific modules, such as the HTTP router.


What makes Mojo different?


Property scope

Mojo views have the ability to inherit properties from their parent, all the way up to the root view. This feature is incredibly useful when you want to pass data from one view to another. A user model for instance might be used in other parts of your application. All you need to do is set the user model in the root view, and get() that property in any sub-view. This pattern is a great way of avoiding singletons, and makes your code far more interchangeable, and modular.

Of course, you can be as implicit, or explicit as you want. Mojo also has the ability to break property scope simply by setting a property in any sub-view.

Take a look at the property scope docs for more info.

Compiled templates

Mojo templates (paperclip) are translated from HTML, straight to JavaScript - this also includes data-bindings. For example, here's a template:

hello {{name}}!

Here's the templated translated to JavaScript:

module.exports = (function(fragment, block, element, text, comment, parser, modifiers) {
  return fragment([text("hello "), block({
    'value': {
      run: function() {
          return this.context.name;
      },
      refs: [ ["name"] ]
    }
  })]);
});

Pretty clear what's going on. Here's what we know at a glance:

  1. Generated DOM is identical to the HTML templates. No weird manipulations here.
  2. Data-bindings are identified as the template is created. Note that this happens once for every template. Paperclip takes each translated template, caches them, and uses the browser's native cloneNode() whenever a template is used.
  3. JavaScript references within the templates are identified at translation time, and cached in the data-binding.

As it turns out, the method above for generating templates is very efficient. Essentially, paperclip does the least amount of work necessary to update the DOM since it know where everything is.

Paperclip will also lazily batch DOM changes together into one update, and run them on requestAnimationFrame. This kind of optimization is similar to how layout engines work, and helps prevent unnecessary performance penalties in the browser.

Virtual properties

Mojo uses virtuals on models to asynchronously load remote resources as they're demanded in the application. They are essentially properties that only get defined when they're data-bound to.

This has a number of sweet benefits:

  1. Reduces the number of API calls.
  2. Reduces the cognitive overhead of manually handling asynchronous resources.
  3. Keeps your code DRY. No more calling load() anywhere outside of your models.
  4. Allows for views to be used synchronously used on the backend.
  5. Makes code more testable since virtuals can be overridden.
  6. Makes code more maintainable if there's ever an API change - i.e: you might (and probably will) have a virtual property that's converted into a non-virtual property.
  7. Allows you to design models independently from views, and vice-versa.

Explicit

Mojo was designed around explicity, and simplicity. What you write is what you should expect out of the framework. There are no gotchyas, no magic, everything was designed to work in a coherent way.

Data-bindings are even explicit. You can easily define 1-way, 2-way, or even unbound references within templates.

Flexible

Mojo finds the right balance between ease of use, and structure. The patterns used in Mojo make it possible to extend the framework without feeling like you're working against it. Easily build applications that support realtime data, internationalization, etc.

About these docs


These docs are here to guide you through building a scalable Mojo application. Some of the examples used are intentionally inconsistent since there is no real right or wrong way to build mojo applications. There are many different styles, pick whatever flavor suites your needs.

A lot of the concepts, and examples used in these docs are designed through trail-and-error developing applications at ClassDojo, and other projects. Everything from architecture, API's, practices, to testing, have all been optimized for developer workflow. We hope that you find these docs useful when developing Mojo based, and even non-Mojo based applications.

The examples provided in these docs are fully editable, and runnable. The examples also automatically resolve any NPM modules using browserify CDN, so you can load any remote NPM repository you want.


Installation


Starter Kit

The best way to start using MojoJS is to download the starter kit. Before you begin, make sure you have NodeJS installed.

Once you've downloaded the starter kit, simply double-click the server file to start running your application, then open up http://localhost:8085 in your browser.

If you're comfortable with terminal, you can also run npm install; npm start in the application directory.

Below are a list of available commands you can run for the starter kit.

npm install

Installs all dependencies for the starter kit

npm start

starts the development server on port 8085

npm run build

bundles your application into one script

npm run hotswap

runs the hotswap server on port 8090. This script automatically reloads your browser if any file changes locally.

make test

Runs the unit tests

Example:

make test ONLY=messages REPORTER=list # run only messages tests with the list reporter

make test-watch

Runs the unit tests, and re-run them whenever a file changes

Example:

make test-watch ONLY=messages REPORTER=list # run only messages tests with the list reporter

Pre-bundled package

The easiest way to start playing around with MojoJS is to first download the pre-bundled version which which contains the views, models, template engine, and HTTP router plugins.

Once you've downloaded the pre-bundled version, head over to the /examples directory and open any-one of them in your browser to start tinkering around.

You can also checkout the mojo docs for additional information on how to use the pre-bundled package.


Examples


Below is a list of examples, and open source projects using MojoJS.

TodoMVC Example

Based on the TodoMVC project. This example demonstrates how to build applications using views, models, routes, and local storage for persistence.

mojojs.com

MojoJS main website. Demonstrates how to run MojoJS on the backend (NodeJS), along with the front-end.

classdojo.com

Uses Mojo throughout the entire stack, both server-side, and client-side.

Reader Example

Queries articles from various sources, and displays them within the application using Diffbot.