Currently when I load a React-table locally with ~200 rows of mock data the performance is smooth, but when I do the same thing locally with ~200 rows of data from the API performance takes a huge hit. I'm fine with the actual search taking a hit, but currently, every time I try to navigate to the next page of the table or navigate out of/into the component itself the lag is very noticeable. The API is made through Spring, but it only appears to be accessed when the search is initially executed.
I've tried tracking the call with console logs to see where in the code the issue is occurring, it appears that the issue exists within react-table itself, but I'm still unsure of why the issue only occurs with data pulled from the API.
It is normal whenever you are fetching big data. There will be slight lag while fetching data from API. Also share your code. So, I can go through it.
Related
I have the idea to put around 30 charts on a webpage, the charts will be load with data from a SQLite database and a node.js express webserver is sending the data and also getting the data every second from another program.
I think the node.js server will be ok to read and write every seconds this huge amounts of data, but i am not sure what is the best solution to update the charts in the webpage.
I have hear about things like Web Worker or Service Worker or Server Sent Event and i myself would use a setTimeout function in the webpage which would read every second the data again and again and write it into the charts, but in my testing with just around 10 charts now i see already that the browser takes to much cpu and ram.
i am using apexcharts in the page and i am not sure if my setTimeout function ad reading every second with that from the database is the problem or how other profis are doing it, what is the best technique to update such charts every second?
currently i have a requirement to manage the web application's data that follows certain hierarchy using a react app,every time data is submitted it needs to show the latest data on the page .I thought of saving the submitted form data locally in the react app and add it to page every time I make POST request.if i do that,app may not reflect the exact data if multiple persons are simultaneously adding since they will only see what the have added each till they do complete page refresh.I am just wondering what should be good strategy while making react apps to always show the latest data as of server?
(1)do I need to use timers to do GET requests to pull the latest data from server?
(2) or do I need to re issue relevant GET requests whose response may likely to change after every PUT,DELETE,POST request i do?
I'm trying to display a loading page while loading up a dashboard page with some graphs and charts (I'm using the Telerik RadHtmlChart Controls for this). The data for these graphs and charts are fetched from a remote API and the queries into the db is quite Heavy, so the API calls can take upwards of 5-6 seconds Before I receive them. All this is done in code behind on the page. So, I would like to implement some form of loading screen while the page is loading. I've tried some jQuery implementations, however the page won't be sent to the user Before the Page_Load event is done, which is when all the data has been fetched, which in turn means that there will be no loading image, just a 5-6 wait for the user Before the page shows up.
Is there a nice way around this? Is there a way to render the page and THEN call a function in code behind and have it run and render the charts and graphs then?
You should use AJAX (A developer dream, as w3schools says xD).
First you should send the page content, without any query done, so the page is sent immediately. Then, the page should make an AJAX query to your server (to an special url for this, or whatever) asking for the info it wants. Meanwhile you could show a loading icon. When the AJAX call returns data, then you can initialize your chart widgets with it.
Depending on how you have your front-end developed, this will be (not) trivial to do, btw.
You can start here: https://www.w3schools.com/xml/ajax_intro.asp
To clarify:
You have to change your method that serves the page to not do any query.
Then create a page that makes the long-query and outputs it without any HTML markup. Just the formatted data to work with your widgets, for example.
In the front you should move all the script that initializes the widgets to a function.
Finally, you should add an AJAX query at startup that will call the newly created page, process the data (jQuery has AJAX methods to load JSON directly) and initialize your widgets with this data.
I'm trying to build a single page web app using Backbone. the app looks and behaves like a mobile app running on a tablet.
The web app is built to help event organizers manage their lists of people attending their events, and this includes the ability to search and filter those lists of attendees.
I load all attendees list when the user opens the attendees screen. and whenever the user starts to search or filter the attendees, the operation happens on the client side.
This way always works perfectly when the event has about ~400 attendees or less, but when the number of attendees gets bigger than that (~1000), the initial download time takes longer (makes sense) .. but after all data is loaded, searching and filtering is still fast relatively.
I originally decided to go with the option of fully loading all the data each time the app is loaded; to do all search operations on the client side and save my servers the headache and make search results show up faster to the user.
I don't know if this is the best way to build a web/mobile app that processes a lot data or not.
I wish there's a known pattern for dealing with these kinds of apps.
In my opinion your approach to process the data on the client side makes sense.
But what do you mean with "fully loading all the data each time the app is loaded"?
You could load the data only once at the beginning and then work with this data throughout the app lifecycle without reloading this data every time.
What you also could do is store the data which you have initially fetched to HTML5 localstorage. Then you only have to refetch the data from the server if something changed. This should reduce your startup time.
My Django app displays data from a database. This data changes without user intervention, i.e. behind the scenes. Whenever it changes, I would like the webpage to update the changed sections without a full page reload.
Obviously AJAX springs to mind. When the page is loaded initially (or manually, fully re-loaded later on), the rendered template loads a JavaScript that runs window.onload = update("all"), update(...) in turn triggers a number of XMLHTTPRequests which again return data that gets transformed into HTML pieces for the corresponding sections. All works fine. At the initial page load.
Now I find myself in a Python function that saves a new object to the database.
How do I tell the browser to run update(...) ?
Do I need to somehow manually issue a request to a url that is mapped to a view which in turn renders a template that contains the JavaScript code to run update(...) ??? Oh my!
I feel like I'm not following the usual approaches.
Maybe I'm just standing to close in front of the problem.
Can anyone help me ?
2021 update: Use channels: https://channels.readthedocs.io/en/latest/
You have two choices
Have the browser poll using setTimeout()
Look into Comet -- this is a technique for pushing data from the server to the browser.
Here's an article on Comet in Django
two approaches:
just update the database and wait until the next AJAX query. That means it should do the query periodically, you'll have to balance between immediacy and server load. It helps a little if you can do a cheap query to just verify if there has been an update. Maybe make that check rely only on memcached instead of going to the DB
use comet. In short: the client does an AJAX query asking for the update. the server sees there's no update, so it doesn't answer. Instead, the connection is kept open for a long time. Eventually either the update comes and the server finally answers, or the client times out and kill the connection. In that case, the client should immediately reissue the query to keep waiting for the update.
You can also use The Websocket API https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.