Fitur Flutter Hot Reload: Penjelasan Manfaat & Performa

Flutter Hot Reload adalah fitur kerangka kerja Google yang sangat dicari, yang memungkinkan pengembang membuat perubahan kode dan melihat hasilnya segera – tanpa memulai ulang aplikasi. Fitur ini memfasilitasi iterasi cepat dan penyempurnaan desain aplikasi, eksperimen dengan tata letak dan konfigurasi UI yang berbeda, memperbaiki bug, dan yang terpenting, mengurangi waktu pengembangan secara signifikan. Hasilnya, Hot Reload dapat memberikan manfaat besar bagi perusahaan pengembang aplikasi Flutter dengan memungkinkan perubahan kode secara real-time dan pembaruan instan, sehingga menjadikan proses pengembangan lebih efisien dan kolaboratif.

Fitur Flutter Hot Reload memungkinkan pengembang melihat perubahan yang mereka buat pada kode yang terlihat di emulator atau perangkat secara instan, tanpa perlu memulai ulang aplikasi secara penuh. Artikel ini bertujuan untuk menjawab pertanyaan yang tampaknya sederhana: Apa arti 'hampir instan' untuk Hot Reload? Dengan kata lain, seberapa cepat fitur Flutter ini bekerja dalam proyek dengan ukuran berbeda? Apa yang diharapkan ketika mengerjakan proyek yang lebih besar, dan bagaimana dengan proyek yang lebih kecil? Apakah Hot Reload berfungsi dengan baik dalam semua skenario ini? Mari kita cari tahu!

Memahami Flutter Hot Reload

Mari kita mulai dengan dasar-dasar dan penafian yang diperlukan. Saat menjelaskan fitur Hot Reload, penting untuk digarisbawahi bahwa Dart VM menggunakan kompiler JIT (Just-in-Time) untuk mengubah kode menjadi kode mesin asli, yang dilakukan tepat sebelum program dijalankan. JIT didasarkan pada prediksi kode karena memiliki akses ke informasi runtime dinamis, sehingga menghasilkan solusi yang menghemat waktu, seperti memberi tahu pengembang bahwa fungsi tertentu tidak digunakan di mana pun.

Hot Reload membangun kembali pohon widget tetapi mempertahankan status aplikasi seperti semula. Saat menggunakan fitur Hot Reload, fungsi `main()` dan `initState()` tidak dipanggil. Jika Anda perlu membangun kembali fungsi-fungsi ini, Anda harus menggunakan Hot Restart atau Full Restart:

• Hot Restart: alat yang memicu kode sumber aplikasi proyek untuk dikompilasi kembali, dimulai dari keadaan default/awal, di mana keadaan yang dipertahankan dimusnahkan. Alat ini jauh lebih cepat daripada Full Restart tetapi membutuhkan waktu lebih lama dibandingkan Hot Reload.
• Full Restart: alat yang membangun proyek aplikasi dari awal, juga disebut “Cold start”.

Selain itu, dari waktu ke waktu, pengembang harus menggunakan Hot Restart daripada Hot Reload, misalnya:

• Jika aplikasi berada di latar belakang terlalu lama dan/atau akan dimatikan,
• Jika tipe yang disebutkan dalam file Dart diubah menjadi kelas normal dan sebaliknya,
• Jika kode asli diubah,
• Setelah deklarasi tipe generik diubah.

Flutter Hot Reload hanya dapat dilakukan dalam mode debug. Mode build lainnya, yaitu: mode profil dan mode rilis, tidak mendukung fitur Hot Reload.

Skala Proyek vs Performa Flutter Hot Reload

Ukuran proyek Flutter bervariasi, berdasarkan jumlah perpustakaan yang disertakan, arsitektur aplikasi, file media, atau fitur aplikasi. Sampai saat ini, Flutter dianggap sebagai solusi sempurna untuk MVP dan PoC. Namun, seiring dengan semakin banyaknya proyek Flutter berskala besar seperti Google Pay, eBay, Nubank, Rive, atau Maya Bank yang memiliki 47 juta pengguna, maka mengeksplorasi kemungkinan Flutter untuk aplikasi yang kompleks juga merupakan hal yang penting.

Fitur Hot Reload Flutter dapat digunakan untuk aplikasi Proof of Concept (PoC) dan produk digital tingkat perusahaan. Namun, yang masih menjadi pertanyaan adalah apakah performanya memuaskan untuk proyek yang kompleks dan apakah Flutter untuk aplikasi perusahaan merupakan pilihan yang tepat. Mari kita jelajahi lebih jauh!

Eksperimen Performa Reload Panas

Pertama, untuk menentukan perkiraan, kinerja rata-rata Hot Reload dalam kasus penggunaan yang berbeda, saya telah memutuskan untuk memeriksa 5 proyek pengujian yang berisi sejumlah perpustakaan tertentu:

• Proyek Uji 1: 1.000 perpustakaan
• Proyek Uji 2: 5.000 perpustakaan
• Uji Proyek 3: 10.000 perpustakaan
• Uji Proyek 4: 25.000 perpustakaan
• Uji Proyek 5: 50.000 perpustakaan

Saya memahami bahwa kecil kemungkinan suatu proyek memiliki perpustakaan sebanyak itu, namun kami menggunakan ini sebagai pengujian untuk melacak tren di lima proyek tertentu.

Percobaan telah dilakukan dengan spesifikasi perangkat sebagai berikut:

• MacBook Pro, Intel Core i5 Quad-Kode 2-3GHz, LPDDR3 16 GB 2133 MHz, Grafis Intel Iris Plus 655 1536 MB,
• Kode Visual Studio, Versi: 1.68.1,
• Simulator: Iphone 12 Pro Max – iOS 15.5 (Versi Xcode: 13.4.1),
• Flutter SDK (Saluran stabil, 3.7.0).

