Home › Posts tagged expressJs
Blog Archives

Backbonejs tutorial

Posted on August 24, 2012 by admin — No Comments ↓

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. I’ve used THIS project as the base. It provides the framework for a basic nodejs-express-twitterbootstrap-jade application but that’s just optional. I have also added a single page version of the code in the repository HERE. This will work equally well in a single page html with required scripts. On top it, i’ve added backbonejs and underscorejs libraries and I was good to go.

The process being followed is something like this :
1. Show button
2. attach handlers
3. invoke action on user input(after button click)
4. show the user input on page… easy peasy

Edit the ‘views/index.jade’ file to add a button and an ‘ul’(list) element.

Now create a new .js file in ‘public/js/main.js’ and include it in ‘views/index.jade’ so … Read the rest

Tagged with: , , , ,
Posted in Nodejs, Technical, Tutorials

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

Posted on April 1, 2012 by admin — 9 Comments ↓

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’ … Read the rest

Tagged with: , , , , , ,
Posted in NodeBlox, Nodejs, Projects, Technical, Tutorials

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

Posted on February 27, 2012 by admin — 7 Comments ↓

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.

...// some code...
app.set('view options', {layout : false});
...//some more code...

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 … Read the rest

Tagged with: , , , , ,
Posted in NodeBlox, Nodejs, Technical, Tutorials

Node.js(Part-3) Jade + Bootstrap

Posted on January 27, 2012 by admin — 10 Comments ↓

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 … Read the rest

Tagged with: , , , , ,
Posted in NodeBlox, Nodejs, Projects, Technical, Tutorials

Node.js(Part-2) Application Layout

Posted on January 8, 2012 by admin — 3 Comments ↓

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).

var express = require('express');

After this we create a server by issuing the following statement

var app = module.exports = express.createServer();

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

Tagged with: , , ,
Posted in NodeBlox, Nodejs, Technical, Tutorials

Node.js(Part -1) : Getting started

Posted on December 22, 2011 by admin — 2 Comments ↓

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 :P .

https://github.com/ric03uec/nodejsTest

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

1. Basic design … Read the rest

Tagged with: , , ,
Posted in NodeBlox, Nodejs, Technical, Tutorials