Designing modern ecommerce frontends with a React framework

React is the ideal JavaScript framework to achieve optimal page speeds and load times.

React.js is one of the most popular — if not the most popular — JavaScript libraries used by developers to build user interfaces. And with big names like Netflix and American Express using React to build their sites, it’s no wonder why it’s starting to catch on in the world of ecommerce. 

Now, when we look at the major pain points that ecommerce businesses face, much of the frustrations boil down to site speed and user experience. When using a monolithic ecommerce platform, such as Shopify, there’s not much that can be done in order to get their sites up to par. With a headless approach, decoupling the frontend and the backend of these platforms opens the door to new possibilities. And that’s where React comes into play. Using React, you can design a modern ecommerce frontend that utilizes Shopify’s strong backend. 

But how is that done? Let’s discuss. 

What is React?

The frontend framework that’s allows for more optimal performance and load times

React is a superior framework that’s been around for a while, but brands are just now starting to catch on to its potential and overall impact on conversion. Created and now maintained by Meta (formerly Facebook), React is an open-source frontend JavaScript library that’s used to build user interfaces. Through React's library, developers can find a collection of JavaScript code snippets that can be reused for their own projects. 

Shopify uses a combination of HTML, CSS, and JavaScript on its own “liquid” framework. While it can be very powerful, it’s not the most efficient. React, on the other hand, combines all of the raw HTML and CSS into a neatly packed JS file. When that file is executed, it unwraps only the necessary HTML, CSS, and Javascript code required to make a page function properly. 

How does React work?

Demystifying the inner workings of React

If you’re not a developer, the documentation surrounding React can get a bit confusing. In its simplest form, React is truly just JavaScript. But, there are a couple of elements that separate React from its competitors, like Angular or Vue. Let’s take a look at what sets React apart. 

Declarative code

React is declarative as opposed to imperative. In terms of development, declarative means that you tell JavaScript what to do instead of how to do it. 

To put this into context, imagine you’re ordering a beer from the bar. If you were to do this imperatively, you might give these instructions to the bartender:

1. Grab a pint glass from the shelf.
2. Put the pint glass in front of the draft
3. Tilt the pint glass at a 45-degree angle — no weak pours!
4. Pull down the draft handle and start pouring the beer into the pint glass
5. As it fills up, tilt the glass back to its upright position until the pint glass is full. 
6. Pass the pint glass to me. 

Now, when we order our beer declaratively, we just say, “Can I get a beer, please?” 

Taking this back to programming, a declarative approach only requires developers to describe what actions they want to program to do rather than defining the task step-by-step. In turn, the code will be much simpler and more readable. It also leads to less buggy code that’s easier to maintain. 

Virtual DOM

A Document Object Model (DOM) is a programming interface for documents on the web. HTML documents are comprised of tags, and the DOM recognizes every tag as an object and represents the data in a tree structure. Accessible through JavaScript, DOMs allow developers to modify UI elements in a structured format. The issue, though, is that every time a developer changes something, the entire DOM is updated and UI components are re-rendered to reflect those changes. 

On the other hand, React uses a Virtual DOM, which is essentially a lighter copy of the true DOM of the site. When making updates, the Virtual DOM is updated first rather than the true DOM. While it may seem counterintuitive to update two documents as opposed to one, it actually makes the process much faster. As a developer adds new elements or makes changes to the application, a Virtual DOM is created to host that information in the same tree format. The Virtual DOM gets compared to the real DOM and finds the best way to make changes to the original DOM. In this approach, only the updated elements are rendered rather than the entire DOM itself. 

How does a React ecommerce frontend differ from Shopify’s frontend framework?

Building on React allows you to use less code than you would on a typical Shopify website to drastically improve site speed

A detached Shopify site with a frontend built on React framework, like TimTam, will load much faster than a traditional Shopify site. 

Normally, when you load a page on Shopify, you are “calling” a CSS file of 10,000 lines, a half dozen HTML files, and many JS scripts. Do you really need all of that code to load your product page? No. What you really need is a stripped-down version. A lot of that code that gets called is nonessential to the page you are currently viewing. It applies to other modules and pages on the site. But, it still gets called. Every. Single. Time. 

The calling and subsequent execution of pointless code will drive up your initial paint. React, however, lets you escape this process. You only load the exact code you need at any given point in time. This means that your initial paint will be much faster than that of a normal site. Now we’ve got our strategy for the frontend framework, what happens when we connect it to Shopify’s backend? And how’s that approached? 

How React + Shopify work together to create better ecommerce experiences

Understand how a marriage between a React ecommerce frontend and a Shopify backend could streamline your site loading times

Now that we have a general understanding of where we are going, it’s time to understand how React’s frontend framework and Shopify’s backend work together. The process begins by building out our frontend framework in React and letting our backend continue to operate out of Shopify — that’s our winning combination. The speed benefits of React and the backend purity of Shopify are what we like to call headless done right. 

But, how do we get this React frontend to integrate with Shopify’s backend? Shopify’s Storefront API (Application Programming Interface) is the answer. This API allows us to display product data, cart information, and other data points — all separate from their true liquid environment. This is how we get our relevant backend information to render instantly on our separated frontends.

Here is a breakdown of the data flow: 

And just like that, we’ve got our headless commerce solution. A fast React ecommerce frontend that seamlessly integrates with Shopify’s backend via the Storefront API. This structure will impact most of what you’ve come to know and love using a more native Shopify setup.

‍

This is the second blog in the bl!nk guide to no-code headless ecommerce.