DEV Community

Cover image for Works, don't touch it? Or never ending optimization game?
Dmitry Amelchenko
Dmitry Amelchenko

Posted on

1

Works, don't touch it? Or never ending optimization game?

I've built a photo sharing app https://www.wisaw.com.
I use it on my iPhone all the time, and it works great for me!

Recently a friend complained that it's really slow on his iPad. So, I started digging...

Turns out, the app retrieves the photos by calling GraphQL backend, 1 day at a time, until it fills the screen. On smaller devices works like a charm, but on tablets -- lots of network calls, and painful user experience.

My goal was to figure out how to make a backend return 10 days (or more) worth of photos in one call, without making any changes to the frontend -- it's still a pain to re-deploy mobile apps.

Here is my first bruit force approach:

Image description

This actually worked. Right away, I saw the number of calls to AWS Lambda, where I host my graphQL backend, to drastically go down. Which means the application does not have to open and maintain as many network connections on slower bandwidth networks. The UX is much smoother. So, should I stop here? Well, there was still something that bothered me about the code. To my taste, the number of repetitive lines of code is insane -- typical Copy/Paste design pattern. Generally speaking I'm OK seeing it in the code when it has 2 occurrences, but 10!!! is just a way too many.

Here is the revised version:
Image description

Much better. JS Promise.all is awesome. The final version of the code is much shorter. The number of async calls can be adjusted dynamically by playing with arraySize const. Each function call returns arrays of exactly the same objects types, so I can chain flat(1) to the end. I can probably even consider passing the arraySize, depending on the device screen size, into the lambda call at some point, but that's a different story for some other time (and that would require the mobile app new release).

So, the complexity didn't really go away, arguably, the code became even more complex. But, I thought it was pretty cool to be able to optimize UX dynamics without touching a frontend. The spikiness of the network calls moved from mobile devices running on slow networks, to calls between the middleware and the database, which are much faster and reliable.

Should I have touched the code to begin with? It was working OK after all. At the end of the day, the answer is -- yes! Absolutely! I've learned how to Promise.all dynamically on a variable size array of functions. It took me like an hour of hacking on a Friday night before heading out to a weekend.
And, I've had a lot of fun, and, my friend, who started all this, is happy running my app on his tablet -- that's all that matters.

Give your career some juice. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay