I have a form in ReactJS, after submit, form data is posted to Django backend.
My requirement is, I need to run data analysis and visualization on submitted form data, with data already exists from previous submitted data.
can I build data visualization in Django Rest Framework?. or can I do data analysis and visualization in Pandas library?. But not sure how to build an API so that I can show up these data visualization to ReactJS ui after form submit.
Or Google or Azure cloud provide api for building data visualization on cloud and expose it as an api?
Please let me know , if any sample or reference to github project, will be helpful.
Can you build a data visualization app with DRF in the backend and React in the frontend?
Yes. I will briefly describe the flow.
Easy mode (with data computing on the server):
Submit the form in React.
Data is handled in DRF.
You do all computations in request processing. Yes, you can use any ML/Data science libraries. BUT, all computations should be quick and shouldn't use a lot of resources.
You return the results of your analysis as a JSON.
On the React side, you get the response from the server. You can display results, for example as a chart (data visualization).
The response returned from the server in point 4 can have already prepared JSON for the charting library.
For charting, I can recommend Plotly: https://plotly.com/javascript/react/ You can use plotly in Jupyter notebook as well for creating prototypes of analysis.
The difficult mode:
Your data analysis part take a lot of time and needs computing resources. Then you should use some background processing library (for example Celery). This is a little more complicated. You should do long polling on React side.
BTW, I'm working on Django+React tutorials how to build real SaaS applications from scratch. Would love to write about similar to yours use case in the future.
If you have more questions, feel free to ask. I'm happy to help!
Related
I have an app idea which I want to create a working product of. I do have a working demo with React Native and I'm using Firebase for storing documents and images. Creating documents and uploading images to Firebase Storage is all done in the app, but this is just for demo purposes. In reality you would of course want to use an API for storing all that data. At least, I thought so. All I see on the internet is people using Firebase directly in their app. Is this the correct way of doing it? I always learned you should use a backend, for example a REST API for safely handling data.
Is it safe and secure to 'just' use React Native? I want to handle payments in my app, so I really want it to be done securely.
So what's an example of a stack I could use?
Currently using React Native and Firebase. But for safety I'd imagine something like
React Native - frontend
Node Express Server - backend
Firebase - database
I hope someone can give me a little push in the right direction.
I have a web-app with Django backend and react frontend where inside an organization or company, there are multiple users. Now, I am trying to implement real-time commenting system where if one user types any comment and posts it, another user will be able to see it without refreshing the page.
I have seen some examples of asynchronous tasks using celery with redis but couldn't find any with react implementation.
What would be a good approach towards achieving the real-time comment system in the react/django app?
Here is an example of simple tasks with celery, redis and WebSockets (Django Channels) and frontend in React (and docker for deployment). The task state and progress are updated over WebSockets https://github.com/pplonski/simple-tasks
The other option will be long-polling, the user will not need to refresh the page, but React will make requests every few seconds to get new data (simple and solid approach). I've seen this approach in many (many) applications. A few years ago I will be afraid of such implementation (too many requests). But now, I will select this approach because of its simplicity.
There's also CollabKit which provide a React commenting system. https://collabkit.dev
I am evaluating how is it possible to implement Server Side Rendering in SPA app with React and CMS as backend.
This is the approach I see Next.js suggest to have per-rendered and all most all CMS system suggests:
User request a page from react app running on Node server
Node server requests JSON data from CMS through fetch call
Then React App reads this JSON and transform HTML into String like renderToString() and sends the response back to the user.
The disadvantage of this approach is that if JSON data from CMS is huge then first request takes long time.
What alternate solution do you suggest?
Heyooo, Contentful DevRel here. 👋🏻
your concerns are absolutely valid.
And that's why Next.js just recently added advanced static pre-generation using getStaticProps. The goal is to tackle the long dynamic response times by pre-generating as much as possible. This way the user has a fast initial content paint, but can still enjoy all the dynamic benefits that come with a React application (Next.js usually follows an isomorphic JavaScript architecture)
The processing time you describe then is moved from dynamic request/response time into build-processes.
In general, when you're not dealing with millions of pages, I recommend giving static HTML a try. It makes applications often faster, safer, and more secure. For more complext and larger sites, Vercel is also experimenting with hybrid solutions that offer ways to only pre-generate certain pages. That's all very new though. :)
We are writing dash board app in React that requires us to fetch data from remote API's asynchronously. Until data s fetched, dashboard widgets need to show a hour glass or something similar. Using hooks, using Redux/Saga, using a local data access service are some of the approaches we considered. We are mostly biased towards using Redux/Saga for this but want to check if there are any standard/recommended patterns used by react community.
Recent days I've seen these two libraries circling around community posts, haven't tried them myself, but maybe will be useful to your project:
https://github.com/zeit/swr
https://github.com/tannerlinsley/react-query
I have developed an azure API app that I am using in a logic app. For the purpose of this post, it doesn't matter what my app does.
In my logic app shape (Azure API App) I have managed to render a drop down list by making one of my API post params an ENUM. Then changing the swagger / swashbuckle configuration to render the definition differently.
This is a good start but I really need a data driven drop down that reads it's data from a constantly changing data source (blobs, documentDB for example but it doesn't matter).
I can't find any posts on this.
All help will be greatly appreciated
Great question - we have on our backlog to support what we call "Dynamic Swagger" that lets you do just this. I'm hoping it will be in production near the beginning of March. In the meantime you will need to just enter in the values of those fields manually.