Frontend backend communicate data - best practice [closed] - reactjs

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I am currently developing a appointment scheduler. Now I am designing my own frontend calendar (month view) and I know that I will have almost every day an appointment in the database. I had an argue about the API call structure.
He says: I should make an api call which returns a list of every day of a specific month and the days contains the respective appointments. Depending on that I should generate my Calendar.
I say: I want to generate the Structure of the Calendar independent of what i am receiving in the frontend. I will make a call that returns me all appointments of a specific month and add them to the calendar after I received it.
He says my idea has redundance and too much logic in the frontend, because it‘s recommended to keep as much logic in the backend as possible
My question is which way would have a better performance and would be the user experience affected depending on what way I take?
BTW as frontend I use React-Typescript with Redux and as backend C# Core
-

well, I think you should keep a clean separation of concerns. Your API concern is to provide scheduled appointments, which I suggest you to put out like:
[
{
"id":1234,
"datetime":"20210115T15:15:00",
"doctor":4231,
"doctorName":"Doe, John",
"patient":9999,
"patientName":"Mary"
}, ...
]
and that's it.
How this is going to be plotted on the screen is your front-end business.
I don't know who exactly im favoring here, but Keep your front-end as simple as possible is a very minimalistic point of view and likely to overburden your backend with front-end-only aspects.

He is right. Keep your front-end as simple as possible. Logic should be mainly handled by the back-end, Always remember to develop your front-end according to what you receive in your API call.

Related

Advice on duplicating a site under React Js [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 months ago.
Improve this question
I need a little advice before I start work.
So I have been developing a site under React for a client for 2 years now.
My client wants to duplicate this site to create 3 additional brands, the architecture, the design is the same, just the content and the logos change.
So for you is this:
1 - I duplicate in several github repos
Where
2 - I simply create several branches
Thanks
It really depends.
Option A, copy-paste your project to X other projects will make it easy to start and you can finish it in a day, BUT... every time you'll have to fix a bug you will need to do it in each repo and they'll diverge.
Option B, is to build front-end and an API.
The UI will be the same for all the projects but the API will return different data based on the client.
Option C, create a configuration file that you can modify based on the customer.
I believe that Option A will be the simplest & fastest one to get started with. You'll pay the price as you grow, but if you don't need to maintain the projects in the future I would go with it.
If you're going to maintain those projects for a long time you might want to consider refactoring the projects to a dynamic backend that returns the data based on the client.
Option C, it's a pretty good compromise between A and B.

Should I pass data to the component or make a request to the API in React? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I'm currently developing a side-project and trying to learn some general API things.
The user can access a list of projects by going to /projects and I'll get
all of the projects as a list. The user can also click an Edit button that goes to
edit/{project_id} and was wondering whether I should pass the project object to the component or just do a separate request to the API with the ID of the project to only get that project.
The first one is good because it's easier and also, I won't have to send all information about the project objects because I can't show all of them in the table (in /project) and this will save some data (ex. the list will show name of project and created date only). However, the second way is good because there will be less requests to the server.
My question here is, what is the preferred way?
Sidenote: I've tried searching for a question like this but didn't know how to phrase it, so this might be a duplicate.
In this situation, I would advocate for the separate API request. With a list of projects, you really don't want to include everything in your "get all" API call; just enough basic stuff to populate the list. That will make your queries faster and data transfers smaller, which is especially helpful when a large number of projects come into play. However, when you "deep dive" into a single project, then you'll want everything about that single project.

Understanding event driven architecture and state management in applications [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Hello guys I have a question regarding state management in applications centered around events.
Let us say take a scenario in which a some one posts a tweet on twitter, so this tweet should be visible to the users in real time. So things like posting a tweet or typing a comment etc are all real time events; where as fetching data from the server on the click of a button are all Restful in nature. Real-time communication can be achieved by using either web-sockets or server-sent-events. Now the question naturally that comes in the mind is How do we manage the data (state management) for rest as well as real time communication?
Restful resources are generally fetched as a bundle of information, but server sent event or websocket send it as a packet of information, by packet what i mean is data related to the single tweet. If we were to show a list of all tweets to the user we need to update the state to previously received tweets and incoming tweets but state management here becomes very hard.
I have looked at some solutions like RxJs which typically involves observables, and redux-saga which deals with generators. So can you share your experiences and insights to managing real time data and restful data.
End goal is how to manage rest and real time data in a live feed. Please feel free to correct me for any technical inaccuracies and/ suggestions. Thank you

Designing Server Side Timer/Countdown for a Quiz App [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am building a quiz app with Ionic React. I want to implement some kind of quiz timer/countdown feature to limit time spent on every question. The catch is, if I implement a countdown function on client side or Front-end, I'm afraid that folks could tamper with the script and cheat by manipulating the timer to their advantage.
Therefore, I think the only way to prevent this is to implement the timer/countdown feature server side. However, I do not know the right way to go about this... Wouldn't a countdown function blocks the server? Or is there some other way that I do not know?
There are two ways to handle this:
http:
You can run a timer at frontend. Notify the backend with start / end timestamp of each question to calculate the duration taken for each question. If the duration falls within the allowed range, you are good to proceed. Here, frontend is your source of truth but you are validating it at the backend.
websocket:
Or you can implement a websocket to communicate in real time with the backend. In this case, you can run the timer at backend and show its progress at frontend in realtime. Backend will be your single source of truth.
You can check this post too.

Angulas 1 & Angular 2 - Hide api calls...possible? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I think I know the answer, but I'd like more opinions.
Imagine a scenario...
You create a new website using angular 1 or 2 where basically your front end application consumes services from a server that's send you results in json - The trivial scenario.
Then a competitor decide to create one web site to compete with yours. It's pretty easy to open Developers Tools on the browser and check the address of the rest server including api parameters. So, the competitor decides to create a migration tool to make easy for people to abandon your web site and adopt the competitor web site.
CORS cannot protect you because it's much more a browser feature - also you can use JSONp to consume api of different domains.
So, the question: Is there any solution for a scenario like this ?
You can obfuscate your API, but you can't hide the calls that are made to it.
There's a single good reason for this : the browser of the final user needs to know what requests to make, and make them.
Even if you found some way to hide the requests made from the Developper Tools, someone could still retrieve them by listening for them on the network.
However as I said, you can still obfuscate your API so that trying to replicate it would require non-trivial work. That way, an understandable request like
GET /user/id1234/profile?history=true
could become the less talkative
GET /1/id1234/p?x=1

Resources