Enhancing the User Experience

Remix enables us to build applications with progressive enhancement in mind. In Remix, enhancing the user experience can be achieved by making additive changes. This allows us to follow a simple step-by-step process to build our applications.

In Chapter 5, Fetching and Mutating Data, we added data loading and mutations to our BeeRich application. When building out the create expense form, we first implemented the UI to work without JavaScript and then enhanced the browser’s default behavior with JavaScript. By doing so, we progressively enhanced the experience.

In this chapter, we’ll cover the following topics:

• Understanding progressive enhancement
• Prefetching data
• Working with action data
• Handling concurrent mutations

First, we will formalize how progressive enhancement works in Remix. After that, we will focus on advanced data loading and mutation topics, including how to prefetch loader data and assets...

Technical requirements

Before you start this chapter, follow the instructions in the README.md file in this chapter’s folder on GitHub. You can find the code for this chapter here: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/06-enhancing-the-user-experience.

Understanding progressive enhancement

In this section, we will learn more about the motivation behind progressive enhancement and introduce best practices for working with progressive enhancement in mind.

Progressive enhancement is a design philosophy that aims to create a baseline user experience for users on older devices and browsers. Building with progressive enhancement in mind is like designing mobile first; you start with a minimal UI for small screens and progress from there.

A less frequently used term is graceful degradation. Graceful degradation describes a similar idea: striving for the best experience possible while supporting older browsers and devices. Progressive enhancement works upward, while graceful degradation works downward.

Progressive enhancement in Remix

Remix allows us to build highly dynamic user experiences by utilizing web standards. Remix, by default, works without JavaScript. When working with progressive enhancement in mind, we can enhance...

Prefetching data

In this section, we will learn how to prefetch assets and loader data in Remix and how to utilize prefetching to speed up transition times.

Remix compiles the routes folder into a routing hierarchy at build time. The hierarchy information is stored in an asset manifest in the public folder. This asset manifest is used by both Remix’s frontend and backend applications.

Since Remix has access to the asset manifest on the client, Remix knows in advance which loader functions to call to transition to a route. This allows Remix to prefetch loader data (and route assets) before the transition.

Enabling prefetching in Remix is as easy as setting a prop on the link we want to prefetch data for:

1. Open the /app/routes/dashboard.tsx file in your editor.
2. Add the prefetch property to the Income and Expenses navigation links:

   <ul className="mt-10 w-full flex flex-row gap-5">  <li className="ml-auto">  ...

Working with action data

The loader and action functions contain most of the business logic of our Remix application. This is where we fetch, filter, and update data. Both functions must return a Response object. You know about the redirect and json helper functions, which let us create specific Response objects, and you have already practiced working with loader data. In this section, we will learn how to work with action data. For that, we will update the expense details view and implement an edit expense form:

1. Open the dashboard.expenses.$id.tsx route module in your editor.
2. Take the current code from dashboard.expenses._index.tsx. Can you modify the code to edit an existing expense? Give it a try!

   The final code for this chapter is available in the /bee-rich/solution folder on GitHub for this chapter. As we move forward, we'll help you align your work with this final solution.

3. Make sure to update the form's action property using the expense object from the...

Handling concurrent mutations

So far, we have created expense creation and edit forms. Both forms are standalone on their respective pages. This section will teach you how to manage multiple form submissions simultaneously. Let’s start by adding a deletion form to every item in the expense overview list.

Adding a form to a list

The goal of this section is to add a deletion form to every list item in the expense overview list. Clicking the item should delete the associated expense. Let’s get started:

1. If you haven't already, follow the instructions in the README.md file of this chapter on GitHub: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/blob/main/06-enhancing-the-user-experience/bee-rich/README.md.

   The README.md file includes instructions for how to update the ListLinkItem component for this chapter.

2. Next, open the dashboard.expenses.$id.tsx route module.
3. Add a deleteExpense function to the route module:

   async function...

Summary

In this chapter, we learned about progressive enhancement. Progressive enhancement is a design philosophy that aims to create a baseline user experience for users on older devices and browsers.

You learned that Remix’s primitives work with and without JavaScript. This allows us to progressively enhance the experience and make our application accessible to more users. By building with progressive enhancement in mind, we ensure a simple but resilient experience for as many devices and browsers as possible. Once we ensure a baseline experience, we can enhance the experience with JavaScript.

Next, you learned that Remix can scale both up and down. We can start simple and even disable JavaScript, but by making additive changes, we can create highly dynamic experiences with concurrent mutations, data revalidation, and prefetching.

Remix provides levers to optimize the experience for what is important to us. We can decide how aggressively we want to prefetch data by...

Further reading

The Remix team has created an amazing video series called Remix Singles that goes in depth into how to work with data in Remix. I recommend that you watch the entire series. Most notably for this chapter, the series has a video about concurrent mutations with useFetcher that you can find here: https://www.youtube.com/watch?v=vTzNpiOk668&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6.

The Remix documentation includes a page about progressive enhancement: https://remix.run/docs/en/2/discussion/progressive-enhancement

You can also read more about progressive enhancement in the MDN Web Docs: https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement.

You can find more information about the useFetcher hook in the Remix documentation: https://remix.run/docs/en/2/hooks/use-fetcher.