I am building a React app for a traditional RESTful API server (Golang). The straight-forward approach is easily:
React --> Redux (or any flux) --> Go server
However I'm now thinking of plugging in Node/express as a middle end, so the stack becomes:
React --> Redux --> Node/express --> Go server
The benefits that I can think of are:
Server side rendering
Faster form validation
Wash the data before sending off to Go API, with numerous amazing node packages
Manage authentication and sessions easily
The cons are apparent, with the added layer, any requests that eventually go to back-end will take more time back and forth.
I am pretty new to architecture, would be great to know if people are using this extra stack in their production projects? How is the experience?
We are using a similar stack React --> Redux --> Node/express OR Go server for our application. We sacrificed the additional latency with the proxy node server for the ability to connect with a SSO server (different than our GO server), but also to do server side rendering.
The reason we chose this was because we are a public facing website that allows users to share posts to Facebook. If we didn't have the server side render, we would need to pay for an expensive service like Prerender.io.
The only thing I would propose (which we did) was make SOME calls, like rendering or stuff related to SSO, through the node server, but allow some direct API request go directly to the GO server. Unless you need to do something to each request between GO and React, I recommend this to prevent some overhead.
Related
I am developing my own website. So far, I've used React for the frontend and Flask for the backend. I've been doing frontend development for a while now but I'm just starting to get into the backend.
From my limited understanding, frameworks like Flask and ExpressJS create their own servers and host data that the frontend can use. It seems to me that that they automatically create websites to host and receive data. In my website, I route the backend to do what I want and use fetch requests with POST and GET from the frontend to communicate.
Although it works, to me, it seems overly complex. Why does the backend need it's own server? It seems unnecessary to create a proxy for the frontend and fetch data. Why can a website not just run custom code in the background, why does it need a service like Flask or ExpressJS to run in the background for it? These backend frameworks run Python or NodeJS in the background, but wouldn't it be much simpler if the website itself could run Python or NodeJS in the background?
I also see that in frameworks like React, you can import things and use modules— like in NodeJS. While importing some modules works, the require keyword is not allowed and normal NodeJS code will not work. Therefore, the backend will not work. Why is this— why can't you just run backend code natively? Instead you have to go through fetch and specify headers to basically translate information from your frontend to your backend.
Forgive my amateur understanding of web development, but the frontend/backend system seems overly complex to me. Thanks in advance.
Why does the backend need it's own server?
Where will the client store data so that when you open the page again the data will still be there? You can use localStorage but this is locked to that particular browser. What if someone logs in on a different device or uses a different browser?
Where will the client get the application from in the first place? Your application needs to be packaged up in a form that can be easily downloaded, and it needs an address to be loaded from. This is all considered "back end" even if you're using a static hosting service like GitHub Pages.
There's a lot of reasons why a back-end exists and needs its own server. Any application with persistent state which is expected to work across different sessions needs at least one of these.
I have read on couple of articles that when building a website with react either php or nodeJS or something else is required to have a backend to retrieve data and server side rendering
I can manage data retrieving on react without any backend server (based on my experience with react-native).
I am not sure if server-side rendering is necessary for react?
What are the pros/cons, can the website work without server-side rendering?
Something has to render the original page being served for React. However, after that, there's nothing stopping you from doing everything else client side. There are tons of articles out there discussing the benefits and drawbacks of doing full CSR (Client Side Rendering) or full SSR (Server Side Rendering). However, I've found that most agree that there's a middle ground that meets the best of both worlds.
However, if your app is relatively small and unencumbered, going full CSR as you're indicating you want to will probably have little or no impact.
Server side rendering will give you better search engine results and previewing.
You can still use React with server side rendering with a framework like Nextjs. You may just want to initially render on the server side and from then on in use client side rendering.
Really depends on what you're planning to build. Firebase has security permissions for you to experiment to filter out what type of traffic you'd want. However if you are solely dependent on the client then there would be severe consequences for edge cases. What if there was an app breaking bug and someone abuses it, what if someone has an older version of your app and calls bad code? Utilizing nodeJs to call your business side logic is a very important layer of protection since you have one codebase that handles all of this incoming traffic.
So an example of business-side logic that shouldn't be on the client's system:
What if you had an important counter say $ dollars that you've spent on that website and it goes into the database once and feeds you that information and you'd save that into local storage until the end of the session. Are there consequences to this if you had multiple instances (hint: they might not all of the same $ amount if you've manipulated that data on the client's side) ? This would be an example of why you'd definitely want to have a nodeJS backend for your React application.
I am currently working on a small project where I used vue.js to build the front end and express.js for the backend.
For the frontend, I have another express server to just serve the static files and all the requests will be redirected to my backend API with proxy by the frontend server.
For the backend, it is just an Express API app.
Both apps are runing on heroku right now. And my questions is:
What is the best practice to connect the front end and back end server, I did a lot of research online and people are saying backend API are not supposed to be exposed to internet？ I am not sure how I can talk to my backend if it is not on internet.
For the frontend, I can use SSL/TLS to protect the connection. But for frontend to backend server communication, what should I do to protect this data transfer, can I use another SSL/TLS? And should I use some mechanism to verify that the request is sent from my frontend server, not somewhere else? If so, what is the recommanded way to do that?
A lot people say that there should not be direct connection with database, it should go through a web service for security. What does that means? Now in my backend Express app, I have line of mongoose.connect('mongodb://someaddress/myapp'); Is this bad practice? If so, what should I do to make it more secure?
Please try to be more specific, I am still new to theses and try to learn, code examples can really help. Much appreciated!!
Vue and Express apps are written in the same language, so it is best practice to have these as separate projects as you have done. These are entirely different projects doing different things so they should be split.
You already deployed to Heroku, so the SSL/TLS isn't really a concern for you. However if you were deploying to your own VPS, you'd want something like Let's Encrypt. For restricting requests from Express to your Vue app, you'll want to look into CORS. See expressjs/cors for more details.
The Express app is the service connecting to your database. If you were trying to directly connect to your database from your Vue app, then that becomes an issue. You would coupling client side code with server side code. What you're doing is fine.
I'm new at Firebase, I'm starting making a project which has to include Firebase and angular2, but I am such confused about how to implement them. I don't know if a there's the need to have a Back-end implementation (like Java or NodeJs) to handle some security issues (like form validation, authentication, routing etc), or it's enough just implementing Angular2 to handle all these issues. I would be so Thankful about any helpful advice how I could implement these both technologies to build my project successfully. Thanks
first firebase is something like your backend firebase can safe get and send request as your backend apps...
and angular js will do the rest like you just said andd all the backend stuff you can handle by firebase :)
This is my simple explanation on how this 2 works together
Always keep in mind that Angular works only in front-end. Its domain is the look and feel, application events, sending data to server and anything else that has something to do with displaying data is coded in this area.
Backend services in the other hand interacts with your database, creating business logic, handling authentications, saving / sending of data and other stuff that interacts with the database is coded from here.
Now how these two interact is done by the frontend service to send HTTP requests to the Server which is the backend service. This is done by using Angulars $http service or the so called jQuery AJAX or the infamous XMLHttpRequest JavaScript native. New technologies today utilizes Web Sockets which is being used by Firebase and some other frameworks, Web Sockets offers a faster way sending / fetching data from server.
The server then interprets the data being sent and send appropriate response. For example getting user list, saving profile, getting reports, logging in, etc.. It would work in this workflow.
1) Angular sends http request to server to get list of users.
2) Backend service installed in the server then interprets the data being sent.
3) Backend service then gets list of users from the database.
4) Backend then sends the data back to the frontend service.
5) Frontend then recieves server response and displays the data to the view.
Also these two is coded separately. To have more detailed explations research about how frontend and backend services interact you can find so much resouces in Google.
I understand that Express resides on the server and Angular resides on the client but, as far as I know, Angular can do everything that Express can do which is
routing
interacting with the database
It kind of seems like maybe Express is needed in order for an AngularJS app to be served by Node.js but I'm not sure.
So what are the benefits to adding Express to an AngularJS app?
There are things which should be done server side (i.e. Express, not Angular), most notably user input validation - Angular, as it's client side, can be tampered.
Also, if you'll ever want to offer access type other than web app (i.e. mobile app), you'll probably need an API anyway - Express can do this, Angular don't.
Finally, database access - usually Angular app will need to connect to some kind of backend to perform CRUD operations. You'll either go with hosted DB like Firebase, or you'll end up using your own database. Latter scenario is more popular and you'll need Express (or similar) for that.
Express and AngularJS do not mutually exclude one another, they serve different purpose - in fact it's perfectly fine to use both - express for all your serverside logic, and Angular for client side logic.
Express can be used to host the APIs for AngularJS's service/factory to consume. You can consider AngularJS as MVC and the API on Express as SOA.
There is lot of stuff that one wants to control from server. And that is the place where the server side frameworks come into picture.
An web app is not just some html pages linked together. There are lot of other things that needs to be implemented
Model validation.
Keeping model consistent. Remember multiple users can access the same model at any give time and even change it.
Controlling resource access.
Triggering workflows.
Business Logic.
and other such thing require a server framework. So as mentioned earlier the client side frameworks like AngularJS complement server side frameworks.