Limitations, strategies, and examples of building performant pagination for Shopify Apps

Image for post
Image for post
Photo by Carolina Gonçalo on Unsplash

This article is written as a practical guide to implementing pagination in a Shopify App. The example code assumes a tech stack of React.js and PHP Laravel, but the concepts discussed can be applied to other tech stacks fairly easily.

Why is Pagination Important?

Pagination is an essential concept in application development for two main reasons.

  1. Firstly, pagination can be used to improve the overall UX (user experience) of your app. Very long lists that are not paginated can be a pain to scroll through and navigate.
  2. Secondly, pagination is critical for app scalability and performance. By providing results in pages rather than all at once we can reduce the load on the backend (fetching and returning a long list of items is expensive for the web server) and frontend (rendering a long list of items is expensive for the browser) of our application. …


Or more accurately… how to get around this limitation

Image for post
Image for post
Photo by Markus Spiske on Unsplash

Shopify’s Metafield REST API is an excellent resource for App and Theme developers, but it comes with a notable limitation — empty strings cannot be saved! This post explores this problem and presents two approaches that can be used to solve it.

The Problem

Let’s look at an example. Say that you are building a Shopify App that has an optional “Disclaimer” setting that can be used to display a disclaimer to customers.

Merchants using your App can either fill in the disclaimer’s text input or they can simply leave it empty if they prefer not to show a disclaimer.

From the merchant’s perspective, the option could look like…


Map, filter, and reduce are great, but the simple for loop is still a great tool for JavaScript programmers

Image for post
Image for post
Photo by Peter Thomas on Unsplash

I’ve read a lot of articles lately that recommend that developers “stop using for loops” in favor of more specialized looping techniques like map, filter, reduce, forEach, etc.

I agree with this recommendation to some extent. Map, filter, and reduce are great tools and I get a lot of value from using them in my own programs.

But on the other hand, there is nothing wrong with simple for loops. For loops are just as good as map, filter, and reduce in many situations. And in some other situations, a plain for loop can be the best option available.

This article will explore four situations where simple for loops are still a good choice. The examples below are written in JavaScript, but the general principles extend to other programming languages as well. …

About

Chris Geelhoed

Software developer and teacher

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store