Learning Node.js & Express (4)

Hiya! It is wonderful to be back with you again today.

In our previous meeting, I talked about hooking Local Library up with a MongoDB database, I mentioned a few tips that helped me avoid the pitfalls during the configuration of the database. I also talked about models, routes and controllers and explained their relative duties as far as our project is concerned.

A quick reminder that this series is based on my learnings from MDN.

Today, I will be talking to us about "Displaying the Local Library Data", there will be two main talking points:

• Asynchronous Flow Using the 'Async' Module
• Templates

Let's get to it then!

Asynchronous Flow Using the 'Async' Module
Due to the asynchronous nature of our requests for data from the database, we need to be able to control the flow of the data. Node.js provides the 'async' module for this reason. Three important methods of the async module are 'async.parallel', 'async.series' and 'async.waterfall'.

• async.parallel is used when requests must be made in parallel.

• async.series is used to handle requests that must be made in series and each subsequent request is not dependent on the previous request's result. So, in a way, this does work like async.parallel.

• async.waterfall handles requests that must be made in series and where the next request is dependent on the result of the current request.

Templates
A template is a text file defining the structure or layout of an output file, with placeholders used to represent where data will be inserted when the template is rendered.

It is worthy to note that different template languages use different approaches for defining the layout and marking placeholders for data in the template.

• Some use HTML to define the layout
• Some use markup format that can be compiled to HTML (e.g pug)

Pug is a clean and white-space sensitive template language. It reminded me a bit of Python at first glance. Pug has some attributes that will help one create amazing pages, the drawback, however, is that the error messages generated are not the most helpful, plus its white-space sensitivity is very important to remember when creating markup with it.

Some features of Pug

• Element attributes are defined in parentheses after their associated element. Inside the parentheses, the attributes are defined in the comma-separated list of pairs of attribute name and attribute values.

• If a tag is followed by the equals sign, the following text is treated as a JavaScript expression (read variable).

• You can also concatenate variables with plain text in the template. The plain text has to be in quotes.
  e.g p='Evaluated expression: ' + title
  title above is a variable.

• You can also extend templates. In a large site where you have different pages, you are bound to have, at least, the starter template of any HTML file - the head section - in all the pages. A base template can be defined to hold the boilerplate markup and on the other pages, the extends keyword is used to reference this base template.
  See here for more details on templates.

Now, let us see the improvements the async module and templates have brought to the Local Library project.

• The first template created was the layout.pug file, this file represents our base template for the Local Library project. The design for the local library user interface is such that it has a sidebar for navigation and because this is expected to be seen in all the different pages, we place the markup in layout.pug. We use Bootstrap 3.3.7 for styling in this project
  For cognisance, the pages that will be seen in the Local Library project include
  Book, Author, Book instance (copies of books), Genre.
  On the homepage of the project, we show a list of all records and the count for each of them.

• We update the bookController.js file to return the count of each of our records using the countDocument method provided by mongoose. We use the async.parallel method to handle the request to get the data from our database. The models for the other resources are first imported into the bookController.js file so that their data can be accessed.

• We update the view (index.pug) with dynamic content generated after the results are received from the controller. The snapshot below shows this process.

Here's what our Local Library looks like for now:

P.S Content for the other pages will be generated later in subsequent articles.

Thank you for joining me today, I do hope you learnt a thing or two.

Happy Coding!!