Build a real application with node.js

We’ve seen in a previous article an introduction to node.js. However if you’ve read that article, you probably thought “what the heck will I do that ? My code won’t be readable”.

And I agree. That’s not readable and it’ll quickly become impossible to maintain on big applications.

Let’s see how we can begin to solve that with connect and express.

Npm, rubygems but in javascript

In order to use the required libraries, we’ll one of the node’s packages managers, npm.

Installation is rather simple :

curl http://npmjs.org/install.sh | sudo sh
Depending of your installation of node (sudo or not), you might not need the sudo here.

Connect, rack but in javascript

Connect is the equivalent of rack for node. Applications can go around it as middlewares, allowing us to manipulate the application at any level.

Install Connect

Let’s install Connect ! For that, we’ll use npm.

npm install connect

And let’s roll !

Use Connect

The standard Hello World of Connect, based from the documentation is the following :

var Connect = require('connect');
var server = Connect.createServer(function(req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World');
});

server.listen(3000);

We don’t even manage the current uri (we’d need for that, to do a if. I don’t advise for it). But we can quite easily sent text content. We’ve just created our first middleware.

Express, sinatra but in javascript

With ruby, Sinatra allows us to create small and lightweight applications easily. Express does just the same.

Install Express

Let’s continue with npm.

npm install express

Who said computers are complicated ? ;)

Use Express

Right here, node becomes really interesting. With Express, we will finally start to create maintanables applications. Here’s our Hello World with Express :

var app = express.createServer();
app.get('/', function(req, res){
    res.send('Hello World');
});
app.listen(3000);

We define a route on the / uri, which will give us the content “Hello World”. Any other URI will give us a 404.

Of course we can define as many URIs as we want with the get/post/put/delete methods.

Template files

One problem remains : we define the content directly in the javascript. That’s not cool and we’d want to have some templating.

By default, Express uses haml to manage the views. We’ll create a views folder with two files :

layout.haml

That file will be automatically included as our application’s layout. Add it your design.

!!!
%html
  %head
    %title Bonjour tout le monde (that's hello world in French)
  %body
    = body

index.haml

That’s our index page’s file.

%h1
  Hello World !

Then in our javascript file, let’s replace the get method to display our index file.

app.get('/', function(req, res){
    res.render('index.haml');
});

Restart your server, reload the page and admire your beautiful template parsed in html and displayed !

Static files

Now we can display our templates as we wich, we only need to add a bit of style to the page. For that, we’ll add a static CSS file.

Express manages them natively. Any file located in the directory we’ll specify and which doesn’t correspond to an already defined route will then be displayed. Let’s configure it. Before the app.listen(300). aadd the following line :

app.use(express.staticProvider(__dirname + '/public'));

Then we tell Express to use the /public folder to display the static files. Create the file /public/style.css and include it in our layout :

%head
  %title Testing
  %link{rel: 'stylesheet', href: '/style.css' }

You just have to add some style to your CSS.

Conclusion

Because of it’s relatively youth, node still evolves quite quickly. And Express is a proof of that. Several month ago, build a big application only with node was something we couldn’t even think of.

Today, even if Express offers only a quite low layer, it already allows to program way better applications than with a raw node.

Node still has a lot of surprises for us. The three coming years will be very exciting there.