Berkenalan dengan Snowpack
Adanya bundler tools seperti Webpack, Parcel, dll, membawa perubahan besar bagi alur pengembangan aplikasi web khususnya client-side. Bundler tools ini setidaknya meringankan beban kerja developer saat melakukan build hanya dengan melakukan beberapa konfigurasi. Semuanya demi developer experience yang lebih baik.
Fitur yang disediakan tiap bundler tools berbeda-beda sesuai dengan keunggulan masing-masing, tetapi masih ada beberapa fitur yang memiliki kesamaan konsep. Seperti, code-splitting, plugin, loaders, hot module replacement, dll. Dan... tentunya, files yang di-bundle adalah javascript. Namun, untuk mendapatkan hasil yang optimal dari hasil bundling diperlukan analisa yang baik sesuai dengan keperluan project yang dibangunnya.
Beberapa contoh bundler tools yang disebutkan di atas, cara bundler-bundler bekerja ini dengan melakukan bundled development. Apa itu bundled development?
Bundled Development
Bundled development adalah mengelompokkan files javascript untuk meminimalisir beban kerja browser ketika memuat aplikasi web atau saat melakukan HTTP request.
Contoh hasil bundle di atas adalah hasil dari bundler webpack. Ketika aplikasi semakin kompleks, webpack akan mengelompokkan files menjadi beberapa chunks ketika selsai di-build. Setiap ada perubahan pada code, bundler akan melakukan build ulang terhadap seluruh aplikasi kemudian memuat ulang pada *browser (*kalau memanfaatkan HMR).
Namun pada kasus tertentu, proses rebuild pada webpack ini justru menimbulkan masalah baru bagi developer. Saat aplikasi semakin kompleks, maka proses bundle akan semakin lama. Karena webpack melakukan rebuild setiap terdapat perubahan pada satu file dan proses ini akan menimbulkan lag saat melakukan penyimpanan file dan memuat pada browser.
Snowpack
Ternyata tahun 2020 kemarin salah satu bundler tools baru memberikan solusi atas masalah webpack. Snowpack muncul sebagai bundler yang cukup ringan. Penggunaan snowpack sebagai bundler tool juga dapat dimanfaatkan bersama framework/libraries JS lainnya seperti Svelte, Vue JS, dan React JS. Pendekatan yang digunakan snowpack sebagai bundler tool berkebalikan dengan webpack dengan pendekatan bundled development, yaitu unbundled development.
Unbundled Development
Hal yang membedakan unbundled development ini adalah aplikasi di-build saat pertama kali saja, kemudian bundler menyimpannya pada cache. Secara konsep, pendekatan ini melakukan pengiriman single file ke browser selama pengembangan untuk dimuat. Katakanlah pengiriman ini disebut single-file build. Walaupun snowpack tidak mengelompokkan file ke tiap-tiap chunk seperti webpack, browser tetap memuat halaman, file, atau dependensinya karena dukungan browser dengan sintaks ESM saat ini. Setiap kali developer melakukan perubahan pada code kemudian menyimpannya, snowpack akan mengirimkan file yang diubah saja ke browser, dan HMR akan melakukan reload pada browser.
Proses single-file build ini memungkinkan proses build lebih cepat dibandingkan bundler tool lainnya. Selain itu HMR snowpack tidak memuat semua halaman, melainkan hanya memuat ulang files yang mengalami perubahan saja. HMR snowpack didukung dengan fitur Fast Refresh, konfigurasi tambahan HMR untuk framework JS lainnya. Contohnya, React JS.
Snowpack untuk React
Snowpack mendukung beberapa framework/libraries JS seperti React. Untuk mencoba menggunakan snowpack dengan React JS cukup install dengan template kemudian install React JS
npx create-snowpack-app coba-snowpack --template @snowpack/app-template-minimal
cd coba-snowpack && npm install react react-dom --save
npm run start
Browser akan menampilkan halaman dan tulisan "Welcome to Snowpack" setelah melakukan perintah npm run start pada terminal. Kemudian dari template project yang sudah dibuat, kustomasi component dapat dilakukan sesuai keperluan.
Snowpack juga menyediakan konfigurasi pada file snowpack.config.js (seperti webpack.config.js pada webpack). Konfigurasi yang dapat dilakukan seperti, menambah plugin, konfigurasi build, dll.
Mungkin untuk sampai disini dulu tulisan tentang Snowpack ini, semoga cukup mengenalkan garis besar cara kerja snowpack sebagai bundler tool.