I recently started learning nodejs and now i am very confused between what to use for my web app, html or ejs (Express). Ejs uses the Express module whereas the .html uses the HTML module. My first question is, what are the differences between them if exact websites can be made from both. The second question, that extends from my first question is what should one use for a website that is to be uploaded to the cloud. .html or .ejs. I believe .ejs is dynamic (if statements can be used inside the file) therefore .ejs should be used. But, on the other hand, its the first time I am hearing this .ejs name, and I am uncertain as to what future it holds, whereas HTML has a build up name, and most developers and the market knows what it is.
Thanks in advance.
Ejs is a template engine.
It makes possible for you to load data from your application in the view.
After the template is rendered, it generates a .html file for the browser.
Answer 1: index.ejs allows you to execute JavaScript inside html element. For example: loop or perform arithmetic operation. index.html can't include JavaScript inside its elements.
Answer 2: of course, index.ejs will come to my mind first. If you learn php, it is the same. php developers use index.php instead of index.html
Answer 3: you don't have to worry, there are plenty of supports from JavaScript community today.
Related
I have an .html file and a corresponding .js file (using Bootstrap) I need to deploy this to Heroku.
I'm really trying to avoid having to rework this entire project, I need more than just bootstrap styling. This project pulls data through an API, and populates based on the data pulled. Input is also needed from user to update the backend through API...
I've tried to find examples of how to accomplish just pulling in html/js into nodeJS/expressJS... but it seems most examples are just to use Bootstrap.css for styling, or there's no actual UI interaction coded in the example.
Any links or input will be greatly appreciated.
If you want to render a html file prepared in the server side. You need a view engine like ejs or pug. You can pass data into the html page. Another way of doing the same thing is a framework called NextJs or NuxtJs but you need to know React or Vue.
You can add bootstrap.css into the public folder and express.static will handle the problem. Or you can use CDN links too.
Then you can add the url of bootstrap.css into the html head.
https://expressjs.com/en/guide/using-template-engines.html
https://expressjs.com/en/starter/static-files.html
I am new in Node.JS stack. I saw a big number of developers are using pug template engine (Express JS) instead of regular HTML.
If anyone of you have used pug can you please tell me the
major benefits of using pug over HTML view technology?
First, let's discuss the Pug framework. Pug framework is a highly flexible framework which supports the generation of HTML content dynamically for almost any sort of data. You can write the Pug template to create -
User Profiles, List of store items, Templated HTML documents, Conditional blocks in the web pages
We can render and create the conditional blocks and iterative structures to produce the dynamic HTML web content instead of hardcoding everything.
Node.js runtime supports Pug templates by default ㅡ the template engine is Jade by default, however, Jade has been renamed to Pug. You can continue using Jade engine, but it is recommended to use Pug templates. Pug templated files are written as below.
doctype html
html
head
title My Page
body
h1 Heading
p My paragraph here.
This will get translated to the following HTML content on demand.
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Heading</h1>
<p>My paragraph here.</p>
</body>
</html>
Fast answer: HTML.
Why? Because it is processed only by the browser, so you are removing one layer of your stack (compiling PUG). It will make your application somewhat lighter.
But PUG is an awesome tool. It offers nice maintainability for your code and a strict code style. It is useful when working with more people and it feels great.
Also, PUG increases my code efficiency by 20% in SublimeText.
HTML is client side rendering. PUG is server side rendering. When you use SPA with HTML the whole shit has to be loaded with PUG only the page has to be rendered. So it depends on what you want. With SPA after the side is loaded only data is transfered from server, no HTML pages. Big websites still use server site rendering. Geeks like Angular etc. to do client site rendering.
It is not accurate to say that one language is "better" than the other in general. Both PUG and HTML can be used to render data to the view page in a Node.JS (Express) application, and the choice of which one to use will depend on your specific needs and preferences.
PUG is a template engine that is designed to be easy to read and write, with a focus on simplicity and expressiveness, while HTML is the standard markup language for creating web pages. Both languages have their own unique features and syntax, and either one can be a good choice depending on the requirements of your project.
For full article refer to https://www.ubercompute.com/blog/benefits-of-using-pug-template-over-traditional-html/
I'm quite new to node.js, having migrated from php... So in php you can create say a file called headcode.php and you can put tour navbar there and anything else that needs to be at the beginning or in the head of all your pages, then you can go ahead and include it in all pages on your site.
My question is, how do we do this in node.js? I tried fs.readFile but it only showed html with no css
And i noticed i can't type node.js in an html file, neither can i type html in a .js file without doing res.write for each line of html which is rather tedious.
How can i implement this php ideology of "headcode.php" into node.js?
I reccomend using the express framework (expressjs.com). There are a lot of good and free tutorials on how to use it. And with the use of a Templating Engine like EJS, Handlebars or PUG you can use partitials and even a base Layout (Exception EJS, you need another npm module for this (express-ejs-layouts)
Here are the Docs on howto install the Templateengine of your choice using express. (expressjs.com/en/guide/using-template-engines.html)
How can I make a handler deliver HTML (using hamlet), whithout wrapping it inside defaultLayout?? They will have as root a div tag, not something inside a whole html tag. Such way should also consider internationalization.
Using Angular with Yesod works well because angular templating happens inside valid html that hamlet can generate.
Besides the current comment answer you might consider including a lot of templates using script tags inside a layout. I have done this before where there was a front page layout, an app layout, and an admin layout.
I am working on a POC on Node JS, and I learnt that a typical tech stack will look like - Jade (instead of HTML)/ NodeJS/ and some database. My question instead of Jade can we use HTML 5? This is to avoid learning one more language to complete the POC. Also I assume that I will be able to expose the Node JS methods as rest API instead of having PHP or Java layer.
More over if I use simple HTMl/JQuery - for UI and Node.js ( for restful service) it will be easy for one to migrate to other framework easily. Please share your experience.
This is more an opinionated question, so i would like to share my opinion.
My question instead of Jade can we use HTML 5?
Jade is not alternative of HTML5. Jade is a templating engine whereas HTML5 is not. So, both are different.
Getting back to your question, you can use HTML5 as well.
Role of Jade
Ex: Consider yourself in a scenario where after user login you need to display a profile page and in profile page You need to print 'Hello '.
Since is dynamic value, so it can't be hardcoded in HTML file. Therefore, you place a placeholder in HTML (since you have added placeholder and made your HTML file generic for all user, thats why such file is called template file instead of plain HTML file). Now you can fill the placeholder with dynamic value either on server side or on browser.
If you select to replace placeholder by their value on server side, you use some templating engines. Ex EJS, JADE etc. Templating engine are responsible for generating HTML from template
If you select to replace placeholder by their value on client side, then you can choose to opt Ajax calls and fill your placeholder using Jquery or Angular.js may be handy if your project is expected to be big enough.
if I use simple HTMl/JQuery - for UI and Node.js ( for restful service) it will be easy for one to migrate to other framework easily.
IMO, using HTML with jquery for UI is better, since it is simple and traditional and you will get more support on community forum. Also, you wont have to learn template, templating engines straightaway.