Hologram, sebuah framework web full-stack yang memungkinkan developer membangun aplikasi web interaktif sepenuhnya dalam Elixir, telah merilis versi 0.5.0 dengan peningkatan performa yang dramatis. Framework ini mentranspilasi kode Elixir ke JavaScript, memungkinkan eksekusi sisi klien tanpa mengharuskan developer menulis JavaScript secara langsung.
Rilis ini merupakan pencapaian besar dengan lebih dari 950 commit sejak versi sebelumnya, dengan fokus utama pada optimasi performa dan peningkatan pengalaman developer.
Peningkatan Performa Masif Mengubah Pengalaman Pengguna
Peningkatan paling mencolok dalam rilis ini adalah penulisan ulang lengkap implementasi bitstring, menghadirkan peningkatan kecepatan rendering sekitar 50x. Dorongan performa ini telah mengubah pengalaman pengguna dari interaksi yang lambat menjadi antarmuka yang halus dan responsif yang berjalan pada 60+ frame per detik.
Anggota komunitas langsung merasakan perbedaan dramatis ini. Website framework itu sendiri, yang berfungsi sebagai demonstrasi dunia nyata, kini menyediakan navigasi halaman yang praktis instan dan interaksi menu responsif yang sebelumnya membutuhkan lebih dari satu detik untuk diselesaikan.
Peningkatan performa meluas melampaui rendering, dengan waktu eksekusi turun dari milidetik ke mikrodetik untuk banyak operasi inti sisi klien. Ini membuat Hologram cukup cepat untuk menangani interaksi real-time yang menuntut seperti pelacakan gerakan mouse untuk aplikasi menggambar, seperti yang ditunjukkan dalam SVG Drawing Demo yang baru.
Peningkatan Performa
- Peningkatan kecepatan rendering ~50x dari penulisan ulang bitstring
- Waktu eksekusi berkurang dari milidetik menjadi mikrodetik
- Kemampuan rendering halaman 60+ FPS
- Waktu build incremental 2x-10x lebih cepat
Pengalaman Pengembangan Mendapat Peningkatan Besar
Versi 0.5.0 memperkenalkan manajemen sesi dan cookie yang komprehensif, membawa Hologram lebih dekat ke paritas fitur dengan framework web tradisional. Developer kini dapat menggunakan fungsi yang familiar seperti put_session/3, get_session/2, dan fungsi manajemen cookie dengan dukungan penuh untuk opsi cookie standar.
Rilis ini juga menambahkan fungsi live reload dengan file watching yang cerdas dan overlay error yang indah untuk masalah kompilasi. Ketika dikombinasikan dengan kompilasi incremental yang menghadirkan waktu build 2x hingga 10x lebih cepat, pengalaman pengembangan menjadi jauh lebih menyenangkan dan produktif.
Dukungan event baru mencakup pointer events dan mouse move events dengan pelacakan koordinat yang komprehensif, memungkinkan interaksi pengguna yang lebih canggih yang sebelumnya sulit diimplementasikan dengan lancar.
Fitur Baru di v0.5.0
- Sistem manajemen sesi lengkap dengan
put_session/3,get_session/2,get_session/3,delete_session/2 - Dukungan cookie penuh dengan
put_cookie/3,put_cookie/4,get_cookie/2,get_cookie/3,delete_cookie/2 - Event baru:
pointer_move,pointer_cancel,pointer_down,pointer_up,mouse_move,select - Live reload dengan pemantauan file dan overlay error
- Implementasi CRDT ( Last Writer Wins Map ) untuk state terdistribusi
Pergeseran Arsitektur Menuju Komunikasi Berbasis HTTP
Perubahan arsitektur yang signifikan melibatkan migrasi dari WebSocket ke komunikasi berbasis HTTP untuk operasi yang perlu mengakses data cookie dan sesi. Perubahan ini mencakup sistem HTTP ping baru yang mempertahankan kesehatan koneksi sambil memberikan latensi yang praktis sama dengan koneksi WebSocket.
Framework ini kini menggunakan implementasi WebSocket kustom alih-alih bergantung pada Phoenix Channels, memberikan developer lebih banyak kontrol atas manajemen koneksi dan mengurangi ketergantungan eksternal.
Perubahan Arsitektur
- Migrasi dari WebSocket ke HTTP untuk operasi cookie/session
- Sistem ping HTTP dengan interval 30 detik
- Implementasi WebSocket kustom (menghapus dependensi Phoenix Channels )
- Format serialisasi v2 dengan kompatibilitas mundur
Adopsi Komunitas dan Kekhawatiran Performa
Meskipun peningkatan performa telah mengesankan early adopter, beberapa anggota komunitas telah menyuarakan kekhawatiran tentang ukuran bundle dan waktu pemuatan halaman awal. Pengujian Google PageSpeed Insights mengungkapkan bundle runtime 104 KiB dengan skor Largest Contentful Paint 1,5 detik, yang dianggap berlebihan oleh sebagian orang untuk website dokumentasi.
Namun, kreator framework mengakui kekhawatiran ini dan menekankan bahwa optimasi bundle belum menjadi prioritas. Versi mendatang diharapkan dapat mengurangi ukuran bundle secara signifikan melalui teknik optimasi yang tepat.
Analisis Ukuran Bundle
- Bundle runtime saat ini: ukuran transfer 104 KiB
- Google PageSpeed Insights LCP: 1,5 detik
- Optimasi bundle belum diimplementasikan
- Diharapkan pengurangan ukuran yang signifikan pada versi mendatang
Posisi Melawan Phoenix LiveView
Hologram memposisikan diri sebagai alternatif untuk Phoenix LiveView untuk skenario yang memerlukan interaksi sisi klien yang instan. Sementara LiveView merender pembaruan UI di server dan mengirimkannya ke klien, Hologram mentranspilasi kode UI Elixir ke JavaScript yang berjalan sepenuhnya di browser.
Pendekatan ini menghilangkan round-trip server untuk interaksi UI, membuatnya ideal untuk aplikasi yang memerlukan kemampuan offline, mengurangi beban server, atau antarmuka pengguna yang benar-benar responsif. Framework ini dapat hidup berdampingan dalam aplikasi Phoenix yang sama, memungkinkan developer memilih pendekatan terbaik untuk fitur yang berbeda.
Rilis ini menunjukkan komitmen Hologram untuk membawa model pemrograman Elixir yang kuat ke pengembangan sisi klien sambil mempertahankan keunggulan deployment instan dan aksesibilitas universal dari aplikasi web. Dengan dukungan CRDT foundational yang disertakan untuk fitur terdistribusi masa depan, versi 0.5.0 menetapkan fondasi yang solid untuk evolusi berkelanjutan framework.
Referensi: Hologram v0.5.0 Released!