What is EJS?

Konfinity
March 13,2021 - 6 min read
What is EJS?

In today’s blog we are going to talk about Embedded Javascript, commonly known as EJS. Basically, it is used in Nodejs while working in the Express framework. EJS works as a template engine that helps render Javascript code on the client-side.

However, before talking about EJS, we need to first understand the programming language, Javascript and also the Express framework. Also, if you already have a good knowledge of both of these technologies, you can skip these sections and directly proceed to the one where we discussed what is EJS?

In the following segments, we are going to first talk about Javascript and then proceed to understand the Express framework and then eventually move on to the main topic of our blog that is, what is EJS. Let’s begin our journey with Javascript.

Understanding Javascript

Brendan Eich invented Javascript in 1955. Back then, it was just designed to run on the browser and was popular as the client-side scripting language. Basically, it enhanced client-side functionality. However, Javascript has now diversified and can also be used on the server-side with the help of Nodejs, a framework used for server-side web development.

Over the years, Javascript has proved useful in a variety of domains. There are several Javascript frameworks beneficial in application development.

Javascript is used to develop stand-alone desktop applications. The framework popular for building standalone applications is Electron js. Another framework that is used by a huge number of developers is React. It is used to create dynamic web as well as mobile applications. There is an extension of the React framework, React native is dedicated to developing mobile applications only. This framework also supports virtual reality applications with the help of React vr. Apart from React, Angular is a Javascript framework, developed by Google used to make dynamic web applications. Express is also a Javasript framework about which we are going to talk in detail in our next segment. Apart from these frameworks, there is a Javascript library by the name of Tensor flow that is used to train machine learning models.

Now that we have understood the basic concept of Javascript, it’s time to proceed to get to the next subject, that is, Express, a Nodejs framework and get ahead in our journey of knowing EJS.

What is Express

Express is basically a web framework for Node JS. The framework brings efficiency and excellence in the entire process of developing an application. It is a debugging mechanism, template engines, handles HTTP request and encompasses within itself numerous features that aid application development. Let’s understand Express in Node JS in a more detailed manner.

A website dedicated to Express says that it is a fast, unopinionated and minimalist framework that delivers high performance and fast delivery. The framework has a couple of new features but makes sure that the features you are already familiar with don’t get lost with the advent of new ones. Express can be thought of as a layer of an additional and cool set of functionalities built on top of Node JS.

When we say that Express is a minimalistic framework, we mean that the philosophy followed is 'Less is more.' Also, doesn't come in the way of a developer's expression. Another word used to describe Express, is unopinionated. An unopinionated framework means that it doesn’t come with a defined set of rules which a developer has to follow. In Express, developers have the freedom to augment their project with innumerable possibilities and minimal restrictions and create codes with the help of varied components together. Developers can add middleware packages, structure the application into one or multiple files or use any directory structure. Express is an unopinionated framework and I always like to define this framework as- No stereotypes, expectations or judgements, at Express you express uninhibited!

Express provides a plethora of features but makes sure that there is not too much burden for beginners

More often than not, all other frameworks provide a robust set of features but are way too complicated for beginners. Express takes care that there is no excess of functions or unnecessary code as suggestion as Express is quite a flexible framework that allows developers to add features and functions only when they need to and not otherwise!

With this, we have covered and hopefully understood Javascript, the programming languages and Express, the framework briefly. This knowledge will help you get ahead in you understanding of EJS. If you have acquired enough knowledge of both these technologies, it’s a good time to get to the next step of our learning and read about EJS. Let’s get started!

What is EJS?

The following explanation of EJS will not only help you understand the basic concept but also help you use it in a basic application. First of all, we will understand what is EJS is and where exactly you might need to use it.

In this segment, we will understand Embedded Javascript, popularly known as EJS. It is used for embedding Javascript code inside HTML code. As part of our introductory definition, we mentioned EJS is primarily used with Express in node.js. It works as a template engine that basically helps render JavaScript code on the client-side. Let’s understand the concept of embedding Javascript code in HTML with the help of an example –

  • <h1>Variable name: WebDev </h1>

