Faster development with no-bundle dev tools

Transcript

1. Faster development with no-bundle dev tools Burhanuddin Ahmed Software engineer, product creator, entrepreneur SurabayaJS
2. Me - Software Engineer, Frontend at Rakuten Travel Xchange (RTX) - SurabayaJS organizer member - Having fun with some unfinished side-projects How to reach me: - https://kusiaga.com/about - https://t.me/burhannahm - @burhannahm
3. Mari kita mulai
4. Javascript module - JS module adalah pemisahan kode JS menjadi potongan kecil ke dalam file / module. - Sebelumnya JS hanya digunakan untuk interaktivitas website. - commonJS, Asynchronous Module Definition(AMD), RequireJS, ES Module - module.export, import, export, require() - Kehadiran Node.js dan berbagai macam pustaka Frontend meramaikan teknologi ini https://blog.logrocket.com/javascript-reference-guide-js-modules/
5. Era module bundler Konteks: JS framework - Browser tidak memahami format module yang bervariasi - Perubahan kecil akan membuat source code di-compile secara keseluruhan (rebuilt)
6. Era module bundler Konteks: JS framework - React CRA - Vue-CLI - NuxtJS 2.x - NextJS (?) - dll
7. No-bundle development - Memanfaatkan fitur native ECMAScript module pada browser - Hanya meng-compile file/module yang dibutuhkan https://replit.com/@burhanahmeed/FluffyCharmingPackagedsoftware#index.html
8. Dukungan browser
9. Masalah yang diselesaikan - Slow server start - Pada bundled dev-server, seluruh source code dan dependencies akan di-bundle sehingga membutuhkan waktu lebih lama untuk meng-compile. - Pre-bundling dependencies - Slow updates - Ketika ada 1 file di-update, maka hanya file tersebut yang di-compile tanpa mem-bundle ulang secara keseluruhan.
10. No-bundle development - Snowpack - Vite - WMR - es-dev-server
11. Snowpack
12. Vite
14. no-bundle - Snowpack / Vite sama-sama framework agnostik. - vanilla - vue - vue-ts - react - react-ts - preact - preact-ts
15. Trying Vite
16. Trying Vite https://www.youtube.com/watch?v=_hNx0pHQJZk
17. https://github.com/burhanahmeed/pipermonit
18. https://mobile.twitter.com/youyuxi/status/1354968291735961607 https://www.youtube.com/watch?v=xXrhg26VCSc