Atila
I'm on a mission to make code simple. When not recording screencasts or courses, you may find me either writing and talking about jamstack, performance, or developer tooling.
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
🪝
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.
