Serve Less, Logic Less

A Journey in Implementing an "is_private" Flag

Hello! My name is Cecil, I am a full-stack engineer and the creator of Journeys.Cafe. I wanted to write this post to describe an issue that I encountered while developing Journeys, and I figured it could be a helpful reminder to others as well.

To give some background. Journeys is a web app to help people plan out a vacation. One of the problems that I wanted to solve with travel planning was to allow people to share their itineraries with others. So, for example, if you wanted to take a trip to Japan, as someone who has been to Japan many times I could share with you any of the itineraries that I used while traveling to help you with ideas of where to go, or what food to try or anything else like that.

Implementing this feature required solving a couple of smaller problems.

Being able to share an itinerary is awesome! But what happens if you have something on that itinerary that is private, or a note that you don't want everyone to see? I need to keep my users safe. To accomplish that goal I added an "is_private" flag to the items and notes tables.

Just adding the flag into the records is just the first step though. How we implement the usage of that flag is really important. Here are a couple of ways you could do that.

First Approach

Being a React developer, I make the api call to get all the items and notes from the server. I put those into the app's state.

const MyComp = () => {
    const [myNotes, setMyNotes] = useState([])

    useEffect(() => {
        myApiCallHere()
        .then(res => setMyNotes(res))
        .catch(err => console.error(err))
    }, [])

}

Then when I go to render the items or notes, I loop over them with the map function, and if I encounter the "is_private" flag I simply don't render the item. Something like this:

return(
    <div>
    {
        myNotes.map(note =>
            !note.is_private ? 
                <p>{note.text}</p>
            : null
        )
    }
    </div>
)

This is a pretty straightforward solution, and if you are most comfortable in React or just the front-end of things this could be the solution that you try first.

However, here is where we run into some problems. While it is true that your average-every-day-user won't be able to see anything that has been marked as private, all you have to do to get access to those private details is pop open your browser tools, check the network tab, and find the call to the server with its response, and now you can see all the details that you want! That's obviously not good!

So let's talk about a better solution.

Second Approach

Being a backend developer, I go to my endpoint that I have built to fetch the items and notes, and I check the sql that is used to retrieve those records.

Select * From items

Select * From notes

Now all I have to do to resolve the problem is a tiny bit of sql! Like this:

Select * From items Where is_private = false

Select * From notes Where is_private = false

This way my front-end doesn't need to waste anytime determining if something needs to be rendered or not. It just renders everything that it is given!

return(
    <div>
    {
        myNotes.map(note =>
            <p>{note.text}</p>
        )
    }
    </div>
)

Final Thoughts

When it comes to rendering data that you get from your backend you can make your React app (or whatever you prefer to use) much simpler by moving the business logic to the backend, like in this situation.

Whenever I run into a case where I am using React to make a decision on whether to render something or not, I take a step back and consider why am I hiding it from the user? In many cases, like the one above, it is probably best to move that logic, and just serve less data in the first place.

By serving only what data you need from the backend, you can streamline your front-end's logic and make it much easier to understand and maintain for the future. Serve less data, use less logic to display that data.