Building out a web application from the ground up comes with making many decisions. A good portion of these decisions will be about where you are going to implement your code. These choices are not always clear, many times I also find the way I thought was the path turned out to clearly not be.
Another huge resource for me is my maps. My ERD, flowchart, UX journey, and anything else I can draw out in my prep stages will prove invaluable during development. We're moving data back to front longitudinally first, after that data is delivered into the front end we're then moving it latitudinally between react components. The way I like to think about it is my databases, and that data being sent to the front, is an East-West movement, once I have my data in React I'm then moving it North-South.
Keep in mind, even the most organized and planned out individuals will run into these issues. Just as we dev's are told to embrace bugs and errors, we also need to embrace flexibility in stride. Well thought out changes will have to be made on the fly and implemented immediately, it's the nature of the biz. There will also be situations where you won't fully know if a decision will 100% work out until you're in the thick of it coding Being organized will help you make a pivoting decision easier because you will have a path
- Some things to consider:
What models am I picking data from? Do these models have associations? Can I use the associations for my benefit?
- Am I doing anything with my data after I fetch it?
If I'm taking a large chunk of data into my front end and then parsing that down in the front end, is there a more efficient way to get it done? Back-end iteration is generally easier in my limited dev experience. Can my backend trim the fat off of my data before it's packaged and sent to the front? Many cases this will be true. If you're looking for a specific set of info ready to render in the front-end without doing anything else, back end iteration is the way to go.
- Can State solve some of my problems?
State solves many of my issues in the front end. If I'm not persisting my data back to my database, I can probably do a single fetch request to get what I need and then keep that data stored in state to be shared and passed to the child components that need to use it.
- Can a serializer help with my issue?
A good understanding of serializers can help you greatly. Instead of making multiple fetches to get data from multiple models, you can use your serializer to package associated data from multiple models delivered in a single fetch. Once the data is moved into the front-end I can iterate over it and pull out the info I want to use.
- What am I doing with the data on the front end?
Sort of a loaded question in & of itself. Of course we're doing something with it, but its specific use will be important in dictating your approach. Pseudo it out! Write out in the simplest terms what you want to do with the data you've got in your hands.
There will always be many different approaches to how you can solve a problem. I hope sharing my thought process may shed some new light or offer a different route to take when tackling your application. Be transparent about your inner thoughts and share it with others, you'll be surprised how much you'll learn and how you'll also realize you're not alone in your struggles.