How to change page data without refresh using Django - sql-server

I am working on a project that shows live currency prices. I have to refresh the pricing data on the page dynamically. In this project I am using Django and SQL server. I could not figure out how to make it work using triggers and AJAX because AJAX needs an event to run like a user event or timer (that very bad for performance). Further, triggers can not be processed by Django. Is there a way to do it? Thank you for your help.

Related

Detect data changes in database using listener

I'm working on project with Vue and laravel. In each and ever components have more than one http requests when page is mounting, it's slowing things down and sometimes returns 500 error. So i thought if the data is loaded and store in Vuex store and return when page load it'll be effective, but if the data inside the database changing while navigate through pages, data will not change re actively in pages. So is there a way to detect that change using javascript listners. Any help ?
You should look into https://laravel.com/docs/5.6/broadcasting Basically once your backend code does the change to the DB you will need to broadcast that change to the front end.

How to handle millions of records in react js and sails js

I have a table having millions of records. I am using Sails js as my server side code , React js to render data in view and Mysql as my DBMS. So what is the best method to retrieve the data in faster manner.
Like the end user does not feel like getting a huge amount of data which affects UI as well.
Shall I bring only 50 records first and show the pagination in bottom using pagination logic and then using socket.io fetch the rest in background ?
Or any good way of handling it ?
This really depends on how you expect your user to go through the data.
You will probably want an API call for getting only the first page of data (likely in such a way that you can fetch any page: api/my-data/<pagesize>/<pagenumber>).
Then it depends on what you expect your user to do. Is he going to click through every page to see all the data? In that case, it seems ok to load all the others as well as you mentioned. This seems unlikely to me, however.
If you expect your user to only view a few pages, you could load the data for the next page in the background (api/my-data/<pagesize>/<currentpage+1>), and then load the next page every time the user navigates.
Then you probably still need to support jumping to a certain page number, where you will need to check if you have the data or not, and then show a loading state (or nothing) while the data is being fetched.
All this said I don't see why you would need socket.io instead of normal requests (you really only need socket.io if the server needs to be abled to make 'requests' to the client so to speak)

How to update a current page without refreshing it using node?

Im trying to create a web page similar to Facebook Home page using MEAN stack.
So when you add a new post, the page adds the post without refreshing it. And if I delete the post the page will delete the post without refreshing the page also.
Should I be using Ajax, Socket io, or etc? not really sure what is the best practice to implement that.
if you have a working example, that will be great.
Thanks
What are you asking for is a situation called server-push where you want the server to be able to notify an open web page about some sort of change so Javascript in the page can then update the display of the page without reloading it.
The usual way in modern browsers to implement server-push is to make a webSocket connection from the browser web page back to the server. This webSocket connection will then stay open and the server is free to send messages to the web page at any time (announcing new posts or deleted posts) and the Javascript in the webpage can then update the display accordingly.
A common implementation of webSocket that works in node.js and all browsers is the socket.io library that you mentioned. It adds some useful features on top of webSockets such as auto-reconnect and a simple message-passing system.
The other less-efficient way to do this is for each web page to send a recurring ajax call (say every minute) to the server asking what has changed recently. But, since this results in a lot of ajax calls where nothing has changed, this can end up being significantly less efficient for both server load and bandwidth usage.
SocketStream is a good solution:
https://github.com/socketstream/socketstream
There are many examples. It will take some time.

Single Server request per page vs SPA Application

I had the idea to make a SPA application using angularJS and then just sending AJAX updates to the server when I need.
My initial idea would be make the client application fly, but if I have to do an AJAX round trip to the server, I think the time would be approximately the same as to request a single web page.
Requesting a page just has more bytes of data, is not like I'm requesting 20 resources like in this article: https://community.compuwareapm.com/community/display/PUB/Best+Practices+on+Network+Requests+and+Roundtrips
I would be requesting a page or resource per request.
So in the end even if I create my client side application as a SPA using angularJS, these requests (would have to be synchronous and show a please wait message while they don't return, as I don't want to user to take more actions before I make sure his request passes validation and is processed correctly) would take some time and make user wait, just about the same time as requesting a full page.
I think SPA pages would be very useful if I have like a wizard on my app with multiple pages/steps and at the end, submit the results of wizard, to the server, which I don't.
Also found this article:
https://help.optimizely.com/hc/en-us/articles/203326524-AngularJS-Backbone-js-and-other-Single-Page-Applications
One of the biggest advantages of Single Page Apps is that they reduce
data transfer. As a result, pages after the initial loading usually
can be displayed faster and seem more interactive.
But I don't believe this last quote is really true.
Am I right, or is there a way that I'm not seeing to build an application that would look like it's executing locally?
I know how guys will start saying "depends on what you want", but lets focus on this scenario where there's no wizards.
What ever you said is right. But most of the frameworks(Angular,BackBone) you take they are going to cache the templates of html on the browser so the rendering would be pretty fast compared to the normal applications. Traditional apps will have to fetch the html from the server for each request which is a time consuming one.
Hope this helps you!!!
If you are wanting to go through that syncronous server side validation step for each page request, then there is probably no big advantage to using AngularJS.
If you are requesting a page and then manipulating that page's contents once it's loaded you might want to consider AngularJS. A good example would be requesting a page that displays a list of items. Now let's say we want to search that list or order it in different ways. Rather than using AJAX to call the server to filter the list and then re-render it, it could be much faster to user AngularJS to filter and re-render the list without making any further requests to the server.

how to upate the lists from a page in angular.js after adding an item in the database(couchbase) from another page?

We have a problem in updating the data lists on dashboard page after creating a new list in create page. It already saved on the database, but not updating in the views. It updates once i click the refresh button on the browser but this is a one page web app. How can I update the lists on my dashboard page after adding a data from the previous page without refreshing the page? I used couchbase for database.
The problem here is that you are loading the content from your persistent storage, and then it's in angular as-is, and to retrieve any updates you will have to re-fetch it from your persistent storage. Unfortunately, it is not as simple to $watch your back-end.
You have some options here: if you are making your change from within the angular component of the site, then you can just call a function when you are creating a new page which re-fires your db-access code, and refreshes the model.
If you are making changes from outside of angular, then you will need to either use polling to refresh your angular model periodically, or go for a fancier web-socket option, as explained here.
After reading this question and your other question, my guess would be, that you get the old view from couchbase.
Per default couchbase sets the stale parameter to update_after, which results in getting the updated view only after the second access, see the couchbase documentation for more information.
To fix this, it should be sufficient to set stale to false.
If you access couchbase via REST call, adding ?stale=false to the call should do the trick, otherwise add the parameter according to your used SDK specification.

Resources