DEV Community 👩‍💻👨‍💻

Doug Kerzner
Doug Kerzner

Posted on

Decisions Back To Front

When and where I like to manipulate my data:

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.

Alt Text

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

Alt Text

Some questions I like to ask myself when deciding between front-end & back-end:

  • 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?

Alt Text

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?

Alt Text

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?

Alt Text

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.

Alt Text

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.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