I have a requirement to be able to generate and download dynamic pdf, csv files on our application(which supports all international markets). We are using React JS (deployed on Node JS server) and the backend data is provided by Java Restful APIs. What would be the best approach for generating these files(Client-side Vs Server-side). Should React JS generate the files(pdf, csv) based on the data provided by java REST API or should the Java Rest API expose a resource to generate and provide the files(Base 64 string) based on client needs. Is there a way to leverage Node JS here?
I want to take performance, CPU utilization into consideration as the volume would be high.
what open source libraries can I use?
The best javascript library is PDF.JS, it's provided by Mozilla.
You can use is client side, but also server side.
For mobile browser, you should prefer server side rendering. Client-side rendering is only ok on desktop, from my experience.
Here a server side rendering for node js, I successfully used it
For java server you have this one (I didn't try it but it's a apache library).
Related
I have a question already search on google but not find a good answer.
What is the job of nodejs & ExpressJS in mean stack development ? Like is it some thing like php to create api and angular will call it ? Or something else
You're exactly right, Node.js is used in MEAN stack to create backend code and APIs that are called from a frontend Angular app.
Angular is the way to create an SPA (Single Page Application).
Wikipedia:
A single-page application (SPA) is a web application or web site that
interacts with the user by dynamically rewriting the current page
rather than loading entire new pages from a server.
ExpressJS
What is Express.js. Express is a fast, assertive, essential and
moderate web framework of Node.js. You can assume express as a layer
built on the top of the Node.js that helps manage a server and routes.
It provides a robust set of features to develop web and mobile applications.
So on top of node-js which is your server side application where you can build your apis that your angular SPA will consume, you have Express JS which is a ready solution to help you.
This way, you will not need to solve problems like routing which have already been solved by the framework in an "optimal" or at least commonly agreed "good enough" way.
There is an excellent answer on express js in stackoverflow here
Yes, you right it is like so. NodeJs is used to create a server, then APIs and Angular call those API from the Front-End.
Detailed Description:
What is NodeJs
You can create a server using NodeJs where you will have a bunch of APIs.
These APIs can be called from an Angular app.
Official Definition: Node.js is a runtime environment that executes JavaScript code outside of a browser. Outside of a browser means Server.
What is ExpressJs
ExpressJS is a prebuilt NodeJS framework that can help you in creating server-side web applications faster and smarter.
Note: It is not necessary to use ExpressJs if you are using NodeJs.
What is Angular
Angular is a framework for building Single Page Application(SAP) web
applications.
SAP means your site does not reload the page when you move from one page to another.
Your Angular app calls NodeJs API.
Angular is a library for building Single Page Applications which (typically) run inside a web browser.
Node.js is a way of running software written in JavaScript outside of a browser. It has many uses.
Software written to run under Node.js — that is strictly relevant to the topics you are asking about — includes:
Build tools used with Angular (converting code is written in ways optimal for developers to edit and debug to ways optimal for delivering to and running in a browser).
Other helper tools for software development (such as #angular/cli which creates a skeleton set of code for an Angular project)
HTTP servers used to provide web services (a type of API) for client applications (which may be written in Angular) to access
Express.js is a library for Node.js which provides prewritten solutions for many of the tasks an HTTP server needs to perform.
You can write many kinds of software in Node.js. I have some code lurking around that loops over all the images in a directory and spits out a PDF of them. It doesn't even go near the Internet.
I'm starting out on my Node.JS journey and I discovered a fantastic boilerplate over at https://github.com/azouaoui-med/pro-sidebar-template. I'm unsure though how to turn the static html into a web app. Just wondering how someone with more experience would do this?
Do I take the html and translate it into a PUG template file? I'm guessing to then make the onclick / links actually run some code, i'd need to point them at the routes setup in the web app?
Sorry to ask such inexperienced questions, web apps seem to take a vastly different approach to the desktop apps i'm familiar with programming
I'm wanting to create a web app that runs on a server, which I will later put on the desktop via electron.
thanks
The project you have is using browser-sync which indirectly uses NodeJS to run a local server and host the web application files.
Do I take the HTML and translate it into a PUG template file?
I am not sure about this question unless you specifically want to use server-side rendering I am not sure I would recommend this to start with especially if you plan to later convert this to a desktop application.
[Note* - Assuming you are referencing this library PUGJS in statements above ]
Now For this requirement I'm wanting to create a web app that runs on a server, which I will later put on the desktop via electron.
This will require you to make your data serving layer which is most commonly called backend separate from that of the data viewing layer which is most commonly referred to as front-end. Thus a case for using the same data layer across different types of clients viz. A web application and/or A desktop application ( electron if you choose so )
Step 1 - Define what sort of web application architecture you want to follow or use. This will be based on your project and business requirements. From what information I have so far I would suggest a simple client-server architecture where your frontend or web-application is the client which makes REST API calls to the backend (API Server) and thus produces a meaningful result.
Step 2 - Start with the creation of 2 projects a frontend where your HTML, CSS JS, etc will be and a simple NodeJS script to serve this static web app when deployed on the server. I am going with NodeJS since the context of this question is suggesting the same.
Step 3 - The other project which will only be an API Server or Backend. This server will provide only REST API to the frontend. This server will talk to the database and provide other services like authentication and logging etc. You can use expressJS for this also in the frontend project.
Here is a simplistic representation of the client-server model which you can reference.
Some additional links for you to digest.
What is the difference between a web application and a client/server application?
https://medium.com/codiumclub/web-application-architecture-part-1-guide-to-become-full-stack-developer-cc9526a3519b
I am fairly new to the web development and I am still learning.
I am trying to build a back end for my web application. I am currently using react with redux for my front end. My question is, in order to create a back end do I need to use the react-router or do I have to use a completely different platform like Node.js. Thank you in advance!!
In order to create a backend, you will need to build a server-side application using Node, .NET Core, Java, PHP... and the list goes on. Seems like you're into JS, so Node would likely be your choice. You have a few options, such as embedding your frontend application in views served by your backend, or keeping them separate, like a frontend talking to API endpoints using the Fetch API.
React-router, on the other hand, will allow you to move through the different screens of the single-page app you've created. It won't help you to make API endpoint calls.
So, as you can see, the two things aren't related even though they sound similar. In short, use react-router to navigate around your app, and use the Fetch API (or a component like Axios that has better compatibility for older browsers) to make your API endpoint requests.
Hello guys i was learning web developments and have a simple question. If i built a e-commerce web page using node.js and ejs template engine and everything works fine. The next decision is to build a native app for the same e-commerce site either android or IOS. I want the native app to also communicate with the same application server designed in node.js. Do i have to redesign the application server?
My approach or thought:
Native app will have to consume data either xml or json. So i will have to change the business logic of my endpoints. And if i do it this way, i will also have to change the way the web ui interacts with the application server and it also has to consume json or xml response using ajax call. Is my thinking or approach on the right track? But if using node.js, should i avoid the template engines?
Yes, you have to redesign the application server logic by exposing API endpoints. As mobile apps (iOS/Android) will interact with the server using these API endpoints, via JSON. And this will affect your web page also, as everything thing now has to be done via AJAX calls.
Best practice is to built a single page web application using Angular or React.
That way both your mobile app and web app would behave almost the same.
I am new in React js. Previously i used JSF framework for building the web application. According to my knowledge in JSF actually what does is, from the server side it will generate the html code for the corresponding JSF tag and send it to browser and display it. If you are using JSF 2 the corresponding front end html portion can replace through AJAX also.
I think the same thing we can done through React framework. In react JS you can generate the client side html code from server and it will render in frontend by using some Javascript Engine (Nashorn Javascript Engine).
So in both case the working is almost same (The response created from the server). Now a days everyone talks like the React JS is a high performance framework. So can anyone explain how it provide better performance?
I repeat i am new in React JS
I believe performance all depends on the implementation, you can get both React and JSF to do the same thing. JSF came before React, and React in my opinion adopted many concepts of JSF anyway. React has not made any breakthrough that hasn't already been there with web templating engines since JSF 1.2. JSF is a templating technology which React recreates with Javascript.
For a mobile device its better to get the complete HTML to save on battery initially... both React and JSF can do Single Page Apps (SPA) to use Ajax and update only a portion of the DOM while the User is interacting with the application.
For pages with user interaction, JSF will send the Javascript needed that will interact with one DOM directly, for React it will use its shadow DOM and the browser DOM.
Both can define custom UI components, JSF speedier sends the rendered HTML directly to the client, while React will have to build it using the client computer cpu.
We can compromise performance for faster UIs, changing UIs faster, software engineers vs scripting folks salary. For any large scale, I'd prefer JSF because of reusable Java libraries in microservices, AI, Machine Learning, Android, and other things that has a JVM. For the UI, maybe we can let a scripting person whip up a UI in React while we focus on the bigger solution?
Internally, ReactJS uses a virtual DOM that will be "mapped" to the "real" DOM. In React you give your variables as state or props to the react component. React uses a special algorithm to detect changes in the components state or props and will only rerender the affected parts by synchronize the virtual with the "real" DOM.
JSF is an MVC framework that takes advantage of server side rendering and makes use of many markup files.
React is a library for building graphical interfaces for applications according to the SPA (Single Page Application) model.
The strength of React lies in its ability to update the dom very quickly because it has a virtual one.
The final app can fit all in a single file.
As said React is only a library, it is not productive to use it alone to create an application.
(Similarly JSF is just a spec, without Rich Faces, Prime Faces, Omni Faces, Boots Faces and 3rd parts libraries it would be difficult to create an application)
In the SPA model, the session is stored with the user, the backend is just a set of services that are called up by the frontend.
There is a first authentication call which produces a token (JWT) which is stored on the client side and which will then be used to
invoke the server's (stateless) REST services. This is how the server can understand that it is the same user.
The key information for the session is stored on the client side, this fact already makes you understand that the server is relieved of the task of
keep in memory the sessions of all connected users.
In practice, when the user interacts on a SPA application, what travels is the data, not the markup since all or most of the markup is already on the client,
this implies a nice saving in data transfer. The REST paradigm uses json to structure the data to be exchanged with the client.
A json object (Javascript Object Notation) that arrives at the client is a string representing a Javascript object, The latter offers native functions
to convert Json strings to Javascript objects and vice versa. React has nothing more to do than use this object to "go there to that specific point" and update the displayed data
and it does it very quickly.
JSF requires the presence of its own and third-party Java libraries on the server side (configured as a part of an Application Server) so it requires configuration time
higher and has a rigid scalability compared to a React application ready for deployment which consists of only javscript files (even one would be enough)
which only needs a web server like Nginx to run. It is easy to understand how easily this last solution is scalable since the configuration is reduced to zero.
To scale, just create a nginx docker image with our React app inside and we are ready to move from the development pc to the various cloud solutions on the internet
ready to replicate our image across multiple on-demand instances.