Harap diingat bahwa waktu muat ulang tertentu akan bervariasi tergantung pada perangkat keras atau sistem Anda. Percobaan telah dilakukan dengan spesifikasi perangkat berikut. Namun, tren umum dan kesimpulannya harus tetap sama.

Tujuan dari percobaan ini adalah untuk menunjukkan berapa lama waktu yang dibutuhkan untuk menjalankan fitur Hot Reload di setiap proyek, di mana sejumlah perpustakaan yang relevan dihasilkan untuk tujuan pengujian. Setiap perpustakaan berisi kelas tertentu. Dengan cara ini jumlah perpustakaan sesuai dengan jumlah kelas yang diharapkan untuk dimuat ulang. Di bawah ini adalah contoh Proyek Uji 3 yang berisi 10.000 kelas. Setiap perpustakaan, yang disebut “placeholderX”.dart, berisi kelas Stateless Widge sederhana “placeholderX, yang merupakan sebuah wadah:

Warna wadah adalah variabel yang dideklarasikan di perpustakaan "constants.dart" di kelas "Constants", yang hanya dihubungkan ke perpustakaan "placeholder" yang dihasilkan berikut ini.

Hasil Tes Flutter Hot Reload

Sekarang kita telah menetapkan semua variabel dan tujuan percobaan serta menjelaskan prosesnya, sekarang saatnya merangkum hasilnya. Mari kita lihat efek dari 5 pengujian performa Flutter Hot Reload.

Tes 1: Memuat ulang 1.000 kelas

Tes 2: Memuat ulang 5.000 kelas

Tes 3: Memuat ulang 10.000 kelas

Tes 4: Memuat ulang 25.000 kelas

Tes 5: Memuat ulang 50.000 kelas

Bagan di bawah ini membandingkan durasi waktu Hot Reload antara skala proyek yang berbeda:

Tentu saja, waktu rata-rata fitur Hot Reload untuk skala proyek tertentu meningkat karena jumlah perpustakaan (kelas) yang lebih banyak.

Namun, dengan memperhatikan grafik di bawah ini dan hanya mempertimbangkan 3 pengujian proyek pertama, Anda mungkin melihat nilai detail dari penggunaan Hot Reload tertentu:

Hasil Tes Dijelaskan

Hasil pengujian mengonfirmasi bahwa fitur Hot Reload Flutter efektif saat membangun kembali 1.000 kelas sekaligus, dengan durasi waktu rata-rata berfluktuasi dalam batas 1 detik, sebagian besar bahkan tidak mencapai nilai ini sesuai grafik. Oleh karena itu, dalam sebagian besar kasus kehidupan nyata, Hot Reload tentu saja merupakan pilihan yang aman, misalnya ketika:

• memuat ulang satu kelas,
• melakukan pertemuan langsung dengan klien (misalnya saat menguji ide baru),
• selama pemrograman berpasangan atau brainstorming.

Sebelum saya mengambil kesimpulan, saya ingin menekankan satu hal. Harap diingat bahwa saya memuat ulang semua perpustakaan (kelas) yang terdaftar sekaligus dalam pengujian saya. Selama proses pengembangan rata-rata, hampir tidak perlu memuat ulang perpustakaan sebanyak itu.

Berdasarkan pengalaman pengembang saya (dan hasil pengujian), memuat ulang lebih sedikit perpustakaan akan memungkinkan Anda menghindari masalah latensi. Belum lagi memuat ulang perpustakaan sering kali meminimalkan risiko bug atau masalah kode yang tidak diinginkan dan membuat pemantauan perubahan yang diperkenalkan dalam proyek menjadi lebih mudah.

Flutter Hot Reload: Penjelasan Performa

Fitur Flutter Hot Reload adalah alat yang kuat dan efisien yang berguna saat memecahkan masalah terkait UI selama tahap pengembangan. Seperti yang dibuktikan dalam eksperimen di atas, dalam banyak kasus, performa Hot Reload lancar – dengan satu perubahan UI hanya dalam waktu kurang dari satu detik dan waktu rata-rata untuk memuat ulang 1.000 kelas berkisar hanya 1 detik.

Selain itu, sebuah eksperimen membuktikan bahwa Flutter dapat memuat ulang proyek skala perusahaan besar dengan ribuan kelas, dengan rata-rata waktu Hot Reload kurang dari 8 detik. Meskipun kinerja Hot Reload mungkin tidak sepenuhnya memuaskan dalam proyek-proyek raksasa (skenario 50.000 kelas), Flutter mampu mengatasinya dengan sempurna.

Tidak diragukan lagi, Flutter Hot Reload meningkatkan efisiensi kerja dengan membangun kembali widget dalam pohon widget proyek, sehingga lebih mudah untuk mencapai hasil yang diinginkan dalam sekejap mata. Berkat Hot Reload, pengembang Flutter mampu menangani perubahan desain yang kompleks (bahkan yang memengaruhi keseluruhan aplikasi) secara tepat waktu.

Yang terakhir, Hot Reload hanyalah salah satu faktor yang berkontribusi terhadap kinerja kerangka kerja secara keseluruhan (terus diverifikasi oleh komunitas Flutter dan ditingkatkan oleh Flutter Dev). Menjelajahi alat pengembangan Flutter teratas sangat penting untuk membuat aplikasi seluler lintas platform berkualitas tinggi secara efisien. Oleh karena itu, saya sangat menganjurkan Anda untuk mengeksplorasi kinerja di Flutter – baik melalui eksperimen dan pengujian serta dalam proyek klien komersial. Itulah yang kami lakukan di Miquido – terus mengembangkan portofolio PoC dan proyek pengembangan aplikasi lintas platform tingkat perusahaan.