Data Modeling For Liquid - Part 1

One of the reasons that Liquid is so unique is that even though it’s technically a programming language, the target users are not programmers at all. The target users are designers. So, while the “dot notation” used in Liquid is totally obvious to most programmers, often times this can be extremely confusing to the target users. Especially when they are first introduced to Liquid.

In this post, I’ll explain what data types are and build up to working with “Objects”. This is a great guide to help designers understand how data is modeled in computer systems and help them to understand what Objects are (beyond copy pasting existing Liquid examples).

Primitives

In every programming language, there are certain data types that are always available with the language called “Primitives”. These are the basic data types that you would always expect.

1. The first datatype I’ll talk about is the Numeric (aka numbers) data type. Every programming language including Liquid must have a way to store numbers, such as 3, -7, 21.675, etc. Some programming languages may have more than one data type for this, such as Integer, Floats, and Decimals. However, Liquid keeps things simple and has a single data type for this purpose that can store any kind of number. Here is an example from Liquid: {{ 2 }} (Notice there are no quotes around the 2)
   

2. The String data type represents words, such as “Hello, World”. Pay close attention to the quotes. Those are important so that Liquid knows you’re using a String and not trying to use a different data type. For example, “3” and 3 are very different for a computer. “3” is a string, while 3 is a number. An example in Liquid is {{ "Adam" }}
   

3. Next is the Boolean data type. This one is a little more abstract than the first. A boolean data type is either true or false. An example might be something like “Is the TV on?”. It either is or is not. An example from Liquid is {{ true }}
   

4. What if you need to represent the absence of data? This is where the Nil data type is used. To Liquid, this means that no data exists. Think of this as synonymous to “empty” or “blank”. Liquid simply outputs nothing when it receives a nil value.
   

5. The final data type is the Array, or list. This is exactly what it sounds like. Simply a list of other data types. Arrays are typically donated using square brackets, like this: [“a”, “b”, “c”].
   

Why Do Primitives Exist?

You may be asking yourself, why do primitives and data types exist? The reason is so that computers know how to work with various data that is being stored. For example, let’s say that you had two numeric pieces of data, such as 3 and 2. Computers are able to understand what it means to multiply these two pieces of data: 3 x 2 = 6.

However, what happens if you have a String data type and a number data type? Is it possible to multiply them together? Something like “Adam” x 2 = ??? Obviously, this doesn’t make sense. Data types tell a computer what kind of data it is working with, so that the computer can understand what things can be done with the data.

Filters

One obvious reason we need data types in Liquid is the “filter” functionality that is built in. You can find a list of the official filters on Shopify’s Liquid documentation. Now that you have an idea about data types, you’ll notice that oftentimes filters only work for specific data types.

For example, take a look at the “floor” filter. You’ll notice that this filter only works with numeric data, which makes sense since this is a mathematical operation. So, {{ 1.2 | floor }} will evaluate to be “1” when processed by Liquid.

What happens if you try this filter on another data type? When you try {{ "Adam" | floor }}, you don’t get anything useful because Liquid doesn’t understand what to do.

Objects

An extremely important concept in Liquid, and in most programming languages, is the idea of an “Object”. You can combine primitive data types together to “model” the idea of something more abstract and higher level.

As an example, let’s say that you wanted to “model” the idea of a person. In order to do this, you must take a moment and think about the “attributes” of a person. In other words, what combination of data would be used to describe a person?

Maybe your Person Object might look something like this:

‍

‍

As you can see, objects are “composed” together to create new data types, such as the concept of a Person. You can design this however you like in a way that fits your needs.

Here’s where things blew my mind when I first learned about this idea. Now that you have a data type of “Person”, you can use that data type to create new data types. For example, what if we wanted to model a “Family”. How would that look?
‍

‍
As you can see, now that we have a “Person” data type, we can use that to model the concept of a Family. The possibilities are endless.
‍

Read next: Data Modeling for Liquid - Part 2