Konsep Dependency Injection
Ringkasan Episode
Bantu KoreksiEpisode ini membahas konsep Dependency Injection (DI), sebuah design pattern fundamental dalam software development. Para host menjelaskan apa itu Dependency Injection dengan contoh praktis menggunakan JavaScript, membandingkan kode tanpa DI dan dengan DI untuk menunjukkan perbedaan dan manfaatnya. Diskusi mencakup konsep terkait seperti Inversion of Control dan prinsip SOLID (khususnya Dependency Inversion). Contoh yang digunakan adalah analogi mobil dan mesin (engine), di mana dengan DI, kelas Car tidak perlu membuat instance Engine sendiri di constructor, melainkan menerima engine sebagai parameter yang di-inject dari luar. Episode ini juga disponsori oleh DomaiNesia dengan promo code untuk cloud VPS.
Poin-poin Utama
- •Dependency Injection adalah teknik di mana dependencies di-inject dari luar, bukan dibuat di dalam class/function
- •Tanpa DI: constructor membuat instance dependency sendiri (new Engine()), dengan DI: engine diterima sebagai parameter
- •DI merupakan implementasi dari prinsip Inversion of Control dan Dependency Inversion (bagian dari SOLID)
- •Manfaat DI: kode lebih fleksibel, mudah di-test (bisa inject mock), dan loosely coupled
- •Artikel referensi dari Smashing Magazine (2020) menjelaskan DI dalam perspektif web development
- •Konsep DI relevan untuk interview dan penting dipahami untuk arsitektur aplikasi yang baik
- •Kolaborasi dengan DomaiNesia: promo code NGOBROLINVPSDN untuk diskon 50% cloud VPS
[Musik]
Dapatkan hanya di Domestika
[Musik]
[Music]
[Musik]
Lagi-lagi nih
Sebab lagu, sebab lagu
[Musik]
Orang pun datang dan akan kembali
Iya, itu ya
Apa ayo
Bukan
Tamiya itu ya bukan
Bukan
Tadinya gue kira itu Dasion Kuro bukan
Itu Dragon Ball
Bukan Dasion Kuro
Itu jadul sekali
Dragon Ball
Yang bikin Tamiya meninggal ya, baru meninggal ya
Yang Kuro jadi naik lagi ya
Masa?
Tapi ada komunitasnya loh
Ada
Kan kalau Tamiya itu kan ada anime yang baru kan
Kalau Yung Kuro kan jamannya kita
Jamannya
Jamannya yang lebih muda ada lagi kan
Ada anime yang baru lagi kan
Harusnya ada ya, itu kan Evergreen
Lihat transkrip lengkap (2047 segmen lagi)
Bukan, ada Tamiya juga
Bukan, Tamiya juga
Tapi beda film, eh beda anime
Halo-halo semuanya
Kita jadi tebak-tebakan umur ya
Gimana kabarnya teman-teman di Youtube sama di LinkedIn
Dengan sehat malam hari ini
Sehat-sehatnya semua
Aman-aman ya
Timnass lagi main loh, yang under 20
Ah Timnass lagi main, oh iya benar
Kan benar kan
Selasa malam, waktunya Timnass main
Pertanikan internasional jatuhannya Selasa Rabu, gimana lagi
Iya, sering bertabrakan
Semoga menang
Kita sering yoga sih, setahun paling cuma berapa kali
Iya, ada alasannya loh itu kenapa Selasa Rabu
Karena mereka sabtu minggu main
Ya, weekend kan tiga
Iya
Ah gelap banget, apanya gelap?
Masa depan
Siapa yang gelap?
Masa depan
Indonesia, Indonesia gelap
Maset ya Adi Wirawan, halo-halo
Ivan pake baju gelap, Eka pake baju gelap, saya pake baju terang
Indonesia
Bagus juga pake baju nih
Bisa ke hidden sama
Nggak kelihatan ya
Iya, kayak nggak pake baju gitu
Tinggal
Apa aja yang gelap, boleh info dong
Kalau teman-teman yang nonton ada kejanggalan
Baik itu sound ataupun visual, boleh info ya
Gelapnya apa nih?
Oke maksudnya backlight deh
Nah seriusnya backlight, soalnya lampunya kan di belakang loh
Lampunya di belakang jadi apa
Nah dari depan tuh kayak
Kurang terang gitu
Masa sih, emang sengaja itu efek, mau diterangin gitu
Nah ini terang
Mendingan gini
Ini mah over contrast, over brightness
Makanya mendingan tadi kan
Nggak tahu deh yang gue butuh visual
Gini ya
Sense visualnya nggak bagus
Ini satu-satunya
Mau di info ya, Mas Setia dia atau teman-teman yang lain
Kalau ada kejanggalan dengan visual dan juga audio kita
Kemarin itu sempat ada yang komen
Kasih masukan suara kita itu
Ya audio nya itu nggak apa ya, nggak standar levelnya
Jadi kadang ada yang terlalu besar, ada yang kecil
Iya karena kan kita live
Karena kita kan sunyai keputian ya
Enggak, iya karena live kan
Distimulate nggak ada ya
Nggak ada kayaknya
Ada, ada, distimulate itu ada
Cuma saya tuh kalau misalnya diajarin
Di setting nya itu, di input volume nya itu dibikin 75%
Distimulate juga 75%
Tapi kan persen masing-masing tergantung sama
Masing-masing antar satu speaker sama speaker lain
Tergantung kita ngomongnya keras atau nggak
Dan mic nya juga
Ya input outputnya gimana
Sama, beda-beda
Mic nya seberapa senti dari ya
Nah itu
Ya iya kan, nah intinya adalah
Harusnya stream nya ada setting buat normalize
Output pas udah di mix kan
Tapi kan nggak di mix karena live
Ya kan tetep aja audio output nya satu
Maksudnya dibeli pelayarnya, stream yard nya kan
Iya sih, iya sih
Harus dari stream yard nya ya
Kalau normal nya kalau rekaman
Itu kita normalize di audio editor itu kan bisa ya
Ya hasil audio nya bisa
Di hubung ini live jadi kita nggak bisa kontrol
Di stream yard kan berarti ada suatu entah apa
Funksionalitas yang menggabungin input dari kita semua ini kan
Iya
Nah itu
Kalau podcastnya Om Dedy yang di
Close the door itu gimana caranya
Apa karena offline mereka masuk ke
Nah itu kan langsung, onsite
Itu kan live juga mereka
Oh kalau onsite mah enak
Satu mixer lah dicolok mixer aja semua
Rekaman ya?
Enggak, nggak online
Itu rekaman satu
Kedua di tempat yang sama
Nggak, bukan online seperti ini
Di tempat yang sama mereka mic nya
Dicolok atau dikoneksikan ke satu mixer
Yang ketiga
Barang nya itu mahal semua
Beda, barang nya itu kualitas semua
Khusus professional podcaster
Iya professional
Tapi nggak sih yang paling deciding sih
Apa semua orangnya di satu tempat
Itu yang
Iya itu yang paling berpengaruh
Mixer yang kecil pun kayak bearinger
Yang ala-ala itu ya masih bisa lah
Intinya di normalize di satu tempat
Baru di stream
Betul
Kalau rekaman aja itu masih bisa di akalin
Tapi kalau udah live udah
Kita menyerahkan kepada yang punya platform
Dan hal ini stream ya
Nah ngomongin platform
Ya kalau teman-teman mau bikin platform
Mau bikin service
Teman-teman bisa cobain service nya Domenecia
Pengen nunjuk ke kaos nya
Mas Risa Domenecia
Domenecia
Ya jadi kita masih dapat kesempatan
Bekerja sama kolaborasi dengan Domenecia
Dan Domenecia memberikan diskon 50%
Untuk pembelian baru untuk cloud CPS Turbo
Ya
Itu berarti VM ya
Virtual Machine
Server lah ya
Server virtual
VPS
Jadi kalau ada project yang ada docker nya gitu
Bisa langsung ditaro disitu ya
Bisa deploy disitu
Kan yang paling murah
Setelah di promo jadi 80 ribu itu 1 giga
Nah itu project itu source code
Berapa project bisa dimuatin
Lumayan ya
Kalau mau self hosting
5 US Dollar ya
5 US Dollar
Lumayan
Lumayan untuk apa
Yang kena tarif ya
Perang harga kan ini ya
Ada politik-politiknya Amerika Serikat kan
Apakah berpengaruh kepada
Penyedia jasa cloud ya
Penyedia jasa komputasi awan
Apa enggak, enggak saya enggak tahu ya
Kayaknya beberapa kali saya sempat dapet email
Ada perubahan harga, perubahan harga
Tapi enggak tahu service mana yang
Streamyard ini yang perubahan harganya
Extreme
Nah ini parah sih
Streamyard parah
Jadi mungkin bisa jadi solusi juga
Buat teman-teman yang mau cari
Apa
Service hosting atau
VPS
Makin lama, makin hal-hal
Necessity, makin mahal
Iya
Kalau itu inflasi
Contohnya Google
Google Storage
Google One itu naik
Harganya
Beras juga naik
Harganya
Iya
Itu yang saya berpikirkan
Kemarin itu sempat ada kan
Kalau pakai account student
Atau universitas kampus
Itu kan bisa dapat
Gratis
Gemini
Sama dapat gratis storage kan
Selama
Tahun setengah atau berapa gitu ya
Pokoknya selama jangka waktu tertentu
Nah yang saya penasaran
Adalah kalau saya
Pakai, maksudnya saya beli
Dan dapat gratis itu satu setengah
Tahun
Abis itu setelah
Storage-nya saya isi dengan
Foto-foto dengan
File dan lain-lain di backup disana
Terus abis itu gratisnya
Selesai
Terus mau dipindahin ke mana itu
Apa
File-file itu
Berarti harus bayar dong, maksa kita untuk bayar ya
Menjebak
Menjebak kita untuk bayar
Kalau sudah habis maksudnya storage-nya
Iya, eh bukan
Mungkin ada grace periodnya
Kan kita
Tidak ada nih, satu setengah tahun gratis
Terus abis itu kan kita masukin
File-nya kan, terus abis itu
Gratisnya hilang kan
Storage-nya kan mengecil
Iya
Sebenarnya itunya enggak ini
File-nya enggak hilang
Cuma enggak bisa nambah
Oh enggak bisa nambah
Iya
Tapi kalau it only, berarti bisa nambah ya
Enak juga
Yang enggak terlalu kejam lah ya
Yang enggak terlalu kejam lah ya
Ya mungkin grace period lah
Disimpenin berapa tahun
Berapa bulan, berapa tahun
Kalau bisa dihapus
Tapi sekarang ya, kalau polisi sekarang
Jangan terlalu dependensi
Sama Google
Sama Apple
Nah
Ngomong-ngomong soal dependensi
Hari ini kita topiknya
Dependensi injection
Ini dulu
Orang-orang pada nungguin
Pake kan, bingung kan
Jadi kalau teman-teman tertarik ya
Mau cobain VPS-nya Dominicia
Saya dapat, kemarin dapat akses
Bayar sendiri lagi
Padahal mau dibayarin
Mau dibayarin
Malah saya bayar sendiri loh
Kenapa enggak tanya dulu
Jadi bisa pake promo code
Ngobrolin VPSDN
Ngobrolin Virtual Private Server
Dominicia ya
Biar
Dominicia
Pihak Dominicia tahu bahwa
Teman-teman nyobain gara-gara dengerin
Ngobrolin web ya
Emang dapat discount juga
Buat kerjasamanya
Oke, ngomongin dependensi
Ketergantungan
Baru-baru malam ini
Untuk web hosting
Web hosting ada
Tapi sebelumnya
Edisi sebelumnya
Masih berapa ya
Ngobrolin DN ya
Kalau nggak salah ya
Di episode berapa ya
Yang kita mulai berubah
Ngobrolin web DN
Ngobrolin web DN
Nggak tahu, cobain aja
Promo code-nya
Ngobrolin web DN
Silahkan dicoba, Mas Fiko
Untuk share hosting ya
Share hostingnya juga udah modern ya
Ternyata ya, bisa pake binary aja
Dimasukin udah bisa jalan
Jadi bisa segala
Platform atau bahasa
Oke
Malam hari ini kita
Akan diskusi tentang
Salah satu
Topik yang
Basis ya
Ini dulu siapa sih yang nyaranin
Di GitHub kita?
Saya
Oh bagus dia ada yang ngerti satu orang
Gua nggak ngerti
Baru kelar kerja
Tiba-tiba
Didakan langsung tanya Jemenay
Apa itu dependensi injection
Nggak ngerti sih sebenarnya
Jadi waktu cerita latar belakangnya itu
Waktu lagi
Sesi
Live coding
Di Senen Malem
Terus lagi bikin unit testing
Tiba-tiba
Saya masukin, misalkan vats-nya kan
Saya mau
Testing tapi
Mau di-mock, tapi mok-nya manual
Mokingnya manual, nggak pake library
Akhirnya
Vats-nya itu saya jadikan
Parameter di satu fungsi
Oh
Itu vats falsy
Bukan
Ya, nanti dicontohin deh
Jadi dimasukin ke
Parameter, tujuannya adalah
Ketika di script testing
Itu
Saya bisa masukin mock vats
Saya bikin sendiri lah tuh mock vats-nya
Kalau di real code-nya
Saya bisa pake vats yang biasa
Nah itu adalah contoh
Dependensi injection
Setelah dipikir-pikir
Ini dependensi injection nggak ya
Akhirnya cari-cari, oh ternyata itu
Jadi dari situ
Sebenarnya saya yakin
Teman-teman juga mungkin
Pernah menggunakan
Trick seperti ini, tapi
Nggak tahu istilahnya aja
Begitu
Jadi kita mulai dari
Ini ya, dari
Definisi umumnya ya
Definisi umum
Loh, mana?
Sharescan dulu
Nah ini baru gelap ya
Nah
Sudah kelihatan?
Sudah
Oke, jadi
Dependensi injection itu adalah
Teknik pemograman
Yang
Bagaimana caranya
Supaya sebuah objek
Atau sebuah fungsi
Yang dibutuhkan, yang digunakan
Di dalam fungsi atau di objek
Tersebut
Diinjek, dimasukin
Disertakan
Ke dalam fungsi atau
Ke klust tersebut
Ini kayaknya masih
Masih ngawang ya
Tadi, bentar
Aim to separate
Atas tujuannya
Seperate the concern
Seperation of concern
Seperation of concern
Seperation of concern
Pada saat
Constructing objek ini
Membuat objek dan menggunakan
Dependensi injection
Kayaknya cuma untuk OOP deh
Enggak sih
Nah tadi gue tanya Jimenai itu
Ternyata
Itu kayak terpisah dari OOP
Sama functional
Justru
Kayaknya kaitannya lebih kuat ke functional
Karena ada higher order function
Ini lebih kayak mirip ya
Funksional gak sih
Itu tadi yang misalnya testing
Kan itu function yang emang dipisah-pisah
Buat mock testing
Ada function nya sendiri, itu dipas sebagai
Argumen
Iya functional, karena
Kayak higher order function lah
Kurang lebih kan, mirip-mirip ya
Oke, kita run through dulu aja ya
Kalau di static type language
Itu kita bisa
Pakai interface, jadi kita
Definisikan
Parameternya itu
Ada interface apa
Pasti
Pernah dong
Parameter ada interfacenya
Pernah dong, kita definisikan type nya adalah
Interface ini
Ini umum kan ya
Lanjut lagi ya
Kelebihannya
Keuntungannya
Bisa tadi ya
Decrease coupling
Interaction of concern
Antara kelas dengan dependency
Terus juga
Aplikasinya bisa lebih
Reusable, testable
Dan maintainable
Flexibility
Sama reduce boilerplate code
Dan terakhir
Injection allow concurrent development
Kalau ini saya gak tau ya, cuma ini
Contoh-contoh aja
Jadi kalau mau lihat diagramnya
Mas Riza
Diagram yang pertama
Bisa jelasin banget
Coba di zoom
Gimana zoomnya
Orang zoom ya
Nah
Jadi kalau dari diagram ini
Ada service
Ada enum
Enum lah ya
Itu scope nya
Enumerator untuk type datanya
Ada service
Terus turun
Ada container provider
Turun dikit
Ini java banget ya
Terlalu rumit ya
Ada contoh kodenya sebenernya
Di bawah
Nih, tapi ini java ya
Ini OOP ya
Jadi ini tanpa dependency injection
Kita bikin
Sebuah client
Ada service
Sebagai
Service sebagai apa ya
Variable lah gitu ya
Itu variable nya baru dimunculin
Kalau lagi initialize in the constructor
Jadi kalau misalnya kita manggil new client gitu
Maksudnya terus dalam kurung
Entah gimana lah di passing si service nya
Dari yang memanggil client
Dari yang meng-instantiate
Suatu client object itu berarti ya
Betul
Dengan injection
Dimasukin sebagai
Constructor sebagai parameter
Atau argument
Sehingga kita tidak perlu
Memanggil new service
Service nya bisa lain-lain kan
Tergantung yang mana
Bukan, service nya bisa lain-lain, bisa di-inject
Diisi dengan apa kan
Yang manggil new client itu
Berarti yang menentukan
Service nya apa kan
Kayak contoh mock fetch tadi
Kan itu berarti fetch ala-ala
Bukan fetch beneran ya udah si
Si yang menjalankan terima aja
Udah apa yang dikasih
Jadi yang manggil
Kalau saya mau kasih contoh
Kayaknya bisa juga gini
Jadi contohnya kita bikin
API
Sorry kita bikin
Code untuk bisa
Nge-update data kita
Di Git
Nah, Git
Service ya, Git service itu
Ada dua, bisa GitLab
Atau bisa GitHub
Kita cuma satu
Client nya satu
Tetapi berdasarkan setting
Yang dipakai dari UI kita
Oke, ternyata kalau repo A
Dia hostingnya di GitLab
Repo B di
GitHub, namun secara
Client wrapper nya kita
Ya cuma satu, satu aja yang kita panggil
Service nya
Bisa beda, bisa berganti-ganti
Sesuai sama yang kita
Setting, konfigur
Dan bisa dimesarkan injection
Jadi bisa konfigurasinya, oh
Kita lagi di repo B, ya berarti pakai
Service nya dari si GitHub
Nah supaya
Bisa si
Client kita tadi, class Client
Kita, mengerti
Dan bisa mengambil
Menanggil function yang sama
Maka, class service kita
Itu harus implement
Interface
Yang sama
Ya, ya betul
Jadi interface ya
Interface itu kan cuma kayak definition function
Misalnya fetch, push
Pull
Kayak blueprint ya
Kayak property nya atau method nya
Atau apalah yang bisa dipanggilkan
Di dalamnya
Jadi kalau misalnya Mas Riza balik ke
Kode tadi, jadi si
Client itu
Kan dia oke di definition oleh
Service GitHub
Tetapi kan this service ini kan
Satu, di dalam body nya dia kan
This service fetch, this service pull
Cuma pull nya
Mechanism nya harus pakai API yang mana
Ya, disembunyikan
Itu
Itu yang tentukan
Di luar client class itu kan
Si class client
Tau nya, gue hanya mau panggil pull
Nanti, si service ini lah
Yang menentukan
Apa namanya, logic
Ataupun
API endpoint yang mana, itu si service
Yang urusannya
Wait, kalau gitu
Bentar, masih contoh yang mirip
Ini, paralelnya, coba buka deh
Berarti, Vercell AI SDK
Itu termasuk
Pola dependency injection
Atau bukan
Jadi intinya
Kalau TLDR nya
Ini satu SDK
Berbasis TypeScript atau Java Strip
Untuk pakai berbagai LLM
Provider dan model, nah itu liat contohnya
Jadi, apa package nya namanya
AI, Generate Text
Nah, Generate Text itu kan
Ya kayak contoh Gitrapple
Event tadi, nah Generate Text itu kan
Bisa pakai Gemini, Gemini
Bisa pakai Flash 2.5 Pro
Bisa
Bisa pakai Google
Maksudnya, Google ada Gemini Flash, Gemini Pro
XAI
Ada macem-macem, nah itu kan
Wait, Generate Text
Ini kan pure functional ya, ini functional banget
Karena emang Java Strip SDK
Tapi kan, ini yang dipassing
Yang dimasukin
Model titik 2, XAI
Provider-nya dalam kurung
Drop 3 Beta
Coba klik yang
Bukan OpenAI
Tab OpenAI deh
Nah, pakai Generate Text
Oh iya, iya benar-benar
Ini ya
Bukan bagian parameter ini ya
Tapi si Generate Text itu
Ini nya
Di dalam
Perutnya si Generate Text
Dia cuma manggil model, panggil apa
Itu, panggil function yang sama
Pasti panggil function yang sama
Iya
Cuma ini ya udah
Bikin semacam raper
Sebentar
Berarti, bedanya
Dependency Injection
Sama adapter pattern
Apa? Ini kayaknya adapter
Nggak tau ya, ini asal nebak aja ya
Sebetulnya, gue belum terlalu paham
Dependency Injection apa
Cuma kalau pakai
Contohnya event tadi
Ya ini harusnya Dependency Injection
Kalau contoh event tadi
Emang betul Dependency Injection
Kalau gomopolitically correct
Ya adapter itu bagian dari
Dependency Injection
Bisa jadi
Karena Dependency Injection itu kan
Paradigm, bukan
Teknik
Kalau adapter berarti
Piece, apa?
Kayak pieces-nya ya
Kalau adapter
Itu pattern ya
Polanya ya
Nah kita liat yang ini
Kayaknya lebih
Lebih jelas dari
Smashing magazine
Kalau smashing ya pasti diterangin
Dalam perspektif web dev
Ini tuh waktu nulis
Sekarang udah berapa ya?
Tahun berapa? 2020
5 tahun yang lalu
5 tahun ya
Bukannya dia baru nulis 28 menit
Yang lalu
Ya ya
28 menit read
Konsep Dependency Injection
Intinya
Sangat simple menurut anak 18 tahun
18 tahun ya ampun
Theoretical concept of inversion of control
Dependency inversion of the solid principle
Dan lain-lain ya, banyak digunakan
Di tempat itu, oke
Ya
Dia bilang lagi simple, lagi simple ya
Oke, kita contohnya aja
Ini JavaScript ya
Ini JavaScript
Tanpa Dependency Injection
Mirip kayak tadi kan sebenernya ya
Jadi kita punya
Something gitu di luar sana
Namanya engine katakanlah, terus kita punya
Mobil, kelas mobil
Suatu mobil bisa menerima
Macam-macam jenis mesin kan
Tergantung yang bikin kita mau membuat mobil
Yang create new car object
Nah, kalau ya sama sih
Contohnya sama ini ya, kurang lebih ya
Jadi ketika yang tanpa
Dependency Injection, konstruktornya itu
Yang memanggil, yang menginisiasi
Engine, initiate new engine gitu ya
Sedangkan
Dengan Dependency Injection
Karena engine nya dimasukin sebagai parameter
Dia gak perlu new-new lagi
Langsung disini aja, didefinisikan bahwa
Dia sekarang pakai engine ini
Sesuai sama ketika kita menggunakan
Atau ketika kita
Menginisialisasi si car ini
Mau pakai engine yang mana, ya kan
Oh, berarti bentar
Syarat disebut Dependency Injection
Adalah yang dimasukin, yang dipassing
Sebagai argument
Sudah harus berupa object ya
Gak boleh berupa kelas yang
Diinstantiate lagi, gak boleh bikinnya
Di dalam sini kan
Harus jadi
Mereka langsung bisa dipakai
Atau dipanggil
Harus terima sebagai machine, bukan
Machine itu seperti apa, terus bikin lagi
Machine baru, itu kan kalau contoh atas
Kayak gitu tuh, cuma dikasih tau
Machine itu seperti apa ini kan
Nah, terus dia bikin sendiri
Nah, itu contoh yang bukan
Dependency Injection, tapi kalau contoh yang
Kedua, yang dibawah, udah beneran
Machine nya jadi, langsung
Dipakai
Machine object
Ya, begitulah
Nah, bedanya apa
Kalau
Yang pertama adalah
Kita inisiasi
Engine di dalam
Object car
Sedangkan yang kedua
Engine nya kita passing
Sebagai parameter
Sudah berupa
Object engine
Ya, sudah berupa
Object engine
Dependency Injection, ada istilah
Singleton dan Factory
Wah, saya baru tahu juga itu
Factory kayak functional programming ya jadinya
Factory
Enggak ya, OOP ya
Ada di rektoring guru kan
Factory
Factory method
Factory method, betul-betul
Betul-betul
Yang mana ya
Creational ya kalau salah ya, Factory method
Bener kan
Ini ya maksudnya ya
Jadi pakai satu
Factory
Method, sorry, satu Factory class
Untuk menginisiasi
Bermacam-macam
Child class
Nanti hasil child class nya itu
Bisa dipakai
Di servisnya
Di servis ya
Pake interface juga mirip-mirip ya
Truck, ship itu
Masalahnya di dunia Javascript
Maksudnya dunia yang lebih deket sama Javascript
Ada juga nih Factory pattern
Coba buka link yang di private
Itu emang
Apa, jadinya
Kalau di OOP kan
Kayak bikin object baru
Dengan suatu karakteristik
Itu kan harus pakai new kan
New something lah
Nah kalau ini Factory function, ini create user
Jadi bukan
Manggil new user
Dalam kurung blablabla, tapi create user
Pertama kali kita mau ini nih di artikelnya
Can see dots
Tapi ya mungkin ini juga kayak apa ya
Kayak flexi
Kayak fungsi biasa sebenarnya
Maksudnya, pattern Factory itu
Bisa diterjemahkan
Kayak di dunia yang
Kayak di refactoring Guru tadi
Yang kayak gitu tadi lah
OOP banget
Kalau ini kan
Di dunia Javascript diterjemahkan
Dengan mindset yang dengan perspektif
Atau workflow yang functional
Nah itu kan function kan user one
Sama dengan create user
Tapi kalau misalnya mau pakai clock kan
User one sama dengan new
User dalam kurung
Objectnya ini
Ya kalau singleton benar
Singleton itu objeknya dibuat sekali
Terus dipakai rame-rame
Gak pakai new, new nya cuma sekali ya
Kalau objek, kalau Factory itu objek
Dibuat, dibuat baru terus ya
Ya betul sih, ini masih memenuhi
Apa kriteria factory
Yang objeknya bikin baru
Teruskan itu
Ya lanjut
Real world example
Nah ini ada contoh
Oh itu cuma penjelasan kode
Contoh kode atas
Intinya udah ngerti kan ya
Temen-temen ya, bedanya itu
Yang satu diinjek atau engga
Tadi kalian yang pertanya mas Riza
Apa bedanya dependency injection
Dengan adapter pattern
Yes
Saya nanya
Sama
Abang chat GPT
Oh chat GPT
Mau di share
Boleh
Biar ngerti sama-sama kita
Share screen
Coba
Cara share
Sambil share screen kita
Cek score dulu
Masih 0-0
Oke
Saya nanya dependency injection
Sama
Adapter pattern
Cuma dia kasih
Masih kurang gede ya
Orang-orang
Dia jawabnya dalam
Python, jadi saya minta
Ke javascript biar gampang di ngerti
Oke, kalo
Dependency injection itu kan contohnya gini
Kita ada classnya
Kita ada notifier
Dan
Ada
Bisa pakai email service
Tapi juga bisa pakai
SMS
Nanti kalo misalnya, tapi
Ininya satu kan
Notifier
Dan di dalamnya ada email service
Suatu saat kita mau
SMS service
Atau mungkin mau push service ke
Kafka
Contohnya
Tujuannya
Supaya
Ya masing-masing service ini punya
Jadi urusannya
Urusan SMTP ya ke email service
SMS ya beda lagi gatewaynya
Mau push service ke Kafka yang lain
Ya beda lagi gatewaynya
Apanya
Pola pikirnya, jadi itulah maksudnya
Dicouple itu, tujuannya
Ini dependency injection ya
Iya
Itu
Rapper sebenarnya
Memrap sebuah income incompatible
Object untuk supaya
Jadi compatible
Jadi contohnya ada legacy class
Old printer
Terus kita ada printer adapter
Kayak polyfill dong ya
Nah
Gak juga, beda polyfill
Polifill itu kan
Kayak if
Kondisional, kalo itu gak ada
Dibikinin
Iya, kan biar compatible
Bisa jadi ya
Yang kayak misalkan
Nanti mau ke Shanghai kan
Udah bawa colokan yang mana nih
Yang kepala 3 apa kepala 2
Udah ada adapter kan, ujung-ujungnya listrik kan
Oh iya iya iya
Bener gak, itu adapter kan
Bener bener, iya sih itu adapter
Nah print receive
Kita ada adapted printer
Jadi dari class ini
Dia
Menginisiasi
Old printer tadi
Dibungkus yang tadi yang tidak compatible
Dibiarin aja
Legacy ya
Tapi kita bisa panggil
Di tempat kita yang baru
Nah
Anggap legacy ini adalah
Bukan
Kita punya source code-nya lagi
Kita gak punya source code-nya
Mungkin dia window.apa gitu
Yang sudah dari old code
Gak punya source-nya lagi
Dia hanya tinggal bisa manggil hasilnya
Tapi kita mau panggil di tempat kita yang baru
Kita bungkus aja
Ini sedikit sama
Cuma beda tujuan
Beda tujuan ya
Ini summary-nya
Fokusnya
Siapa yang create dependency-nya
Kalau si adapter
Gimana caranya
Bikin compatible gitu ya
Coba tanyain versi AISDK deh
Maksudnya kasih contoh code-nya
Sama jelasin singkat aja
Coba
Mana sih tadi contoh
Contohnya di private
Nah
Udah itu aja
Itu halaman pertama kok
Nah copy aja
Apakah ini termasuk
Dependency injection ya
Is this dependency injection
Or adapter pattern
Or not
Perlu dijelasin deh
Kasih satu lagi deh
Kasih satu lagi modelnya yang lain
Modelnya yang OpenAI
Atau Anthropic
Jadi ada dua ini
Apa ini? Expert?
Gak dijelasin
Ada itunya
rules-nya
Gak dijelasin dia bisa ngerti sendiri ya
Kenapa kita menganggap itu
Dependency injection
Terus
Ya dia ngerti
Ternyata
Mantap
Pinter ya
Ini pro atau gratis?
Gratis
Pro gratis
Ada promptingnya ya
Berarti sistem instruksinya
Yang
Ya saya pasang ini
Sistem instruksinya kan
Pasang MSC GPT
Bisa yang gratis emang
Bisa
Cuma rajin-rajinnya
Sama kok
Gemini sama
Gemini yang run n ya
Gemini.google.com sama chat GPT
Itu fungsinya mirip-mirip
To adapter kan
Coba liat katas-katas
Katas
The code uses dependency injection
And relies on
Adapter pattern
Katas-katas yang itu
Yang table
Yang table
Nah yang gue tunjukin tadi kan
Expert verdict
Nah itu
XAI and Google is
Abstract difference
Ini adalah adapter yang
XAI sama Google itu adapter
Tapi generate text nya
Dependency injection
Berarti versi AISDK nya
Maksudnya si AI package
Dependency nya
Oh iya
Generate text nya iya
Adaptor nya
Dalam package terpisah
Kalau kita perhatiin tadi kodenya
Walaupun dua-duanya buatan
Versi juga ya
Kelihatan nya ada unofficial sih
Makanya emang dipisah
Maksudnya kenapa itu dipublish
Sebagai package terpisah yaudah
Itu salah satu jawabannya
Jadi dua-dua
Ini nya si model nya itu adapter
Si generate text nya
Dependency injection
Yes
Oke
Dan oh dan orang
Tadi kalau kita liat
Tep-tep nya
Paling kanan kan ada custom
Ada antropik, ada Google, ada XAI
Ada custom emang itu dibuka
Siapapun
Bihak lain bisa mempublish
Adapter
Itu istilahnya bukan adapter sih
Maksudnya bisa mempublish package
Yang berfungsi sebagai adapter berarti
Tapi kalau untuk yang si dependency injection
Itu cara kerja si
AI package nya yang punya generate text
Punya apalah generate image dan lain-lain
Yes
Interesting
Ini kalau
Yang saya
Waktu itu
Mempertanyakan pada saat itu kan
Awalnya gak gini
Jadi ini codenya
Ini fungsi untuk
Ngirimin data ke gemini
Terus dapat respon
Standar lah ya
Jadi pada saat awal
Ini saya gak pakai ini
Mesej saja
Sedangkan
Pada saat
Di dalam saya manggilnya
Request
Request.os
Atau fetch dan lain-lain ya
Tapi pada saat
Saya mau bikin testing
Mana testing
Kan mau di mocking
Gimana cara mocking nya
Kalau gak pakai library
Yang saya lakukan adalah
Memalsu
Meniru
Meniru ya
Artinya 2 gitu
Kalau ngecek apa? Mocking ya
Iya artinya 2
Ya kayak bahasa Indonesia
Ada tahu sama tahu
Iya
Jadi
Akhirnya
Saya bikin variable baru
Atau parameter baru
Untuk menerima sebuah
Funksi
Atau objek atau apapun ini
Supaya bisa saya tipu
Jadi gak, dia gak akan
Connect ke gemini API
Supaya gak
Rate limit kan
Jadi saya bikin aja disini
Fungsi
Fungsi apa
Modul mocking
Dengan ada
Fungsi namanya pos
Saya lakukan sama seperti yang tadi
Di main tadi
Disini
Nah itu
Di test nya dia pakai mocking kan
HttpClient.Post
Jadi HttpClient nya bisa kita pakai apa aja
Kalau di JavaScript ya bisa pakai
Fetch, bisa pakai Axios
Fetch, Axios
Bisa pakai XML, Http
Bisa gak ya
Bedanya kalau LXL ini kan
Nggak ada tipe data ya disini ya
HttpClient itu enaknya
Disitu
Tapi kalau kalian sudah menggunakan TypeScript
Atau menggunakan
PHP kan
Masih bisa lose ya
Kalau C#
Atau yang strict
Language yang strict data type ya
Jadi kan kalau sudah ada data type
Disitu
Di HttpClient itu
Harus didefinisikan data type nya
Yang dua tipe
Data ini
Bisa compatible
Jadi kayak wrapper
Atau interface
Interface ya sebutannya
Interface
Biasanya pakai A, I depannya
I besar
Fungsional ya, jadi ini fungsional
Tadi kan kita contohnya kelas
Kalau ini yang lebih ke fungsion
Tadi pada saatnya saya menggunakan mock
Rec kan
Pada saat di kode benerannya
Saya kasih default parameternya adalah
Rec
Kenapa?
Kode yang sebelum ini gimana?
Bisa dimundurin
Bukan
Kan ada commit yang sebelumnya nggak ada
Oh iya
Bisa sih
Jadi kan pada saat
Manggil kan pakai mock rec
Kalau yang di aslinya
Yang benerannya
Saya pakai ini aja
Sama
Tapi ini rec, ini adalah
Dependensi benerannya
Ya, kalau kita
Mau pakai bisa rec.
Post ya
Jadi rec ini ada
Fungsi namanya post
Jadi ini disertakan
Ke dalam parameter
Sebuah fungsi, fungsinya yang ini
Mau lihat ininya
Mau lihat
Commitnya
Bingung
Gak
Gak
Oh
Ada ENV nya nggak?
Ada ENV nya nggak disini
Ada ENV nya
Ada example
Kau udah ada
Mas Liza
Mas Liza sempet panik
Mas Liza sempet panik
Oke, eh kok kesini?
Ntar, ntar, ntar, ngelihat commit ya
Commitnya sebelum
Sebelumnya ini
Pakai, mana dia?
Ini, langsung message aja
Jadi didalamnya langsung rec
Sama dengan rec request new
Rec request blablabla
Sampai rec.post
Kayak gini, kurang lebih ya
Ini, ini, ya gini
Rec.post
Begitu
Sudah
Di refactor
Gantinya adalah
Saya tambahkan 1 parameter
HttpClient
Jadi, tidak lagi rec.post
Tapi HttpClient apapun
Kalau nanti sandanya
Di masa depan saya mau ganti, nggak mau pake rec
Mau pake yang lain, ya tinggal
Ganti bagian ini aja
Rec nya diganti, udah
Sama dependency
Di apa?
Library nya diganti, di install
NPM install something yang lain
Gitu lah, kira-kira
Pola kayak gini
Kalau di webdev
Salah satu yang paling umum, logger kali ya
Pada umumnya kan
Kita logger cuma instantiate
Sekali kan, misalnya pakai Pino
Atau semacamnya
New logger nya sekali
Tapi, maksudnya di selalu
Ke function lain, atau ke halaman
Halaman lain
Logger nya itu udah dipas sebagai objek
Oh, logger nya mau apa aja
Bisa ya, mau pakai
Jadi di dalam misalnya
Error atau warning, cuma
Logger, langsung dipanggil aja
Logger dalam kurung apa
Kalau
Lebih, ini lagi
Karena konsep dependency injection
Udah lama banget kan
Contohnya driver aja
Driver USB
Driver printer
Itu, misalnya gini
Kita ada command menuju printer
Printer nya bisa
Epson, bisa Canon, bisa yang lain-lain
Tapi, si driver itu kan
Ada driver bawaannya
Untuk bisa bicara
Ke operating system
Yang generic ya
Operating system taunya print
Hanya print command
Print command itu
Dia mengirimkan datanya sesuai dengan
Universal cara mereka
Mengirim data, nanti si driver lah
Menenjemahkan menjadi
Bahasa di printer nya mereka
Karena masing-masing printer punya
Standard masing-masing
Bisa monitor
Keyboard, mouse
Itu interface nya sama ya
Betul
Semaja ada universal serial bus
Atau USB, semua interface nya sama
Tapi belakangnya
Cara berkomunikasi nya bisa berbeda-beda
Ngomong-ngomong soal gitu, maksudnya
MCP itu juga sebenernya mengikuti
Itu juga ya, tapi bukan dependensi
Model context protocol
Supaya punya
Si AI kan dulu kan
Kalau si
Sejarahnya sedikit
AI yang pertama kali bisa
Functional calling
Open AI
Bisa functional calling
Jadi kita bisa tanya
What is the weather today?
Kalau yang belum tahu function calling itu istilah lainnya
Tool calling
Sama aja istilah yang sama
Kalau sekarang jaman ya
Agent
Kalau tahun lalu
Cepet banget ya
Kalau tahun lalu kan function calling ya
Kita tanya sekali
What is the weather in Bekasi?
Ada function khusus
Get weather itu ya kan
Ada prosesnya sendiri dia
Membaca variable
Misalnya
Key, weather service
Terus ada objeknya yang kita tanyakan
Mata uang
Nilai tukar
Currency ya
Lalu kan
Karena masing-masing AI itu
Jemenai
Ikut-ikutan, antropik, ikut-ikutan
Punya standar masing-masing
Jadi function calling itu
Jadi susah
Baru si antropik
Introduce
Model context protocol
Dimana
Meseragamkan
Si
AI ini cara berkomunikasi
Sebenernya itu kayak
Standard sih ya
Standard cara berkomunikasi untuk
Ke service yang lain
Sehingga si service-service yang lain
Kayak Figma
Atau Github
Atau apapun lah ya
Bisa membuat
Function-function-function yang mereka siapin
Terus dikasih
Itu toolsnya di expose kan
Berarti function-functionnya itu
Di expose ke
MCP service itu
Betul, jadilah sebuah MCP service
Dimana service itu
Bisa ada ini loh
Service nya Github itu
AI itu bisa manggil A, B, C
B, E, F, G, F
Jadi waktu kita sambungkan MCP server
Kita ke si
AI kita yang
Kita pakai AI client
AI client yang kita pakai
Dia bisa connect tuh
Ke Github, dia baca oh ini service yang ada
Terus balik dan dia bisa
Oke kalau mau fetch
Bati manggil
Function fetch yang disana
Lalu kalau misalnya mau create PR
Bati panggil create PR disana
Argumennya apa
Nanti dia isi argumennya
Bisa create PR
Sehingga terjadi yang namanya
Kalau itu di chaining
Prosesnya di chaining-chaining-chaining
Jadilah yang namanya agent
Yaitu kan berarti si
AI client kita
Di konteks ini kan berarti AI coding assistant
Kan dia internally juga sudah
Punya tools kan dia bisa
Membaca isi file project
Kita ya bisa baca
Dan bisa menulis kan bisa edit
Bisa ubah bisa jalanin
Terminal command berarti kan
Misalnya kita bikin perintah
Apalah benerin kode ini lalu
Langsung buatin pull request nya
Nah dia kan berarti punya tools internal
Dia jalanin tools internal
Yang emang udah available dia tahu
Maksudnya si
LLM-nya berarti tahu kan
Oh berarti harus edit file ini-ini-ini
Harus dibetulin, harus diubah kodenya
Jadi ini-ini, terus bisa jalanin
Terminal command kan
Git add file itu
Git commit
Sekian, terus dia bisa
Bikin summary-nya
Nah terus kalau dia udah di-connect
Ke MCP server kayak yang
Ivan jelasin tadi berarti kan
Si AI client-nya tahu bahwa
Terus tools lain nih selain tools internal
Yang dia punya kan berarti
Bisa bikin pull request dan lain-lain
Berarti yang
Di expose adalah
List of tools
Terus apa
Yang tools itu lakukan sama
Kemampuan untuk memanggil menjalankan
Tools itu ya
Dari si AI client yang connect ke
MCP server
Iya, kurang lebih kayak gitu sih
Betul
Kenapa nggak
Dia nggak pake RSCPA aja
Pake JSON gitu
Kenapa harus bikin protokol baru
Nggak tahu
Sulit kali ya
Karena masing-masing provider punya
Apa, cara manggil tools-nya lain-lain
Mungkin ya, agak ribet
Nggak tahu kenapanya
Kapan-kapan kita connect
Dan siapalah Yohan atau Esther
Yang ngerti beginian
Kita seling tanya maka nggak ada yang tahu
Maksudnya kalau udah kenapanya ya
Kan kita paham
Itu kan ada level of understanding
Kita pertama harus tahu what itu apa
Terus kayak
How does it work, cara kerjanya
Kita ngertilah tipis-tipis yang kayak tadi
Udah kita bisa pakai
Tapi kalau kayak why gitu
Kan itu ada 2 alternatif
Kenapa nggak ini, kenapa ini, kelebihan apa
Kan butuh
Mahaman yang lebih mendalam lagi
Iya
Wah, abu lucu ketemu
Eka ya
Mas sempetnya apa, kenapa
Siapa disini aja
Sibuk ya, sibuk
Eka masih
Terus loh
Nah, ini
Pada pakai
Semacam apa
AI yang di terminal nggak sih
Ivan kayaknya pakai ini ya
Pakai warp ya
Terminal warp itu mereka mau
Pivot kan ya
Ke arah AI agentik ya
AI terminal apa
AI CLI
Tapi ya kalau mau pakai sebagai terminal
Relatif biasa nggak terlalu itu
Nggak terlalu pakai, jadi saya pakai
Si warp ini
Murni hanya terminal biasa
Saya sukanya kenapa
Biarah
Nggak sih
Saya suka warp itu cuma satu
Karena
Text-nya bisa diselek ya
Enak banget
Enak banget UX-nya
Enak banget
That's it
Comment-nya jadi text box
Jadi bisa dipindah-pindah, bisa diselek
Terus gampang bisa copy command, copy output
Wah, enak banget UX-nya
Saya nggak pakai warp
Gara-gara
Mau pakai terminal kok harus login
Nggak mau ah
Ini bisa risiko
Ketergantungan juga sih
Balik ke konteks dependensi tadi
Tapi ya udahlah
Tiba-tiba
Free tiernya dihapus
Ya udah pindah ke
Yang lain, oh my CSH
Plus Gemini CLI
Kulanya
Saya pakai tools
Saya tidak setia tools
Jadi dependensinya itu
Tidak terlalu tinggi terhadap tools
Oh, harus pakai dependensi injection
Saya setia
Setia harga
Kalau free, lanjut
Iya
Warp sampai sekarang masih free
Kalau misalnya bayar, gue nggak mau sih subscribe
Maksudnya kalau free-nya dihapus ya
Oh ya, ada dua alasan
Kenapa saya tidak menggunakan warp
Pertama karena login
Yang kedua karena nggak support TMAX
Karena saya pengguna TMAX, jadi nggak bisa
Apa sih bedanya sih
Hampir sekarang nggak ngerti
TMAX, bedanya
Iya
TMAX itu kayak
Terminal-dalam terminal
Terminal-dalam terminal
Contohnya
Kalau dulu
Pernah ngalamin
Kita mau deploy
Aplikasi SSH ke server
Terus kan itu
Running process kan, nggak di background
Kalau kita mau keluar dari
Server SSH gimana
Kalau kita disconnect kan server-nya mati
Karena kan process-nya running
Pernah nggak
Jalanin dalam screen
Screen, ya itu
TMAX itu adalah screen yang
Modern
Oh gitu, berarti TMAX itu
Screen yang mau jalan
Iya
Saya masih pengguna
Screen all the way
Kayak image magic itu lho
Command line magic itu
Buat nge-cropping gambar kan
Command-nya ribet ya
Dulu harus
Googling image magic
Kalau cropped di kiri, cropped di kanan
Proportional
Atau kita mau cropped dengan aspek
Rasio tertentu dari tengah
Kan cape itu command-nya
Sekarang ketik pakai natural language
Crop 400x300
Width-nya 100%
Dari tengah
Udah dikasih command image magic-nya
Yang gitu-gitulah
Pokoknya sekarang jadi nggak perlu
Ngapalin command line
Command lagi
Iya, pakai bahasa manusia
Bisa ya
Enak ya
Demo TMAX
Ini TMAX kan
Kalau mau
Ke screen sebelumnya
Previous gitu
Bisa kesini
Previous, next
Kalau mau split
Mau ganti posisi
Bisa, mau split kiri ke kanan
Bisa, kalau disini pakai Vim
Vim di kiri, di kanan
Tes misalkan
Enak kan
Work tab juga sudah bisa
Bisa pakai tab, bisa pakai split juga
Bisa kan tiba-tiba
Ketutup, terus buka lagi
Masih ada
Balik lagi
Mau fokus
Zoom
Kalau mau balik lagi tinggal ke kanan
Jadi lebih
Lebih seru
Jadi terminal di dalam terminal
Kita bisa buka terminal di
Layar ini, nggak perlu pakai tab
Kalau pakai tab ya bisa
Tapi
Tergantung orang
Kembali lagi
Apalagi kalau pakai Vim
Lebih cocok kan
Kalau pengguna Vim lebih cocok
Sama aja
Kayak pengguna VS Code
Pake terminalnya di VS Code
Atau terminal tersendiri
Ada yang
Pake terminal sendiri, suka pakai
Terminal sendiri sudah terbiasa kan
Ada yang
Bahkan mau
Apa generate project baru pun
Buka VS Code dulu, buka terminal
Laravel generate something
Artisan generate something, abis itu dia
Code titik disitu
Baru kebuka lagi VS Code nya yang baru
Ada, kan yang kayak gitu juga ada
Tapi generate nya ini folder beda
Folder baru
Iya, misalkan pakai kursor
Jadi
Mana kursornya
Anggaplah ya
Ini ya
Terminal
Terus saya bikin
Folder baru
New project
Terus cd
New project
Terus abis itu npm init
Terus abis itu
Baru kursor
Titik
Buka baru lagi, ada yang kayak gitu
Karena dia udah hidupnya
Di VS Code
Jadi terminalnya pun terminal VS Code semua
Pakainya
Anyway
Masih-masih orang aja
Pulau gaduh
Soundboard dong
Apa soundboard nya
Soundboard nya
Ya wakwaw lah
Satu lagi bentar, warp yang underrated
Itu comment historinya
Ada semua
Jadi kalau tadi itu bahas kayak apa
Laravel create project
Atau apapun ya
Oh historinya, iya
Kita sering bikin
Kita pernah bikin
Pnpm create, astro
Sama ada flag-flag nya itu
Flag nya, template nya apa, typespeed nya
Strik atau enggak, ya ada lain-lain
Atau Laravel atau apapun
Itu udah ada semua, jadi cuma ketik
Pnpm create, langsung
Keluar ke atas, panah-panah aja
Maksudnya dibikin
Di folder nya lain, yaudah ganti aja folder nya
Di VS juga kayak gitu kan
Oh ya
Iya
VS Shell atau ZSH
Kayaknya udah begitu deh yang sekarang
Sebelumnya pakai ZSH
ZSH tuh belum
Nggak tau, nggak muncul
Nggak kan gini kan, contohnya misalkan
Saya biasa pakai mix phx
phx.new
gitu kan, terus panah atas
panah atas, panah atas, gitu kan
Ini udah default
phish
Atau
npm create
Gitu kan
Sama kan
Sama
Kalau apa
Komen di suatu project nih
Kita udah di holder project
Npm atau pnpm
Atau apalah package manager yang dipakai
Spasi, tab, itu udah
Baca package JSON kita
Komennya apa aja
Oh, iya iya iya, ngerti-ngerti
Nggak perlu npm run lagi ya
Ya, apa
Tetep diketik, tapi kayak
Kan misalnya kadang ada project yang
Kadang ada yang misalnya
Komennya prod, kadang ada yang komennya build
Itu autocompletenya
Udah otomatis baca
Dari package JSON kita
Terus kalau git checkout
Gco lah, pakai
Singkatan Gco
Tinggal tab, daftar branch
Yang ada disitu, langsung muncul
Nggak usah ntik
Jadi kayak salesnya warp
Yang dibayar kaga
Pakai warpnya juga gratisan
Kayaknya kita udah melenceng kemana-mana
Ini kayaknya kita perlu
Bahas tentang
Kita perlu bahas tentang automation tools
Atau tools buat developer
Terminal, editor
Apa lagi ya, banyak ya
Voting aja lah biar rakyat menentukan
Kita kan demokratis
Iya, kita mau bahas apa
Buat minggu depan
Stack, stack atau tools
Stack dan tools apa ya
Bukan, stack yang kita pakai itu ngapain
Stack dan tools
Oke
Bahas apa nih
Stack dan tools sehari-hari ya
Stack dan tools sehari-hari ya
Tapi kalau ini serunya
Yang widget, yang nonton kudu banyak
Biar ada bahan ya
Biar maksudnya pada
Ngetik juga pakai apa
Kalau kita bertiga pamer stack
Selain garing, cepet turun
Stack dan tools
Yang digunakan
Sehari-hari
Oke
Waduh cilaka halftime
0-1 kita
Menang
Iya bilang cilakaman 0-1
Iya kalah
Oke
Topik buat minggu depan
Ada ide, ada ide
Kita ngambil apa minggu depan, minggu depan tanggal
Kita harus rekaman juga loh
Iya harus rekaman
Iya nanti dipikir nanti
Minggu depan
Tanggal 5 Agustus
Masih available kan
Masih
Masih
Defennya bagus Vietnam, kirain lagi bahas
Defensive CSS
Kalau dilihat dari stats
Emang iya sih kita posesinya
Lebih tinggi, posesinya
Lebih tinggi, otomatis posesinya lebih tinggi ya
Terus kayaknya shots on targetnya lebih banyak
Tau-tau kalah, nolsa
Dokumentasi
Dokumentasi boleh?
Belum
Dokumentasi
Kita voting nih ya
Bikin voting dulu ya
Jangan terlalu
Ditator ya, ditatornya sekali-sekali
Aja
Kemarin udah diktator, sekarang kita demokrasi
Demokrasi
Poling
Topik
Minggu depan
Alat
Dokumentasi
Ini kayaknya udah berapa kali nih
Kalah melulu
Terus dokumentasi gak laku
Apa lagi ya
Ini ada apa sih, lucu
Fanmade game pake react dan note
Fanmade game pake react dan note
Fanmade game pake react dan note
Oh iya
Ada yang nge-post
Mas
Reifu
Game Yu-Gi-Oh
Game multiplayer
Dan tidak harus pake .net
Maksudnya
Kita coba liat ya
C#
Oh maksudnya
Kita gak perlu install .net gitu ya
Offline
Ini siapa yang bikin
Yu-Gi-Oh master
Siapa ini Yu-Gi-Oh master
Bukan orang Indonesia pasti ya
Pasti, mungkin ya
Sama apa nih
Beda framework LitoJS
Oh
Kalau beda framework itu
Jadi ada
Iya
Ada, ya maksudnya kenal
Di twitter sama yang bikin
Penasaran dia kenapa alasannya
Bikin framework gitu
Cuman kan harus ngajakin orangnya
Nah itu harus
Ya
Ini agak sulit
Kita pakai
Apa
CSS unit
Atau mau beda framework
Tan start
Tan stack
Star
Udah ya
Yang start
Yang ten stack udah
Ten stack universe ya
Ten stack universe
Ten stack universe kita udah pernah
Kalau web framework
Ten stack start
Nah ini
Beda framework
Ten stack start
Kalau saya tidak berhasil
Meyakinkan Mas Indah untuk gabung ya
Oh ya
Kalau berhasil kita bahas yang
Lito tadi ya
Kenasaran saya kenapa
Beliau mau bikin framework sendiri
Tapi seru kan
Iya maksudnya
Ada framework buatan orang Indonesia
Iya ini kayaknya yang
Dia bikin dari
Basenya itu deh
Alicia kayaknya
Kayaknya ya
Kita lihat saja
Oh bikin ORM sendiri
Tapi masih coming soon
Wah seru
Siapa tau bisa dispill sedikit
Kalau bersedia
Jadi pimpang kamu
Kita lihat BUN
Listen
BUN
Oh enggak
Kira ini pakai Alicia enggak ya
Berarti ya
Ada JS Lito
Ini kayak dari light gitu kali ya
Light atau Lito
Maksudnya lightweight mungkin
Nah ini desaran
Container CSS dan if else
Semuanya fitur-fitur CSS baru
Oh iya
Sudah
View transition udah bagus belum sih
Sudah bisa
View transition yang level 1
Yang same page udah masuk
Interop jadi cerah lah masa depannya
Kalo yang level 2
Cross document
Masih baru chrome doang
Yang lain belum
Tapi sudah bisa chrome nya udah bisa
Bisa
Oh maulah itu kita belajar itu
Container CSS
Bentar pertanyaannya apa tadi
Maksudnya prakteknya
Cara penggunaannya
Tapi didemokan gitu
Nggak cuma teorinya doang
Kan kayaknya dulu container CSS
Sudah pernah dibahas sekilas ya
Ini ngomongin container apa
Ngomongin transition sih
View transition sih
Sorry
Sebelumnya bahas
Nggak tadi
Nggak tadi Usul bahas
Fitur CSS baru tahun ini
Terus abis itu
Ikut tanya soal view transition
Terus ya udah abis itu
Di bahas view transition
Tapi terserah sih
Nah biar tambah bingung
Ini ada topik nyempil nih
Testing dengan playwright
Kayaknya selalu
Didefer terus dari tahun lalu
Kita udah lama nggak bahas
BHVR stack itu apa
BHVR
Gak tau sisanya
Virtual reality
View
View
Remix
Remix
Jadi gimana tadi yang nyempil
Playwright
Habis ini ya
Wah 50-50
Yah imbang nih
50-50
Satu lagi dong
Eh
Jadi tiebreaker
Tiebreaker
Loh lempar coin
Demo biar
Kebayang masak UI
Tidak display demo
Masa UI nggak display demo
Demo biar kebayang
Masa UI nggak display demo
Oh iya
Masa UI nggak display demo
Kalau AI kalimatnya nggak jelas
Nanti hasilnya juga ngeko
Itu bahaya
Iya kayak container
Terus apa view transition
Terus juga udah bisa
If else gitu kan sebenarnya
Banyak ya, tapi kan kita selama ini
Kan ngeliat-liat contoh demo
Sama teorinya kan
Kalau ada
Kita belum punya sih ya
Kayak website khusus buat demo
Mendemokan semua
Apa namanya
Fitur-fitur terbaru
Dari CSS atau Javascript
Atau browser dan lain-lain ya
Nanti kita undang mas itu gimana
Yang
Nerdedev
Diundang lagi
Diundang lagi
Udah susah
Sekarang
Udah nggak tahu emailnya
Nggak tahu emailnya
Ya ditunggu
Ditunggu aja
Paling beberapa saat lagi
Dia di rekrut sama siapa
Pasti jadi CSS Evangelist lagi
Kali di rekrut Microsoft misalnya
Atau Shopify atau apa
Kenapa dia nggak masuk ke Microsoft ya
Microsoft juga abis lay off kemarin kan
Iya
Belum dia kerja di mana-mana ya
Nerdedev ya
Nggak tahu
Belum ada info lagi sih
Nggak go public kali ya
Bisa jadi konsultan atau apa
Yang kapasitasnya tapi individu
Nggak masuk big company
Udah
Pollingnya
70% menang
Framework
Senang ya beda-beda frameworknya
Karena seru
Pokoknya
Kita beda framework antara dua ya
Frameworknya ya
Kalau bisa lito kita bahas lito
Kalau nggak kita bahas 10 stack
Oke
Cukup-cukup
Oh iya
Yang di Jakarta
Dan sekitarnya hari Sabtu
Jangan lupa datang nonton Ivan
Kita rame-rame mendukung Ivan
Sama Warad ya
Oh Warad datang ya
Warad datang
Di bandara O-I
O-I
Nanti Ivan mau demo
O-I mau demo E-I
A-I
O-I demo A-I
Keren ya
Jadi tag lagi
O-I demo A-I
Oh itu jadi judul aja
Judul stack pertama gitu ya
O-I demo I
What we make so sweet
Oke
Oke
Cukup ya
Kalau gitu kita ketemu lagi minggu depan
Biar lebih konsen ya
Mendukung Indonesia
Mudah-mudahan Indonesia bisa mengejar ketertinggalan
Jadi kita udah dulu
Terima kasih buat semuanya
Kita ketemu lagi minggu depan
Dengan topik yang berbeda
Udah itu dia
Udah bukan penyanyi kecil lagi
Messi
Itu yang
Penontonnya gak ada yang tahu semua
Yakin gue
Yang 90 belum lahir
Gue masih
Masih kebayang lagunya gitu
Ciluk gue
Ivan langsung disconnect dia
Gue gak tahu
Gue sebelum banget
Annoying makinnya
Nah dulu ya
Ada-ada yang ngomong
Sekarang kan kalo gak suka tinggal ganti aja ya
Youtube channel gak suka
Atau Netflix atau apa tinggal ganti
Belum gak bisa
Belum misalnya RCTI nayangin acara
Lagu anak-anak yang lagunya gak suka
Yang gak ada yang lain
Oke
Sampai ketemu
Minggu depan bye
Bye
Yang kalian melihat untuk membandingkan kembali dengan lainnya?
Jika Anda mencari tahu
Mengenai layanan web hosting terbaik
Kami pastikan Anda berada di tempat yang tepat
Dengan Dominesia
Dapatkan pengalaman
Menggunakan layanan hosting yang lebih baik
Dengan SSD berperforma tinggi
Dalam infrastruktur cloud yang telah dioptimalkan
Untuk kebutuhan personal maupun bisnis
Teknologi ini
Memungkinkan Anda memperoleh layanan
Yang lebih stabil serta proteksi dari korupsi data
Hosting Dominesia
Juga telah mendukung Node.js
Python, Ruby, Go, PHP
Java, serta binary Linux
Lebih dari 200.000 pelanggan
Telah mempercayakan layanan hosting
Di Dominesia
Kepercayaan yang kami jaga
Dengan garansi uptime 99.9%
Serta garansi uang kembali 100%
Buat website Anda lebih mendingin
Segera berat
Deskripsi asli dari YouTube
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Malam ini waktunya ngulik fundamental membahas konsep Dependency Injection. Ayo bergabung bersama Ivan dan Eka di sesi malam nanti. 🔔 Yuk mari ramaikan! Dimulai pukul 20:00WIB ya... 🏷 Gunakan kode NGOBROLINWEBDN dan dapatkan DISKON 10% Untuk Pembelian Web Hosting DomaiNesia: Beli Web Hosting DomaiNesia disini: https://my.domainesia.com/ref.php?u=25754 🎁 DISKON 50% Cloud VPS Turbo dengan Kode Promo: NGOBROLINVPSDN Beli Web Hosting DomaiNesia dis Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
23 Jul 2025
Bedah Buku Problem Solving 101
Episode ini membahas buku "Problem Solving 101" karya Ken Watanabe, mantan konsultan McKinsey yang menulis buku ini seba...
19 Nov 2025
Serba Serbi Pengujian: Vitest, Jest, dkk
Episode ini membahas serba-serbi testing di ekosistem JavaScript, mulai dari alasan kenapa testing penting sampai perbed...
19 Sep 2023
Ngobrolin Linter
Sebelum masuk topik, mereka berbagi soal kenapa acara ini terasa berbeda dari podcast yang pernah mereka buat: tidak ada...
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 .