Ngobrolin Bundler
Ringkasan Episode
Bantu KoreksiModule bundler dibahas lewat sejarahnya, bukan daftar perkakasnya — dan pesan pembukanya bahwa hampir semua orang yang membangun web sudah memakainya tanpa sadar, karena Laravel pun menyertakan Webpack Mix siap pakai. Tugas intinya cuma dua: menyelesaikan dependensi antar berkas, dan mengemas semuanya jadi satu. Ceritanya berangkat dari masa ketika JavaScript belum modular sama sekali. Semua berkas dipanggil satu per satu lewat tag script dan semuanya mendarat di global namespace, sehingga urutan pemanggilan menentukan segalanya dan dua pustaka dengan nama sama bisa saling merusak. Masalah ini bukan teori: konflik semacam itu dulu jadi sumber bug paling sering di situs WordPress berbasis plugin, ketika beberapa plugin masing-masing membawa jQuery-nya sendiri — sampai jQuery harus menyediakan noConflict untuk melepaskan tanda dolar. Rangkaian solusinya ditelusuri satu per satu, dan tiap tahap menyisakan sisanya: IIFE agar isinya tidak bocor ke luar, lalu menempelkan semuanya pada satu objek induk sehingga yang mengotori global tinggal satu nama — bukan nol. Lalu Node.js membawa module.exports dan require yang akhirnya menyelesaikan dependensi sungguhan, disusul AMD dan UMD yang memuat modul secara asinkron tapi memunculkan masalah baru: berkas dimuat berantai dan waktu tunggunya menumpuk. Dari situlah Browserify lahir sebagai bundler pertama, dijalankan lewat task runner seperti Grunt atau Gulp, dan diteruskan Webpack serta Rollup — menghitung seluruh rantai dependensi lebih dulu, lalu menyerahkan satu berkas jadi ke browser.
Poin-poin Utama
- •Tugas inti bundler hanya dua: menyelesaikan dependensi antar berkas dan mengemas semuanya jadi satu
- •Hampir semua orang memakainya tanpa sadar — Laravel pun menyertakan Webpack Mix siap pakai tanpa perlu menulis konfigurasi sendiri
- •Dulu semua berkas mendarat di global namespace sehingga urutan tag script menentukan segalanya, dan dua pustaka bernama sama bisa saling merusak
- •Konflik itu nyata: beberapa plugin WordPress masing-masing membawa jQuery sendiri, sampai jQuery harus menyediakan noConflict untuk melepaskan tanda dolar
- •IIFE mencegah isinya bocor ke luar, tapi menempelkan semuanya pada satu objek induk hanya menyisakan satu nama global — bukan nol
- •Node.js membawa module.exports dan require, lalu AMD dan UMD memuat modul secara asinkron tapi berkasnya jadi dimuat berantai dan waktu tunggunya menumpuk
- •Browserify lahir sebagai bundler pertama dan dijalankan lewat Grunt atau Gulp, lalu diteruskan Webpack dan Rollup yang menghitung rantai dependensi lebih dulu
Halo, selamat malam. Selamat hari selasa, selamat bertemu lagi dengan kita bertiga.
Trio web-web. Trio web-web. Seperti biasa, setiap selasa malam saatnya kita ngobrolin web.
Nah, malam hari ini kita rekaman, jadi kurang bisa interaksi sama teman-teman, tapi gak apa-apa.
Kita tetap monitor, teman-teman kalau ada komen boleh dikomentarin aja, nanti kita chat-chat juga.
By the time kalian nonton ini, saya dan Eka lagi di mengunjungi negara sebelah.
Google I/O Connex ya, acara Google I/O Connex, ketemu sama teman-teman GDE lain dan juga sama Google.
GDG juga, woman tech maker juga, ekosistem.
Aku gak diajak, aku gak ikut.
Gak ikut kan? Bukan, Mas Riza sudah diajak, cuman memilih untuk tidak ikut.
Iya, abis katanya Bang Alor itu kayak cileduk, jadi mendingan ke cileduk aja dekat, gak paling jauh-jauh.
Yang bilang siapa tuh kayak cileduknya.
Mudah-mudahan nanti ada konten-konten yang bisa dibagikan di sana ya, ketemu Jesseline mungkin bisa say hi, nanti direkam, terus kita bikin episode spesial I/O Connex.
Oke, jadi malam hari ini kita akan ngobrolin tentang modul bundler, apa itu modul bundler, kenapa butuh.
Mungkin ada teman-teman yang mungkin sudah pakai tapi tidak menjadari bahwa itu pakai, misalkan.
Gak sadar itu siapa.
Iya, misalkan pakai create track app, itu kan sebenarnya ada modul bundler di dalamnya kan, kalau teman-teman tahu webpack, nah itu dia pakenya webpack.
Tapi dipermudah, kalau misalkan kita mau bikin aplikasi react, pakai webpack sendiri, konfigurasi sendiri, panjang ya konfigurasi nya.
Cuman dot apa, create track elemennya diketek semua.
Oh enggak, kalau misalkan kita mau pakai webpack, kalau mau pakai webpack, misalkan initialisasi webpack sendiri, konfigurasi webpack sendiri kan agak panjang ya, webpack itu terkenal cukup panjang konfigurasinya, meskipun cukup fleksibel.
Nah, kita akan bahas dulu tentang. Dan bahkan kalau pakai framework yang server-side pun, misalnya pakai Laravel ya, contoh yang paling, itu kan sebenarnya framework server-side, tapi dia udah build in webpack mix.
Jadi yang mempermudah, biar itu tadi kata Mas Rissa, biar kita gak usah mengatik konfigurasi webpack manual sendiri dari awal yang kompatibel sama seluruh kode aplikasi.
Laravel itu ada webpack mix yaitu plug and play sih, udah siap langsung pakai. Jadi sebenarnya sadar gak sadar kalau teman-teman ngerjain web development tuh kayak hampir banget pasti udah pakai bundler.
Laravel itu adalah salah satu framework yang lengkap kan, ada front-end dan back-end, makanya dia butuh webpack untuk mengkompilasi atau nanti kita akan bahas apa kerjaannya si webpack itu atau module bundler supaya client code-nya juga bisa berjalan di browser tertentu atau di versi node atau di versi browser kita gitu kan.
Termasuk juga kalau gak salah Ruby on Rails juga ada ini, ada module bundler-nya juga, jadi masing-masing framework, terutama framework yang lengkap, yang ada front-end, yang ada back-end itu pasti ada.
Apa sih bundler itu?
Nah, mari kita jawab. Bundler adalah ini.
Zoom in, zoom in.
Jadi kan sebenarnya JavaScript itu di awal kan bisa dibilang gak ada apa ya, gak modular, kalo teman-teman ingat misalkan jaman dulu ya mungkin tidak mengalami kalau misalkan kita pakai jQuery itu kita harus ngelod semuanya di script kan, script SRC, jQuery plugin ini, jQuery plugin itu, jQuery versi 2, jQuery versi 3 gitu kan.
Jaman dulu belum bisa import ya, belum ada native, belum ada built-in module untuk import, script module itu belum bisa.
Betul, di sini ada gak ya? Gak ada ya.
Lihat transkrip lengkap (2002 segmen lagi)
Jadi dia hanya bisa load secara global, semuanya bisa diakses selama kita script SRC, dia bisa diakses di mana saja, tidak modular lah gitu ya, masih primitive.
Nah, kemudian, butuh apa ya, si module-module ini, lama-lama kan si developer atau yang bikin JavaScript juga berpikir kan, kayaknya semakin lama semakin gede nih, karena dulu JavaScript kan digunakan hanya untuk hal-hal yang simple ya.
Lama-lama semakin besar, butuh memanage dependensi dan lain-lain, misalkan kita punya aplikasi, ada banyak file, misalkan app.js, util.js, terus misalkan dom.js, ini dia dependensinya ke jQuery, yang ini ke Lourdes, itu memanage dependensinya itu rumit.
Makanya kita butuh bundler ini untuk menggabungkan semua dependensi menjadi satu file. Cara kerja sederhana seperti itu, supaya bisa ketika kita load di browser semuanya ada gitu, gak ada yang ketinggalan.
Coba bayangkan misalkan, berarti multiple files digabung jadi satu file gitu ya, supaya diaksekusi sekadiga satu kali, tapi JavaScript kan memang dari atas sampai bawah, dia gak bisa loncat-loncat, dan single-threaded, nah itu berarti salah satu tugas vendor juga kan harus menggabungkan dengan benar kan import-importnya itu.
Jadi misalkan di sini dom.js ini ketergantungan dependensinya terhadap jQuery, kalau seandainya kita lupa menambahkan menggabungkan jQuery ke dalam single file, satu file itu, maka akan error dom.jsnya error.
Kebawahnya gak jalan sebuah. Atau lupa nge-load jQuery dulu ya, atau kita lupa nge-load jQuerynya dulu. Dom.js error, app.js juga ikutan error karena jQuerynya gak ada, jadi jQuerynya itu di atas dulu, loadestnya di atas dulu, kemudian baris kedua itu ada log.js, util.js, dom.js, dan terakhir baru app.js. Itu posisi menentukan prestasi ya.
Jadi ada, harus, posisinya harus tepat karena bisa aja, ya ternyata si jQuery ini dipakai di bawah, sementara dia baru di-load setelah app.js misalkan, ya gak bisa gitu kan.
Kemudian jadi misalkan bundle.js seperti ini, nah tools-toolsnya itu ada banyak, nanti kita akan bahas. Jadi dua fungsi utama dari bundle adalah dependency resolution dan packaging, di-packing jadi satu, termasuk juga minifying ya, termasuk juga minifying.
Nah, jadi kalau misalkan teman-teman bikin aplikasi, dependency-nya cuma dua misalkan, gak usah pakai bundle itu juga bisa, digabungin aja, digabungin pakai DCLI itu, CT gitu kan, digabungin, concat itu, dua file, jadi satu terus dibini file, udah bisa.
Kalau itu yang butuh yang sederhana, tapi kan sekarang kita kalau teman-teman pakai aplikasi, pakai framework yang kekinian kan semua pakai import, blablabla, from blablabla gitu kan.
Terus pakai node.js, npm install, blablabla, nah itu kalau misalkan mau dibundling, ribet ya, kita harus tahu kan itu folder disk-nya dimana, segala macemnya dimana, nah itu tugasnya sih web bundler makanya, butuh tuh yang namanya bundler untuk pekerjaan sehari-hari untuk memudahkan lah. Ada tambahan mungkin?
Nah, berarti dependency resolution itu juga menentukan urutan tadi ya, karena kan kalau yang dibawah, depend ke, yang dibawah harus depend ke yang di atas, gak boleh sebaliknya.
Terus berarti dia harus bisa resolve juga, misalnya kalau ada beberapa dependency yang fungsinya beda, misalnya modul A bergantung ke jQuery 1.1 gitu, terus modul B bergantung ke jQuery 1.2,
berarti harus di load dua-duanya di atasnya kan sebelumnya, sedangkan kalau dua-duanya depend ke jQuery 1.1, ya cukup salah satu aja, berarti dia harus punya logic buat memproses itu ya.
Iya, nah ini ada artikel menarik nih dari Ivan, ini sejarah ya, sejarah JavaScript module, ya kan tadi saya sempat singgung bahwa JavaScript awalnya tidak modular, bentuknya misalkan gini ya, ada, dari mana nih, nah ini, kita punya fungsi sum, punya fungsi add dan punya fungsi reduce.
Reduce ini memakai, akan menggunakan add ya, dua-duanya ya, add dan sum, dimana dipakainya, kok gak ada, kurang gede. Memo, sama dengan iterative, bukan, ini ada tiga function, ada tiga function,
terus kemudian kita lihat bagaimana dia di inline. Oh, ini ya, di sini ya, jadi fungsi main akan memanggil fungsi sum, yang tergantungan terhadap function add dan reduce.
Ya, ini dia, jadi kebalik, jadi answer itu adalah summary dari nilai array ini ya, satu sampai sembilan ini jumlahan, jadi totalnya 42 tadi ya, sum ini menggunakan fungsi reduce, ini main.js, ada function sum,
memanggil function reduce yang ada di fungsi? Si callback-nya ada add juga itu, function add. Oh salah, bukan main.js ini, sum.js, memanggil fungsi reduce, yang didefinisikan di file reduce.js.
Memanggil add juga sebagai callback function. Ya, memanggil add juga sebagai callback function. Nah, nama file-nya sum, nyebelin sih. Bukan, bukan, nama file-nya yang di atas, yang dibawah, sorry, yang dibawah, ini dia.
Betul ya, tadi salah, salah, salah baca. Function add ada di file yang berbeda ya, itu add.js. Nah, kalau kita gunakan secara, apa ya, primitive, kita gabungin aja semua, jadi satu script kan, seperti ini kan?
Kopas aja semua, jadi satu. Kopas aja udah, gitu kan. Ini jaman dulu caranya begini. Iya, jaman dulu caranya begini.
Sampai sekarang pun, kalau misalnya beneran sesimple ini, yaudah begini aja. Cuma ini kan kita lagi bahas yang lebih kompleks, cuma maksudnya ini, untuk keperluan contoh, ya contohnya di sederhana anak.
Terjadi di sini, kalau kita bikinnya begini, itu kan jadi, dia global namespace, artinya dia bisa nempel di, itu function-function tadi itu bisa nempel di window. Yang terjadi adalah, kalau nanti ada yang namanya duplicate.
Iya, ada function add yang lain. Iya, ada function yang lain, akan duplicate, maka akan menyebabkan bug, atau kode kita tidak bekerja, atau error. Tidak bisa digunakan di tempat yang lain atau di bagian halaman yang lain kan.
Resilability sama dependency resolution. Ini tiga kekurangan dari solusi pertama ini. Kemudian muncul kita menggunakan, oh kita jadi harus bertanggung jawab atas urutan si semua hal-hal yang ditanggung itu ya.
Tapi sebentar, saya punya pertanyaan, kalau di JavaScript itu bukannya kita bisa definisiin fungsi sebelum setelah digunakan?
Functionnya hoisted. Iya hoisted kan? Otomatis naik ke atas kan?
Iya, bisa. Bisa kan? Berarti, posisi nggak ngaruh dong?
Kalau itu udah di global semua sih, nggak apa-apa kali. Cuma kalau misalnya kita mau nge-definisiin sesuatu, ya tetap ada semikir urutan kali ya.
Oh itu sih tadi tulisannya, you are responsible for data, apa? Tapi di atas ada tulisannya, you are responsible for blah-blah-blah.
For having add, reduce and some functions come before main part of the script.
Oke, ya nggak perlu begitu ya. Okay, solusi berikutnya adalah dengan memasukkan script src yang seperti saya sempat jelaskan tadi ya.
Ini memanggil fungsi sendiri. Jadi dimasukkan kita dalam file, dan urutannya harus tepat ya.
Ini lebih nggak enak lagi sih, lebih aja kita kan nggak tahu yang ke-load duluan yang mana.
Nah itu, problemnya adalah itu. Eh tapi kalau dia begini bentuknya, pasti ke-load dengan benar kecuali kalian menambahkan asynchronus tag.
Kalau begini dia, ini render blocking. Oh ya dia blocking, oh i see. Tapi performance-nya jelek.
Jadi urutan pasti betul. Saling menunggu. Tapi berhenti pas dia nge-process add, reduce some main.
Oke, ini seperti tadi ya. Ini file-nya udah dipisah. Script-nya di-load masing-masing dengan script src. Dan tadi kekurangannya ada 3.
2 kalau yang... Like of code re-useability. Sekarang re-useability-nya udah lumayan, udah mendingan.
Karena bisa dipakai di halaman yang lain. Bisa dipanggil dari halaman lain.
Iya. Cuman tetap dependensi resolusinya, ini nggak kelihatan ya. Karena ini file-nya kecil dan bukan dependensi ke vendor, istilahnya ke third party.
Ini kita buat sendiri. Tapi kalau file-nya udah ukurannya besar, dependensi resolusinya lebih ribet lagi nih.
Dan tetap ya global namespace-nya tetap tercemar. Ada polusi. Oke, kemudian muncul IIV, Immediately Info.
Oh, IIV. Banyak tanda kurungnya. Pas pertama ketemu itu bening bingung. Asli bingung.
Maksudnya, kalau kita udah tahu konsepnya, itu maksudnya make sense. Immediately Info, function dari namanya jelas ya. Langsung dijalankan. Jadi itu nggak disimpan di memori sama sekali.
Udah beneran dibaca, langsung di execute. Kalau udah tahu konsepnya, itu make sense.
Tapi pertama kali lihat dan belum tahu itu namanya IIV, wah. Sial, bingung banget. Ini apa, kenapa.
Terutama buat teman-teman yang background-nya dari bahasa pemrograman lain.
Karena belum tentu semua bahasa pemrograman bisa melakukan ini.
Atau yang background-nya belum pernah belajar bahasa pemrograman lain sama sekali.
Ini kan normal ya. Kayak A, B gitu kan. Terus return.
Eh, sudah bisa langsung dijalankan gitu ya.
Iya kan, kita bahas.
Asal di bracket. Ini kan kita store di memory, ini add, ada sesuatu yang namanya add. Kita panggil add, baru dia jalan.
Iya, dan kemudian untuk mengeksekusi, kita panggil kan fungsi add, kita tambahkan parameternya 2,3 misalkan gitu kan, jadinya 5.
Nah, gimana caranya ini supaya kita nggak perlu melakukan ini?
Ada cara singkatnya. Jalan sekali, langsung jalan.
Nah, di JavaScript kita bisa nambahin begini untuk langsung dieksekusi, tapi harus dikurungin ya ini kan.
Iya, atasnya kurung juga.
Iya, dan ini juga udah ada petunjuknya bahwa harus ada 2 parameter ini.
Jadi ini langsung dijalankan. Sama aja kayak gini.
Tapi ini jalan sekali udah nggak disimpan di mana-mana, itu nggak ada.
Bahkan namapun kita nggak perlu ya, bisa anonymous function gitu ya. Sama aja ini.
Gitu, nah ini adalah ini.
Langsung color 5, tapi kita nggak bisa pakai lagi.
Ini yang baca JavaScript ini kalau nggak tahu sejalan, apa lah ini maksudnya gitu ya.
Iya, kalau dibahas lain belum tentu bisa soalnya.
Kalau ketemu ini, kalau ketemu ini kopas takeover flow, terus nggak tahu bahwa itu namanya EFA.
Jadi maksudnya karena nggak tahu, ya nggak bisa baca-baca, nggak bisa look up itu apa kan.
Salah satu ciri khasnya bahasa pemograman fungsional.
Karena function itu dianggap sebagai first-class citizen.
Artinya sama urutan, sama pangkatnya, sama derajatnya dengan data, struktur data dan variable.
Jadi sama aja udah gitu.
Bisa langsung di eksekusi, bisa dimasukin ke variable ya kan.
Funksi bisa dimasukin ke variable.
Contohnya kasusnya kalau yang lebih besar lagi, kalau teman-teman menggunakan EFA ini, contohnya ya.
Ada JavaScript hanya perlu dijalankan satu kali saat page load.
Contohnya initialize ads, initialize hamburger menu, initialize accordion, ya kan.
Itu kan kita cuma mau nge-binding, kita mau trigger aja mau nge-binding event-event handler-nya untuk ads, initialize ads.
Cuma satu kali ya pakai IEV gitu ya.
Jadi begitu file-nya di download, langsung di eksekusi, that's it selesai gitu.
Jadi nggak perlu dipanggil-panggil lagi.
Atau kalau yang jaman sekarang kan color mode nih lagi nge-trend dark mode, misalnya dark mode atau light mode.
Nah, kedepannya itu kan maksudnya kalau pas udah muncul menu-nya di top bar atau dimana,
itu kan bisa dikontrol oleh user dan bisa di-save di local storage atau dimana.
Tapi pas awal, pas paling pertama kan kita harus tahu preferensi apa, sebelum user bisa nge-click ya,
kita harus tahu by default initial-nya apa, dark atau light.
Ke-check dari preferensi user, nah itu buat running pertama.
Habis itu yaudah jalan biasa tergantung si user-nya nge-toggle atau nggak.
Oke, nah IEV ini digunakan untuk membuat sebuah object global.
Ya, justru biar nggak usah...
Biar object-nya nggak global lagi.
Biar nggak mempopulusi global scope lagi.
Ya, lebih modular karena kita bisa menuliskan seperti ini.
Jadi kita definisikan sebuah object, kemudian object-nya kita tambahkan sebuah fungsi, yang adalah fungsi add.
Kemudian di file reduce.jsc-nya adalah myapp.reduce.
Kemudian di sum.jsc-nya myapp.sum.
Dan demand-nya tinggal kita panggil app.sum.
Ini berarti sebenarnya OOP tipis-tipis nggak sih, object-oriented tipis-tipis?
Bagian object-oriented yang mana yang dipakai ini?
Capsulation apa sih?
Ya, itu kan sebenarnya metode yang dibelan EFE itu nempelin metode ke belan myapp yang di-initialize di global.
Kayak kita bikin class sebetulnya kan.
Jadi sebenarnya yang global namespace-nya sekarang jadi myapp.
Global-nya myapp.
Iya, sebenarnya bukan OOP.
Lebih tepatnya ini adalah struktur data.
Karena JavaScript seperti tadi ya, JavaScript itu lebih condong ke fungsional.
Maka struktur data pun bisa diisi function.
Jadi ini adalah metode add atau property add, tapi diisi function.
Ya.
Ya kan?
Ada biasanya property add.
Oh ya sih, biasanya juga sih.
Betul.
Untuk metode sebagai property.
Betul, nggak perlu ada constructor, nggak perlu ada initializer kan.
Jadi add ini bisa kita isi angka struktur data, variable, seperti variable biasa misalkan add sama dengan 5.
Atau bisa kita isi function yang akan mengkalkulasi fungsinya.
Jadi kalau di halaman lain mau bikin app lagi, harus declare global variable lagi.
Yang terpisah ya.
Far myapp lagi.
Jadi oh ya, emang bukan OOP ya berarti.
Bukan OOP.
Kalau OOP kan harus.
Tetapi yang sekarang global itu jadinya myapp.
Jadi window.myapp bisa diakses.
Ya, tetap bisa diakses, apa bisa mengakses semua fungsi kan.
Nggak ada yang private kan.
Ya.
Gitu.
Oke.
Di atasnya jadi ada myapp.js.
Oh ya, ngerti-ngerti.
Myapp.js isinya adalah objek kosong.
Iya.
Oke.
Cuma tadi add.js-nya itu bisa dipanggil dari tempat lain nggak ya?
Bisa, bisa.
Oh, tetap harus butuh.
Tempat lain berarti harus myapp juga.
Harus myapp semua.
Pastiin nama global variable-nya namanya harus myapp.
Ini kayaknya bikin masalah buat kedepannya.
Iya kan itu masuk ke file.
Jadi reusability-nya sebenarnya ya agak gimana gitu.
Kenapa fungsinya nggak ditambahin variable aja di sini, myapp.
Kan cuma contoh, cuma ya.
Contoh itu kadang kontraf sih emang.
Nanti jadi dependency injection loh, ala-ala angular.
Itu beda lagi ya konsepnya ya.
Oke, kita next lagi ya.
Nah, ini masalahnya masih tetap sama nih.
Apa?
Lack of dependency resolution, pollution of global namespace ya.
Number of global variable is now one.
Global variable satu, one, but not zero.
Satu, tapi tetap, ya, tapi masih ada.
Dan bahkan, bahkan nambahin mental load,
kedepannya kalau si add atau sum atau reduce itu dipakai dari tempat lain,
pastiin global, kita harus pastiin global variable-nya myapp.
Nambah kerjaan satu lagi nggak sih?
Yes, dan konsep inilah yang digunakan oleh jQuery.
Oh.
Makanya ada global variable dollar.
Apa?
Ya, dollar bisa dice dari mana aja ya salah satunya.
Global variable legendaris.
Oh iya.
Jadi, kalau teman-teman penasaran buka plug-innya jQuery itu adalah IV.
Semuanya.
Tunggu aja ya.
JQuery plug-in apa nih?
Kalendar.
Coba ya.
Udah nggak inget.
Gak tahu.
JQuery UI?
JQuery UI.
Coba aja yang mana?
Oh iya itu kayaknya yang paling terkenal.
JQuery UI.
Kita lihat, wah ini nggak ada yang langsung gitu ya.
Pricing, wah ada pricing.
Kanan atas ada.
Kita lihat ya, ini jQuery, wah dia udah pakai Turbo.
Turbo Repo.
Wah ini udah modern ini.
Ini bukan jQuery kayaknya.
JQuery UI.
JQuery UI.
JQuery UI.
Wow, lambat sekali.
Kan ada IV.
Lo kok Q ini?
Salah, pencet, sorry.
Mana itunya?
Itu ya.
Ini, itu custom download.
Atau source code GitHub.
Itu developer link.
Developer links.
Bawa-bawa, iya.
Oke, kita lihat ya.
Duh dia udah pakai ini ya, buildnya.
Hasil buildnya aja ya.
Release.
Oh module export sekarang dia pakainya.
Bukan EV lagi.
Udah canggih sekarang.
Harusnya jadul-jadul berarti ya.
Ya anyway, kalo temen-temen familiar dengan jQuery plugin.
Coba dibuka aja.
Itu biasanya dibungkus dengan kurung seperti yang kita contohkan tadi.
Dan kayaknya salah satu bagi yang paling banyak kejadian.
Terutama dulu kali ya sekitar tahun berapa sih?
Mungkin 2000, sekian belas lupa deh.
Itu paling banyak masalah WordPress.
Karena plugin, ada beberapa plugin.
Masing-masing bahwa.
JQuery sendiri.
Termasuk ada global jQuery-nya.
Tapi kadang itu tuh beda versi gitu.
Jadi plugin A bahwa pollute global namespace ada dollar sign-nya.
Plugin B abis itu jalan dia punya dollar lagi.
Nah terus jadi conflict gitu.
Gatau pertama kali belajar web dev tuh paling sering namung gituan.
Jadi dulu di upwork gitu yang freelance receh-receh.
Itu salah satu yang paling banyak tuh tugas ngebener-benerin gitu.
Tadinya gak pengen belajar JavaScript.
Jadi saking banyaknya, menarik juga.
Terus jadi ngerti risk-condition, blablabla.
Ya udah terusan.
Itu maksudnya, jadi walaupun contoh ini emang contrive.
Cuma sekedar contoh.
Tapi maksudnya itu emang risiko yang nyata.
JQuery no conflict.
Ada function jQuery no conflict.
Oh baru tahu sampai dibikin kayak gitu.
Iya.
Gimana itu prosesnya kok bisa dibikin seperti itu ya?
Iya.
Bina namespace.
Bina namespace.
Apa namanya?
Gatau pokoknya, gue seringnya liat dulu pokoknya pasang aja jQuery no conflict.
Ha ha ha.
Jadi.
Dolar-dolarnya beda.
Bagian dari API resmi ya.
Jadi berarti maksudnya, apa?
Pollution of global namespace itu bisa emang potensi nyebabin bug ke depannya.
Itu linknya ada di private chat.
Buka aja, biar sama-sama liat.
Oh jadi kayak buat netralisi semua apa?
Iya, karena pada pakai dollar.
Karena pada pakai dollar, jadi ya conflict sama jQuery.
Jadi banyak javascript library menggunakan dollar sebagai fungsi atau nama variable.
Seperti yang jQuery lakukan.
Di jQuery, dollar itu cuma alias dari jQuery.
Makanya kalau gue dulu tuh, kalau nge-noding itu gak suka pakai dollar.
Jadi langsung jQuery dot apa gitu.
Langsung jQuery document ready, dia gak pakai dollar lagi gitu.
Gak pakai dollar ya.
Ya, supaya lebih pasti.
Oke, itu tadi solusi keberapa tuh?
Masih ada masalah dengan dependency resolution, walaupun pakai IV.
Tapi udah agak sedikit rapih ya.
Terus global namespace-nya juga masih tergantung sekali pada main app tadi ya.
Walaupun sudah berkurang.
Nah, kemudian di 2009 muncullah Node.js.
Jadi command.js itu namanya dulu server.js, lucu banget.
Iya, jadi dulu Node.js muncul.
Dia butuh modular kan, npm install gitu-gitu kan.
Nah, itu dia membawa cara dependency resolution.
Dan juga, ya itu lah.
Dependency resolution lah.
Intinya adalah lebih modular, karena bisa banyak file yang bisa di-load kan.
Jadi mereka menggunakan module.export sama require.
Ya kan, require ini ya.
Jadi ada function add, kita module.export.
Kemudian kalau mau dipakai, kita harus require dulu.
Itu Node.js. Makanya sampai sekarang kalau kayak konfigurasi webpack segala macem,
masih pakai module.
Karena webpack dijalankan oleh Node.js.
Bukan dijalankan oleh server JavaScript Engine Browser.
Yes, jadi proses itu dijalankan di backend.
Begitu juga yang frontend ya, tools source frontend.
Juga kalau pakai Node.js, ya biasanya bisa pakai require.
Atau sekarang udah bisa pakai import.
Dengan sekarang kita harus definisikan di package.json.
Oke, setelah itu command.js berhasil, cukup berhasil.
Tapi ada kekurangannya.
Karena require itu tidak asingkronus.
Gimana kalau file-nya belum berhasil di-load, kita udah butuh ke-block.
Kita butuh jalan duluan.
Tanpa harus menunggu si require ini selesai.
Mungkin module-nya besar, ukurannya dan lain-lain ya.
Makanya muncul asingkronus module definisian, AMD.
Nah, ini AMD ini dari siapa ya?
Dari masing-bagian dari command.js.
Ini kayak format like bentar, habis itu nggak ada yang pakai gitu.
Ilang, iya ilang.
Ini sempat dipakai sama si ini deh.
Kalo misalnya kita pakai, oh bukan.
Yang lebih terkenal itu UMD, bukan AMD.
UMD, universal.
Iya.
Ada AMD.
Lanjut aja dulu.
Lanjut ya.
Sempat pakai dulu, tapi sebentar banget pakai ini nggak banyak.
Ya, sempat ada antara grant, ya pokoknya yang buat runner-runner gitu ya.
Grant, gulp, yaw, yoman ya.
Ya, antara itulah pokoknya.
Ada yang seperti ini ya, define, blablabla.
Terus ada fungsinya, terus return function-nya.
Command.js dan AMD solve two remaining problem with module pattern.
Dependency resolution and pollution global scope.
When we need to take care of dependencies, each module or each file.
There is no pollution for global scope.
Ini udah selesai, ini tiga masalah tadi.
Sudah mencahin sebagainya.
Sudah mencahin masalah itu.
Ya, nah kemudian ada muncul lagi.
AMD can save us from the hell of script text and global pollution in our browser application.
Then how I can use it?
Require.js is here to help us.
Require.js is JavaScript module loader.
It helps load modules asynchronously as needed.
Masih ada kan? Masih dipakai.
Ya, masih masih.
Sekarang Require.js, ya.
Require.js masih.
Biar kita lihat.
Nah, ini...
Yang bentuknya gimana sih?
Bentuknya mirip sama AMD sebenarnya.
UMD nya punya ini ya? Bukan nih?
Bukan, ini AMD.
Bukan, ini Require.js.
Require.js itu yang ini nih.
Kalau ininya kan AMD kan?
Ya, betul. Ini formanya AMD.
Untuk bisa dipakai di HTML, pakai si Require.js.
Gitu.
Nah ini, there is only one script text in index file.
Require.js.
Yes, yes, yes.
Dia akan membaca semua ini.
Yang kita lihat itu cuma satu saja.
Tapi dia mandi temen-temennya.
Jadi Require.js ini trojan ya.
Dia cuma dipanggil satu, terus panggilnya temen-temennya untuk datang gitu.
Satu saja.
Ada.
Require.js nya sendiri ada file nya gak?
Gak ada kan?
Semua file.js yang akan dia banding.
Ini kan yang gue ajarin ini siator. Itu kan dia, tuh di ini siatornya.
Require.js dipanggil oleh index HTML.
Tetapi main.js dipanggil oleh Require.js.
Ketergantungan ya?
Gitu. Jadi satu.
Tapi kita tetap butuh Require.js sebagai loader nya.
Loader nya.
Dan dengan browser sekarang, loading banyak file kecil bisa mengurangi performa.
Jadi kalau kita load sebanyak ini, bisa menurunkan performa ya.
Performa web kita.
Sebaiknya satu saja.
Karena lihat itu dia waterfall.
Nungguin.
Di timeline itu kan dia setelah Require.js selesai, baru dia bisa panggil main.js.
Baru dia panggil sum.js.
Baru dia panggil...
Blocking ya berarti ya.
Ya iyalah orang dia ketergantungan ya.
Dia gak tahu.
Jadi waktu dia nge-load main.js, dia lihat, eh ternyata dia butuh sum.
Waktu dia nge-load sum, eh gue butuh add.
Waktu dia butuh add, dia butuh reduce.
Jadi dia nunggu setelah dia baca file nya.
Itu problemnya kemudian muncul Browserify. Ini module bundler yang pertama ya?
Iya ini udah masuk bundler ya?
Iya ini bundler.
Kayaknya gue belum pernah pake nih.
Cuma tau namanya doang, beneran belum pernah pake.
Ini maksudnya dipake dimana sih?
Iya sama kayak kalau mau pake rollup, mau pake webpack, ya Browserify salah satunya.
Cuma maksudnya manual ya?
Gak pernah misalnya dibawa sama WordPress atau Laravel atau GMS.
Browserify ini, kalau gak salah ya, Browserify ini adalah salah satu module bundler yang bisa di-load lewat CDN.
Dia gak perlu node.js.
Iya gak perlu node.js.
Kalau gak salah ya, bener gak ya?
Tadi ada tulisannya tuh.
Ini kan? Gak tau ya sekarang ya, install masih. Oh sekarang udah pake NPM ya.
Tuganya itu banget sih, Harry Potter pun.
Ini aja masih far ya, contohnya.
Iya dia bukan dijalankan lewat CDN, dia langsung comment line.
Jadi kalau dia cuma sialai script, yang input, outputnya apa?
Dia langsung akan ngebundling itu semua.
Tapi dia yang calculate dependensinya, yaitu dependensi resolutionnya.
Jadi ini kan kita balik lagi ya, command.js, sum.js, add.js, dan reduce.js, kemudian kita bisa jalankan ini.
Ketika command.js kita masukin ke Browserify, dia bisa tau bahwa ini ketergantungan kepada 3 file yang lain.
Eh butuh sum, butuh reduce, semua jadiin 1 di bandel.js, di outputnya.
Atau apapun namanya yang kita mau tulis ya.
Ini lah jamannya dulu gue pake ini, jadi pake GRUN.
GRUN itu kan, GRUN bukan bundler ya, GRUN itu runner.
Jadi jalanin misalnya, saya misalnya pake CSS less kan, di compile lessnya,
terus di compile jsnya pake Browserify, terus pake GRUN, dari hasil Browserify ini misalnya disini adalah bandel.js.
Saya minify lagi pake aglify.js, pake aglify supaya jadi minify.
Jadi tinggal GRUN apa gitu langsung jalan.
Nah Browserify adalah modul bundlernya.
Ya, nah ini hasilnya seperti ini nih.
Ada sum, ada...
Oh ini udah kayak bundler modern ya, kurang lebih hasilnya.
Tapi kalau mau ditelah seperti coba, ya kabur.
Jadi dia jalanin itu sudah kayak AMD ya, itu hasil function, ETNR,
jadi A itu namanya dia karena sudah di aglify, terus kemudian di dalamnya ada manggil function lagi,
terus kita lihat tutup kurungnya, dia seperti AMD ya, dia define functionnya, terus langsung di kabur.
Oh lanjut.
Nggak, sudah itu kan cuma kelihatan, baik ke alaman depan.
Dia itu lihat tuh, itu kan di line 6 itu mulainya, kan di atas itu.
Dia function, modul export, terus ditutupnya di line 13, itu artinya dia fungsi sum.
Itu adalah jalanin function itu.
Itu bukan, itu AMD.
Itu definisi biasa.
Ada yang tahu 2 titik ini, 2, 3, 2 ini apa?
Ini yang dipakai spell.
Itu objeknya property.
Label, bukan label.
Jadi kita bisa kayak go to, go to ke nomor 3.
Makanya spell pakai itu kan, dollar titik 2 kan?
Itu label.
Oh itu label.
Iya, jadi kita bisa disini nanti kalau misalkan kita bisa panggil gitu kan.
Ini.
Kayak pohunter gitu ya?
Kayak apa saya nyoyok ke bagian itu.
Iya.
Kalau ada yang tahu basic ya, bahasa pemograman QBasic itu ada go to baris ke 15 gitu.
Nah ini kayak dikasih label gitu.
Saya mau eksekusi biasanya itu di dalam ini kayak for loop.
Kalau kita ada 2 for loop, kita mau keluar ke for loop yang pertama itu bisa dipakaiin label.
Tapi ini di luar konteks ya.
Intinya jadinya seperti inilah.
Agak aneh memang.
You don't have to understand this panel file line by line.
Ya pokoknya, yang penting intinya semua udah tercakup di satu file itu.
You and me, just to make you more comfortable.
UMD, ada UMD.
UMD, iya.
Crea Crea F sama tahun lalu kayaknya masih produce UMD deh.
Kalau dibuild.
Bukan Crea Crea F atau apa ya?
Pokoknya React Tooling lah, modern React Tooling.
Terus sekarang lama-lama kayaknya udah gak ada yang pakai.
Bukan, Rollup pakai UMD bukannya?
Enggak.
Enggak ya, oh enggak.
Rollup udah IS modul.
IS modul.
UMD apa nih, bedanya?
Just to make you more confused.
Biar lebih bingung.
Biar tambah bingung.
Bedanya apa?
I think 3 different module type, global module object, common JS, and UMD is an option.
Then you will have to maintain 3 different files.
Ya, jadi dia mau menggabungkan semuanya.
Kita cukup memencahkan 1, universal.
Akhirnya ada 4.
Itu ada...
Ini ada memes-nya.
Developer mau mencahkan masalah dengan masalah baru.
Nambah masalah.
Ada 3 standar.
Terus biar maksudnya pengen menggabungkan semua, bikin 1 standar baru.
Jadi 4.
Jadi 4 standar.
Malah lebih membingungkan lagi.
Itulah, selamat datang.
Kalau ini syntax-nya lebih...
Lebih familiar ya kita ya.
Ya.
Tapi dalamnya ada define-nya.
Nah itu jadi ada if.
Jadi sebenarnya cuma dalamnya cuma kondisional doang sih.
If-ifan doang.
Kalau UMD ini, kalau objek ini, kalau...
Kalau ada define berarti...
Oh oke.
Boleh, boleh, boleh.
Boleh.
Oke.
Lanjut.
Ini dia.
Ini sudah selamat datang.
Nambah satu lagi.
Nah ini yang harusnya jadi standar ya.
Karena ini web standar ya.
Eh web standar nggak sih?
Iya kan?
Eqmascript.
Jadi harapannya semua yang tadinya...
Semua projek yang tadinya...
Menggunakan command.js, require, amd, umd itu...
Balik lagi aja udah ke es-module.
Es-module udah support, import, export.
Udah...
Apa?
Udah modern.
Cara pakenya juga lebih gampang.
Jadi...
Pakailah es-module.
Oh iya, kalau misalnya ada yang nggak tahu...
Kenapa ada es, es-6 itu apa.
Kita kan ada episode dulu ya.
Tentang Eqmascript.
Cari aja, itu kayaknya salah satu yang pertama deh.
Iya.
Ya, jadi es itu adalah Eqmascript.
Jadi di es-6 itu di...
Diperkenalkan import dan export.
Untuk...
Menyelesaikan masalah yang tadi.
Yang sudah kita bahas dari awal tadi.
Disini contohnya...
Kalau di answer itu butuh sum.
Kita tinggal import sum.
Selebihnya...
Meskipun si sum ini ada dependensi ke yang lain...
Dia bisa di import juga.
Seperti ini.
Jadi pada saat dipanggil...
Kita udah dapat gambaran kira-kira...
Ini ketergantungan ke mana.
Ke file mana.
Dan karena ini di import sebagai modul...
Di global itu add sum segala macem nggak ada.
Jadi aman.
Ini private semua.
Aman dan...
Cuman...
Pada saat awal...
Browser belum...
Semua mendukung.
Ya, hanya Chrome yang...
Sudah support import statement.
Saat itu dulu, kalau sekarang...
Ya, waktu awal.
Waktu awal diluncurkan.
Nah, makanya...
Sekarang sudah semua ya.
Jadi sebenarnya nggak butuh ini untuk...
Apa? Nggak butuh...
Import-export doang sih.
Import-export doang ya.
Untuk yang lain boleh.
Nah, selanjutnya...
Makanya supaya bisa...
Jadi kita nulisnya di IS modul...
Tetapi browser...
Masih...
Pake CGS ya?
Bisa macem-macem.
CGS, mau global tadi...
Atau mau AMD.
Tergantung.
Mau common JS, AMD.
AMD.
Atau global object.
Atau UMD. Jadi dia gabungin semua.
Yes.
Makanya ada webpack.
Ada modul bandar.
Kita semua.
Semua pasti pernah mengalami...
Perurusan sama webpack. Walaupun sekarang...
Udah mulai banyak yang baru ya. Cuma...
Webpack ini masa kejayaannya...
Lumayan lama sih.
Sampai sekarang masih dibawa...
Sama Laravel.
Dan... Apa? Next.js.
Masih pakai webpack. Sekarang...
Udah mulai ada bener-bener alternatif ya.
Kalau nggak salah. Tapi...
Masih dipakai Next.js.
Gatsby.
Yang membuat tenar webpack ini...
React kan ya?
Ya, yang bikin...
Banyak sih, Pak.
Yang bikin React...
Jadi approachable.
Jadi lebih mudah. Kalo dulu...
Harus nulis webpack sendiri.
Atau harus pake create element...
Itu ribet banget.
Saya ingat dulu... Nah, ini ada penjelasannya.
Kenapa?
Pernah ngisi salah satu material React.
Tapi manual. Karena sengaja...
Nggak mau pake webpack.
Kan dulu kan sebelum ada create track app.
Harus... Antara harus pake...
Grunt, Gulp...
Dan lain-lain. Atau webpack yang baru.
Saya lebih memilih untuk...
Vanilla. Maksudnya Vanilla.
Tulis create element gitu.
Sekali memang.
Ya, terus keunggulan React...
Yang maksudnya... Apa?
Diklaratif ya.
Maksudnya kita bisa bikin...
Functional components, JSX dan lain-lain.
Ya, jadi nggak...
Jadi nggak kerasa dong benefit-benefit itu.
Kalau kita harus...
Ngetik manual tanpa bandelur sama sekali.
Betul.
Dan salah satu fungsi tambahan...
Yang digunakan oleh...
Modul-modul bundler ini.
Maksudnya webpack adalah...
Bisa... Apa ya?
Bisa banyak plugin seperti Bubble.
Bubble itu... Misalkan tadi ya.
Contohnya tadi kan alasannya...
Ya, transpilasi.
Hanya...
Awalnya kan hanya browser Chrome yang bisa.
Untuk import-export.
Nah, kita bisa memanfaatkan...
Modul bundler untuk kasih tahu.
Saya tetap mau pake import-export.
Tapi...
Nanti kompilasinya supaya bisa...
Bisa dijalankan di ES3.
Atau yang lebih jadul.
Misalkan bisa di Firefox.
Bisa di Safari.
Opera dan lain-lain.
Itu juga salah satu fungsinya.
Dan feature language lainnya ya.
Misalnya kita pengen pakai arrow function.
Arrow function kan itu di ES6 ya.
ES yang baru...
Caranya biar backwards compatible.
Browser lain yang belum bisa baca arrow function.
Ya, berarti harus...
Pake regular name function.
Nah, itu transpiling.
Proses transpilenya...
Harus dihandle oleh Babel.
Biasanya plugin.
Betul.
Seperti browserify.
Itu kan penjelasannya.
Tapi kenapa nggak pakai browserify aja?
Jawapannya adalah...
Webpack bisa menghandle...
Komen.js, AMD, ES6.
Dan webpack bisa ada...
Atau plugin seperti di bullet point itu.
Wah, dia Taipo.
Ya, yang tadi kita sebutkan itu...
Bagian dari plugin kali ya.
Nah, yang mungkin jarang orang tahu juga...
Bahwa fungsi dari...
Model bundler juga sebagai code split.
Code split ini...
Ratkaitannya dengan performa ya.
Jadi kalau misalkan kita...
Di halaman ini hanya butuh...
Sepertiga dari script...
Yang kita bundling...
100%.
Ya, ngapain kita load semuanya, gitu kan?
Kita load aja. Sepertiganya.
Jangan di-load semua.
Karena dia membaca semua code-nya ya.
Mana aja yang dipanggil.
Kalau dia bisa tahu mana yang dipanggil.
Maksudnya kan, mana yang dipakai di code yang manggil.
Maksudnya kan dia tahu mana yang nggak dipakai.
Nah, itu bisa di-execute.
Bagian yang nggak dipakai sama sekali.
Nah, di-outputnya menyesuaikan script yang manggil.
Nah, ini kan...
Di webpack ini udah mulai rumit ya.
Misalnya udah route-based.
Jadi halamannya...
Di tiap halaman, mungkin kebutuhannya lain-lain.
Nah, itu mungkin bisa di-custom...
Apa?
Di-custom...
Outputnya berdasarkan...
Halaman atau script utama yang...
Manggil.
Ya.
Dan enaknya karena dia ada loader.
Jadi kita bisa pasang...
Jadi webpack itu kan...
Dia nggak cuma hanya untuk handle JavaScript.
Karena ada loader, dia bisa handle...
Tadi...
SAS...
SAS jadi CSS.
Image minify.
Type script ke aja di JavaScript.
Ya.
Yang penting loadernya ada gitu.
Bisa minify langsung ya.
Asal kita install loadernya.
Bisa... asal ada loadernya...
Dia bisa dijalankan.
Betul. Termasuk juga JSX ya?
Ya, JSX termasuk.
Ya kan JSX ya? Termasuk ya?
Ya, benar-benar.
Bubble, makanya harus ada bubble sama...
Nanti kalau jaman dulu itu harus ada...
Include core JS.
Core JS buat apa sih?
Supaya bisa dikenal.
Supaya bisa mengen... itu...
Apa? Polyxil? Eh...
Apa sih? Kayak...
Semacam transpile gitu lah ya?
Nah... dari webpack itu...
Dia juga menambahkan webpack dev server.
Supaya bisa...
Dia menambahkan hotmodul reloaded juga kan.
Di situ.
Memudahkan. Jadi kalau misalkan...
Ada perubahan kode, kita gak perlu...
Refresh, dia udah otomatis berubah ya.
Dari halaman webnya ya.
Dan kalau lagi di dev...
Dia behavior-nya lain ya.
Maksudnya apa?
Dia utamain...
Secepat mungkin bisa...
Dia gak...
Pertama dia gak minify.
Jadi kita langsung tau di kode mana yang...
Ada masalah.
Oke. Ini ada contoh config-nya.
Ini yang sederhana ya.
Jadi entry point-nya apa?
Kita mau jadikan output-nya apa?
Hampir sama seperti browserify tadi ya.
Entry point-nya apa?
Hasil akhirnya apa?
Ini yang paling sederhana.
Karena...
Kita juga langsung jalanin webpack.
Oh ya bisa. Pakai CLI juga bisa.
Pakai CLI juga bisa.
Sama seperti browserify tadi.
Iya. Persis.
Karena ini main.js dan lain-lain itu...
Gak ada transpilasi.
Gak ada sas.
Gak ada typescript. Gak ada bubble.
Jadi sederhana cukup.
Ya. Sederhana ini cukup.
Terus bisa dijalankan dengan webpack dev server.
Terus bundle.js-nya kita include.
Kita di SRC.
Udah.
Kita udah bisa...
Menghasilkan hal yang sama seperti yang sebelumnya.
Dengan cara yang lebih sederhana harusnya ya.
Nah, kalau kita mau deploy.
Ya, kita harus jelankan dulu.
NPM run build.
Bedanya adalah, kalau tadi tidak di minify, yang ini...
Sudah di minify.
Pokoknya dioptimasi lah untuk production ya.
Ya.
Kemudian setelah webpack.
Ada muncul banyak module bundle lain.
Setau saya sempat muncul terlebih dahulu parcel.
Dulu ini...
Swap dulu sempat pakai parcel gak sih?
Oh iya.
Iya, zero config.
Jadi kita gak perlu pakai konfigurasi.
Kita tinggal panggil parcel index.html.
Di dalam index.html ada main.js.
Dia akan melakukan pekerjaan
layaknya module bundle lain.
Tanpa harus ada konfigurasi.
Itu kelebihan yang si parcel.
Kalau gak salah, parcel versi awal
itu dia hanya
abstraction layer di atas webpack.
Jadi sebenarnya dia memudahkan kita
supaya tidak menulis
konfigurasi webpack.
Tapi pada akhirnya dia kayaknya bikin sendiri.
Gak pakai webpack lagi.
Kayaknya ya.
Cuma get started, dia bisa di konfigurasi juga.
Kayaknya dia mau hasilnya ke target.
Coba ke targetnya apa tuh?
Feature-feature-nya itu
udah lengkap kayak development, cost fitting,
segala macam punya kebutuhan
yang di cover oleh webpack
udah bisa dikerjakan semua juga.
Sudah bisa dikerjakan.
Jadi kita gak perlu npm install blablabla.
Kita taruh aja di main.js.
Misalkan import,
import react from react.
Dia udah langsung, begitu kita jelankan parcel
index.html, dia akan langsung
men-download, taruh di node-modules.
Coba, Mas Risa,
ke output format, Mas.
Itu di bagian kanan, target options.
Target options,
bawah-bawah-bawah.
Output format.
Nah, lihat tuh. Output format-nya
bisa global object.
Bisa disunyai.
Itu tuh.
Di private chat ada tuh
contoh resepinya, resepi parcel.
Itu menarik sih.
Maksudnya, macem-macem dari memproses
CSS,
file font, itu bisa semua.
Berarti kita bisa
menambahkan konfigurasi ya, kalau
dibutuhkan ya?
Tambahin konfigurasi gimana caranya?
Ya udah, gitu aja.
Diimport aja.
Kalau ini, ini contoh
kita bisa menambahkan
konfigurasi.
Yang ini,
kita bisa menambahkan
konfigurasi.
Yang ini,
kita bisa menambahkan
konfigurasi.
Yang ini,
kita bisa menambahkan
konfigurasi.
Yang ini,
kita bisa menambahkan
konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Yang ini, kita bisa menambahkan konfigurasi.
Macam-macam, kode splitting, kode elimination, transfile.
Ter-shaking, dan macam-macam.
Ter-shaking, dan macam-macam.
Hashing, importing modules, non-javascript resources, transformation.
Ada tanda tiga gini apa maksudnya?
Me-fail.
Importing.
Ya itu, kalau ijo, ya yang paling bagus.
Common.js, ECMAScript.
Jadi, Browserify itu nggak bisa import dari ECMAScript.
Ya.
Karena belum jamannya.
Ya, jadi dia nggak bisa import dari ESModule.
Code splitting.
Itu.
Lumayan.
Pertidif juga ya, si Parcel ya.
Coba, teman-teman,
kalau ada yang masih pakai Parcel.js,
Coba ceritakan.
Tau angkat kaki.
Tuh, yang pakai Atlasian, Microsoft,
Sourcegraph.
Masih ada yang pakai.
Ada yang bagus.
Tenang, tenang, tenang.
Wah, sekarang dia udah multi-core.
Ada caching, lazy dev build.
Wah, ini udah.
Mungkin dia tidak dibadal di dalam
kayak create the app.
Iya, dia nggak ngikut ke framework tertentu.
Iya.
Makanya kurang populer.
Maksudnya kurang populer karena...
Kita nggak sering lihat, cuman mungkin
dibalik layar banyak yang pakai.
Ya itu sih Atlasian dan lalala, mungkin.
Mungkin kita lihat tuh, apa ya, webpack, rollup,
vid yang sebetulnya pakai rollup juga.
Kan yang paling, karena banyak
dipakai sama framework.
Jadi mau nggak mau kita, apa, sering kita juga.
Tuh, kontributornya banyak banget.
Tapi sebenarnya ini, apa,
ekosistemnya, komunitinya ya,
apa, ramai kok.
Kayak kontributurnya banyak.
Dilihat dari docs-nya juga kayaknya
yang modern lah, updated.
Iya, updated.
Iya, kita ke rollup,
rollup ini salah satu
bundler yang...
Favoritku.
Yang dikenal gara-gara
Svelte awalnya kan, karena pembuatnya sama.
Iya.
Jadi dia mungkin ada
agenda terselubung
bahwa dia pengen
bikin framework, tapi dia bikin module bundler sendiri.
Walaupun ini bisa
dipakai secara universal di yang
lain. Ya karena itu
menuhin kebutuhannya dia.
Ya kan sebenarnya, apa, dibalik framework,
dibalik framework, ada bundler kan.
Jadi biar, apa,
konsepnya dia.
Sedikit bocoran.
Bagi yang suka pakai VCS,
di belakangnya rollup lho.
Iya, VT itu.
Di belakangnya rollup.
VT,
rollup ini, ya.
Tambahin info juga.
Kalau webpack itu, dia bundlingnya
itu gaya-nya adalah
pakai module.
Modul map.
Source map atau module map?
Module map.
Kalau rollup, dia
pakai EV.
Hasilnya ya, hasil
akhirnya ya, dia pakai EV, modelnya.
Yang tadi kita sebutkan, jadi untuk modular
kan, harus dipakaiin EV kan,
supaya, apa,
supaya global variable-nya
jadi satu kan. Nah si rollup ini, hasil
bentuknya, bentukannya seperti itu.
Awalnya ya,
nggak tahu sekarang.
Dan rollup ini juga mudah lho, pakainya. Dia cuma
command line, input, output juga sebenarnya.
Kalau javascriptnya simple.
Kalau javascriptnya simple.
Ini bisa di install global atau bisa
apa, pakai NPX.
Terus, ini dia ya.
Itu. Saya sukanya
kan, apa, mau jadi EV
atau mau jadi, kalau di Node.js
saya bisa pakai CJS aja.
Ya, command.js.
Atau pakai UMD juga boleh.
Ya, semua model syntax.
Oke.
Dan kemudian, di atasnya
rollup,
ada VT.
Yang mungkin sekarang lebih populer ya.
Untuk berbagai jenis
framework.
VT pun, sebenarnya pakai rollup.
Pakai rollup.
Yang membedakan antara VT
sama rollup apa?
Atau sama bundler apa?
Ini bukan cuma bundler.
Ya, bundler dan lain-lain.
Ya, sebetulnya kan approach itu
dari webpack fungken udah
dijalanin tuh. Bundler.
Dia nggak bisa pure.
Kalau browserify, mungkin kan lebih pure.
Ya, udah kerjaannya dia bundling doang.
Tapi sisanya, buat ngejalanin hal-hal
lain, ya udah urus sendiri pakai
task runner seperti grant atau gulp.
Tapi kan, kalau si webpack kan,
dia udah apa?
Udah ngerjain banyak hal-hal lainnya.
Yang kayak tadi dari code splitting, transpiling,
dan lain-lain.
Sebenarnya kesininya ya semua
gitu. Nah, VT juga.
Untuk bundlernya,
itu si VT pakai rollup
under the hood. Tapi dia tuh pakai
IS build juga. Nah, itu.
Kita tahu nih, ini lumayan menarik juga sih.
Ya.
IS build apa ya?
Ya, bundler juga.
Bundler juga.
Nah, ini kita kayaknya
pernah bahas sekilas deh. Cuma
pas kita ngebahas feedconf,
dan ya karena bahas konferensi
tentang feed, kita bahas feednya juga
cara kerjanya. Tapi ini emang
agak rumit sih. Jadi
feed itu dev server dan build
server, itu punya
approach yang beda.
Kalau dev kan, itu
tadi pakai HMR juga kan,
pakai hotmodular reloading-nya.
Dia tuh yang cepat banget.
Yang 0,000 sekian detik
tiba-tiba udah berubah.
Dan itu emang kayak
kompleks banget, advance banget.
Jelasannya sih sebenarnya ada di
y, apa? Dokumentasi feed
itu y-feed. Cuma ya
mesti nggak ngerti sih. Ayo baca.
Ini bundling. Terus, however,
as we build more ambitious application,
the amount of JavaScript we dealing
is also increasing dramatically.
It's uncommon
to large scale application project
contain thousand of modules.
We are starting to hit performance bottleneck.
Terus apa lagi?
Feed aims to address this issue
by leveraging new advancement
in ecosystem. The
availability of native ES module
in the browser and the rest of
JavaScript tools written and
distributed.
Dia pakai tooling. Tooling-nya
kan isbuild, yang mana dia
kan isbuild itu bundler
pakai row up juga.
Bundler juga. Jadi kayak feed itu
satu layer yang
menggabungkan
macem-macem bundler. Ya, otomatis dia
jadi bundler juga kan. Tapi dia juga
ngegabungin. Dimana memungkinkan
dia pakai teknologi yang
native, apa maksudnya yang built-in
web API yang ada di browser.
Nah, bawah. Bawahnya bagus tuh.
Scroll bawah lagi.
Bawah lagi.
Bawah lagi. Nah, itu yang
ada graphic dev server dan
build server.
Server ready.
Entry route module.
Gimana bacanya?
Ini dibundling.
Ini kan file-file JS tadi
kan. Add to JS.
Sum to JS. Blah-blah-blah kan.
Terus dibundling.
Baca oleh siapa?
Feed itu dev server-nya.
Feed itu dev server.
Jadi,
lebih tepatnya feed itu
dev server sih sebenarnya. Bukan bundler.
Ada layer.
Oh.
Tapi
buat.
Nah, ini ajaib. Unik nih
apa hasil mikirannya
nama siapa? Evan Yu ya?
Evan Yu.
Oke.
Tapi buat teman-teman mungkin feed ini
lebih dikenal sebagai
starting tool kali ya. Starting tool.
Kalau zaman dulu, ingat nggak yang ada yang namanya
Yo-Man?
Yo. Yo-Man.
Tapi ingat-ingat itu ada dan logo-nya
apa kayak soldier gitu ya?
Iya.
Komennya
Yo.
CL-tools untuk
starting project.
Sama aja kayak mirip kayak MPM init lah.
Oh, kita mau bikin
project front-end baru nih.
Pakainya VT.
Tinggal jadikan VT, init, blah-blah-blah.
Nanti bisa pilih. Mau pakai spell,
mau pakai react, mau pakai view.
Terus mau bahasanya JavaScript atau
dan lain-lain semua udah diatur
sama dia gitu. Jadi ini udah
dibanding lebih complete lagi.
Dia satu. Kayaknya dia satu
pakai tooling tuh ada server,
ada bundler, ya bundler dan
lain-lain. Transfile,
compile, ya kan?
Ada plugin-nya juga.
Kita, kita nge-tick react,
kayak browser kan nggak bisa baca react. Nah, kan
yang, maksudnya browser nggak bisa baca
kode JSX mentahan kita.
Atau apalah, walaupun
TypeScript ya, browser kan nggak bisa baca TypeScript.
Nah, itu semua dihandle sama
fit.
Nah, itu dia fit ya.
Ini bukan hanya bundler, tapi
lebih complete.
Nah, terus setelah webpack
mulai turun,
pamarnya,
ya, beberapa orang webpack
di, apa ya, dipekerjakan oleh
Versel untuk membuat
TurboPack. TurboPack.
TurboPack ini
digunakan
Rust, bahasa
pemogaman Rust.
Yang jelas-jelas disebutkan bahwa
adalah ini suksesornya dari webpack.
Karena yang punya, yang autornya awalnya
si webpack, di hire ya sama
Versel ya.
Yang digunakan di Next.js.
Iya, digunakan
di Next.js.
Udah bisa dipake selain
netcr belum?
Bisa, tapi masih eksperimental. Jadi, kayak
di Next config-nya itu kita
harus, apalah, eksperimental,
Turbo, True, atau apapunnya,
by default, masih pakai webpack
di Next, cuma kita bisa
open-in.
Kalau kita mau pakai
TurboPack di framework lain?
Enggak tau.
Enggak tau ya.
Start building, coba ya.
Atau tanpa framework,
nggak di sini, kayak kita tadi
mau, kayak Sub.js, tadi kita mau
pakai TurboPack.
Ini langsung
create Next app.
Gak bisa.
Dikunci sama dia ya.
Tidak berlaku untuk
bahasa atau framework
lain ya.
Ternyata.
Padahal pasti bisa sih. Harusnya bisa kalau dia bisa
memproses Next.js.
Minimal, pasti bisa memproses
React app lainnya, kan? Logikanya.
Cuma...
Mungkin Next-nya.
Mungkin Next-nya.
Next ya.
Mungkin
ke Remix atau ke Mana, harusnya bisa ya.
Oke.
Tadi kita udah bahas sekilas
IS build, mungkin bisa dilihat
sedikit juga ini.
Ini IS build, apa yang membedakan dia
dengan build-build
yang lain ya?
Dan mereka...
Beda banget bedanya.
Kenapa ya, coba.
Dia pakai apa ya?
Dia pakai apa bikinnya? Coba ada nggak...
Ini kan baru ya.
Baru banget. Jadi mungkin kayak udah
nggak terlalu
backwards compatible-nya.
Nggak terlalu mikirin itu. Kayak
segala format-format.
Ini Bari ya?
Oh, dia pakai Go.
Oh, oke.
Dia pakai Go.
Kalau nggak salah...
Oh, ada di sidebar.
Coba sidebar scroll ke bawah.
Tadi di dokumentasinya.
Why is IS build fast?
Kenapa?
Bawah.
Nah, ini dia.
It's written in Go.
Oke, dia nggak...
Ternyata trendnya sekarang
nggak pakai JavaScript ya.
Jadi IS build
pakai Go.
Jadi emang mungkin JavaScript
nggak selanjutnya selalu optimal
di semua environment.
Karena ini kan bundler-nya
yang untuk mengkompilasi
si... Transpilasi si
JavaScript. Karena kalau dibikin
engine-nya pakai JavaScript, ada layer
lagi yang untuk menjalankan JavaScript kan
butuh JavaScript engine. Sedangkan
kalau dia pakainya Go atau Rust
kan kompalnya jadi native.
Iya. Satu itu. Kedua...
Native application itu lebih...
Lebih optimize lah.
Lebih cukup karena kayak gitu.
Oh, ya.
Kalau gue tuh multi-trading nggak sih?
Multi-trading.
Parallel ya.
Jadi kan kalau JavaScript
itu lebih ke ini kan.
Bukan dioptimasi untuk
menjalankan
komputasi-komputasi yang berat
dan lama seperti ini kan.
Untuk transpilasi dan lain-lain kan.
Bahasa-bahasa low-level seperti
Go atau Rust itu lebih cocok.
Terus JavaScript nggak bisa
multi-trading.
Iya.
Dia single-trading,
tapi asingronus.
Itulah.
Memusingkan memang.
Oh, terus ini ya.
Satu poin menarik.
Di ISBuild semua ditulis dari awal.
Build from scratch.
Jadi kayak mungkin, ya kayak beban-beban
yang dependensi lama
segala macam nggak ada.
Ini beneran dari awal.
Terus dia nggak pakai
compiler-nya TypeScript.
Jadi dia bikin build-in sendiri.
Hal-hal kayak type checking
yang dirasa nggak perlu.
Kan sebenarnya keperluan dia cuma
nerjemahin dari TypeScript
yang nggak bisa dibaca oleh browser.
Gimana caranya secepat mungkin
jadi JavaScript yang bisa jalan di browser.
Jadi kayak mungkin apa itu.
TypeScript parser appears to still run
the type checker even when type checking
is disabled. Yang begitu-gitu
kan di-bypass semua sama dia.
Iya, iya.
Memory using.
Oh, terus ada honorary mention sih.
Agak kasihan.
Snowpack sempat.
Snowpack sempat hype ya.
Tapi dia sebenarnya...
Nggak, udah di discontinue.
Dia tuh muncul.
Dia muncul duluan.
Karena pindah ke fight kan.
Iya.
Jadi malah mereka juga nyaranin
udah sana pakai fit aja.
Padahal duluan dia.
Ya lah, sportive.
Udah kalah ya.
Eh, ini yang bikin
menarik.
Ohh.
Oke.
Iya, iya.
Ya udah, astronya pun.
Astronya dipindah pakai fit juga.
Dan snowpack-nya ya
di-deprecate.
Cukup drama dulu ya.
Kayaknya sebenarnya cuma orangnya
pake pasantnya santai aja deh.
Yang bikin drama ya
sosmed orang-orang pada
heboh aja.
Iya kan dulu ada wacana mau dipakai
di spellkit ya.
Iya.
Terus abis itu, spellkitnya
berubah arah.
Kita pake snowpack, kita pake fitnya aja.
Iya, pake fit kan.
Akhirnya, ya udah.
Beberapa bulan kemudian sih yang bikin snowpack juga.
Framework gue juga pake fit aja lah.
Iya.
Lebih bagus fitnya kayaknya.
Dia mengakui kekalahan atau
dia baper ya.
Ya sih, cuma kayaknya.
Yang maintain begini kan susah ya.
Masa nya daripada
maksain untuk dua hal yang mirip.
Itu kan counterproductive.
Gak berguna buat siapa pun. Jadi ya udah lah ya.
Ya ini kan lebih ke
hukum rimba kan.
Siapa yang powerful
atau yang memang lebih
bagus, ya dia
yang bertahan gitu kan.
Dan dia, si creator nya snowpack juga
akhirnya ya dedicate resource nya
buat
ngembangin astronya aja kan.
Dia fokus di astro dan emang
jadi jauh lebih bagus juga. Jauh lebih
bagus.
Ya, betul.
Maksudnya gak perlu pakai
modul-modul bundles
segala macem.
Dia bisa
dipakai input-output
aja udah.
Bisa.
Iya, betul.
Langsung bubble, source nya
directory nya apa, output directory nya apa
udah selesai sebenarnya.
Sekarang udah jarang ya
pakai bubble ya.
Saya salah satu plugin.
Maksudnya kalau stand alone
kayaknya jarang aja sih ya.
Pakai?
Maksudnya kadang gue ngecode nya
kayak berapa tahun yang lalu ya dia.
Entar.
Terakhir update
terakhir update
3 tahun lalu dan masih jalan sampai sekarang.
Jadi kayak cuma CLI script
supaya
bisa dijalani ya sudah.
Karena butuh di transpile
di transpile ke
common.js
supaya di note kan CLI script
doang kan. Jadi ya
simple-simple aja gak usah pakai
bundle-bundle yang aneh-aneh.
Ada satu
Ada karena mau cerita satu fenomena
sedikit.
Jadi fenomena yang terjadi
saya menemukan beberapa kali
bahkan di dunia profesional ya
di tempat saya bekerja. Beberapa kali
orang karena belajarnya
ikut
courses-courses
ataupun yang online
yang langsung menggunakan
create react app. Yang langsung
atau sudah terbiasa di company
itu udah langsung
memakai library-library yang
sudah dipakai company. Jadi cuma tinggal
git clone. Pokoknya
npm run build, npm run start
npm run init, atau segala
macem. Dan
si pendahulu
developer-developer pendahulunya sudah
mempersiapkan
config-config kayak webpack config-nya
itu sudah ready gitu. Tinggal ada helper
helper-nya sudah ready segala macem.
Dan sampai config-nya cuma
ini entry point-nya, ini helper-nya. Pokoknya
skeletron kita begini.
Menyebabkan
orang-orang tersebut gak bisa gak tahu
bagaimana mengkonfigurasi webpack
atau mengkonfigurasi
bundler-bundler.
Taunya ya cuma pakai itu doang.
Itu fenomena yang
beberapa kali saya temukan saat ini.
Bukan hanya gak tahu config.
Kalau error biasa ada error webpack itu juga
bingung tuh.
Biasanya error-nya dari webpack-nya.
Atau dari bubble-nya. Atau dari mana.
Karena itu sudah
berapa tingkat, sudah berapa lapisan.
Sudah kemana-mana. Dan apa sih ini.
Jadi gak bisa. Atau
bahkan kalau misalnya ada hal yang baru
gak bisa terima lagi. Misalnya kayak gini.
Terbiasa pakai webpack.
Saya memperkenalkan fit-fit
itu lagi susah yang setengah mati.
Saat ini posisinya adalah
webpack itu bisa multiple entry point.
Jadi sekaligus
webpack dev server itu
sekali jalanin. Multiple entry point
itu bisa dijalani semua. Sedangkan fit
gak bisa. Gak bisa
multiple entry point. Untuk
bahkan untuk high-end area gak bisa.
Tetapi saya memikirkan membawa
saya punya argumen adalah
saya sedang bekerja di
salah satu plugin
atau hanya bagian tertentu
saja. Buat apa saya
kompal seluruh project
kalau saya hanya mengubah
di plugin ini.
Kenapa gak saya diri dulu.
Dan apalagi sudah modular ya.
Kita gak mungkin butuh
sesuatu dari di luar
plugin yang lagi dikerjain ini.
Iya. Udah modular.
Dan kalau saya pakai fit itu
memang gak bisa multiple entry point. Tetapi
kalau saya paksakan itu
membuat
istilahnya
konsep dari fit itu jadi
jadi salah.
Kalau multiple entry point.
Multiple entry point itu bukan
maksudnya entry pointnya ada banyak
terus dijadikan satu bundle. Bukan.
Multiple entry point, multiple output.
Kalau webpack itu bisa.
Jadi kalau
di fit itu kan
bisa NPM melambil semuanya
dibuild dan dipecah-pecah
entry pointnya itu bisa. Tetapi kalau
web server-nya cukup satu
sebenarnya. Di bagian mana
yang kita sedang kerjakan
itulah yang kita dev server-in.
Jadi hot module read/audit-nya pun cepat.
Dan kita kerjanya
fokus satu tempat.
Dan
masih belum bisa diterima.
Itulah maksudnya
dari sisi dunia bundler
ini juga punya
opinionated. Jadi kalau sudah
terbiasa itu saja.
Bukan, gak bisa berubah.
Kadang si bundler ini, terutama
webpack ya, config-nya itu kan
emang rumit banget.
Gue pun gak, apa ya,
tahu cara kerjanya.
Ya pernah lah baca dokumentasi config-nya.
Cuma kalau gue pribadi sih
kayak just in time aja kalau ada butuh
isu harus ngapain.
Ya udah, cari caranya.
Tapi minimal mungkin
minimal harus tahu
cara kerja bundler-nya di level apa,
si tools itu ngapain.
Dan yang minimal tahu config-nya
kira-kira bentuknya kayak gimana ya.
Jadi kan kita gak tahu ke depannya bakal dapet
isu apa. Ya cuma kalau
udah cukup familiar dengan cara kerjanya
dan konfigurasinya kayak gimana
ya kan, ya relatif.
Gampang lah cari solusinya.
Tapi idealnya ya,
kalau bisa nguasain ya dikuasain.
Harus nguasain.
Ada lagi?
Yang mau disampaikan?
Apa bundler itu?
Kita udah panjang lebar
membicarakan bundler.
Makan di awal, tadi kita udah
ya sudah ya.
Jadi kesimpulannya adalah
kesimpulannya adalah
kalau gak, kalau hanya butuh
1-2 fitur ya jangan pakai yang
ribet-ribet, yang bukan ribet ya.
Pakai parser aja.
Kalau module bundler gitu.
Maksudnya, misalkan
hanya butuh export-import ya,
pakai IS module aja. IS module kan cara
pakenya juga sudah didukung
semua ampun dan bolsor.
Dan bahkan kita gak butuh bundler sama sekali.
Kalau kita gak butuh backup compatibility
ke versi yang aneh-aneh.
Kita tiba-tiba harus support PTA.
Ya, kalau misalkan mau
langsung dari HTML juga bisa
dengan tipenya module, atau
didefinisikan di package.json ya
itu juga supaya
dari require seperti ini,
yang di command.js atau
dino.js itu bisa menggunakan import.
Jadi tidak memeratkan
dan tidak memusingkan
di tengah jalan seperti yang
Irfan ceritakan tadi.
Kalau aplikasinya sederhana sih
gak usah pakai ability system juga
gak apa-apa.
Kayak misalnya TypeScript, itu kan sebenarnya
ada globalnya tuh, TSC.
Bisa diinstall TSC.
Bisa kita cuman, kita nulis kode
TypeScript, kita pengen generate
pengen transfer ke Javascript
yang bisa jalan di browser dan kita
perlu type definition.
Itu bisa pakai TSC aja.
Cuma yang gak bisa high-bubble,
gak bisa, gak bisa
bisa menjemahin jadi
eh, kayaknya bisa asal
install apalah gitu.
HMR-nya ya harus, HMR-nya kita
handle sendiri. Ini kan buat kasus yang
simple-simple banget ya.
Kalau misalnya tadi tuh contoh yang add sum
reduce, itu mah kayaknya gak usah pakai
gak usah, gak usah.
Ya kita sambil jelani unit testing
di watch aja lah, kalau misalnya
contohnya model yang
simple itu.
Kalau misalnya butuh backwards compatible
misalnya harus
ES-nya
arrow function-nya harus terjemahin jadi
same function semua, itu
gak bisa pakai TSC, harus
bubble lah, minimal.
Cuma berarti
kita harus ngenalin kebutuhannya
sekompleks apa.
Ya intinya startnya
ya bisa dari ES module.
Kalau nanti, wah ternyata butuh HMR
ya udah, boleh lah pakai webpack
server atau yang lain gitu kan.
Oh ternyata butuh ini, butuh itu, tambahin sedikit-sedikit
daripada kita udah nambah yang
gede di Outwall, ternyata butuh
ini untuk bikin aplikasi sederhana
gitu. Karena build
sistem ini
dia melakukan banyak hal ya, ya
kayak tadi kan, kalau kita mau kombinasi
100 file JS ya gak mungkin kita lakukan
dengan tangan sendiri gitu kan.
Transpilasi dari TypeScript
ke JavaScript juga, ya bisa pakai TSC
tapi kan agak rumit ya, setiap kali
kita mau jalanin
kita harus TSC dulu gitu kan, atau
TSC watch-nya kita jalanin kan.
Terus misalkan minification,
polyfill, JSX,
trickshaking, apalagi kayak
kalau temen-temen pakai Tailwind ya udah, mau gak
harus pakai model bundler.
Tapi kalau misalkan
belum mencapai
semua checklist ini
ya sebaiknya gunakan
yang native aja dulu.
Tapi ada counter-argumentnya nih.
Jadi apa?
Opini sebedangnya cuma ya
berduanya ya bisa valid tergantung
kebutuhan. Kayak misalnya fitlah
yang sekarang yang lagi train
ekosistemnya bagus. Jadi
contoh gampangnya, starternya pun
ada jadi kayak di fit getting started
halaman dokumentasi tadi
sekali klik, langsung spinning stack
bridge IDE yang
udah langsung jalan aja.
Maksud saya itu kan praktis ya, walaupun
dibaliknya emang mungkin kita
belum langsung butuh semua
tooling-nya. Tapi in case kita
butuh, ya udah ada dan
starternya lengkap
dan banyak. Kayak misalnya itu
tadi ada fast script, type script,
swell pakai type script, view pakai
type script, react pakai type script, itu
udah lengkap banget. Jadi ya udah
sebetulnya nggak apa-apa juga kalau kita
pengen pakai, manfaatin
starter yang emang udah
praktis kayak gitu.
Siap.
Ada counter-argument juga, loh.
Lanjut, lanjut, lanjut.
Karena
kalau kita start-nya sudah kompleks,
itu ke depan maintain everything-nya
yang sulit. Karena gini, ada
yang namanya waktu kita update, itu
module dependency. Contoh,
naik dari node 14 ke
16, naik ke 16
ke 18, suatu saat
kita kenal nih, ada
module yang sebenarnya kita pakai
mungkin sudah ditinggal maintain-nya.
Atau module yang tertentu
yang nggak ada
kompatibilitas ke node 18 misalnya.
Akhirnya kita harus korek-korek
tuh, harus cari replacement-nya
atau cari
apa namanya
kompatibilitasnya.
Nah, itu
hal yang paling sering
saya temui,
old project atau project yang sudah jalan
5 tahun, yang sudah dulunya
mungkin pakai ground,
sudah evolusi terus, dia
ngikut tuh, ujung-ujungnya pakai
webpack, tetapi habis itu
kenalnya
antara
dependency tadi misalnya
IS-linenya ini, atau si
styling yang ini
kena tuh, jadinya
pusing sendiri tuh dengan dependency.
Makanya, kalau
misalnya membangun project,
pikirkan ke depannya,
kalau misalnya mau
menambahkan sesuatu
package, pikirkan
ada cost di belakang itu
yang kalian harus maintain ke depannya.
Cost maintaining itu capek.
Cost maintaining itu
bisa dijadikan
episode tersendiri.
Makanya butuh dependable.
Dependable.
Kalau misalnya konflik,
kalau misalnya gak kompatibel ya
sama grubu, tapi emang ada
code-nya siapa gitu lupa, bahkan lupa
orangnya siapa, jadi setiap
satu dependency itu kayak punya
satu titik yang potential
apa, punya kedepannya itu bisa
jadi potential failure.
Nah, berarti kan, kalau kita
pakai fit lah, karena contoh
barusan fit ya, fit itu kan
dibalik fit, ada dependensinya, berarti
kalau dia punya beberapa sekian
dependency, itu kita
dengan kita pakai fit,
atau pakai apapun lah,
roll-up atau parcel atau apapun,
kita punya titik lemahnya,
maksudnya titik yang bisa jadi bagi
ke depannya itu ada puluhan, berarti
ya betul juga. Nah,
kalau ini bukan kantor argument, tapi
mungkin yang di tengah-tengahnya,
ya misalnya kita pengen pakai
ya kita pengen pakai
fit, karena enak,
udah banyak starter-nya memudahkan.
Nah, terus kita bikin
proof of concept, kita paling cepet nih
MVP, ya udah bikin cepet.
Nah, cuma biar future,
itu kan cepet. Nah, tapi
yang tadi poinnya Ivan, itu kan kedepannya
gimana kalau 5 tahun lagi,
dependencies yang dipakai fit itu
udah ditinggal maintainernya, atau
apalah masalah, isu apa.
Nah, berarti kan setelah kita bikin MVP
proof of concept, gimana caranya
kode kita pelan-pelan
dimodularize
sebisa mungkin, jadi pelan-pelan
kita pindahin ke native
atau IS modul, atau apapun
yang lebih terperut.
Itu kan bisa juga sebetulnya.
Kalau bisa dibuat
modular, dan satu modul
itu bisa stand alone.
Itu isi yang saya pikirkan.
Jadi, di project-project
yang saya kerjakan itu,
setiap project itu punya
satu webpack config sendiri.
Satu plugin contohnya, satu modul itu
punya webpack config sendiri.
Atau punya fit config sendiri.
Jadi, misalnya
modul itu dipindah ke project lain, jalan.
Tuh, bisa gitu. Nggak perlu...
Ya, tetap harus NPM install
package yang dia butuhkan.
Di kualitas tetap butuh ya, tapi
minimal seluruhnya itu
ada di dalam satu folder
bisa dibawa pergi.
Kalau nggak penting bisa dibuang.
Nggak perlu lagi dari situ. Jadi nggak perlu
obrak-abrik satu webpack config yang gede.
Contoh.
Ya, itu satu episode sendiri.
Bagaimana?
Ketergantungan terhadap dependensi.
Ini seru sih, sebenarnya kalau...
Ketergantungan terhadap ketergantungan.
Iya.
Kita pakai dependensi,
dev-dependensi,
fit, bergantung pada
macem-macem hal lain juga.
Tapi kalau build tool kan ditinggal
relatif gampang, yaitu asal kita
bikin kodenya, nulis kodenya dengan modular
dan pakai standard yang lebih pusing
sebenarnya front-end dependensi sih.
Kita bergantung ke karusel gitu.
Contoh yang itunya
kita males nulis karusel dari awal.
Kita pakai, apalah, slick karusel
atau apapun. Kalau itu ditinggal
ya udah kelar. Lebih ribet lagi. Maksudnya
tingkatannya dibanding. Tadi misalnya
saya fit, dependensinya ditinggal
nintenernya. Ya, kapan-kapan lah.
Kita bahas.
Salah satu contoh yang bagus itu Yes Build tadi ya.
Dia bikin semuanya dari scratch itu kayaknya
lumayan ini ya. Lumayan
dependensinya mungkin lebih kecil gitu.
Karena
ya itu tadi, dependensi
of dependensi yang berbahaya.
Jadi semua tools
gak peduli
mau fit, mau webpack,
mau turbo pack, apapun. Itu kan dia
merayu kita kan untuk pakai.
Sebisa mungkin bagaimana
developer experience-nya bagus.
Tinggal npm install ini,
masalah lu selesai gitu kan.
Di sisi yang lain ya, kita harus mikirin.
Kita harus mikirin. Jangan ya.
Karena memang semua
dimudahkan, dipermudah. Kalau gak
mudah, gak ada yang pakai kan.
Jadi, kalau misalkan
temen-temen ketemu
masalah, ada solusinya
misalkan di npm kah
atau ketemu tools yang gitu.
Ya pikirin lagi, ini dia dependensinya
kemana. Semakin banyak
dependensinya, semakin bahaya.
Ada yang sempat dulu memainnya
apa gitu, dia bikin npm
kayak sound, add, minus,
is empty,
is string, is apart.
Oh, is 13 itu lucu banget sih.
Jadi semuanya ada package-nya
ya ampun.
Ada sih yang lucu-lucu.
Itu adalah salah satu
kelebihan dan kekurangannya
si node dan npm ya.
Npm itu semua
package dicari ada. Sudoku solver
pun ada, cari aja.
Kalau perlu,
fizzbuzz pun ada kayaknya.
Ada lah, kalau itu
pasti ada banyak. Iya.
Jadi semuanya ada.
Yang acu bercanda tuh is 13,
dia cuma acu angka yang
kita pas sebagai argumen, itu angka
13 atau bukan?
Itu bercandaan
dan segala-galanya.
Ada kan is event, is odd, gitu kan.
Kayaknya ada.
Itu
ya itu, maksudnya
dulu kan, udah sering kejadian ya.
Kayak Lehpet
atau yang lain-lain itu udah sering kejadian kan.
Yang terakhir apa ya? Yang Faker ya.
Faker.js tuh kan.
Tiba-tiba
package-nya di take out, udah selesai.
Kita gak bisa mengumpain.
Hancur semua. Nah itu yang
harus dipikirkan ya.
Kembali lagi, memang semua package
itu berlomba-lomba untuk supaya bisa
dipakai dengan mudah oleh kita.
Tapi di sisi yang lain kita sebagai
mungkin
orang yang bertanggung jawab untuk memilihkan package
yang pantas dipakai sama tim
kita, ya kita harus mikirin. Ini
kesinambungannya gimana?
Kalau seandainya nanti maintainer
harusnya tiba-tiba menghilang atau
gak mau maintain lagi, apa yang terjadi?
Kita bisa fork? Kita bisa maintain
sendiri? Gak? Gitu. Kalau emang kita
kuat, ya bagus. Kalau nggak, ya
kita harus mikirin lagi. Kalau bisa
kita bikin sendiri, dia bikin sendiri.
Tapi kan itu trade-off.
Potong si resikonya
sebesar apa.
Terus resource yang perlu
dikeluarin di awal buat bikin
yang setara kayak gitu, setinggi
apa. Nah kalau misalnya kasus tadi,
import-export, toh, udah ada IS
modul, itu kan beneran gak butuh effort
dari kita sama sekali. Jadi ya udah itu
maksudnya itu worth it banget. Nah cuma
misalnya karusel lah, front-end
dependency lah, misalnya apalah date picker
gitu, kita harus bikin date picker
semuanya dari awal, ya
belum tentu-tentu bisa.
Ya, pakai aja date API.
Bukan,
tampilannya front-end-nya UI-nya.
Open UI itu,
cuma open UI udah merinti
sekarang situ, tapi itu juga
udah topik lain, udah berapa topik ini?
Ya, pokoknya semakin
dekat ke native, API
itu semakin baik, gitu ya intinya gitu ya.
Sudah, kalau begitu,
mungkin
waktu yang tepat untuk kita
menutup episode yang sangat panjang ini,
kita udah dapat beberapa episode
baru tadi, topik-topik,
saran-saran topik jangan lupa ditulis
di Google Docs.
Jangan sampai lupa.
Untuk itu,
kita pamit dulu untuk malam
hari ini, terima kasih buat teman-teman yang udah nonton.
Kritik dan sarannya
tetap kita nantikan.
Kalau mau
saran topik, saran
pembicara, narasumber,
saran
acaranya, mungkin, "Oh, ini kurang
lucu nih, tambahin dong pelawak."
Tambahin segmen apa
gitu, tanya-tanya jauh atau apa, gitu ya.
Silakan tulis aja di
ly/ngobrolinweb.
Jadi,
untuk malam ini, udahan dulu.
Terima kasih semuanya.
Selamat malam. Selamat istirahat.
Dadah.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb ----------------------------------------------------------------------------------- Bergabung menjadi anggota elit di kanal ini: https://www.youtube.com/channel/UCHhAlFGFCGgIusQkQIqJLYw/join Donasi dapat meningkatkan kualitas kanal ini: 💰 https://karyakarsa.com/rizafahmi/tip 💸 https://saweri Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
28 Apr 2026
Vite+
Episode rekaman ini membahas Vite+, saudara dari Vite yang bukan produk berbayar — berbeda dengan Tailwind+ yang memang ...
16 Okt 2024
Ngobrolin ViteConf
Episode ini membahas ViteConf 2024, sebuah konferensi yang menghadirkan ekosistem Vite dan berbagai tools pengembangan w...
11 Agu 2026
Local Development Server
Episode ini membahas local development server, dari XAMPP yang legendaris sampai pendekatan modern berbasis kontainer. P...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .