LiveView, teknologi yang paling cocok dipadukan dengan Svelte

Kombinasi LiveView dan Svelte

• LiveView menawarkan cara yang unik untuk membangun aplikasi web.
• Server menyimpan state, menangani perilaku frontend dari backend, dan memperbarui DOM secara bertahap.
• Kompleksitas SPA berasal dari kompleksitas sistem terdistribusi, dan LiveView menghadirkan pengalaman klien yang kaya tanpa microservice frontend.

Hal-hal yang membuat LiveView sulit

• State di sisi klien tidak dapat dihindari, dan latensi antara server dan pengguna juga tidak bisa dihindari.
• LiveView menangani banyak perubahan DOM di server, tetapi tidak bisa mengendalikan semuanya.
• LiveView memiliki tiga jenis komponen: LiveViews, LiveComponents, dan Components.
• Refactoring antara LiveView dan LiveComponents lebih merepotkan dari yang diperkirakan.

Arah LiveView yang ambigu

• LiveView sering memberi kesan bahwa ada sesuatu yang kurang.
• LiveView memiliki banyak kesamaan dengan framework frontend modern, tetapi perbedaannya perlu dipahami dan masalahnya harus didekati dengan cara yang berbeda.

LiveView + Svelte

• LiveSvelte memungkinkan komponen Svelte dirender di LiveView.
• Backend mengontrol props komponen frontend, dan baik frontend maupun backend sama-sama memiliki state.
• Ada kanal komunikasi privat dua arah antara frontend dan backend.

Karakteristik inovatif LiveSvelte

• Pembagian tanggung jawab antara backend dan frontend jelas, dan kompleksitas dipusatkan di sisi server.
• LiveView paling menonjol sebagai frontend untuk backend, dengan menyediakan proses backend yang merender komponen frontend dan mempertahankan state.

Pendapat GN⁺

• Kombinasi LiveView dan Svelte memisahkan pengelolaan state antara server dan klien secara efisien, serta memungkinkan developer membangun aplikasi dengan lebih cepat dan intuitif.
• Teknologi ini dapat sangat berguna terutama untuk aplikasi web yang menuntut interaksi real-time, dan dapat membantu meningkatkan pengalaman pengguna.
• Namun, karena latensi ke server dapat memengaruhi pengalaman pengguna, optimasi performa dan penempatan server secara regional bisa menjadi pertimbangan penting.
• Kombinasi LiveView dan Svelte menawarkan paradigma baru bagi developer yang sudah terbiasa dengan cara pengembangan SPA yang ada, dan ini berpotensi menurunkan learning curve serta meningkatkan efisiensi pengembangan.
• Sinkronisasi state real-time dan komunikasi dua arah yang ditawarkan teknologi ini dapat menjadi pilihan yang menarik terutama untuk alat kolaborasi, dashboard, atau aplikasi yang menangani data real-time.

[GN⁺]

Pendapat Hacker News

• Salah satu pola yang digunakan dalam video game multipemain adalah adanya kode yang pada dasarnya berjalan baik di klien maupun di server.

  • Kode klien berjalan sebagai prediksi terhadap state server.
  • Saat state server diterima, state klien dipaksakan untuk menyesuaikannya.
  • Dalam game, "prediksi" adalah istilah yang tepat, karena klien dapat menebak hasil inputnya sendiri dengan cukup baik, tetapi tidak bisa memastikannya karena tidak mengetahui input pemain lain.
  • Paradigma ini juga bisa digunakan untuk langsung merespons input klien sambil menunggu state server yang otoritatif (misalnya mengaktifkan/menonaktifkan dropdown, menampilkan loading spinner).
  • Ada juga banyak state klien yang tidak berjalan di server (misalnya particle system, ragdoll — hal-hal yang tidak harus sama persis di semua klien dan tidak berinteraksi dengan input/fisika pemain lain).

