Aplikasi Offline-Pertama yang Optimis Dengan Vuex
TL;DR — Gunakan Vuex plugins bersama dengan localForage untuk menyimpan data aplikasi dengan cara yang optimis dengan mudah
Anda mungkin bertanya-tanya apa yang ada di balik kata-kata kunci ini, jadi mari kita mulai menjelaskannya satu per satu.
Penguncian Optimis
Strategi kontrol konkurensi yang mengasumsikan konflik umumnya tidak akan terjadi, sehingga bertindak seolah-olah operasi telah selesai dan kembali jika terjadi kegagalan. Strategi ini cukup umum saat ini di domain pengembangan web. Anda dapat melihatnya beraksi saat Anda “Menyukai” di Facebook, saat Anda menulis postingan blog di Medium, dan hampir di semua tempat. Dari segi implementasi, Anda harus ingat untuk menangani kegagalan juga dan bagaimana mengembalikannya ketika operasi gagal. Dari segi pengalaman pengguna, strategi ini adalah yang terbaik karena pengguna tidak perlu menunggu hingga permintaan selesai.
Offline-Pertama
Kita hidup di dunia yang tidak terhubung dan bertenaga baterai, namun teknologi dan praktik terbaik kita adalah sisa dari masa lalu yang selalu terhubung dan bertenaga baterai. — offlinefirst.org
Kemampuan offline adalah suatu keharusan dan sejujurnya tidak terlalu sulit untuk dicapai seperti yang Anda lihat di postingan blog ini. Pada dasarnya berarti aplikasi Anda dapat bekerja meski tanpa konektivitas sama sekali, tentu saja bukan berarti semua fitur akan disediakan melainkan sebagian saja. Untuk tujuan ini kita dapat menggunakan Service Worker, Web SQL, IndexedDB dan banyak alat lain yang disediakan oleh browser. Saya menggunakan localForage sebagai abstraksi untuk penyimpanan offline daripada bekerja dengan API tingkat rendah.
Vuex
Pola manajemen negara + perpustakaan untuk aplikasi Vue.js. Ini berfungsi sebagai penyimpanan terpusat untuk semua komponen dalam aplikasi — vuex.vuejs.org
Vuex sangat mirip dengan Redux dan banyak toko terpusat lainnya. Saya akan mencoba menjaga semuanya tetap agnostik karena konsepnya hampir sama di setiap toko terpusat. Yang terpenting bagi kami adalah kemampuan berlangganan mutasi yang terjadi pada toko. Dengan cara ini kami dapat menyimpan data yang relevan dalam cache atau menyinkronkannya kembali ke server kami. Selama Anda dapat berlangganan mutasi, perpustakaan lain mana pun bisa melakukannya.
Mari kita mulai dengan bagian yang mudah, menyimpan data dalam cache untuk kemampuan offline.
Pertama kita memerlukan layanan untuk menangani operasi cache, sebut saja Penyimpanan. Itu harus mengekspor 3 fungsi untuk mengelola negara, mendapatkan, mengatur dan menghapus. Semuanya di sini cukup mudah, satu-satunya hal yang tersisa di sini adalah menulis fungsi untuk memetakan objek status ke objek cache. Biasanya Anda ingin menghapus beberapa kolom sementara atau memanipulasi status dengan satu atau lain cara.
Sekarang kita harus membuat plugin yang memanfaatkan layanan Penyimpanan kami untuk memperbarui status cache di hampir setiap mutasi. Sekali lagi implementasinya sangat sederhana, satu-satunya yang tersisa di sini adalah menulis fungsi yang memutuskan apakah cache harus diperbarui atau tidak berdasarkan mutasi (jika diperlukan juga statusnya).
Status kami sedang di-cache pada setiap mutasi tetapi kami masih harus memuatnya saat aplikasi dimulai. Mari tambahkan mutasi yang mengatur status dari cache dan plugin kita (untuk saat ini harap abaikan plugin sinkronisasi, kita akan membahasnya). Mutasi loadFromCache menerima objek yang di-cache dan memperbarui statusnya (di vuex Anda harus mengulangi properti untuk alasan reaktif). Saya juga ingin menyimpan tanda di negara bagian untuk mengetahui apakah negara tersebut sudah diinisialisasi dari cache.
Satu-satunya yang tersisa adalah memanggil mutasi loadFromCache setiap kali aplikasi boot. Anda dapat menggunakannya sebagai Vue Router guard atau sesuai keinginan Anda. Di bawah ini adalah konsep umum penerapannya.
Aplikasi kita sekarang menyimpan semua data ke semacam penyimpanan cache, memastikan kita dapat mengaksesnya bahkan ketika tidak ada konektivitas. Sekarang kita perlu memastikan bahwa data yang relevan dikirim ke server. Plugin di sini penuh dengan logika bisnis tetapi saya akan memberikan skemanya sehingga Anda dapat menulis sendiri. Plugin berlangganan mutasi penyimpanan dan berdasarkan jenis mutasi Anda harus mengirimkan permintaan masing-masing ke server. Jika terjadi kegagalan, plugin harus melakukan mutasi ke penyimpanan agar aplikasi mengetahui bahwa permintaan gagal.
Selesai, kita berhasil! Semoga sekarang Anda sudah paham apa itu aplikasi offline-first yang optimis dan betapa mudahnya Anda bisa mencapainya. Hal ini juga membantu meningkatkan pengalaman pengguna karena aplikasi menjadi lebih toleran terhadap hal-hal seperti konektivitas, waktu permintaan yang lama, dll. Pada akhirnya, pengguna Anda akan mendapatkan pengalaman yang jauh lebih baik, sehingga membuat mereka kembali lagi dan lebih terlibat dengan aplikasi Anda.
Kami telah menerapkan teknik ini dan banyak lagi saat membangun Daily Go, cobalah!
