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