Today I am going to be going over what I believe to be the quickest way to make a working client-side for a full-stack application, EJS. I’ll be taking a look over what EJS actually is, how EJS works, and the benefits this package can bring to your next application. Let’s get started.
Addressing the problem:
Let’s say we want to iterate over HTML without frameworks/libraries — such as React or Angular — since we would have to set up individual components or deal with a MVC format.
Additionally we can’t return HTML from a JS file and we also can’t interact with HTMl itself when inserting script tags.
So what is the solution?
We could use EJS to replicate an HTML file and insert a for-loop to iterate over components directly in the HTML itself. So this way we can have all of our code condensed under one file and we’re able to not require any frameworks or additional packages that would slow down the application.
What is EJS?
EJS is an acronym that stands for Embedded Javascript, and allows for there to be html markup existing within Javascript. These files are known as EJS files, capable of not only rendering html onto a webpage but also having the ability to pass in data from the server-side and sharing that data among the html.
Basic EJS syntax:
Let’s take a look at the different syntax’s EJS utilizes and what each one does specifically.
<%= %>: Outputs global variables/methods.
<% %>: Javascript temperate literal syntax for conditionals and for-loops.
<%# %>: Provides comment tags for code.
<%_ %>: Whitespace removal for code.
<%- %>: Outputs local variables/methods.
Benefits of EJS:
So there are alot of benefits to working with EJS as a package to act as a structure to your client-side of your fullstack application. EJS is light-weight, and is able to allow for super quick debugging, not to mention the lack of numerous files taking up storage space. Additional benefits are listed below:
- You now are able to have JS- and HTML-syntax coexist in one file using EJS.
- You can pass data from the server-side directly into the client-side HTML.
- You can use Express to send data directly to the respective EJS file.
And That’s It!
EJS is capable of having both html and javascript coexist in one file — which save up space and debug time — and also having the ability to pass in data from the scope of express functions using the express.render method. Hopefully there was something learned from this article about EJS, providing the skills to hopefully create a light-weight client-side to a full-stack app.
