Wednesday, November 11, 2015

Creating a Node.js web application from scratch Part 2

This is a continuation of the blog post entry Creating a Node.js web application from scratch Part 1. In that previous article, I told you how to create a simple Node.js application and how to do the routing. Now, let's work more on the front-end.

Step 3 - Add Jade Views

Now, you will add Jade views to your application. Jade is an HTML templating library that helps you create HTML views with minimal effort. First you need to tell our application where to find the Jade views. By convention, Jade templates are created in the views directory. And that's what you tell your application code in app.js.

Next, let's add the index.jade file. Jade is capable of parsing HTML tags. So you can use plain HTML in a Jade file.

This means that you need to tell your routing code in index.js to render index.jade for the root path. 

Next, you need to add the Jade library as a dependency for your app.

Now you can run npm install to install the new dependency, then npm start to start the app and test the result.

Step 4 - Make It Pretty!

Now, it's time to make your app look fancy! You need to tell the application where to find the stylesheets. Stylesheets, Javascript files, static HTML files - i.e. all static content goes in the public directory by convention. So, tell your application to use the /public directory to look for static files.

Next, add the style.css file. This just paints the application background gray.

For kicks, update the Jade file to use actual Jade templating code. As you can see, the link tag is used to include the stylesheet.

Now, restart your application and hit http://localhost:3000 to test out the result.

And there you go! It's gray! And we're using a real Jade template. This is just the beginning. You can do many many things with your application - connect it to the database, create end-to-end use-case flows and what not. But with these blog entries, hopefully you've successfully launched your endeavors!

Happy coding! Cheers! 

Creating a Node.js web application from scratch Part 1

My team member, David and I submitted a web application for the Blumixathon. This was David's very first web application. He had many questions. To make things easier, I created step by step screenshots of the bare bones beginnings of our app and used them to explain the process to him. Like David, others could benefit from the step by step explaination.

We created our web application using Node.js, Express.js, Async, Jade, HTML, CSS, Bootstrap, Javascript, Cloudant NoSQL DB etc. 

So here is the step by step explaination.

Step 1 - Create Basic App

This code sample shows a very simple application server written using Express.js. The application server, when started, listens for HTTP requests at port 3000. When you access the application using a browser, it shoudl return the message 'Hello Prachi'.

You also need to write a package.json file. This is the configuration file for your Node.js application. It allows you to configure details such as the application name, version, description, how to start the application, the Node.js libraries that your application uses, the Node.js engine to use and so on.

First, run npm install to install the dependencies that your application needs. Next, run npm start to start the application.

Hitting the URL http://localhost:3000 in a browser, shows you the very first resopnse from your application.

Step 2 - Move Routing to Routes Directory

The next step is to move the routing to index.js and use the Express.js Router. Instead of telling your server what to do when a request for a certain path comes in, you tell your server where to find that information, i.e. index.js. Generally, the convention is to keep the routing files in the routes folder

At the moment, you only have one route. But you can add more as needed. To verify that the routing is working correctly and requests are being handled by Express.js, change the response message for the root path to 'Hello David!'.

Restart your application from command line and here's the result.

In the next blog post entry, I will show you how to add Jade views and CSS to your Node.js web application. Note that these blogs are meant to help you create a very basic web application - only the very basic requirements. For complex requirements, please refer to formal Node.js documentation.

Wednesday, November 4, 2015

Is flexbility really necessary?

An annoying feature in Git Scm is the ability to execute a task in multiple ways. For example, you can create a new branch using either of the two commands:

i. git branch <new-branch-name>
ii. git checkout -b <new-branch-name>

The second option gets executed more frequently as it involves creating a new branch and checking it out as well. The first option only creates a new branch.

Another similar example is the git pull command. The git pull command is equal to a git fetch + git merge. While this provides more flexibility, it often means that git pull gets executed more frequently than fetch + merge. 

It would be interesting to see examples of cases where one only needs to fetch changes, but not merge them or when one just needs to create a branch without checking it out.

Tuesday, November 3, 2015

Understanding Pylint Warnings

I have been fixing pylint errors for a new codebase and trying to understand what the pylint errors, warnings, refactor-suggestions and so on mean. If you run pylint for your Python programs, you might’ve encountered one of the following warnings:

Dangerous default value [] as argument
Dangerous default value {} as argument

I found an article that gave a simple example to explain why. I read their explanation and tried their examples.

>>> def foo(x=[]):
...         x.append(1)
...         print x
>>> foo()
>>> foo()
>>> foo()

>>> def foo(x=None):
...        if x is None:
...            x = []
...        x.append(1)
...        print x
>>> foo()
>>> foo()
>>> foo()

I still couldn’t understand what it meant. I re-read the explanation. And then it hit me. There are 2 factors responsible for this behavior:

  1. Python has mutable and immutable data types. Dictionaries, lists, sets, etc are mutable. Strings, floats, integers, booleans etc are immutable.
  2. Default arguments are instantiated as objects during function definition time

If you invoke a function without any argument when its default argument value is immutable, the default value itself does not get updated within the function. It’s immutable. And the same immutable value is used as a default argument every time you invoke the function without any argument.

If you invoke a function without any argument when the default argument value is mutable, the default value does get updated within the function as it is mutable and can be changed and the same default object is used every time you invoke the function without any argument.