Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Faster development with no-bundle dev tools

Faster development with no-bundle dev tools

4f7eb9389daef9a4e23696ee28e5a79d?s=128

Burhanuddin Ahmed

June 26, 2021
Tweet

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

  13. None
  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