🌊 Stream Away the Wait

When implementing the design of a user interface, we often finish before remembering that not everyone's running the app's services locally on their device. There's going to be network latency, long running database queries, and large datasets that can slow down the experience. We can and should do everything we can to speed things up, but not all of this is within our control. This means we need to start thinking about pending states. But pending UI is terrible.

In this talk, Kent will walk us through building a pending experience that is quite delightful. Ultimately taking advantage of React 18's new streaming APIs and a soon-to-be-released API in Remix to give a top-notch user and developer experience. Prepare to have your mind blown.

Prerequisites

• Some experience with JavaScript
• Some experience with React
• Some experience with Node.js
• Some experience with Remix

System Requirements

• git v2.13 or greater
• NodeJS 14 || 16 || 18
• npm v8 or greater

All of these must be available in your PATH. To verify things are set up properly, you can run this:

git --version
node --version
npm --version

If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.

Setup

Follow these steps to get this set up:

git clone https://github.com/kentcdodds/stream-away-the-wait-talk.git
cd stream-away-the-wait-talk
npm run setup

This will take some time. This repository has many projects in it that each need to have their own database setup. We also run type checking and the build to make sure things are ready to rock and roll 🤘

If you experience errors here, please open an issue with as many details as you can offer.

Running each app

Each directory in the apps directory is a Remix app. The easiest way to run these without having to cd into each directory is to use the dev.js script in the root of this repository:

# to run the first app:
node dev 1

Each will run on a unique port so you can run multiple apps at once.

Alternatively, rather than opening this whole repo in an editor window, you open each exercise folder in an individual editor window (this will make things like ⌘+P more useful).

Playground

The playground allows you to quickly change between the different apps via the advance script:

# To set the playground to the 4th app:
node advance 4

Then to run the app, run:

# starts the playground in dev mode
node play

Diff

You can us the diff.js script to be shown the differences between what's in any of the apps. For example:

# to be shown the differences between the fifth app and the sixth:
node diff 5 6

This can be handy for you to run when you think you're done but things aren't quite working as you expect.