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
Related
I apologize in advance for how new I am to this all. I have a new business and there are some things I want to code for it myself as proof of concept till we have enough revenue to actually hire real coders.
Our ecosystem will have 4 major areas and I'm not sure if my approach is how to go about it or even possible.
The normal, static, info webpage that just talks about our business. (SEO and load times important)
A React JS / Next JS non-static section of that same website for blog and other dynamic content. (SEO and load times important)
A react JS employee backend for customer tracking and another tracking of customer data. (SEO and load times not as important here).
A customer portal where they can log in and see stats and stuff about their account (this will pull from data we enter in the employee backend and they can access to track progress) (I would eventually like android/ios apps as well as web portal for this so I was thinking using react-native / react-native web for this section to try and maximize code reuse. (SEO not important, but a smooth experience is)
I planed on using firebase to host it all. I'm curious if this seems it can work? Can you combine all of these different frameworks and strategies in one overall project like this without causing over bloat of download and such? Like for example, the employee backend will likely have a lot of packages and dependencies that the static front end would not require. And the static frontend would be in the same project as the dynamic blog but be built on different things (one static HTML, the other react with next.js? is that a bad idea?). Also, it's been hard to find info on exactly how goog react-native-web is so I'm just lost with this all and would love some guidance. Thank you so much in advance for any direction you can offer.
With firebase hosting you can host static sites, and redirect some paths, such as /api/* or /dynamic/* to firebase cloud functions.
On those cloud functions, you can do dynamic rendering, e.g. with remix.run or next.js.
If you use good cache-headers on those cloud functions, firebase hosting caches the results appropriately, making dynamic rendering of all pages feasible too.
Hi everyone I'm in need of some help here with React Native &/or Expo.
The brief version: I built the UI for a streaming app idea of mine. My problem now is finding a way to add content on it!
How can I add music files or MP3 & Videos on React Native (preferably Expo)?
Is there such free database out there or would I have to build something to pass the data to the app itself?
The long version: I had an idea to build a Hybrid Streaming App including music, videos and live events. Now this is my first time building an app ever. I managed to get the UI done in 4 months.
Again I've never done this before so don't crucify me. I managed to use flatlist to create categories which represent: music, videos, podcast, and live events. In those flatlist I passed data which are the artist, image, album & more. I even was able to create a player screen and actually play some random audio file using "Expo-av" using a link. Right now, I'm stuck and still trying to find a way to get an actual library on the app while also figuring out how to pass data from one thing to the next. PLEASE HELP
I'm not sure if there's a good white-label service that would provide metadata and streaming audio/video. Something like MusicBrainz offers an API for metadata, but I don't think they provide audio. There may be companies out there that offer what you're looking for, as I understand it, but licensing for major label music is notoriously thorny, so there may not be a ton of companies that give you drop-in access to something like Spotify's library. If you want people to upload media, you can use something like AWS Amplify to integrate a backend without having to do a lot of devops work.
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
Regarding of what backend you use to power the API behind a React app (Ruby on Rails, Node.js/Express, Java, etc), what are the consequences of making the frontend React app separate repository?
I like the idea of having my ReactJS app separated from my backend API code, just want to understand the pros/cons of going with this approach.
pros
front-end devs doesnt have to get familiar with backend
You can choose not to show your secret recipe.
can upgrade and deploy one without the other
Code Reusablity
Lazy loading for better UX
I actually dont have any cons to tell about this. it's just that i feel right developing apps like this. installing npm packages in RoR felt so wrong.
more Pros -
You new separate UI can link to more backends than 1 - think centralized UI for disparate components
Like Angular more, bang you got it
Like React more than Angular, bang you got it
Cons -
Needs added work to setup CORs
You will probably have to cookup secret sauce for pagination, serialization (i.e tied together even though separate) - not a problem if you follow a standard anyway
Need to have a long deep thought on behaviour when the backkend is down
Need to wrap brain around pull vs push
You now have 2 diff OS stacks & TCP stacks in the picture to increase your work on sys admin patching & understanding latency between the components
wrap brain around state & its management
IMHO separating the UI is worth all the cons given the pros outlined here & by Shan
Learning a little React currently. I'm finding myself confused about some of the utility here. One sticking point that seems to (for me, at least) undermine it's value is that If I want to sync my UI to data residing on the server (which can and will change), I need to manually poll the server? Aside from component-based architecture, I'm not sure how this is getting me further than well structured and logically implemented AJAX. Even in the React docs, they're using JQuery in this regard. https://facebook.github.io/react/docs/tutorial.html#updating-state
I'm sure I'm missing the forest for the trees or whatever.
Thanks!
React is (citing their page)
a javascript library for building user interfaces
The main focus is to build a view layer for your application. This means you have full freedom in choosing what to use to fetch your data. For simple uses it can be jQuery or fetch.
It's generally recommended to not fetch data directly in your components and use one of Flux pattern implementations, e.g. Redux.
If your application has to be constantly powered by new data from server you can think about using something like RethinkDB on your backend and connect it to Flux store on your frontend.