Create a Simple Responsive Website using Node, Express, Bootstrap and Jade - Part 1

If you know about NodeJS already, you can skip this section, and move to installing Node.

Let me give you a brief summary of what/why Node is. It just covers few scenarios, but Node is more deep and can do many other things.

Ryan Dahl’s creation…, Node is an event driven, asynchronous programming platform on the server side. NodeJS is the current web development platform. Web applications built using node will respond to events as opposed to traditional application development model like PHP. Node is written in JavaScript and uses Google’s V8 beast engine, also it uses so many open source libraries in C for OS level operations. Haa, so that’s it…? Today, we have this kind of event driven programming model already in traditional web platforms too, for example, popular ASP.NET right, but what gives Node an edge? Read below. It is excellent in below areas in additional traditional web applications.

Supports Push Based

Let me explain this with an example. Suppose you are working in a team where the lead will assign tasks to team members, every team member need to complete her/his tasks within a given period of time. So to know whether you are assigned any tasks, you would keep on poking your lead for that, but the best way is your lead telling you, “I will let you know when I assign a task to you”, a Push based solution.

Superb Candidate for Real Time Apps

Consider Weather updates, Stock quote updates. All these are supposed to be use cases for server pushing the data to the client. If the server is letting the client know whenever there is a change in the weather or stock quote, it would definitely be better than the client always poking the server to know them, saves a lot of network traffic and also, it is very real time.

Consider Day to Day Development Example

If you have ever written a file upload progress bar in web using traditional web platform, trust me it might not have been that elegant, because the client server web programming model is event driven programming of course, but it is a pull based model from client to server. For example, if the client would like to know how much percentage of the file is uploaded so that it can update its progress bar in the browser, client has to keep on poking the server to let the server know the client about the progress of file upload. Imagine if ten thousand clients are asking every time about this file upload status is definitely unnecessary traffic which can be saved if the platform is shifted to Node.

Today Social Networking Sites

Now the current web blogging platforms are real time based, the moment server sees any changes to data, it notifies the respective client. Push Model. For example, if a user is posting a comment on the blog site, the server will notify the recipient with the data immediately. LinkedIn is already on Node platform.

Single Programming Language from Front to End

You don’t need to learn multiple languages or hire staff for multiple languages for maintaining different layers. With Node, you can pretty much have JavaScript single language stack in all the layers of your web development. This also has a lot of scope for code re-usability.

Asynchronous Programming Model

Node makes the above push model possible by Asynchronous programming Model. It uses the JavaScript callback mechanism for achieving the asynchronous programming style. Node has a single event loop running all the time. Every time the event loop runs, it is called a tick. So each callback will register to a particular tick meaning within one cycle of event loop. When all the callbacks are executed, it will finish the event loop.

Installing Node

If you have already installed Node on your machine, you can skip this block and move to the next section.
Installing Node on Windows will not even take 3 minutes, but for Mac and linux, you got to do little bit of work. So I would suggest you please visit the NodeJS site and Windows guys, click on the green Install button on the site, it downloads the MSI for you. If you want to virus scan the software, you better do that, I do the virus scan with my semantic end point. Linux and Mac users click on the Downloads link and get the appropriate version suitable for you. To confirm if the Node is installed successfully, you can open command prompt in Windows and type Node press ENTER, it waits there for a couple of seconds and gives the Node prompt. It means you are good with the Node installation.

It is Not a Simple Hello World

We are not setting up a simple hello world page, it is a bit more than that. Let us not do the Hello world always. So in the following sections, I am going to introduce a bit on the technologies I have been using for the creation of the site. If there is any set up needed for them, we will do that as well. Let us get on to the ride.

Jade Templating

For the creation of our web site, I chose Jade templating, because it is the one of the templating engines of the node, very simple to understand and write. It needs very few key strokes to write templates, otherwise we have to wreck the key board to write the HTML on to the page meaning always type less than, greater than, forward slashes, painful... isn’t it?

Here is the tutorial for Jade templating, spend a couple of minutes on this site and admire the beauty.

We Are Using Bootstrap

Here comes the Responsive stuff, if our site has to work on desktop, mobiles and tablets, etc., we need to be doing our CSS design for each device, not a simple job. Don’t worry, experts have already taken care of this part. We have Twitter Bootstrap framework available for this, it is open source, available for download anytime here. You can download various controls from Bootstrap and start working on them.
I like the Cyborg theme, and I got the bootstrap CSS for Cyborg theme, I have used the same theme in my sample.

Node Express

Node Express is wonderful. It is a web application framework for Node platform. If you are curious to build web applications on Node platforms in order to get the benefits like Push model, light weight and web site speed, consider using Node Express. It is the middleware that contains lot of futures. So don’t worry about it too much for now, you don’t need to have complete knowledge of these technologies right away because we only need to know what we need to know for the scope of this article.

Our Web Site Design

I got a midnight flash and started a company by morning, became an entrepreneur. It is called City Router Hub . You know what we do, we provide internet for free, all over the world, wherever you are. I am just kidding. you know rest of what company does check on company web site. Here we have two pages, Home and About. Home is the landing page that describes our services, About page tells about us.

If you are interested, pay attention to the text, it is funny. I spent sometime on writing the funny stuff.

Here is how our About page looks like:

Read my next post. See Part 2.

CodeProject