I am a frontend guy, but I am working on a project in which I need to process lots of data in my nodeJS backend (my front is reactJS).
But once the data that needed to be processed in the backend is processed, I have the choice of either reprocessing this data in node or in react (knowing that in the end, I need this data in frontend).
Example: An array of links has been created in my backend, but I need to extract a single link from this array, in order to display it in React. I have the choice, pass the array to react and process the data there, or do it directly in node.
Is there a common fashion to fix this dilemma? What should I take into account to make a decision?
It's not good to send excessive information from your backend to your frontend. If you're going to send data to your frontend from your back-end and a lot of it isn't going to be used, then it's probably best to adjust your backend so that it only returns information that's going to be actually used by your frontend.
Alternatively, if your frontend isn't going to use all the the information sent by your backend right away, but potentially might use it later (based on user input), then it's better to send all the data from your backend and process it on the front end as needed to avoid making future requests to your backend.
Taking an array of links as an example:
If the user requests to see a link based on certain criteria, and that's the only link that they are going to see (based on the design of your application), then your backend should process that request and return only the link that your user wants to see to be displayed on the front end.
If the user can request to see a link, but could potentially request to see another link later, then your backend should send a full array of links that might need to be displayed at some point. Then your frontend can display the links at the appropriate time without having to make a request to your backend each time the user wants to see a new link.
In my opinion, if the logic doesn’t need to be done by the browser, then do it on the server. It will help you with reducing the size of your app in the long run. You want your final, bundled .js file to be as small as possible. That’s just one small step you can take to contribute to that.
The short answer is that it all depends on your business logic. Regarding how best to handle an array of items to be sent from backend to front-end, if a user will only ever need to see this one item, for example, then by all means, have the backend parse the array of data on its end and send that single item to the client front-end. If, on the other hand, you anticipate that you'll need to work with an array of items to be presented to the user at some point in the app, it would be reasonable to simply have the backend send the array of items. Furthermore, that array of items could be, for instance, a filtered version of the items that would be relevant to this particular user.
Related
So I am trying to find a way to send data from the back end to the front end securely.
My application is about posting images, and each post has a name, id, comments, etc..
The problem is that I want to prerender all my posts using pug, but also send all the data of those posts securely to the front end. I know that you can send data using the dataset attributes, but I don't want a client to see this data - I want it to be secure.
I just want to know if this is even possible, and if there is a secure way to implement this
E.g. Server sends data of 50 posts. Those 50 posts can be accessed in a front end js file, but cannot be accessed through the console in inspect element, or any other way.
Once the data hits the browser (e.g. front-end) it is available to the user. You can see the data in the Network tab of the dev tools in Chrome. I am not to sure what you mean by securing it in the front-end. It seems like you are trying to override browser functionality which is not possible. You can use javascript to a certain extend to stop people from getting the context menu on images etc, however, if a users looks hard enough it is easy to get the data that has been loaded.
I use Node.Js along with Express and Express HBS (Handlebars). And for users real time synchronization I use Socket.IO.
Let's say I code a web chat and each time someone hit the send message button I emit an event from client to the server. Next, the server will receive this event and emit a new event to all the others client, updating everyone one with the last message send by our first user.
Since we all want to be messy for the less and organize as possible, I would like to have a template file containing my new message skeleton. But after that I don't understand what I've to do. My first thought was render this template either :
from the client with data send by Socket.IO.
or from the server and send back the html rendered to the client through Socket.IO.
But it seems that's not recommendable ways, as far as I am in my research.
What I would like to avoid is :
HTML Skeleton inline in the client JS code receiving the new message from Socket.IO.
that everyone ask to the server (ajax request for example) the same message just after receiving the info from Socket.IO that it is one available. What if I had 10,000 users sending and receiving message ?
that we put the block of code in a <script></script>, get it inside the js and put it at the right place in the DOM when I need it. Best approach I found for the moment, but what if I need a lot of this sort of thing ? I don't like the idea that I could have a lot of blocks code at the end of my DOM just in case I could grab it and use it, maybe or maybe not.
Reload the entire page each time a message is send.
Actually, my current project is not a chat but I use this as an example. Keep in mind that the block of code I want to add to the DOM on events could be more heavy than just a chat message.
What is your thoughts about all of this ?
What you can do is send the template earlier on as a string, compile it and store as template (in some Map). Then when a new message comes in, you just need to pass in the data to get the html content where you can then set as innerHtml to some div at your desired location.
If you need my thoughts i will say the stack may be an issue. You want to realise a reactive feeling in your application but at the expense of your api, as it continously compile those templates to send to your various clients as html.
Another bad effect to consider is those html tend to be heavy when sending to the various clients, whereares sending just the data that changed is quite light weight.
Best approach will be use a client framework that is best suited for such reactivity you need. A library/framework like React will permit you manage the events, and show new data using components available on the client. You will only need to send data concerning the event like the sender info and content.
Check out this page on handlebars website specify best suits for handlebars. https://handlebarsjs.com/installation/when-to-use-handlebars.html
Im coding a static page app using Angular, which shows various Instagram and Twitter posts of the company, and shows the details of the members. I have few questions regarding this, and would like any help.
Firstly, I have about 100+ contacts to display on the first page. Should I create a Json by myself and retrieve it from the service, or should I create a backend and save it there ? I do not have any backend as of now.
Other thing, I was able to retrieve Instagram Json with media content using their API, the doubt im facing is, once I have the call done, will the Json change automatically when the user adds/edits their posts? Or will the Json be the same as I first called it with? Any help is appreciated. Thanks.
For your case, as you have fewer data using Firebase is the best approach. If you write a backend and maintaining it would cost you more. You can use Firebase service URL to retire those records. In future, if you want to add more data it would be easy.My suggestion is Firebase.
Should I create a Json by myself and retrieve it from the service, or should I create a backend and save it there ?
Are you revealing credentials or other sensitive information in the client? That would be one reason to have a backend apart from Instagram or Twitter. Do you envision exhausting API rate limits of Instagram or Twitter APIs? That would be another reason; you could cache results in your backend to reduce external API traffic. Do you need to process (reduce? translate?) the data before it gets to the client, or are you satisfied with performing any processing on the client (e.g. is it fast enough)?
TL;DR: It depends a lot on your particular requirements.
If you do want a backend, the recommendation in the answer from #praneeth-reddy to use Firebase is excellent. If you only need processing/transformation but no caching or separate storage, then AWS Lambda may also be worth considering. If you need more control (build vs. buy), you could write your own backend.
...will the Json change automatically when the user adds/edits their posts? Or will the Json be the same as I first called it with?
Angular can help you update content automatically if the client side data (think browser JavaScript memory) changes via its automatic change detection functionality, but you would have to provide your own logic (e.g. in Angular services perhaps leveraging RxJS) to update the client side data based on data from the APIs. You could poll to update periodically, or for better performance listen for changes using an asynchronous event/push mechanism such as websockets or streams.
I'm doing educational research about how students use a web quiz as a study tool. I've set up a web quiz that shows photos of plants and asks students to type in the correct scientific name.
http://www.plantsciences.ucdavis.edu/courses/enh6/quiz/quiz_sn.html
Using something like Google Analytics I can see the number of photos students look at (because each new photo involves a request from the server). But I'd also like to know how many times students type in a correct answer and how many times they type in a wrong answer. The form is all checked client-side using javascript, so giving a right or wrong answer doesn't start any communication with the server.
Is there a way to collect this data using cookies or something? Or can I have the form request a certain single-pixel gif with each right or wrong answer, so the server can record what's happening? Or do I need to reprogram everything and have the form get processed on the server to collect this data?
If you only want to record correct/incorrect answers, the simplest thing to do from what you've already got would be to expose an API on your server where you can send the information you want to store. Then, you can make an AJAX request to it after receiving an answer and your client side application will be nicely decoupled from the server side storage.
At this stage though, your application won't know if an error occurs on the server side of things. This may be what you want to happen if such errors shouldn't affect your application's primary behavior, but you may wish to respond with a success/error (most likely using JSON) to allow your application to react accordingly.
I am building an analytics system for my rails application and I want to monitor every time I pull a certain object from the database, and I'd like to put the in the model file. I have objects that are being displayed on the page and I need to see the amount of views and clicks that they get. I assume the views can be handled by just figuring out when the object is pulled from the database (if someone could tell me how to do that) and I figured javascript to monitor the clicks. Would you all agree with this? Or is there a better way. I am using Rails 3.1 with MongoMapper and MongoDB
To store the data simply send an ajax request from the browser with the information you want to store in a POST request to a rails resource like :click#create. Be sure to include the relevant data attributes within the request.
You may want to collect the requests and then send them all in a batch based on time or a use clicking a "done" button or something of that sort.
Recording the fact that someone clicked (from javascript) is different than recording when an object is retrieved from the database. You could write a before filter for each of the methods in the class or possibly implement an active record callback for something of that sort.