Aplikasi Bola Sepak Saya Berfungsi Dengan Sempurna Sehingga Hari Perlawanan Bermula
Membina aplikasi bola sepak nampak mudah pada mulanya.
Saya merancang untuk mengambil data perlawanan, memaparkan pasukan, memaparkan skor, dan menyegarkan data setiap beberapa saat. Ia berfungsi semasa ujian. Saya menggunakan dua tab dan beberapa perlawanan contoh. Semuanya nampak baik.
Kemudian, hari perlawanan yang sibuk yang pertama tiba.
Beratus-ratus pengguna membuka aplikasi tersebut secara serentak. Permintaan (requests) bertindih. Sesetengah skor kelihatan bergerak ke belakang. Aplikasi tersebut mengambil data yang sama secara berasingan untuk setiap pengunjung.
Saya belajar bahawa aplikasi secara langsung (live app) bukan sekadar laman web yang disambungkan ke API. Ia adalah sebuah sistem penyelarasan data.
Berikut adalah kesilapan yang saya lakukan dan cara saya memperbaikinya:
Elakkan polling hanya di bahagian klien (client-side) Versi pertama saya menyebabkan setiap pelayar meminta data setiap lima saat. 1 pengguna = 12 permintaan seminit. 1,000 pengguna = 12,000 permintaan seminit. Kebanyakan permintaan meminta data yang tepat sama.
Gunakan permintaan bahagian pelayan (server-side) Saya memindahkan panggilan API ke pelayan. Ini memberi anda kawalan ke atas: • Kredensial API • Caching • Had kadar (Rate limiting) • Pengendalian ralat • Pemformatan respons
Jangan sesekali menggunakan kunci (keys) dalam kod bahagian klien. Ia tidak selamat dan mahal jika seseorang mencuri kunci anda.
Bina lapisan pemetaan (mapping layer) Saya berhenti menghantar data API mentah secara terus ke komponen saya. Jika penyedia menukar nama medan, UI saya akan rosak. Sekarang, saya memetakan data penyedia ke dalam format dalaman saya sendiri terlebih dahulu. Ini memastikan UI saya stabil.
Gunakan Komponen Pelayan (Server Components) untuk kelajuan Daripada memaparkan skrin pemuatan (loading screen), saya memuatkan perlawanan awal di pelayan. Pengguna dapat melihat kandungan dengan serta-merta.
Laksanakan polling pintar Aplikasi tidak sepatutnya menyegarkan data jika tiada perlawanan yang sedang berlangsung. Saya menambah semakan untuk menghentikan polling apabila perlawanan tamat. Ini menjimatkan sumber pelayan dalam jumlah yang besar.
Baiki race conditions Kadangkala Permintaan B kembali sebelum Permintaan A. Ini menyebabkan skor kelihatan seperti bergerak ke belakang. Saya menggunakan
AbortControlleruntuk membatalkan permintaan lama sebelum memulakan permintaan baharu.Kendalikan ralat dengan baik Jika penyegaran gagal, jangan paparkan skrin kosong. Kekalkan data terakhir yang berjaya dipaparkan. Skor yang berusia lima belas saat adalah lebih baik daripada tiada skor langsung.
Sebuah demo hanya perlu memaparkan data. Produk sebenar mesti menguruskan caching, keselamatan, dan keadaan (state).
Pernahkah anda membina aplikasi secara langsung? Apa yang rosak apabila pengguna sebenar tiba?
Sumber: https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59