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

Burhanuddin Ahmed

June 26, 2021
Tweet

More Decks by Burhanuddin Ahmed

Other Decks in Programming

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