5 poin oleh GN⁺ 2023-12-02 | 1 komentar | Bagikan ke WhatsApp

Kompleksitas pengelolaan data

  • Engineer frontend mulai menyadari perlunya melakukan cache pada data API.
  • Awalnya dimulai dari penyimpanan data yang sederhana, tetapi seiring bertambahnya permintaan fitur, mereka akhirnya mengimplementasikan cache data, indeks manual, optimistic mutations, invalidasi cache rekursif, dan sebagainya.
  • Fitur-fitur ini mirip dengan cara kerja internal database, dan pada aplikasi frontend yang kompleks pada akhirnya akan mengarah pada pembuatan database yang terspesialisasi untuk domain tertentu.

Dasar-dasar cache

  • Dimulai dengan menyimpan hasil permintaan API ke variabel lokal.
  • Pada aplikasi web yang menggunakan framework deklaratif, data disimpan di variabel untuk mencegah permintaan API yang tidak perlu.
  • Langkah berikutnya adalah memindahkan cache ke lapisan yang lebih tinggi atau ke luar UI tree.

Peningkatan kecepatan melalui indeks

  • Dengan mengatur data dalam cara tertentu, pekerjaan aplikasi dapat dikurangi dan pengalaman pengguna dapat ditingkatkan.
  • Ditemukan bahwa optimasi data frontend mirip dengan cara kerja internal penyimpanan database.
  • Struktur data diperbaiki dengan menyimpan data berdasarkan ID dan membuat indeks yang memungkinkan item dicari dengan cepat berdasarkan tanggal.

Optimistic mutations

  • Mensimulasikan efek dari suatu tindakan secara lokal tanpa menunggu respons server.
  • Ini membuat antarmuka pengguna tampak bereaksi seketika, tetapi jika hasilnya berbeda dari server, UI harus melakukan rollback terhadap perubahan tersebut.
  • Ada tantangan seperti menduplikasi logika antara klien dan server, menangani error asinkron, serta menyesuaikan perubahan setelah aplikasi dimulai ulang.

Invalidasi cache rekursif

  • Data muncul di banyak tempat dalam cache, dan setelah pembaruan perlu dilakukan invalidasi cache dengan tepat agar tetap sesuai dengan server.
  • UI harus mengetahui bagian mana dari cache yang terkait dengan setiap mutasi, dan hal ini bisa menjadi rapuh seiring bertambahnya skala.
  • Ketika digabungkan dengan optimistic mutations, menjadi lebih sulit untuk menduplikasi logika server di sisi klien demi memprediksi perubahan pada server.

Sedang membangun database?

  • Pada aplikasi frontend dengan kompleksitas yang cukup tinggi, pada akhirnya banyak fitur pengelolaan data akan dibangun, dan ini menyita waktu dari upaya menyenangkan pengguna serta menyelesaikan masalah bisnis.
  • Tulisan ini menawarkan alternatif berupa stack database yang dioptimalkan untuk frontend.

Memperkenalkan SQLSync

  • SQLSync dikembangkan sebagai stack database yang dioptimalkan untuk frontend dan dibangun di atas SQLite.
  • SQLSync dirancang untuk menyelesaikan masalah pengelolaan data dan memungkinkan developer fokus pada fitur unik aplikasinya.
  • SQLSync menyediakan cache yang tahan lama, kemampuan penuh SQLite, optimistic mutations, invalidasi cache cerdas, dan reactive queries.

Opini GN⁺

Hal terpenting dalam tulisan ini adalah fenomena bahwa seiring meningkatnya kompleksitas aplikasi frontend, developer akhirnya mengimplementasikan sendiri fitur-fitur yang menyerupai database. Pekerjaan seperti ini menghabiskan waktu developer dan menjauhkan mereka dari pengembangan fitur yang benar-benar memberikan nilai kepada pengguna. Stack database yang dioptimalkan untuk frontend seperti SQLSync menawarkan pendekatan inovatif untuk menyelesaikan masalah ini. Alasan tulisan ini menarik adalah karena ia menunjukkan masalah mendasar dalam cara pengelolaan data yang ada saat ini dan mencari solusi baru agar developer dapat bekerja lebih efisien.

1 komentar

 
GN⁺ 2023-12-02
Opini Hacker News
  • Memahami teman yang merupakan pembuat proyek

    • SQLsync adalah alat yang memungkinkan pengembang frontend melakukan kueri dan pembaruan database jarak jauh dari dalam browser.
    • Alat ini bekerja dengan memanfaatkan kekuatan WASM untuk mengirim database SQLite ke browser.
    • Menggunakan algoritma reaktif untuk sinkronisasi antar banyak klien.
    • Ini adalah pendekatan yang secara inovatif menyelesaikan pekerjaan sinkronisasi data bagi para pengembang.
  • Pengalaman dengan perangkat lunak manajemen proyek di perusahaan sebelumnya

    • Data disinkronkan menggunakan mekanisme check-in/check-out, tetapi kemudian dianggap ketinggalan zaman saat aplikasi dengan pembaruan real-time mulai bermunculan.
    • Dari pengalaman membangun aplikasi web SPA selama 10 tahun, mekanisme sinkronisasi data seperti ini terasa seperti terlalu maju untuk zamannya.
  • Masalah yang hilang jika meninggalkan SPA

    • Dengan menggunakan solusi seperti Hotwire atau htmx, kueri server menjadi lebih sederhana, dan masalah membuatnya cepat lebih mudah dipahami.
  • Pendapat pembuat SQLSync

    • Ia menjawab banyak pertanyaan dan berencana memeriksa pertanyaan yang terlewat secara berkala.
    • Ia senang melihat diskusi pada postingan pertama yang berfokus pada motivasi pembuatan SQLSync.
    • Pada postingan berikutnya, ia berencana menjelaskan bagaimana SQLSync bekerja.
  • Jangan memberi pengguna model mental yang tidak sesuai dengan kenyataan

    • Sinkronisasi database bisa lebih kompleks daripada model klien-server.
    • Saat memerlukan UI yang cepat, terasa lebih aman menggunakan primitive CRDT.
  • Prinsip bahwa yang dapat diukur akan dikelola dan kekeliruan sunk cost

    • Kompleksitas database adalah masalahnya.
    • Yang menjadi masalah adalah sintaks SQL, dan jika penggunaan dasar database relasional adalah pengalaman yang menyenangkan, godaan untuk memakai DB alih-alih membuat database sendiri akan semakin besar.
    • Database yang baik menggunakan SQL, dan demi efisiensi, bahasa database memang harus digunakan.
  • Masalah sinkronisasi status antara klien dan server

    • Jika kembali ke model PHP/SSR, masalah ini bisa dihindari dengan mengorbankan UX.
    • SPA memang bagus, tetapi pengiriman formulir multipart juga masih tetap berfungsi.
    • Menaruh semua state di server dan memperlakukan klien sebagai terminal sederhana meningkatkan pengalaman pengembangan.
  • Perbandingan dengan library ORM

    • Pertanyaan yang membandingkan SQLsync dengan penggunaan langsung TypeORM dan SQL.js yang didukung di browser.
  • Perbedaan antara database frontend dan backend

    • Database frontend bisa berbeda dari backend, dan ada kebutuhan untuk mengelola state real-time dengan lebih baik di sisi klien.
    • Sedang mempertimbangkan invalidasi cache dengan react query dan WebSocket.
    • Gagasan SQLsync juga layak dipertimbangkan.
  • Upaya serupa melalui SignalDB

    • SignalDB menggunakan reaktivitas berbasis signal dan sintaks kueri mirip mongodb yang agnostik terhadap framework.