HTML and Javascript can co-exist using EJS

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:

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:

<%= %>: 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:

  • 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!

JS Dev