This code won’t work yet, because there is Javascript embedded in HTML code. In this particular example, we have to tell HTML that WebDev is a JavaScript code and it should be treated like one. If we don’t explicitly tell that this variable is a part of Javascript, the output will be plain HTML. This is where EJS comes into the picture. A typical EJS code looks like <%=%>In words, it is a less than sign followed by the percentage sign, there is space in which the JavaScript code can be written, after this Javascript code, there is again a percentage sign that is followed by the greater than sign. An example of this -

  • <%=10+15%>

The output of the code above, as expected, is 10. However, if EJS was not in the picture, the output from a regular HTML code will be simply, ‘10 + 15’.

In the first example, we looked at an example involving a variable, EJS can be used to add whatever variable we are passing from the server-side to the clients' side without rendering as HTML.

The code below displays an example of a server-side code:

  • app.get ("/", function(req, res){
  • res.render("project.ejs", {sampleVar: Javascript});
  • });

In the code above, the name of the variable, sampleVar is the name of our variable from the EJS file and Javascript is the value assigned to that variable. After adding the EJS brackets, if the previous HTML file is run, the JavaScript code gets rendered correctly. Let’s look at an example of the Javascript code embedded in HTML code.

  • <h1 >The name of the example variable:<%=sampleVar%></h1>

The output of this code is the value of sampleVar which is Javascript.

We have to keep in mind that that sampleVar is not a part of the HTML code but a Javascript variable. There are other examples of Javascript code also that can be rendered, for example,<%=exampleVar.toUpperCase() %> will also be rendered correctly. Other things that can be rendered successfully are control flow statements like if statements, loops among others. Let’s look at an example of an EJS if Statement.

We will use the sampleVar from previous example and check if the value of the variable is JavaScript and prints a message if the condition turns out to be true. The code in the EJS file will look like this -

  • <% if (sampleVar === "JavaScript") {%>
  • <h1> Correct Decision </h1>
  • <%} %>

The code above will add only h1 contents to the HTML if the condition turns out to be true. The point to be considered here is that all the Javascript code is wrapped in the EJS brackets.

Another example of an EJS code can involve loops. For instance, we can count the numbers from 1 to 10 in plain JavaScript like this -

  • For (var k = 1; k < 10; k++) {
  • console.log(k);
  • }

The code above is a simple Javascript code that will output all numbers right from one to ten. This same code can be written in EJS, that is to enclose the Javascript code inside the EJS brackets. The same code in EJS will look like -

  • <% for (var k = 1; k <= 10; k++) {%>
  • <%= k %> <%# The output will be all numbers from 1 to 10 %>
  • <% } %>

The code above is an example of EJS code where comments are written between the <%# %> brackets. This loop can also be used to run through a post array from the server-side and send the contents to the HTML through the EJS file.

This is the end of our blog post where we explained the basic concept and utility of EJS as your templating engine while working with express in node.js. If you still have any doubts or queries, please feel free to enhance your learning with us.

Also, if you wish to start your journey in web development, we have a professional web development course that will address all your concerns regarding web development and help you ace your skills. Make sure you check out a course that can be a stepping stone to your dream of becoming a proficient web developer.

Out of the many available, the course that would be most suitable is Konfinity’s Web Development Course The course is well-researched and is one of the most beneficial training courses out there. It is developed by experts from IIT DELHI in collaboration with tech companies like Google, Amazon and Microsoft. It is trusted by students and graduates from IIT, DTU, NIT, Amity, DU and more.

We encourage technocrats like you to join the course to master the art of creating web applications by learning the latest technologies, right from basic HTML to advanced and dynamic websites, in just a span of a few months.

Konfinity is a great platform for launching a lucrative tech career. We will get you started by helping you get placed in a high paying job. One amazing thing about our course is that no prior coding experience is required to take up our courses. Start your free trial here.