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?
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.
<%# %>: 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!