Faster development with no-bundle dev tools

Transcript

1. Faster development with
   no-bundle dev tools
   Burhanuddin Ahmed
   Software engineer, product creator, entrepreneur
   SurabayaJS
   

   View Slide

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
   

   View Slide

3. Mari kita mulai
   

   View Slide

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/
   

   View Slide

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)
   

   View Slide

6. Era module bundler
   Konteks: JS framework
   - React CRA
   - Vue-CLI
   - NuxtJS 2.x
   - NextJS (?)
   - dll
   

   View Slide

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
   

   View Slide

8. Dukungan browser
   

   View Slide

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.
   

   View Slide

10. No-bundle development
    - Snowpack
    - Vite
    - WMR
    - es-dev-server
    

    View Slide

11. Snowpack
    

    View Slide

12. Vite
    

    View Slide

13. View Slide

14. no-bundle
    - Snowpack / Vite sama-sama framework agnostik.
    - vanilla
    - vue
    - vue-ts
    - react
    - react-ts
    - preact
    - preact-ts
    

    View Slide

15. Trying Vite
    

    View Slide

16. Trying Vite
    https://www.youtube.com/watch?v=_hNx0pHQJZk
    

    View Slide

17. https://github.com/burhanahmeed/pipermonit
    

    View Slide

18. https://mobile.twitter.com/youyuxi/status/1354968291735961607
    https://www.youtube.com/watch?v=xXrhg26VCSc
    

    View Slide