Micro is a micro framework for Node.JS and Spectrum is a templating language that aims to allow rich templates that can be rendered on both the server and the client. This tutorial covers creating a simple web application in Micro and Spectrum. It assumes you have Node installed and working (the author is using version 0.2.5 at the time of writing) - you can check this by running "node --version".
The simplest way to set up a development environment is using NPM. Follow the instructions for setting up NPM - I would recommend "Option 3: Customize npm to your heart's content" to avoid interfering with things installed for all users on your system. Once you have NPM installed, run:
npm install proton micro spectrumThe Proton package is included as it contains the command for running web applications built with Micro (also called "proton").
Create a folder to contain your web application and create a lib directory within it. This will contain JavaScript modules, including the one for your web application. Within the lib folder, create a file called webapp.js containing the following:
var micro = require('micro');
var WebApp = exports.WebApp = micro.webapp(),
get = WebApp.get;
get('/', function (request, response) {
response.ok('text/html');
return 'hello, world!';
});proton
This starts the web application on port 8000. To view your new webapp, go to http://localhost:8000/. To change the port, as well as other options, see "proton --help".
The code for the web application should be fairly self explanitory. Firstly, we load in the micro module and then we use the micro.webapp factory to create a new web app class, which is exported as the WebApp property in the module's namespace. We then make a call to the get function, which adds a handler to the class for the URL path "/", which is invoked for GET requests. The handler immediately calls the ok method on the response to indicate that the status is "200 OK" and that the content-type is "text/html". The return value is then used as the body of the response.
To add a view to our web application, we are going to use the Spectrum library, but first we need to introduce a couple of features. Firstly, methods can be added to the WebApp class in the normal way by adding functions to the prototype:
WebApp.prototype.init = function () {
this.view = new spectrum.Renderer(__dirname + '/../views');
};
In this example we are using the init method, which is called when an instance of this web application is created, to create a Spectrum renderer object to use as the view. We pass the views directory that lives next to the lib directory that our code is in. This is a typical pattern for adding a view to the web application instance.
Next we need to introduce something that takes a little getting your head around. Spectrum performs operations like loading in templates asynchronously to ensure that your templates can work just as well in the browser as in Node. When you ask Spectrum to render a template, which includes loading the template, it returns a promise object that is resolved when the template is rendered. The type of promise is that offered by Kris Zyp's excellent Promised-IO library, which provides a then method to add a callback to be ran when the promise is resolved. Putting this all together, we can change our handler to:
get('/', function (request, response) {
return this.view.render('/index.spv', {}).then(function (output) {
response.ok('text/html');
return output;
});
});
This causes the template /index.spv (relative to our views folder) to be rendered when the user issues a GET request for "/". To make this work, we need two template files:
views/base.spv<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title><% this.pageTitle() %></title>
<% this.head() %>
</head>
<body>
<% next(this) %>
</body>
</html>
<~method head></~method>
<~method pageTitle></~method>
views/index.spv<~method pageTitle>Hello, World!</~method>
<p>
Hello, World!
</p>