DEV Community

loading...

Developing SSG using Node: ES6

Kiran Chauhan
I design software with and for people.
・4 min read

This is the fifth article in series of Developing SSG using Node.

Before we create couple of more programs in Node and started to implement SSG, I want you to show you couple of new syntax that we are going to use while developing Node program and these new syntax is the part of ES6 JavaScript standard. So, in future you might also use this syntax while developing program in JavaScript for browser as well.

Let me open the previous hello-var.js program again to edit -

// file name: hello-var.js
const author = "Kiran";

console.log("Hello, " + author);

You know that I have used console.log() method and concatenating the string Hello, with constant author. We know that is a JavaScript and newer version of JavaScript called ES6 support something called string interpolation. In which thing string concatenation with + is replaced by,

console.log(`Hello, ${author}`);

The result you will get from both console.log() is identical. But, the last one is simple to use. Just starts the string with single back-tick symbol and end with it. Between these back-ticks you can use as many variables/constants as you want without stopping again writing this back-tick that we normally do while using + and quotes. You just have remember that, only those variables are going to be replaced by its values, which are written within ${}. If you don't write the variable with ${}, then it will print it as string. So, let's put the newly updated notation within our existing hello-var.js program and show you the output.

// file name: hello-var.js
const author = "Kiran";

console.log("Hello, " + author);

console.log(`Hello, ${author}`);

console.log(`Hello, author);

And if I run this program,

$ node hello-var.js
Hello, Kiran
Hello, Kiran
Hello, author

So, we get the output based on what we have written in code.

Looks like we are also learning little ES6 also! Let's learn one more syntax called arrow function. Let's create a new program called person-details.js and open in the text editor to write the following code inside of it -

// file name: person-details.js
let getFullName = function(firstName, lastName) {
    return `${firstName} ${lastName}`;
}

So, the getFullName is a function that will take firstName, lastName and return the full name by inserting space between them. Similarly, I am going to add one more function called getAge() as,

// file name: person-details.js
let getFullName = function(firstName, lastName) {
    return `${firstName} ${lastName}`;
}

let getAge = function(year) {
    return `${year} years old!`;
}

And this function returns how old you are in human readable form! Finally I am going to add sample call to run this function by adding -

// file name: person-details.js
let getFullName = function(firstName, lastName) {
    return `${firstName} ${lastName}`;
}

let getAge = function(year) {
    return `${year} years old!`;
}

let fullName = getName("Kiran", "Chauhan");
let age = getAge(26);

console.log(`Hi ${fullName}, you are ${age}`);

And running this program will produce the output as,

$ node person-details.js
Hi Kiran Chauhan, you are 26 year old!

Also have you notice, I have used let keyword instead of var to define a block level variables. Now, let's use the arrow function notation by updating this program. Let's first remove the function keyword from both functions as,

// file name: person-details.js
let getFullName = (firstName, lastName) {
    return `${firstName} ${lastName}`;
}

let getAge = (year) {
    return `${year} years old!`;
}

let fullName = getName("Kiran", "Chauhan");
let age = getAge(26);

console.log(`Hi ${fullName}, you are ${age}`);

And then add the arrow or => after the parameters and before the opening curly brace as,

// file name: person-details.js
let getFullName = (firstName, lastName) => {
    return `${firstName} ${lastName}`;
}

let getAge = (year) => {
    return `${year} years old!`;
}

let fullName = getName("Kiran", "Chauhan");
let age = getAge(26);

console.log(`Hi ${fullName}, you are ${age}`);

That's it! This is the ES6 way to define a function. How easy it is?

That's it! This is an arrow function notation for functions! How easy it is?

And confirming the output as,

$ node row-address
Hi Kiran Chauhan, you are 26 years old!

arrow function is the new way to write the function in JavaScript and it is always good to learn new syntax for the sake of future support and fear of deprecation. But, that is not the only reason why I mentioned these new syntax. I mentioned these because Node use and Node developers use these syntax. So, in future if you stuck and try to find the solution on Internet you will get the code which use these syntax and you know what it means!

One more thing about arrow function, If you are writing a standalone function as,

function getFullName(firstName, lastName) {
    return `${firstName} ${lastName}`;
}

Then you can't use the arrow notation with it unless you redefine this function as variable like we did in our program.

Enough basics, it is time to do some practical! And as I pointed out earlier that in session we are going to build a Static Site Generator or SSG. For the sake of simplicity let's call it, bajana. So, we are going to build bajana, a static site generator. Let's me give first a brief introduction to SSG, in case if you are not familiar with it.

A static site generator is a program that produce a pure HTML web site that can run on any server that support HTML web pages to serve. Although, it produce HTML, but you don't have to write the HTML. You will write your Blog in simple language such as Markdown and focus on only writing. It is the SGG's responsibility to do other works such as converting markdown into HTML, creating layout for your page and generating the HTML page based on layout for you. You might have heard of Jeykll or Hexo or Hugo. They all are static site generator and we are going to create one, but not with that much functionalities.

So, let's first create the folder for bajana.

$ mdkir bajana
$ cd bajana

Discussion (0)