Backbonejs tutorial

So I stumbled around for some time before figuring out the ‘hello world’ tutorial for backbonejs but since it took me more time than expected, I decided to write one myself. The docs are great but are too mind-boggling for a newbie, especially ones who rarely venture into client side frameworks. As I mentioned, this tutorial wont show you much apart from getting a very very basic backbonejs example working. The code is available on github HERE.

Read more

Share Comments

Node.js(Part-5)Login-Logout Flow

In this tutorial, I will be making a simple authentication flow using the technologies that we have already discussed. By the end  of this tutorial, you would have made a flow similar to the one indicated by the diagram below. This will also help you see how you can make your views more intelligent, readable and easy to build.

In the PREVIOUS POST we build the application views. To give some intelligence to those views

we are going to use some of the amazing features of JADE. I recommend you go through the

documentation of JADE to get an idea how decision making can be done in the views only.

This will be required, for example, while rendering a ‘Logout’ button. This button should only be shown if the user is logged in. So, instead of checking on each render call, we will put the logic to check and then render the appropriate view in the views(topbar.jade, in this case) only.

Lets go one step at a time here. We are assuming here that the user credentials are already present in the database. If you are referring to the project’s CODE, then just run the file named ‘insertUser’ in the ‘/scripts’ folder. This will insert an user in db with username : test1 and password : test1.

For this example, this can even be hard coded.

Step 1 : User Authentication

This step will involve a simple form POST which sends user credentials to the server where the user login and password can be authenticated the usual way. We will be using mongodb for storing user information and the stored data will be used to authentication.  The following snippet shows the route for handling login POST request. This is submitted when the user enters the login and password in form provided on the topbar. We set a handler on the ‘Login’ button so that basic input validation can be done on the values that the user has entered.  The following code will POST the data to server.

If the credentials are incorrect, then simply redirect the user back to home page.

On the server side, we do a simple user validation and return the appropriate response.

Read more

Share Comments

Node.js(Part-4) Some more Jade + Bootstrap

Welcome to yet another tutorial in the series. HERE is a reference to the previous tutorial in case you might want to revisit anything there. This tutorial will guide you through some of the advanced features of Jade and Bootstrap. This will also give you a brief idea as to how your views/html code should be structured.

First things first. Right now we have all the view code in ‘views/index.jade’  that is inserted into the ‘views/layout.jade’ and then rendered. This is only feasible(and practical) if the views are less in number and hence easily manageable- a situation you are very less likely to end up in. Ideally you would want to have separate components for each module/functionality and have their separate views. So we will refactor this code first and move each functionality in a separate places(files).

First, Tell express that you don’t want to use layouts anymore.

In the app.js, add the following line to the configuration.

now this will make sure that you are responsible for rendering each and every view(page) of your application and linking them to one another. To begin with, you have already specified which directory is going to be your views directory in ‘app.js’ by mentioning the following line

express will, by default, look for the file named ‘index.jade’ in this directory(/views) as the first lookup.  We will put our javascript and stylesheet includes in it. The path that is specified here will be with respect to “public” folder from document root. So, for example, if you want to include a javascript file called ‘test.js’ which is in folder ‘public/js/test.js’ then you would specify only the path from ‘public’ folder, i.e. “link(href=”/js/test.js”)”. Following is a snipped of ‘views/index.jade’ that shows our script includes.

Read more

Share Comments

Node.js(Part-3) Jade + Bootstrap

Moving on with the next part of this series of tutorial, today I will give an introduction about the Jade template engine for Nodejs and Bootstrap tookit provided by twitter. In the PREVIOUS post, I have described about the basic layout of a nodejs application based on express engine and we have till now run a very basic(and mostly useless) server. By the end of this tutorial, we would’ve made a nice looking container that will hold the various parts of our application.

What I have in mind is basically something like following diagram.

This is the most simplistic layout and we will work with it for some time before changing it.

Lets start with Jade first.

Jade :

According to Jade’s github page : Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node.

For an extensive list of jade features, visit the jade github page.

What jade does basically is clean up the HTML content of the page and hence improves the readability.  It provides a lot of functionalities on top of that like ‘partials’ and easily mix javascript and HTML code. We will see how that happens in the course of making the design just described.

So we dont use Jade instead of  plain old HTML. How does that help? Well, it helps people like me who get intimidated easily by all the HTML code they see and who also want to add lots of javascript to it. Plus, as just mentioned, while doing that, the readability of the page is maintained.

For example, if we had a simple username form written in html, it would look something like following.

Now if Jade were used in place of this, the same form would look something like following.

Read more

Share Comments

Node.js(Part-2) Application Layout

Continuing from the last post  , this tutorial will give a short description of Jade, using partials with Jade and Twitter Bootstrap.

If you have looked at the directory structure of the application that express has automatically created, you will notice a structure similar to something like this:


|—- app.js

|—- package.json

|—- public

|        |—- stylesheets

|                |—- style.css

|—- routes

|       |—- index.js

|—- views

|       |—- index.jade

|       |—- layout.jade

|—- node_modules/…

1. app.js :

the main configuration and boot file for the application. This will describe the global includes, the server configurations(deployment/test/production, etc), the available routes and any other data that is required by the application for initial bootstrap. The current app.js file only includes ‘express’ (huh).

After this we create a server by issuing the following statement

This creates a new server object for us and also makes it available outside this file by exporting it.

Read more

Share Comments

Node.js(Part -1) : Getting started

As promised, I now begin the series of tutorials on the amazing new technology called Node.js which I have started working on some time back. Though I don’t promise that the methods I suggest are the best way to achieve the required goal, but I can guarantee that they work.

To start with, I assume that the reader at least knows what node.js is about. To quote the official node website Node.js – Node is an “Event-driven I/O server-side JavaScript environment based on V8.”

There… thats it. In its entirety, node has a minimalistic core which provides it the amazing flexibility to be extended. There are many amazing features in node that you can read about in its official documentation.

Before you proceed, I strongly recommend you read THIS tutorial and TRY all the examples given in it to get the idea of how node works with asynchronous callbacks. Though it would be better if you did the whole thing step by step yourself, below is the link to my github profile where you can download the completed example 😛 .

In this series, I will be emphasizing on building a full fledged web-application with following features:

  1. Basic design of an application

  2. Creating an MVC architecture using Express framework

  3. Using Twitter Bootstrap to get better looking widgets with JADE templating engine

  4. User authentication, both custom and using services like twitter, facebook, google etc.

  5. Sending emails from the node application

… and anything I think I found some difficulty looking up and is worth mentioning.

Without further ado, lets get to it.

To proceed further you should have Node and NPM (Node Package Manager) installed. All the examples have been tested on Ubuntu 11.10.

– Using npm, install expressjs globally by issuing following command

After this is installed, you can create an example application called ‘myblog’ by just punching in following command

Express will create a directory called ‘myblog’ and a bunch of files in it. You dont need to know what exactly those are there for right now. I will be explaining that later.

Now navigate into the ‘myblog’ folder and type in

You will find some error saying – ‘Cannot find module ‘express’. Right. But you just did create this very folder by using express only. Turns out that this application requires express locally and hence you have to install express locally for this module also. This is true for any node module. The dependencies have to be satisfied locally.  Ok, so what do you do now? Take a look at ‘package.json’ file.

This file contains all the dependencies that your application requires and it will have two entries – express and jade. Now just type in:

Read more

Share Comments