Getting started

This guide will take you through making your first miso app, it is assumed that you know the basics of how to use nodejs and mithril.

Installation

To install miso, use npm:

npm install misojs -g

To create and run a miso app in a new directory:

miso -n myapp
cd myapp
miso run

You should now see something like:

Miso is listening at http://localhost:6476 in development mode

Open your browser at http://localhost:6476 and you will see the default miso screen

Hello world app

Create a new file hello.js in myapp/mvc like so:

var m = require('mithril'),
	miso = require('../server/miso.util.js'),
	sugartags = require('mithril.sugartags')(m);

var edit = module.exports.edit = {
	models: {
		hello: function(data){
			this.who = m.prop(data.who);
		}
	},
	controller: function(params) {
		var who = miso.getParam('hello_id', params);
		this.model = new edit.models.hello({who: who});
		return this;
	},
	view: function(ctrl) {
		with(sugartags) {
			return DIV("Hello " + ctrl.model.who());
		}
	}
};

Then open http://localhost:6476/hello/YOURNAME and you should see "Hello YOURNAME". Change the url to have your actual name instead of YOURNAME, you now know miso :)

Let us take a look at what each piece of the code is actually doing:

Includes

Summary: Mithril is the only required library when apps, but using other included libraries is very useful

var m = require('mithril'),
	miso = require('../server/miso.util.js'),
	sugartags = require('mithril.sugartags')(m);

Here we grab mithril, then miso utilities and sugar tags - technically speaking, we really only need mithril, but the other libraries are very useful as well as we will see.

Models

Summary: Use the automatic routing when you can, always put models on the 'models' attribute of your mvc file

var edit = module.exports.edit = {
	models: {
		hello: function(data){
			this.who = m.prop(data.who);
		}
	},

Here a few important things are going on:

• By placing our mvc object on module.exports.edit, automatic routing is applied by miso - you can read more about how the automatic routing works here.

• Placing our hello model on the models attribute of the object ensures that miso can figure out what your models are, and will create a persistence API automatically for you when the server starts up, so that you can save your models into the database.

Controller

Summary: DO NOT forget to 'return this;' in the controller, it is vital!

controller: function(params) {
	var who = miso.getParam('hello_id', params);
	this.model = new edit.models.hello({who: who});
	return this;
},

The controller uses miso.getParam to retreive the parameter - this is so that it can work seamlessly on both the server and client side. We create a new model, and very importantly return this ensures that miso can get access to the controller correctly.

View

Summary: Use sugartags to make the view look more like HTML

view: function(ctrl) {
	with(sugartags) {
		return DIV("Hello " + ctrl.model.who());
	}
}

The view is simply a javascript function that returns a structure. Here we use the sugartags library to render the DIV tag - this is strictly not required, but I find that people tend to understand the sugartags syntax better than pure mithril, as it looks a little more like HTML, though of course you could use standard mithril syntax if you prefer.

Next

You now have a complete hello world app, and understand the fundamentals of the structure of a miso mvc application.

We have only just scraped the surface of what miso is capable of, so next we recommend you read:

Creating a todo app