Limitations, strategies, and examples of building performant pagination for Shopify Apps
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.
- 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.
- 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
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
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. …
A critical distinction between immutable and mutable data
All data types in JavaScript can be put into one of two categories: primitive values and object references.
Primitive values and object references behave differently. This difference in behavior affects how variable assignments are made, how equality operators get their results, and how JavaScript programs run in general.
Understanding the difference between primitive values and object references is critical to mastering JavaScript as a programming language. This piece will explain and illustrate this distinction in depth.
The following details will be covered:
- What JavaScript data types fall into each category.
- The difference between a value and a reference.
- The difference between immutable and mutable data. …
How simple addition can misfire and break JavaScript applications in ways you might not expect
Like most programming languages, JavaScript has a + operator that can be used to perform addition. Unlike other programming languages, however, the operator also serves a second purpose: string formatting.
This piece explores how the + operator works, and how it can misfire and cause bugs if you aren’t careful. It also shows how these issues can be avoided in the first place.
The Basics
As mentioned, the + operator has two purposes in JavaScript:
- Adding numbers
- Concatenating strings
The + operator’s first purpose is to add numbers together. Here’s an example:
const price = 20
const shipping = 3
const tax = 3
const total = price + shipping + tax
console.log(total) …A comprehensive guide to deploying your Node.js Shopify App to a production-grade Digital Ocean server
Node.js has emerged as the preferred technology stack for Shopify app development. It pairs perfectly with React and Shopify’s Polaris UI library, making it ideal for apps that embed directly into the online stores of Shopify merchants.
This tutorial shows how Node.js Shopify apps can be deployed to a Digital Ocean production server. The server will have the following features:
- NGINX Reverse Proxy
- Node.js App launched as a PM2 process for production-grade stability
- Valid SSL certificate included for HTTPS
- Ability to easily add additional server blocks so that multiple Node.js apps can be served in parallel. This means that you can use a single $5/month droplet to host multiple Node.js …
Leaving them out looks pretty, but it could break things
When I first started writing JavaScript I thought that semicolons were mandatory. I was learning about jQuery at the time and all of the documentation I was reading showed a semicolon at the end of every statement.
I had a bit of background in some other programming languages and this was consistent with what I already knew — semicolons are there to help the computer distinguish one instruction from another. Makes sense.
It wasn’t long before I learned about JavaScript’s Automatic Semicolon Insertion (ASI). Basically, JavaScript will put semicolons in for you automatically if you leave them out. …
8 tips for breaking through roadblocks as a programmer
Programming is hard. The ability to translate an idea into code isn’t something that comes naturally to most people, and sometimes we get stuck.
Even after coding for years, you will still hit roadblocks regularly. Computer programming is an incredibly deep field, and it just isn’t possible to master everything about it.
Plus, we all have bad days sometimes.
Maybe you can’t fix a stubborn JavaScript error, or you can’t explain why your website looks completely broken in Internet Explorer, or maybe you can’t even start your development server.
Software can break in an almost unlimited number of ways, and it often does. …
4 other ways of handling conditional logic in your code
“To a man with a hammer, everything looks like a nail” — Abraham Maslow
I like to think of conditional logic as the bread and butter of software. It gives developers the power to build things that are interesting, useful, and fun.
The most popular way of handling conditional logic is the if statement. The if statement is universal, flexible, and easy to understand, so its popularity comes as no surprise.
There are, however, other ways of handling conditional logic that are often overlooked by developers. …
Introducing Sets, the ES6 data type you didn’t know you needed
The Set object type was introduced in the 2015 ECMAScript specification and is ready to be used in Node.js and most browsers.
Sets are a lot like Arrays, but a bit different. This article explores these differences and explains when one should be used over another. Let’s take a look.
Sets, the New Kid on the Block
Sets are a special object type available in ES6. You can create an empty set like this:
const characters = new Set()Or, you can pass an iterable into the Set’s constructor to populate it. …
About