• Saya pernah memberikan presentasi di ElixirConf 2022 tentang cara menggabungkan LiveView dan Svelte, dan para kontributor live_svelte membantu mewujudkannya.

  • State sisi klien akan selalu dibutuhkan, terutama untuk aplikasi dengan UX yang kaya.
  • Di New York City, koneksi jaringan khususnya tidak selalu terjamin saat sedang bepergian.
  • Kemampuan untuk secara reaktif mendorong perubahan state sisi server yang terjadi di server lain ke klien menggunakan pubsub Phoenix sangatlah kuat.

• Saat baris baru masuk, LiveView akan memperbarui klien, jadi Anda cukup mendorongnya ke tabel.

  • Saya menyarankan untuk tidak menggunakan cara ini pada aplikasi bisnis dengan baris-baris interaktif.
  • Hal ini dapat menyebabkan jeda kognitif, seperti pengguna mengklik hal yang salah, mengirim email ke pelanggan yang salah, atau mengembalikan dana transaksi yang salah.
  • UX yang baik adalah menggunakan banner penanda untuk menyampaikan bahwa data telah berubah, atau jika mendesak, cukup tambahkan baris baru tanpa mengubah posisi scroll.

• Kami menggunakan Svelte dan LiveView bersama di BeaconCMS.

  • Ini adalah use case yang baik ketika Anda ingin mengontrol UI dengan lebih rinci di klien.
  • Bahkan jika menggunakan Phoenix, LiveView tidak selalu menjadi jawabannya, dan terkadang halaman rendering statis sudah sepenuhnya memadai.
  • Saya menyarankan untuk tidak mengambil pendekatan serba-semua atau tidak sama sekali untuk segalanya.
  • Seperti yang ditunjukkan dalam artikel, ada beberapa use case yang baik untuk keluar dari 'cara LiveView'.
  • Jika ada round trip 1000ms, mungkin ada pertimbangan lain, tetapi server yang ditempatkan secara geografis mungkin tidak bisa digunakan karena alasan biaya dan sebagainya, jadi menambahkan manajemen state sisi klien bisa menjadi solusinya.

• Alih-alih mengelola state di klien, pendekatan ini mengelola state baik di klien maupun di server.

  • Sulit melihat ini sebagai sebuah peningkatan; memang menghilangkan kebutuhan untuk membangun API lain, tetapi itu tidak serta-merta berarti lebih baik.

• Batasan pendekatan ini terletak pada kecepatan cahaya: ada batas seberapa dekat server bisa ditempatkan ke pengguna.

  • Langkah berikutnya adalah mengompilasi server menjadi WebAssembly dan mengirimkannya ke klien agar dapat merender respons secara optimistis sampai server yang sebenarnya mengembalikan hasil.
  • Ini mungkin terdengar agak gila, tetapi saya benar-benar berhasil melakukannya di proyek, dan pengalamannya seperti sihir.

• Sebagai orang yang membuat LiveSvelte, saya mempersilakan jika ada pertanyaan.

• Secara umum, saya memang ingin membangun aplikasi dengan model seperti ini: berorientasi event, pembaruan real-time dua arah dan server, event berurutan, state lokal dan remote...

  • Saya tidak tahu tentang LiveView, dan belum pernah menggunakan bahasa keluarga Erlang, tetapi jelas mereka menemukan sesuatu.
  • Model request-response tradisional menimbulkan banyak masalah konsistensi dan data usang.
  • Sebuah harapan yang optimistis, tetapi mungkin kontroversial: jika 10 tahun terakhir adalah tentang mengintegrasikan konsep FP ke bahasa arus utama, saya berharap 10 tahun berikutnya akan menjadi tentang mengintegrasikan pemrograman berorientasi pesan yang stateful (reaktif?) ke full stack arus utama.

• Saya menggunakan controller Stimulus yang dapat digunakan ulang bersama LiveView di aplikasi, dan ini juga bekerja dengan mulus.

  • Secara umum, membangun dengan LiveView itu menyenangkan, tetapi semakin sering menggunakannya dalam skenario nyata, semakin saya menyadari manfaat framework HTTP yang stateless.
  • Framework seperti Hotwire menawarkan performa yang lebih baik dan ketahanan terhadap reconnect, serta menghindari kebutuhan untuk menempatkan server lebih dekat ke pengguna.

• Proyek yang keren! Saya baru saja merilis episode Svelte Radio tentang ini.