Dokumen tersebut membahas tentang Hot Module Replacement (HMR) pada Angular, yaitu fitur yang memungkinkan perubahan kode tanpa melakukan reload browser. HMR bekerja dengan mendeteksi perubahan kode, membangun modul yang berubah, dan memperbarui modul tersebut di browser tanpa melakukan reload halaman. Fitur ini dapat meningkatkan produktivitas pengembangan karena state dan proses akan tetap terjaga meski terjadi perubahan kode. Penerapann
2. Hot Module Replacement
- Apa itu HMR?
- Permasalahan yang kita hadapi sekarang?
- Bagaimana HMR bekerja?
- Apa kelebihan HMR?
- Bagaimana penerapannya di Angular?
3. Apa itu HMR
Mengembangkan aplikasi terutama menggunakan javascript seringkali perlu melakukan reload
browser setelah melakukan perubahan kode.
Tools seperti webpack sebenarnya sudah cukup mengakomodir dengan mode watchnya dimana
setiap kali ada perubahan kode, webpack akan mendeteksi dan melakukan rebuild kemudian
secara otomatis akan reload browser.
4. Permasalahan
Dengan adanya mode watch sudah cukup membantu untuk meningkatkan produktivitas kita
sebagai frontend developer untuk mengembangkan sebuah fitur. Tapi pernahkan teman-teman
berpikir jika setiap kali ada perubahan kode dan otomatis browser reload, maka hasilnya:
- Modal atau dialog box akan hilang dan kita perlu mengulang langkah sampai muncul
modal kembali
- State yang ada akan hilang dan perlu mengulang langkah dari awal lagi.
- Bisa menggunakan persistence state, misal pada localstorage. Tapi perlu menulis banyak
kode lagi.
- Bahkan perubahan kecil seperti pada file CSS saja akan reload dan lagi lagi kita harus
mengulang proses.
5. Bagaimana HMR bekerja?
HMR memungkinkan kita untuk melakukan perubahan, menambah, dan menghapus module
javascript walaupun aplikasi sedang berjalan tanpa adanya reload browser. Fitur ini dibuat oleh
webpack melalui HMR server yang berada di dalam webpack development server yang
berkomunikasi dengan HMR runtime yang ada pada browser melalui websocket.
7. Bagaimana HMR bekerja?
1. Pertama kali build aplikasi, webpack akan generate manifest file berupa hash dan list of all
modules. Webpack akan melakukan inject HMR runtime di dalam file bundle.js
2. Ketika ada perubahan, webpack akan mendeteksi.
3. Webpack akan melakukan build baru dengan perubahan yang ada. Membuat manifest
baru dan membandingkan dengan yang lama. Proses ini dikenal dengan hot update.
4. Hot update ini akan menginfokan kepada HMR Server, yang mana jika ada perubahan
atau update akan dikirimkan ke HMR runtime.
5. Maka HMR runtime akan membuka file perubahan tersebut dan menggunakan loader
webpack untuk menangani perubahan. Jika CSS yang berubah maka yang dipanggil
adalah CSS Loader atau Style loader, tapi jika javascript yang berubah maka yang
dipanggil adalah Babel loader.
8. Bagaimana HMR Bekerja
Dengan menggunakan HMR, teman–teman bisa melihat perubahan secara cepat dan juga bisa
melihat file bundle js yang terdownload pada browser untuk melakukan perubahan.
Ada satu kekurangan jika hot update aplikasi gagal maka aplikasi akan reload untuk
mendapatkan file perubahan terbaru.
9. Kelebihan HMR
- Perubahan secara berkala tanpa adanya reload browser
- Meningkatkan produktivitas developer dalam mengembangkan fitur aplikasi
- Ketika sedang mengisi sebuah form, maka state yang telah terisi tidak akan hilang.
10. Penerapan di Angular
Untuk menggunakan hot module replacement kita perlu update angular minimal ke versi 11.
Kemudian cara menggunakannya cukup jalankan perintah ng serve –hmr .
