"i only speak liquid" #50: A Review on Remix 🔀

Hey everyone!

I'm excited to say this is my first contribution to the i_only_speak_liquid newsletter! I'm Mike, a freelance web developer and a member of the Storetasker network.

What I’ve been thinking about:

As we approach the release of the next Shopify Editions this summer, I wanted to take a moment to highlight an impactful piece of technology that Shopify announced in last summer's Editions: The default template for building new Shopify applications would be powered by Remix. I think now would be a great time to review this move, including the history and motivations behind Shopify's acquisition of the framework.

A Brief Overview of Remix

Remix is a full-stack React meta-framework, first released in November 2021. You'll often hear about Remix in comparison to another popular React meta-framework, Next.js. Both are open-source efforts but Next has been managed by its backing company, Vercel, since its inception. Remix was initially created by Michael Jackson and Ryan Florence, known typically for their excellent React Router npm package, which as of the writing of this post, is being downloaded over 9 million times a week! 🤯

From the outset, Remix aimed to address the pain points that developers often face when building web applications that require sophisticated data handling, state management, and server-side rendering. By embracing a more unified approach to front-end and back-end development, Remix sought to bridge the gap between the two, enabling developers to build more cohesive and maintainable applications.

A year after first Remix's V1 release Shopify announced that they would be acquiring the framework. This underscored Shopify's dedication to remaining at the forefront of web development and their continued efforts to provide best-in-class development experience for our community. In the announcement, Shopify points to some reasons why Remix was a perfect fit, namely the framework's emphasis on

• Progressive enhancement

• Reducing / eliminating loading states

• Support for edge runtimes

Throughout 2023, Remix would be woven into Shopify's infrastructure. It's now powering their headless stack Hydrogen and is the default template when building new Shopify Apps.

Features & Impact

Let's take a look at some of the reasons Shopify was inspired to bring Remix in-house.

Simplified Data Loading and State Management

If you plan on creating a storefront with Hydrogen, or building Shopify Apps, Remix's approach to data loading and state management is a game-changer. One of the challenges developers often face when working with e-commerce platforms is the need to manage and fetch data from various sources, such as product catalogs, inventory systems, and customer data. This process can quickly become complex, leading to convoluted code and increased maintenance overhead.

Remix takes an opinionated approach and introduces the concept of route loaders and actions. The loader function is used to provide data to your route, and the action function is used to perform data mutations.

With the loader and action API being the same, Remix allows you to co-locate components, styles, and server-side code, simplifying the process of data fetching and mutations directly within the component files.

Improved Performance and SEO

Remix places a strong emphasis on performance, leveraging techniques like server rendering, code splitting, and optimized data fetching. With server-side rendering, Remix ensures that the initial page load is handled on the server, resulting in faster rendering times and improved SEO. Additionally, Remix's code splitting capabilities allow for efficient loading of application code, further enhancing performance and improving the overall user experience. See below:

This edition is sponsored by: Paper Run

The easiest way for DTC brands to reach customers who don't open their marketing emails.

To sponsor our next edit: Submit your info here.

3 links you can’t miss:

1. Remix - The team at Remix wonderfully showcases the key elements of the framework on its homepage, so if you haven't checked it out yet, I'd encourage you to!

2. Remix 2023 Keynote - Prefer a talk-style explanation of Remix? This is it!

3. Web Vitals - While we're concerning ourselves with creating the best user experiences we can, being familiar with the Core Web Vitals is paramount in building high quality apps and sites.

1 app I like:

Loop Returns

If you're working with a merchant that has to handle and process returns frequently, I'd highly recommend checking out Loop Returns. I recently helped a client get up and running with is tool and was very impressed by the user experience. With Loop, customers can enter their order number, see each product that was included in that order, and request a refund or an exchange for a different item. It streamlines the returns process in a way that feels exceptional.

One learning as a freelancer:

I've always had a lot of interests in the tech and development space. I've tried to stay well rounded as I grow and I've touted my jack-of-all-trades persona for a long time. More recently, however, I've been mulling over the idea that there are more things I want to learn/build than there is time to do them. I'm certainly not the first to think this, but I'm only now internalizing the idea. If you feel like you're "stretched thin," consider this video from Cal Newport about how doing less is the best way to become more valuable. Saying "no" to a project can be tough, and sometimes it's a privilege to have that luxury, but I think Cal's points are useful to consider when assessing your workload and the direction you want to go in.

Mike