What do you want?

Maximizing on Data for Performance

B. Chepkorir
SD Tidbits
3 min readAug 27, 2022

--

Photo Credit: colex.org

Front-End development, is not always about the HTML & CSS. Often, we are also critical about the data too. Especially as it relates to application performance.

Performance is usually the goal of most UI optimization efforts. I’d wager making the UI more intuitive and accessible should be included as well. But, I digress.

Ensuring the UI is making efficient data requests and maximizing usage of that data is a great way of reducing the number of http requests. This can translate into reduced loading times or look-ups with suggestions for end-users — tangible value.

Efficient data requests can be relative depending on the application. However, it often means that the UI is asking just for the data it needs and only when it needs it. This could be when the data is not available in app state, or the data has gone stale.

🤔You might be thinking that this sounds like a job for GraphQL and Elasticsearch. It also sounds like a revamp of tech stack and architecture which can be easier said than done. It doesn’t hurt to first verify that these tools truly fit in the software ecosystem. #PoC

Maximizing on data utilization could simply mean exposing data, from a common source, to all app processes and components that need it. This necessitates having efficient app state management as well. There are many ways of going about that. You can leverage Web APIs to use local or session storage. You could also Redux it. For Angular apps, can you go wrong with NgRx?

Another great thing about these tools is how easy they make it to scale an operation.

But, how would this look?

Well, for a small Twitter-like app, called Chirps 👀, the /profile endpoint can some times get just username. Other times, it can get email address, location, and date of birth — depending on whether the user is signed-in or not. Then, it would keep these info in app state for that user’s session. So, username can be referenced in multiple components or functions without additional requests to /profile.

Is this the best example? No, just a general idea.

Ultimately, as with most things, the results speak for themselves.

--

--

B. Chepkorir
SD Tidbits

Software Development Enthusiast | Writer on Code Like A Girl & FreeCodeCamp -- I "talk" fast