Remixing Usability

2022

with Performance

(he/him)

User Interface

User Experience

Usability

{...design}
{...design}

UI

UX

Usability

✨

Excuse me. That you?

click
mutation event
mutation request
response
update content
woohoo!

Event Waterfalls

click
mutation event
mutation request
response
update content
woohoo!

🏁

0s

Mutations

Optimistic

Optimistic

let’s try something

click
mutation event
mutation request
response
update content
woohoo!
βœ…

β€œExpect...

...the unexpected”

those 1 every 999

click
mutation event
mutation request
πŸ’₯
update content
woohoo!
update content
Pardon. retry?

important notes

if your App/API fails often, you probably have a bug

not a silver bullet

πŸ›

πŸ”«

then

when?

when the response is not critical for the user experience

when you trust the availability of the resource

🐢

β˜€οΈ

loader function

when a page loads

`GET`

requests

⬇️

βš™οΈ

action function

when a data mutates

`POST`

requests

⬆️

βš™οΈ

`PUT`
`DELETE`
`PATCH`
`useLoaderData()`
`useActionData()`

useTransition()

GET form submission
POST / PUT / PATCH / DELETE form submission

from remix

not react

⚠

navigation
idle
idle
loading
idle
idle
submitting
idle
idle
submitting
loading

1️⃣

2️⃣

3️⃣

const PageComponent = () => {
  const initialData = useLoaderData()
  const transition = useTransition()

  return (
    <h1>
      {transition.state === 'submitting'
        ? `Submitted ${transition.submission.formData.get('username')}`
        : `Already have ${initialData?.username || 'nothing'}`
       }
    </h1>
   )
 }

routes/page.jsx

demo

time

useFetcher()

This hook lets you plug your UI into your actions and loaders without navigating

-- from Remix docs

POST
PUT
DELETE
PATCH

Action

Function

Loader

Function

<Form>
<fetcher.Form>

vs

<form>

vs

HTML5 Logo

πŸͺ

const PageComponent = () => {
  const { data, submission, state } = useFetcher()
  const initialData = useLoaderData()
  
  const formData = submission.formData

  const food = fetcher.data
    ? `${data.cuisine} ${data.dish}`
    : initialData.food

  return (
    <h1>
      {state === 'submitting'
        ? `We are eating ${formData.get('dish')} for dinner`
        : `We are eating ${food || 'nothing'} for dinner`
      }
    </h1>
 }

routes/page.jsx

demo

time

So, are Optimistic Mutations aΒ 

thing?

No.

state chart

thanks

being optimistic is cool

JSCONF πŸ‡―πŸ‡΅ - Remixing Usability with Performance

By Atila

JSCONF πŸ‡―πŸ‡΅ - Remixing Usability with Performance

Remix is a framework revitalises web development by putting progressive enhancement in the front seat. It creates solutions that approximates developers to the platform. It uses Developer Experience as means to enforce web best practices and with that brought the term Optimistic UI back to our daily lives. Let's have a look at what features the Remix offers out-of-the-box to get developers creating high-quality web apps easily and deploying them anywhere that can run JavaScript.

  • 312