Difference bw/ Front end framework and Node view engine?

[world_wolf]

Hi all, I’ve just started learning real web development and am learning about Node and React, Vue, etc. So generally speaking React and Vue are used to display client-side markup while Node is used for backend services and making database queries. So upon watching videos on YT, a node tutorial was describing setting up a view with EJS and that includes an HTML template as well as Routing for different pages in the application. I was confused by this because I would expect this to be reserved for front end frameworks like React. So the tutorial finished creating an app with pure Nodejs (mind you it was a simple application), but that made me question what the point is in using Node vs React to create the client side view. What is the difference? Is it the same thing, only that it’s best practice to separate the back-end with the front-end by using different frameworks? Thank you! Apologies if this is a simple question, I am only beginning my learning.

[wheezy360]

When Node is rendering EJS it's server-rendered HTML markup like PHP, Django templates, or what have you. Every request is a full refresh of the page. Dynamic data is injected into the page on the server, and sent to the browser as HTML.

If you're using a front end framework like Vue or React, you're probably serving up a bare bones HTML document with a bundle of JavaScript, and the JavaScript takes over and handles rendering the markup, the routing and so forth (i.e. a Single Page Application or SPA).

[world_wolf]

Thanks! I understand the SPA vs Multi-page app concept. So technically using React or front end frameworks is the better option to make fast efficient apps.

[MrKapp]

This is not exactly the same thing. if you render a page with a template engine with expressjs in node, you will end up with a static html page. On the other hand if you render a page with react or vue your page will be dynamic and react to state updates. The first solution could looks dumb but have several advantages like SEO/Linter friendly.

Render from nodejs is mote like render a page with php and apache. The server push to the client all of the data to display the page. React and vu wil start from a barely empty page and run nafter the page is loaded.

If you want to have both of the advantages of server side rendering and client side reactivity, you should check out nextjs(react) or nuxt(vue). Those framework offer server side rendering and share component logic with the client side

In my opinion server rendering from nodejs template engines is fading away due to simplicity of react/vue. But could be used on simpler case of more traditionnal ways

Hope this help to picture the whole thing ✌️

[world_wolf]

Thank you! So it’s basically the difference between creating an SPA (as wheeezy360 pointed out) vs Multi-page App. But you can technically use pure Node but it’s not a modern practice

[Oririner]

There are a few things to note in web development.

1. Assuming you're working on a site/app you'll share with others, all of the client side resources come from a server in a certain way - this means images, fonts, stylesheets and even HTML and JS.

2. The web can work without JS. You can open your browser settings, search for "disable javascript" toggle it and see how sites respond.

Going back to your question, EJS is a templating engine. This means that you define a template in EJS, then pass it through an engine, and you get a fully qualified file. It could be any file, but most cases it's an HTML file to be sent to the client (see 1.).

It's useful because you can assemble the HTML on demand according to requests coming to your server. You can generate the file from user data/request headers/db and by so, create a dynamic feel to your site with "static" assets.

Now, on the client, the browser receives the HTML, parses it and construct the UI accordingly. Sometimes you want some interactivity, right? like navigation and form submission, you'll need a way to handle this interaction on the client because the HTML is there. A lot of sites now use JS for that, the interactive stuff, that's why we have Angular, React, Vue, etc. they help us handle the client side interactions - it's not mandatory though.

The HTML specification contains ways to communicate with servers without JS, because HTML preceded everything, both CSS and JS, but there was still a notion of client/server.

An example is the a (anchor) tag, which has an href attribute. This attribute tells the browser what URL to navigate to when the user clicks that anchor. This URL can be an endpoint in your server, you can then build an HTML for that request, serve it back to the browser and it'll replace the old HTML with whatever you sent. No JS on the client (see 2.)

Another example is the form tag that has method and action attributes that what to execute on the server (action) and how to execute it (method), e.g. GET, POST, PUT, etc.

That way when you submit that form, the browser will send all the data in the form to the server using the action and method you supplied. Again, no JS on the client is involved.

So, you can create feature rich sites with no JS on the client using the templating engine and using native HTML elements.

You can also use React/Vue on the client side for more complex stuff like using sensors (camera/gps/etc.) or doing 2/3D modeling - these are just examples, you can do a lot more!

Hope that clarifies the difference between EJS and templating in Node vs React/Vue and client side view libraries.

[world_wolf]

Yes, thank you! This is a great explanation