Bayangin Kamu Lagi Naik Gunung...
Bayangin Budi lagi di puncak gunung dengan sinyal internet super lelet. Budi buka Instagram, lalu nge-klik ikon hati (Like) di foto Siti. Walaupun sinyalnya jelek dan loading muter-muter, anehnya ikon hati itu LANGSUNG berubah warna merah saat disentuh jari Budi!
Padahal logika programming standar bilang: Kita harus nembak API *Backend* dulu POST /like, nunggu database MySQL nge-save datanya, nunggu respon 200 OK balik ke HP Budi, barulah ikon hatinya boleh dicat merah. Tapi kalau nunggu proses itu selesai, ikon hatinya baru akan berubah merah 5 detik kemudian. Pengguna pasti ngira aplikasinya macet!
Masalahnya: Jeda Jaringan (Latency) Menghancurkan UX
Menunggu kepastian dari Server sebelum mengubah tampilan layar (Pessimistic UI) membuat aplikasi terasa lambat dan kaku.
Nah, Di Sinilah 'Optimistic UI' Masuk!
Frontend Developer Instagram tidak mau penggunanya merasa menunggu. Mereka menggunakan trik ilusi yang disebut Optimistic UI (Tampilan Optimis).
- Saat Budi mengeklik ikon Hati, aplikasi React di HP Budi bersikap terlalu PD (Optimis). Aplikasi langsung mengubah *State* lokalnya dan mengecat hati itu menjadi merah SECARA INSTAN di milidetik yang sama.
- Di latar belakang (secara diam-diam), aplikasi baru mulai mengirimkan Request HTTP ke Server Instagram.
- Skenario A (Sukses): Server membalas
200 OK. Tidak ada yang berubah di layar, Budi senang. - Skenario B (Gagal): Ternyata kuota Budi habis dan *Request*-nya gagal. Barulah aplikasi bereaksi menarik kembali kata-katanya: "Ups, maaf gagal!", dan memutar balik warna hatinya menjadi putih lagi secara otomatis (Rollback).
Intinya: Optimistic UI adalah seni berbohong kepada pengguna. Kita memberikan ilusi kecepatan instan seolah-olah data sudah tersimpan, sambil menyembunyikan kerja keras jaringan internet di belakang layar.
Mau langsung pakai template?
Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.
Browse Templates