Several UI libraries/frameworks are being ported to node.js, for example YUI (http://yuilibrary.com/projects/nodejs-yui3/).
What is the use case for this? What are the pros and cons of manipulating the DOM server side rather than in browser?
It's not a matter of using the DOM on the server instead of the client. It's a matter of using the DOM on the server instead of writing HTML or rendering views. You will still manipulate the DOM on the client aswell.
The main pro of using the DOM instead of other methods is doing the manipulation for browsers with javascript disabled.
The second pro is using the exact same code for your client side mvc on the server. This means rather then using views and templating engines you can just manipulate the html response through the DOM.
The main disadvantages are using code tailored for the browser. So this code is not optimised nor is it the best solution for the server.
Manipulation your html output through jsdom rather then views / templates is a valid thing to do and it's just an alternative way of generating the HTML your sending to the client.
The alternatives to jsdom are preprocessors like jspp which render like PHP or ASP or Templating engines like Jade that are generally used with express
YUI has more functions than just DOM manipulation. YUI3 architecture allows for you to use the non DOM functions like Y.io on the server side. So if you want to get data from another server, you can use Y.io on the server side.
Related
Can anyone please explain what is Ejs , can we build a full fledge frontend using Ejs while using node.?
I have been searching for it but i can not find the answer i want.?And please someone differentiate between the frontend frameworks like (angular and react) and Ejs..
EJS is a template system. You define HTML pages in the EJS syntax and you specify where various data will go in the page. Then, your app combines data with the template and "renders" a complete HTML page where EJS takes your data and inserts it into the web page according to how you've defined the template. For example, you could have a table of dynamic data from a database and you want EJS to generate the table of data according to your display rules. It saves you from the drudgery of writing code to dynamically generate HTML based on data.
EJS is compatible with Express for back-end use as it hooks into the View engine architecture that Express provides and lets you render web pages to the client with res.render() in Express.
FYI, there are dozens of competing template systems for use in node.js. EJS is a popular one and people typically choose one based on features that match your needs, how their layout language fits what you want to use, what seems easiest to you to use, etc... I've used Pug, Handlebars, Nunjucks and EJS. Nunjucks is my current favorite.
EJS (along with all the other competing template engines) allows you to generate full-blown HTML pages which certainly enables a "proper front-end".
EJS is a tool for generating web pages that can include dynamic data and can share templated pieces with other web pages (such as common headers/footers). It is not a front-end framework. While EJS can be used by client-side Javascript to generate HTML on the client-side, it is more typically used by your back-end to generate web pages in response to some URL request. EJS is not a client-side framework like Angular or React and does not dictate what client-side framework you do or don't use (if any). It is mostly covers a separate solution space.
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.
I've recently dived into React+Flux on the front-end, and I love it! But I want to also be able to use React on the back-end to avoid having to duplicate views and rendering logic.
I've seen that React supports server-side rendering if you use Node, but I do not use Node for my back-end logic.
So I'm wondering, can I set up a daemon written in Node that just renders HTML based on the data it receives and the root React component?
What I have in mind is to have my back-end application call this daemon with data already prepared (so that domain logic can live on my main back-end application), get HTML, and return that to the front-end.
Is this approach feasible? Has this been done before? I'd love some feedback!
I see that it's been a month and there are still no comments, I will share some of my understandings.
We can use this setup:
An API written in PHP or something similar that serves data.
Isomorphic React components - render on the server, attach event listeners on the client.
Server-side (Node) - the React component uses AJAX calls to get its props from the API and embeds them into a <script id="props" /> tag in the HTML as a JSON string.
Client-side - the component checks the script tag for props. If there is data, then it uses that to skip the re-rendering; if not (due to a server error or something), it can still use AJAX to get its props.
The main idea is that the website is isomorphic (server and client share the same code), so your existing front-end can be easily adapted to this setup.
A good place to start is a simple example about isomorphic React components. This tutorial can also provide an overview to this subject.
I don't understand the concept of client-side rendering. I have always used server-side rendering with PHP/Ruby, I don't see how it is possible to have client side rendering.
Who does the work? The browser?
If someone could give explanations or links that explains that, I would be grateful.
Without sounding sarcastic, it is a distinction between client-side compilation/manipulation, server-side compilation/manipulation, or a combination of both. While the browser is the thing that actually does the rendering.
But compilation/manipulation of what?
In general we're talking about HTML, CSS, javascript assets and maybe some data returned from a db that upon request gets compiled/manipulated into something that can be rendered on the browser as our application.
You can do this on the client-side using plain-old-javascript, jquery, backbone, angular, ember, etc.. You can do this on the server-side using plain-old-node or one of the frameworks like Sails.js.
In node.js, do I need to use jQuery twice ? once at the frontend and once on the server ? Sorry for being a noob. Or if I use it once, how will the front end get a copy of it ?
jQuery is all about manipulating the DOM. There is no DOM on the server. Why would you use it there?
Generating HTML on the server in node is typically done via a server-side templating engine like handlebars or jade, not via a DOM. They're two very different environments.
Just reference jQuery in a script tag in your generated HTML and use it on the client side.