楽観的な更新の記事を読んだ

UI が嘘をつく？ UX デザインにおける「楽観的な更新」と SPA での作り方

読んだ。

楽観的な更新、なんか聞いたことはあるな〜くらいの感覚だった。

Twitter や Facebook のいいねはたしかに押したらすぐに UI が変化するけど、例えばいいねする前にそのツイートが消えてて、画面を更新せずにいいねした場合でもちゃんといいねに色がつくし、画面を更新したらツイートは消えてるのでもちろん当該ツイートは取得されない。

なるほど、たしかにユーザーにとっては待ち時間のストレスがなく直感的に分かりやすい。

もちろん使いどころは見極めなくてはいけないけど、ユーザー体験がよくなるので使っていけたら良さそう。

redux-offline

ボタンを押したら UI の状態変更と API リクエストの action を同時に dispatch して、API のレスポンスに応じた aciton がまた dispatch されて、エラーだったら適切にハンドリングしつつ UI の状態を戻すみたいな感じかなと思って読んでいたら、redux-offline なるライブラリがあるのを知った。

アプリケーションがオフラインになってしまう時に、サーバーへのリクエストが一度ペンディング状態になります。この時、UI 側の楽観的な更新には影響しません。ネットが復帰した時に溜まったリクエストが自動的に再開します。

なんて便利な……。

redux-offline/redux-offline: Build Offline-First Apps for Web and React Native

Vue にもこういうやつあるのかなと思って調べたらあった。

filrak/vue-offline: Offline states and storage for Vue PWA

vinayakkulkarni/v-offline: Simple VueJS component to detect offline & online changes.

star の数がすべてではないけど、結構使われてる量には差がありそう。

@redux-offline/redux-offline vs v-offline vs vue-offline | npm trends

うーむ。