🔥 UI Component Library: Pakai atau Gak?! Untung Rugi, Tips Memilih, & Pengalaman Developer!
Ringkasan Episode
Bantu KoreksiEpisode ini membahas secara mendalam tentang UI Component Library, mulai dari definisi, perbedaan dengan CSS framework dan design system, hingga berbagai opsi yang tersedia saat ini seperti Material UI, Bootstrap, Carbon Design System, Radix UI, hingga modern solution seperti Shadcn UI dan DC UI. Diskusi juga mencakup konsep headless UI yang semakin populer karena memberikan fleksibilitas lebih dalam styling sambil tetap menjaga aksesibilitas, serta evolusi tren dari library yang opinionated dan kaku menuju pendekatan yang lebih fleksibel dan mudah dikustomisasi. Selain membahas kelebihan dan kekurangan penggunaan UI component library—mulai dari percepatan development, konsistensi visual, hingga risiko terkunci pada satu ekosistem dan tampilan yang terlihat pasaran—episode ini juga menyinggung topik terkait seperti Open UI initiative dari W3C yang berupaya memetakan pola komponen UI secara standar, Web Component sebagai solusi cross-framework, hingga sedikit diskusi tentang Deno dan JSR sebagai alternatif runtime JavaScript modern.
Poin-poin Utama
- •Evolusi UI Component Library dari Zaman Bootstrap ke Tailwind - UI component library telah berkembang dari library yang sangat ketat dan sulit dikustomisasi (seperti Bootstrap) menjadi lebih fleksibel (Tailwind). Bootstrap dulunya sering membuat website terlihat pasaran karena desainnya mirip satu sama lain, hanya berbeda warna. Tailwind menawarkan fleksibilitas kustomisasi yang jauh lebih tinggi, meskipun dengan learning curve yang lebih curam.
- •Perbedaan Antara Design System, UI Component Library, dan Headless UI - Design system adalah konsep yang paling luas dan mencakup seluruh pendekatan desain (contoh: Material Design, Carbon Design System). UI Component Library adalah kumpulan komponen yang siap pakai. Headless UI (seperti Radix UI) adalah generasi baru yang memberikan komponen tanpa styling, memungkinkan developer untuk men-styling sesuai kebutuhan sendiri sambil tetap mendapatkan aksesibilitas yang baik.
- •Kelebihan dan Kekurangan Menggunakan UI Component Library - Kelebihannya adalah menghemat waktu awal pengembangan dan memastikan konsistensi. Namun, kekurangannya meliputi learning curve, sulit untuk keluar dari ekosistem tersebut, dan risiko desain terlihat pasaran jika tidak dikustomisasi dengan baik. Semakin lama produk berkembang, semakin besar cost untuk mengubah komponen yang sudah banyak digunakan.
- •Shadcn sebagai Pendekatan Baru dalam Component Library - Shadcn bukanlah library tradisional dengan kode di node_modules, melainkan generator yang menyalin kode komponen langsung ke project kita. Ini memberikan fleksibilitas penuh untuk mengubah kode sesuai kebutuhan karena kodenya sudah berada di project kita sendiri. V0 menggunakan Shadcn untuk menghasilkan kode.
- •Carbon Design System oleh IBM sebagai Contoh Enterprise-Ready - Carbon Design System adalah salah satu contoh design system yang sangat lengkap, dibuat oleh IBM untuk penggunaan enterprise. Sistem ini mencakup dokumentasi yang detail, contoh implementasi untuk berbagai framework (React, Angular, Vue, dan Vanilla), dan fokus pada aksesibilitas.
- •Headless UI Fokus pada Aksesibilitas dan Kustomisasi - Headless UI library seperti Radix UI berfokus pada mengurus aspek teknis yang rumit seperti focus trapping untuk modal/dialog, memastikan aksesibilitas standar terpenuhi. Developer bebas men-styling komponen tersebut sesuai kebutuhan desain menggunakan Tailwind, CSS modules, atau metode styling lainnya.
- •Dukacita dan Harapan untuk Timnas Sepak Bola Indonesia - Di awal episode, pembicara mengungkapkan perasaan campur antara sedih dan bangga dengan pencapaian Timnas Indonesia yang berhasil mencapai semifinal untuk pertama kalinya. Mereka berharap Indonesia bisa memenangkan pertandingan perebutan juara tiga untuk lolos ke Olimpiade.
Halo, halo, halo. Selamat malam.
Halo.
Senangnya bertemu kembali. Asik.
Ini biasanya selasa malam saya selalu nunggu-nunggu.
Waktunya? Oh bukan.
Oh belum ya.
Karena selasa malam.
Nunggu, waktunya.
Pastinya ngobrolin dulu ya.
Waktunya opening.
Ngobrolin dulu.
Ya, meskipun kita lagi bersedih kemarin Indonesia kalah.
Iya.
Tapi kita bahagia karena malam hari ini kita akan ngobrol-ngobrol lagi.
Saya sedih Indonesia kalah, saya bahagia Indonesia bisa main di semifinal.
Iya itu pencapaian yang luar biasa belum pernah kan sampai semifinal ya.
Dan masih ada kesempatan di 2-3 ya.
Jadi kita bilang kalahnya sama juara mau gimana lagi ya kan.
Tetap masih bisa kita bilang kalahnya sama juara satu, dua atau tiga.
Wajar lah ya.
Ada pertandingan.
Masih ada pertandingan selanjutnya untuk perebutan juara tiga.
Kalau Indonesia bisa juara tiga, kita bisa masuk olimpiade.
Untuk pertama kalinya setelah sekian lama.
Sebegitunya ya prestasi sepak bola Indonesia.
Mudah-mudahan mantap lah.
Oke, kita nggak akan ngomongin bola malam hari ini.
Kita ngomongin sepak takraw yang asli dari Indonesia.
Oh bukan ya?
Karena sepak takraw, beberapa olahraga ya seperti sepak takraw, volley, basket, sama sepak bola.
Lihat transkrip lengkap (1634 segmen lagi)
Itu ada unsur webnya?
Iya, jaring.
Ada jaring ya, jaring.
Badminton juga.
Oh iya badminton juga bener.
Oh iya lagi Thomas Cup sama Uber Cup juga ya.
Kita fokusnya terlalu ke bola ya.
Nggak tahu, nggak diikutin.
Habis nontonnya harus di salah satu platform, kemudian harus bayar untuk platinum.
Platinum.
Paket yang Liga Inggris dapet ya?
Dapet badminton juga nggak?
Nggak.
Ngomong-ngomong pada subscribe streaming apa nih teman-teman sekalian?
Wah branding, jangan.
Spotify biasanya.
Spotify sama video doang.
Spotify yang family walaupun subscribe-nya nggak sama family.
Sama teman-teman.
Loh kan kekeluargaan dengan printfix kekeluargaan.
Kita semua kekeluarga.
Banyak ya sekarang ya.
Apple sama YouTube.
Apple TV.
YouTube.
Sama Apple OneTone sudah dapet satu paket.
Google One sekalian yang untuk family.
Jadi dapet juga ke YouTube-nya.
Oh kalau Google One tuh dapet ke YouTube juga?
Kalau nggak salah sih dapet ya.
Spotify dan video, flex bro.
Sama persis.
Kalau saya Disney Plus.
Oh buat anak.
Tapi ada tontonan buat apa sih?
General yang buat.
Kan Star Wars, Marvel dan lain-lain.
Oh Marvel ya?
Iya.
Nah gua nggak punya tension span buat nonton film sebetulnya.
Jadi nggak langganan.
Terus juga ada film Indonesia sekarang.
Cuma saya bisa ngasih tips nih.
Ada baiknya kayak saya.
Gak subscribe ke banyak kayak Disney, Netflix.
Apalagi tuh video segala macem.
Atau bahkan jarang nonton film di 21.
Jarang.
Saya jarang pergi nonton bioskop.
Ada bagusnya.
Jadi saat saya naik perjalanan naik pesawat yang jalan jauh.
Banyak film ini saya potong.
Ih ini apa?
Wih ini apa?
Saya bahkan belum nonton Captain Marvel.
Jadi bisa nonton di pesawat, tenang-tenang.
Kalau buat yang sering traveling sih.
Kalau buat yang sudah sering, ya udah nonton, ya udah nonton, ya udah nonton.
Iya benar juga ya.
Potify biar bisa download.
Didengerin naik pesawat.
Atau naik kretanya, atau naik apa lah.
Nah sekarang kita lanjut ke bahas
semua yang video-video streaming, atau yang kayak tadi tuh.
Kan itu ada UI-nya ya mereka pakai ya.
Asik, nyambunginya oke ya.
Ada UI-nya, ada search bar-nya.
Ingat gak kalau mereka tuh punya desain kayak desain sistem gitu ya.
Nah bagaimana caranya supaya konsisten.
Nah itulah topik yang akan kita bahas kali ini.
Yaitu dengan UI Component Library.
Bagus gak nyambungnya?
Bagus, bagus, ya lumayan.
Masih masuk kapal.
Apa itu UI Component Library?
Mari kita bahas.
UI Component Library adalah
UI Component Library itu adalah library yang bikin pussy untuk setup.
Bagi saya.
Gak bentar, ini kan sebetulnya bukan istilah teknis ya.
Maksudnya bukan spesifikasi.
Jadi ya maksudnya ada orang bilang,
nyebut itu misalnya pakai istilah lain.
Ya gak masalah, UI Library atau Component Library Framework.
Nah itu kan overlap dengan beberapa konsep terkait.
Kayak misalnya yaitu CSS Framework, CSS Library,
belum nanti desain sistem.
Kalau desain sistem itu kan superset ya.
Jauh lebih luas.
Ya nanti kita bahas lagi aja.
Cuma maksudnya ya ini kan bukan,
kalau spesifikasi kan itu saklet.
Maksudnya misalnya kita bilang apa ya,
API, international API.
Ya istilahnya harus kayak gitu.
Skopnya jelas apa yang dicakup di situ.
Cuma kalau UI Component Library ya,
ya suka-suka lah konvensi lah.
Maksudnya kita ngerti apa yang dimaksud,
tapi bisa aja orang pakai istilah lain,
atau punya skop yang sedikit berbeda.
Nah lanjut, itu kalau menurut artikel itu apa tuh?
Ini ngomongnya CTO ya.
Ini backgroundnya.
Terus dia ditanya apakah kita perlu menggunakan desain sistem
seperti Component Library.
Nah gimana tuh, biar cepet.
What a Component Library is, mana dia?
Nah itu dia.
Nah berarti kan collection of itu yang dibulk.
Atasnya, collection of remade UI elements.
Sebenernya kan intinya itu,
atasnya tuh paragraf sebelumnya.
Yang dibulk.
Ini kan one of the biggest perks.
UI Library is the simplest term,
is a collection of materials or component
that you can readily use
or modify to meet your needs.
Iya kan?
Component.
Tapi sebenernya, definisi yang diatas juga masuk sih itu kan,
collection of remade UI elements.
Ya udah.
Sama sih, ada collection materials juga kan.
Or components.
Nah bisa berupa component.
Katanya kecil.
Katanya kecil.
Belum di-boost lagi nih suaranya.
Bisa berupa component, bisa berupa material lain.
Kayak utility kan.
Biasa ada utility atau helper atau apalah.
Misalnya buat responsive screen
atau loading skeleton dan lain-lain.
Kalau sekarang suara saya gimana?
Sudah kekecilan atau?
Nah kayaknya lebih besarnya.
Better, better.
Sudah ya?
Terlihat moko.
Mohon info ya kalau suara saya kekecilan
atau Eka atau Irfan ya.
Gimana tadi? Sorry, kepotong.
JQuery UI berarti salah satu ya?
JQuery UI.
Ada emang jQuery UI?
Ada, itu udah lama banget.
JQuery UI itu dulu bisa dipakai untuk mobile.
Mobile apps.
Mobile web.
JQuery UI.
Di sini siapa yang lulusan UI?
Lulusan teluin UI.
Mana ini ya? Apa namanya?
Oh iya.
Hal pertama yang kalau teman-teman buka
CSS library atau UI component,
yang pertama dicari component apa biasanya?
Yang susah dibuat.
Terusnya button.
Benar.
Button sama card.
Kalau aku ya, itu yang susah dibuat kayak drop, apa?
Mega menu atau drop down atau aksi drop down yang auto populate gitu.
Karena kalau yang lain kan gampang ya kopas-kopas aja.
Dead beaker, man.
Death beaker.
Yang aneh-aneh lah.
Ya kalau dead beaker kejaman dulu kan harus bikin kan.
Kalau sekarang kan udah ada ya, walaupun biasa ya.
Tapi udah ada, udah useable kan.
Kalau sekarang kan sudah bisa bikin sendiri.
Salah satu yang apa?
Shadow DOM.
Web component.
Web component bawaan.
Nah ini yang agak obsolete
kalau aku sebelumnya tuh cari dialog atau model.
Karena ngetes UI component library itu
aksesibel atau nggak.
Kan sebetulnya bikin sendiri juga bisa nih.
Cuma kan agak ribet.
Jadi aksesibilitas itu kan
kalau misalnya kita ngebuka model itu
fokusnya harus diatur langsung masuk ke isi pop-up model dialog itu.
Terus fokusnya, itu yang pertama.
Kedua, fokusnya harus focus trapping.
Kalau misalnya user nge-tap, pindah fokus, itu nggak boleh.
Fokusnya nggak boleh pergi ke yang dibawah, yang ketutup.
Harus trapping di dalam modelnya itu juga.
Terus ada overlay-nya kan tuh.
Isi halaman sisanya harus ketutup, bisa di-scrolling.
Terus kalau misalnya user nge-close dialog itu
fokusnya harus balik ke tempat yang tadi.
Si button yang nge-trigger dialog itu, bayangin itu.
Kalau misalnya ngebikin sendiri satu persatu kan
ya agak cape juga ya.
Jadi biasanya.
Kalau UI component library, cari yang ada itu.
Dan itu harus bagus.
Maksudnya harus berfungsi dengan baik.
Ya sama juga bohong kalau pakai UI component library.
Tapi mau saya nggak berfungsi dengan baik ya.
Cuma kayaknya sih buat kalau opsal ya.
Karena native yang bahwa web,
mau saya yang web standard juga udah mulai.
- Udah ada dialog juga kan?
- Dialog udah ada, model udah ada.
- Kayaknya Firefox ada.
Cuma mouse-nya browser lain udah ada sih atau belum.
Cuma kelihatannya udah mulai widespread ya.
Minimal per akhir 2023 inilah.
- Coba mesti aja balik ke artikel tadi.
- SetQN UI.
Ya nanti kita akan bahas pelan-pelan ya nanti ya.
Sabar. - Udah masuk menung.
- Udah ada.
- Itu ada nDesign tuh.
Itu salah satu yang lama tuh.
- NDesign. Ini juga dulu terkenal.
- Terkenal dengan nMaterial UI.
- Material UI.
- Beda loh mUI sama materialized CSS atau materialized design.
Itu sebenarnya kan Google Design System.
- Material Design.
- Design System-nya.
Terus implementasinya banyak, open source-nya.
- Ya dia spesifikasi kan.
Material Design itu spesifikasi kan.
Sama seperti Apple Design Guideline kan.
Sama juga itu.
Cuma kalau Apple kan dia lingkupnya lebih kecil.
Makanya dia nggak, mungkin belum ada
library yang pakai guideline-nya mereka.
Ini nDesign.
- Udah lama banget nih.
- Head-to-head-nya sama material UI ya?
- Iya, sama mUI.
Majlis ulama Indonesia.
- Dulu kayaknya namanya material UI deh.
Sekarang ada rebranding ya.
- Iya, material UI.
Ada pricing. Apa ini? Oh ada pro-nya dia, premium.
Produknya ada core, ada X, ada template, design kit.
Design kit ini, buy, oke.
Yang core-nya aja ya.
Material UI. Ada Joy UI, bedanya apa?
Open source react component, oh.
- Semua react component.
- Oh iya ya, react component semua ya.
Ini khusus react ya?
- Iya, ini material UI itu belum react.
- Material UI is an open source react component library, blablabla.
- Okay.
Material CSS.
Ada kan yang ekifalin sama bootstrap ya, material CSS.
Materialize ya materialize.
Ya materialize, betul.
- Makanya suka bingung material design, material UI gitu.
Mau yang mana gitu.
- Nah tuh ada komen yang paling bawah.
Jadi sebenarnya Google bikin standar, kayak apa?
- Standar spesifikasi ya.
- Rinsip-rinsipnya hanya material design.
Nah itu maksudnya kayak token-nya kayak kalau button itu minimal berapa bentuknya.
Terus behavior-nya kalau di hover itu lebih dua berapa persen.
Bisa di-click dulu. Pertama kan yang nge-trend banget kan ripple ya.
Ripple-nya behavior-nya kayak gimana.
- Ripple effect ya.
- Ternyata pas di-click kayak ada zeng-nya.
Itu kan bikinnya gimana?
Misalnya kalau di CSS beneran kalau pakai react.
Nah dari Google nggak, nggak ketur implementasi exec-nya kayak gimana di kolonya.
Nah makanya muncul banyak, ya banyak itu.
Banyak library semua pakai nama material, blablabla.
Bukan, bukan nggak diimplementasi.
Dia implementasinya di Android.
Kemudian diadaptasi ke web.
Banyak orang yang, iya, banyak orang yang mengadaptasi ke web.
Karena mungkin make sense juga.
Sama halnya seperti yang tadi Apple design guideline.
Itu kan untuk aplikasi native-nya kan buat iOS.
Dan belum ada atau mungkin kita nggak tahu yang mengadoptasi ke web.
Jadi yang material slice, material UI itu.
- Cuma itu semua pakai nama material, maksudnya material UI itu.
UI library yang menggunakan prinsip-prinsip yang diadoptasi dari material itu.
- Ada juga UI component library yang namanya nggak ada material-nya.
Nggak ada unsur material-nya.
Tapi ada ini-nya.
Dia menggunakan prinsip-prinsip material UI.
Ada seperti itu.
Saya lupa ada namanya.
Banyak soalnya.
Nah teman-teman di sini favoritnya mana nih?
Kita juga belum mendefinisikan kan masuk kategori apa gitu kan.
Kalau bootstrap itu masuk ke mana?
- Nah itu semua kan sebetulnya.
- Awalnya CSS framework, tapi akhirnya awalnya CSS framework.
- Nah ini overlap.
Jadi UI component library kan macem-macem ada yang beneran ngasih component doang.
Ada yang kombinasi sama, ya itu kayak CSS framework ya kayak si bootstrap.
Dulu ada zurp foundation juga.
Kalau nggak salah, kalau si bootstrap itu ya bootstrap 1, twitter bootstrap tuh masanya namanya dulu tuh.
Dia itu cuma CSS-nya doang.
Utility class-nya dulu.
- Utility class name kan kalau misalnya mau bikin 2 kolom, 3 kolom, atau class name-nya apa gitu.
- Tapi kan setelah itu kan harus bikin contoh.
Contoh-contohnya lama-lama jadi komponennya mereka bikin sendiri.
- Kayaknya sempat ngetrend banget ya pas pertama belajar tuh semua orang pada pake ini.
- Jaman dulu semua website itu mirip banget.
Sama apa kayak di time forest gitu-gitu kayaknya udah sama semua.
Tampilannya cuma beda warna doang.
- Cuma ini kan helpful banget ya, apalagi dulu kayak misalnya drop-down nih.
Coba buka komponen yang drop-down.
Nah ini kan dulu bikinnya susah ya.
Ya maksudnya dulu itu 6-7 tahun lalu ya.
- Iya. - Iya.
- Nah ini membantu banget kan.
Jadi ini kan udah keluar diri rana CSS utility only kan.
Walaupun ya emang pake CSS class-nya dia juga, kan ada JavaScript-nya juga nih.
Dia ngebawa JavaScript ya bikinan mereka sendiri.
- Terus saya suka pake Jumbotron.
- Jumbotron. - Oh ini ya.
Yang hero.
Nah makanya si bootstrap ini karena ada JavaScript-nya agak susah.
Mau di-convert ke komponen react, komponen view, gitu kan.
Jadi ada lagi yang bikin kan, ada lagi yang bikin khusus untuk react, react bootstrap,
ada yang buat view, saya nggak tahu tuh ada apa nggak.
Ya pokoknya untuk semua framework dia ada karena dia ada mengandung JavaScript-nya di sana.
- Nah ini bisa dibilang salah satu paling OG ya.
Kayaknya yang paling pertama, ya kenapanya ya kayak yang tadi itu di artikel pertama.
Biar cepat ya kan, pastilah. Itu faktor yang paling...
- Tapi pengalaman saya justru bikin lambat tahu nggak sih.
- Iya tergantung. Semua tergantung.
- Jadi pusing gitu kayak. Karena kalau sudah jadi gitu mau dirembah-rembah itu
kalau ada behavior yang mau berbeda dan dia nggak bisa, itu contohnya gini.
Pernah tahu nggak kalau drop-down tapi bisa search?
Drop-down tapi ada search-nya.
Itu bahasanya itu ya.
- Iya ngerti kebayang-kebayang, apa ya namanya?
- Searchable drop-down. - Kalau di jQuery namanya jQuery select.
Ada nama jQuery. Kalo dulu saya suka pake nama jQuery select.
Bukannya jQuery apa ya?
- Select to. - Ah select to, dah.
Ah itu dia. - Sampai afal gitu namanya.
- Select to. Nah itu drop-down tapi bisa di-search.
Bahkan yang lebih atasnya dia kalau kita search dia bisa kayak callback ke fax,
ngambil yang hasil search, terus ditelepilih.
Itu kan untuk datanya ratusan ribu itu cocok banget ya buat jadi drop-down.
Daripada diisi semua ke dalam drop-down.
At some point kalau misalnya contohnya komponen seperti itu.
Kalau misalnya kita mau ngerubah tetapi ya ternyata dia nggak bisa.
Tetapi maunya komponen itu yang dipakai.
Nah itulah yang bagi saya jadi ribet.
Tapi itu permasalahan semua framework ya.
Mau pake framework apapun kalau kita mau maksa diluar kaidah pasti akan jadi ribet.
- Nah agian kan sebetulnya requirement kita makin spesifik.
Ya makin ribet mengkustomise yang sudah ada. Karena orang bikin kan belum tentu dengan use case kita in mind.
Nah tapi dibagi dulu aja nih.
Pertama pronya, ngos-ngosnya pertimbangan kenapa kita pakai UI Component Library.
Yang kedua kontranya. Kenapa kita misalnya kenapa nggak usah atau kapan kita nggak usah pakai.
Nah pronya dulu aja yang jelas kan cepet deh tinggal kopas.
Terutama kalau prototyping.
Ya minimal ada UI nya lah.
Pertama cepet.
Terus kedua ya misalnya nggak ada UI designernya.
Atau UI designernya masih occupied.
Masih belum bisa gantung di tim kita.
Ya minimal kan kalau kita pakai ya sejelek-jeleknya.
Maksudnya standar-standarnya seplein-pleinnya jembut-jembut bootstrap lah itu tadi.
Minimal kan dari kontrasnya, terus dari ukurannya itu kan sudah tersusun dengan baik ya.
Jadi maksudnya nggak usah dealing dengan itu semua.
Ada sesuatu yang minimal jelas bisa diperiksa lah.
Jadi kalau nggak ada UI designer.
Terus apalagi ya?
Kalau misalnya kita pilih UI library yang aksesibilitasnya bagus.
Atau mungkin ada juga yang secara estetika bagus juga ada kan.
Misalnya material UI tadi atau end design atau radix.
Kalau kita nemu yang style estetiknya cocok, aksesibilitasnya bagus.
Ini kayak menang besaran, maksudnya menguntungkan banget karena udah sesuai yang kita mau.
Ada lagi nggak pertimbangannya?
Kalau cost gimana?
Cost kan cepet tadi. Maksudnya main hour-nya, dev hour-nya lebih sedikit.
Terus itu tadi dev hour kita sendiri, kita kerjanya lebih cepat.
Kedua, orang UI. Kita nggak usah hire orang UI.
Ini memang lebih tinggi, itu kontra-nya.
Tapi yang pro-nya di sini adalah aplikasi web kita jadi konsisten.
Oh ya, konsisten sih.
Karena mungkin masing-masing orang punya preferensi sendiri.
Kalau nggak ada guideline-nya, misalkan kita pakai bulma, kita pakai footstrap atau apapun.
Dia tinggal lihat di kitchen sink, copy paste, jadi gitu kan.
Tapi kalau misalkan nggak ada sama sekali, oh ini nggak ada guideline-nya.
Yaudahlah buat sesuka-suka kita gitu.
Akhirnya masing-masing selera.
Apa yang nge-stop project yang sudah pakai UI Component Library A nggak nambah sesuatu dari UI Component Library B?
Gimana-gimana?
Saya pernah menemu loh, sudah pakai material design, tapi tiba-tiba pakai select tool di satu sisi lain.
Karena ada yang itu kan sebetulnya custom.
Iya, nggak selengkap itu.
Oh itu poin bagus juga sih, menarik kan sebetulnya UI Component Library itu kayak memudahkan kita aja.
Tapi kan bukan berarti saklek banget kayak kita beneran harus hanya pakai itu doang.
Ya kalau kita punya kebutuhan lain yang si library itu nggak support.
Ya kita, kalau bisa sih bahkan misalnya gini nih, butuh select atau apa.
Cuma si component library itu nyediain yang lebih kayak low-level lah.
Misalnya nyediain input, ya mungkin input atau button kan itu bisa kita susun.
Kita pakai buat bikin meng-customize yang lebih kompleks kan, yang kita perlu.
Ya atau pakai component library lain.
Atau kadang kan ada library UI yang bukan menyeluruh, bukan design system atau component.
Tapi ketengan ya, kayak misalnya Airbnb itu pernah punya date picker yang oke banget.
Kita cuma perlu date pickernya aja, karena mungkin date picker bawaan component library nggak ada.
Atau kurang cocok, mungkin kurang advance.
Kita perlu date picker yang mantap banget.
Yaudah kita ambil aja dari tempat lain ya, itu sah-sah banget sih.
Cuma pertanyaannya itu pasti terlalu javascript ya.
Pasti ada kodanya, ya dari segi performance kan itu gimana kita nanya aja kan.
Apakah library tambahan itu harus di eagerload duluan di semua halaman kan?
Belum tentu.
Nah itu kan gimana kita lalu isi load tergantung kebutuhannya.
Itu juga pernah jadi sebuah nightmare buat saya.
Karena kliennya beli admin themes di time forest.
Nah itu agak jelasan.
Kan cakep tuh.
Jaman itu masih pakai, sudah pakai itu booster 3 lah ya itu.
Admin themes sudah pakai booster 3, itu semua ya.
Tapi JavaScript-nya burungan.
Cakep tuh.
Burungan, cdn, di head semua.
Aduh.
Cakep.
Di contoh aplikasinya, di contohnya cakep.
Gitu developmentasi.
Terus kok saya mau rubah ini gak bisa.
Mau rubah itu gak bisa, hasilnya gimana.
Akhirnya banyak maksa, banyak maksa, maksa akal-akalan montir segala macam.
Yang penting jadi hasilnya juga gak bagus.
Biasa-biasa aja.
Jadi justru jadi gak konsisten kan ya.
Yang awalnya kita berharap konsisten.
Terus karena terpaksa menggunakan UI library.
Terus kita gak tahu cara utak-atiknya.
Akhirnya jadi malah jadi gak bagus gitu.
Karena kurang konsisten gitu.
Nah ngomongin apa, komponen library yang cukup lengkap.
Salah satu yang cukup lengkap adalah yang carbon design.
Ini juga menarik sekali ini dari IBM.
Oh iya.
Punyanya IBM, sebelum dibuka deh.
Bagus.
Enterprise ready, enterprise ready.
Ya karena emang bikinan IBM ya.
Dan ini contoh, itu kan tadi overlap ada beberapa ya.
Misalnya kayak tadi tuh Bootswap.
Mereka sebetulnya mainnya core-nya adalah CSS utility ya.
CSS utility library.
Tapi mereka include komponen juga.
Atau kalau contoh yang agak lebih modern.
Tailwind CSS kan sebenarnya library standalone.
Kita pakai CSS kelasnya doang aja ya gak apa-apa.
Tapi kalau kita perlu komponen, mereka pakai brandingnya tailwind UI.
Secara offisial itu dari pihak yang sama.
Itu kan kombo antara CSS utility dengan CSS framework dengan UI component library.
Kalau IBM ini, carbon design system ini, design system yang menyeluruh.
Jadi kayak apa sih, pendekatan kayak apa, filsafat ya.
Filosofinya, blablabla.
Terus secara umum lah kayak pendekatan yang menyeluruh banget design.
Jadi kayak ini bukan kodinganya doang.
Cuma kayak cara mengkomunikasikan konten blablabla dah.
Yang kita developer gak ngerti mungkin.
Nah, design system termasuk salah satu di antaranya component library.
Bahkan sampai font-nya juga udah ada lengkap sekali.
Ini salah satu yang menarik kalau temen-temen mau bikin aplikasi yang istilahnya buat enterprise, buat perkantoran.
Itu kayaknya cocok sekali.
- Yang kelihatan mahal. - Klihatan mahal.
- Gak mesti memang. - User facing juga gak apa-apa maksudnya.
Gak masalah.
Nah, ini mungkin ekifalitnya adalah dengan ini ya.
Tadi kita udah ngomongin material design, design sistemnya.
Dengan material UI atau materialize.
Jadi ada design sistemnya, ada UI komponennya.
Kalau ini diborong satu tempat.
Kalau gak salah ada beberapa juga yang melakukan ini kan.
Github kalau gak salah ada.
- Terus ada... - Polaris, Shopify, Polaris.
- Uber. - Shopify, Polaris.
Apa namanya Polaris apa sih?
Iya kayaknya.
Ini base design sistem ini Uber.
- Dia ada juga komponennya. - Komponennya.
Iya.
Tapi ini salah satu yang paling lengkap.
Dan website-nya itu nyenangin banget sih.
Sampai ada tutorial, ada code sandbox-nya.
Coba deh, buka aja.
Develop, getting started, react.
Step 1, review, landing page.
Ini framework juga menarik sih.
Yang mereka support secara resmi itu ada plane HTML, CSS, JavaScript.
- Ada codenya. - Ada contohnya ya.
Web component.
Framework-nya ada angular, view, color swell.
Itu unofficial, jadi kayak sunking orang.
Pada suka banget sama si design sistem dan komponen library ini.
Ada yang bikin.
Tapi kayak diakuin di Acknowledge sama IBM.
Cuma nggak di maintain yang maintain-nya oleh komunitas, community.
Bagus juga ya.
Bagus, bagus.
Cuman kayaknya dia hanya react ya kalau nggak salah.
Karena mereka hanya menggunakan react kan.
Eh, nggak tahu ya.
- Tapi kalau nggak salah. - Ya buat mereka sendiri.
Iya, buat mereka sendiri.
Kalau nggak salah ya, ini pakai react.
Guberdesign.
Website-nya ya.
Ya ini sampai charting library kayaknya ada deh data visualisation tuh.
Ada tuh, lengkap sekali.
- Pake D3. - D3.
- D3. - Hmm, I don't know.
Iya, maybe.
Coba aja lihat.
Oh, nggak bisa ya. Inspek.
Tuh itu klik aja bawahnya.
React, Angular, Vue, Vanilla.
Nah itu ngebuka code sandbox.
Itu bagus banget sih emang.
Oh, seru-seru-seru.
Dan udah ada contohnya kita tinggal kopas aja.
Fluent UI by Microsoft.
Merik-merik Carbon.
Fluent UI juga yang kotak-kotak ala-ala Windows 11 gitu kan.
Kalau nggak salah ya.
- Eleventy. - Windows 11.
Eleventy.
- Ini... - Itu mau apa ya, Eleventy ya?
- Static set generator. - Iya, mereka punya.
Oh iya, Eleventy.
Kayaknya mereka bikin sendiri apa gimana gitu ya.
Oke.
Coba lihat deh komponennya.
Di kiri.
Komponen. Button.
- Button duluan. - Card, nggak ada card.
Ada accessibility testing statusnya.
- Mungkin. - Oh ini, oh iya.
- Ini penting. - Jadi kayak semuanya ada info-nya.
Terus di atas tuh, di paling atas.
Usage, style, code, accessibility kayak apa?
Lengkap semua.
Kalau kita mau pakai vanilla, itu nama kelasnya apa?
Terus contoh-contoh state-nya, terus di masing-masing framework kayak gimana.
Wah, bener deh.
Sebelum kita review satu persatu komponen library,
tadi kan kita udah ada pro-nya, kontra-nya tadi kan.
Oh iya, kontra-nya tadi.
Kontra-nya. Susah dipelajari kemudian.
Learning curve tadi.
Ada kemungkinan learning curve.
Ini tergantung UI library-nya juga kan.
Misalnya nih kita pakai yang punya IBM tadi, Carbon Design.
Ya mungkin lebih mudah ya karena lengkap.
Dan hal-hal yang perlu dipertimbangin, udah ada detail-detailnya juga.
Jadi maksudnya kita lebih gampang belajarinnya.
Tapi kayak misalnya dulu kayaknya end design tuh yang suka dikatain apalah.
Kayak mungkin dokumentasinya kurang jelas.
- Accessibility statusnya juga. - Karena bahasanya juga.
Nah itu berarti kemungkinan kan learning curve-nya bisa lama.
Maksudnya developer nggak bisa dengan gampang langsung mengadopsi.
Kedua, belum tentu si desainernya suka.
Karena dipagerin.
- Iya. Terkekang. - Iya terkekang.
Atau jika misalnya ternyata desainernya yang menang.
Jadi sesuka hatinya membuat desain tanpa desain sistem yang sudah di sepanggati.
Kalah nih misalnya developer-nya.
Nggak bisa ngomong apa-apa karena desainernya itu pemilik.
Akhirnya terjadilah framework-nya dibelok-belokin.
Framework-nya dibelok-belokin.
Nah itu jadi nightmare.
Cuma ini konsep, kalau balik ke topik UI component library-nya.
Trend-nya juga kayaknya makin berubah deh.
Kalau kayak yang dulu, yang agak lama kayak material UI, end desain, dan lain-lain.
Itu kan saklet banget ya.
Belum tentu semua warna bisa di-customize, bisa di-modif.
Walaupun bisa, belum tentu semua.
Cuma kan sekarang banyak yang approach baru yang kayak Radix itu juga.
Radix UI, Shad-CN, itu styling-nya lebih minimalis dan relatif.
Jauh lebih mudah di-override sih.
Maksudnya lebih banyak yang bisa kita customize.
Jadi itu juga pertimbangannya.
Kalau kita ternyur pilih UI component library yang strict, restriktif.
Agak sulit di-override.
Terus kasusnya, kayak tadi Ivan bilang, desainernya konsepnya beda banget.
Ya udah selamat pusing.
Tapi kalau misalnya kita kebetulan pilih yang lebih flexible dan gampang di-override.
Ya masih nggak apa-apalah. Relatif nggak apa-apa.
Kekurangan selanjutnya apa?
Nggak bisa keluar.
Ke kunci ya?
Bootstrap kan?
Selamanya.
Jadi misalnya udah pakai Sencha XTGS.
Kalau mau ganti ke karbon desain, ya selamat aja.
Selamat berjual.
Rewrite semuanya.
Berarti itu kayak invest waktu yang besar juga.
Jadi kan tadi balik ke pro-nya, kita ambil UI library untuk menghemat waktu.
Tapi itu juga sebetulnya di sisi lain menyinta waktu, ya kan?
Karena kita abis itu waktu itu kita bikin hal-hal lainnya.
Ke depannya kan bergantung itu.
Iya maksudnya gini, evolusi sebuah produk kan ada.
Jadi satu saat produk itu bisa terjadi yang namanya rebranding atau redesign.
Nah kalau sudah redesign atau rebranding terjadi dan ternyata komponen library-nya tidak bisa,
ya terpaksa semuanya harus di rewrite.
Komponen-komponen itu di rewrite ulang.
Contohnya ternyata secara desain sistemnya atau owner-nya bilang,
"Ih, button-nya si material design bagus deh, bisa ada gelombang-gelombangnya.
Pengen dong dibikin juga." Ternyata UI komponen library yang kita pakai nggak ada yang seperti itu.
Akhirnya kalau dipaksa nggak bisa masuk, jelek. Terpaksa ya bongkar rewrite semuanya.
Itu contohnya.
- Salah satu waktu lain gini, misalnya di depan kita menghemat waktu karena ada komponen yang udah tinggal dipakai.
Tapi kan setiap kita bikin halaman baru, kayak misalnya section lah.
Section misalnya ada blog post, ya itu kan terdiri dari kartu, terdiri dari button, terdiri dari macem-macem bagian lah.
Ada alert-nya. Itu kan sebenarnya makin lama, makin banyak isinya.
Setelah beberapa bulan, setelah sekian tahun lah misalnya kan jadi banyak banget.
Nah itu cost buat ngubah semua kan jadi itu numpuk banget. Jadi di awal menghemat waktu.
Tapi makin lama waktu berjalan, kayak itu makin kekunci kita dengan UI komponen library itu kan.
Kalau udah terlanjut dibikin.
- Kelemahan berikutnya, aplikasi atau website kita jadi pasaran.
Desainnya mirip-mirip dengan berbeda warna.
Dulu inget banget kan waktu beberapa tahun yang lalu kerja di startup, baru mau launching gitu kan.
"Wah kita bikin landing page, beli dari Tim Forest." Begitu launching.
Besoknya ada yang launching juga dengan tema yang sama.
Belinya sama nih barengan.
Itu kan jaman dulu bootstrap itu sangat ini kan. - Atau bukan dipuli atau sebenarnya developer-nya
"Dudek nih, kopi zip file-nya dikasih aja. Itu pakai aja seharusnya."
- Ya pokoknya antara beli atau ambil di temen website, temen website yang gratis atau yang berbayar gitu kan.
Habis itu implementasi, headline-nya beda, tulisan copywriting-nya beda, tapi ternyata button-nya sama.
Bahkan ketika sebuah website bootstrap, meskipun warnanya berbeda, tetap aja feel-nya sama.
- Ya kan bentuknya sama. Cuma kayak skin-nya aja. Beda skin doang.
- Itulah yang terjadi, yang kayaknya mungkin sekarang udah lebih itu ya, lebih banyak opsi.
Tapi yang terjadi kok misalkan temen-temen menggunakan tailwind UI apalagi kan.
- Maksudnya tailwind yang asli ya, yang ORI maksudnya tanpa dikustom.
- Ya, itu kan jadi kalau hasil kopas dari web gitu yang dicontohkan ya udah, sebegitu aja.
Jadi semuanya mirip-mirip. Oh warnanya jangan warna ini deh, warna zinc 100 gitu ya udah.
Tapi kan bentuknya mirip kan, tetep sama gitu. - Ya ketahuan lah.
- Wah ini nggak profesional banget kok. Apa istilahnya nggak ada jiwanya ini aplikasi webnya.
Cuma kopas dari tailwind atau tailwind UI atau daisy atau yang lain gitu.
- Dan kita karena kita developer ya, maksudnya kita bukan fokus di orang UI/UX, kita nggak sadar kayak buat kita.
Gak apa-apa. Aksesibility, kontras, kontras warnanya, telos-telos aja ke semua check.
Maksudnya link ada warnanya ya warna standar tailwind lah. Blue text dash, blue dash 500 lah. Bagus. Apa salahnya?
Kita kan nggak sadar ya. Cuma kalau misalnya produk kita udah terutama ya, kalau buat baru prototype banget kan,
ya nggak apa-apa ya. Sebenernya rata-rata nggak masalah.
Tapi kalau misalnya udah di launching untuk publik kan ada pertimbangan lain di luar pertimbangan teknis.
Cuma kalau misalnya produk kita udah sampai skala itu ya gimana pun waktunya ambil ekspertis orang UI sih.
Maksudnya kita berarti pertimbangan pilih UI Component Library dari awal yang harus bisa cukup fleksibel buat di modif.
Nah ini mungkin bedanya evolusi dari zaman bootstrap sampai zaman tailwind.
Kalau jaman tailwind itu kelebihannya kalau menurutku sih jauh lebih gampang dikustomize ya.
Maksudnya kalau mau bikin yang unik dan punya karakter, punya jiwa, blablabla.
- Masih bisa. - Apa? Bisa.
Tapi ya harus ada ekspertis orang UI-nya. Cuma maksudnya karena itu beneran token utility-nya,
konfigurasinya tuh detail banget. Jadi semua tuh bisa diubah dan dikustomize.
Semakin detail, semakin tinggi learning curve-nya. Semakin mudah dikustomizasi.
Semakin banyak kustomizasinya, semakin tinggi learning curve-nya, semakin berat aplikasinya.
Ya tadi kan Ivan bilang produk itu kan ada evolusinya kan. Mulai dari MVP, kemudian first iteration, second iteration, blablabla.
Makanya unicorn-unicorn kayak gojik akhirnya menerbitkan desain sistem sendiri kan. Grab juga sama.
- Itu semua. Itu tadi Uber bikin, IBM bikin. - Bisa jadi, coba pikirkan kayak diakuisisi sama group company,
mother company-nya. Tentu desain sistemnya harus ikut mother company-nya.
- Harus sama dong. - Harus sama kan. Jadi itu kan merombang.
Atau malah akuisisi yang punya desain sistem, itu kan kasusnya work OS itu loh.
Radix kan, radix UI kan dulunya pure open source-nya. Individual masanya apa, project pure open source.
Work OS itu sebenarnya gue kurang tahu sih produk inti mereka apa, ya pokoknya mereka parent company.
Jadi mereka akuisisi sana-sini lah, kayak butuh out system, ngambil nyamplok project open source
yang emang spesialisasinya di out. Nah, kelihatannya kasusnya work OS mengakuisisi radix ini,
kelihatannya mereka butuh, ya itu, butuh desain sistem yang konsisten, streamline, ya maksudnya yang emang fokus di situ,
mereka acquire radix UI deh. - Ngomongin radix ini, saya punya pertanyaan.
Ada kan istilah akhir-akhirnya, ada istilah headless UI, itu maksudnya apa ya?
- Itu yang kelihatannya, gak tahu loh, nanti serbil Google-nya aja. Ada-ada sering dengar sih.
- Radix atau Asiat-CN itu ya yang headless UI? Tailwind juga punya headless UI?
- Nah, kelihatannya nih, tebakan sekilas. - Unstyled UI component library.
- Jadi, sebetulnya ada basic styling-nya. Cuma yang kita bahas tadi itu kan ribet ya, Brad,
kalau misalnya opinionated banget styling-nya dan belum tentu semua bisa di-override. Ini sebaliknya,
jadi filosofinya adalah sangat mudah, dan emang kita ekspektin men-styling sendiri.
Kita bawa styling kita ke komponen mereka. - Oh, ngerti-ngerti.
Jadi antara UI library, jadi dia posisinya di tengah-tengah, antara UI library dengan utility,
antara tailwind dengan tailwind UI, di tengah-tengahnya ada headless UI, bener gak?
- Enggak. - Salah ya? - Dia tetap ngasih komponen sih.
- Pikirinnya adalah, pikirinnya kayak, pikirin kayak, apa tadi ya, apa yang sudah UI component, pikirin kayak end design,
tapi gak ada style-nya, basic style ada supaya bentuknya gimana, tapi gak ada apa-apa.
Kosong, plain, itu headless UI. Yang di ini.
A completely unstyled, but fully accessible UI component library. Decide to integrate beautifully with tailwind.
- Oh, headless ini kan produknya tailwind labs kan ya. - Iya.
- Kalau kita mau pake yang lain, ada react area, ada reactable, eh bukan ya, react area yang ini ya, yang accessible juga ya.
Mungkin approach-nya cara pikir headless-nya itu headless di sini, kan tadi pertanyaan headless itu maksudnya apa?
Itu maksudnya relatif mudah di styling. Jadi maksudnya ini kan biasa developer kan bikin solusi,
ternyata kena masalah dari solusi itu, bikin solusi baru untuk ngatasin masalah yang muncul dari solusi sebelumnya.
Nah ini kayaknya kasus kayak gitu, jadi UI component library yang generasi dulu, kan ya itu kelebihannya gampang dipake,
cuma sulit di-customize styling-nya, terutama kalau misalnya kita punya designer yang punya karakter sendiri,
dan itu emang penting kan buat biar produk kita punya karakter lah, punya karakter brand sendiri.
Nah dari masalah itu muncul ya gini, ini yang generasi UI component library baru.
Dan ini emang gampang banget di styling-nya.
- Apa kayak open props gitu juga ya? Open props, pernah tau kan? - Oh kalau open, pede open props itu?
- Itu utility, utility. Dia yang bikin ini. - Utilities FS.
- Kayak Tailwind. - Dia satu level sama Tailwind.
Uno, Tailwind, dan temen-temennya. - Itu yang apa? Adam Erjel buat itu kan ya?
- Iya, open props. Radix termasuk headless juga.
- Nggak tau sih, istilah headless-nya kurang tau. - Low level kali ya, low level ya.
- Cuma low level UI component library. Nah yang menarik di sini itu fokusnya adalah accessibility,
customization. Jadi yang kayak contoh aku di awal tadi, kan buat buka model itu kan,
bikin model dialog itu kan yang ribet adalah salah satunya ngatur kayak perkara focus trapping,
mana yang bisa, apa, fokusnya harus pindah ke mana, harus ke mana, itu kan ada standar-nya sendiri,
dan itu ribet banget kalau misalnya kita harus bikin sendiri. Nah ini udah diurus sama si component library-nya.
Perkara padding-nya gimana, warnanya apa, itu semua kita yang styling sendiri.
Mau pake tailwind, mau pake style component atau vanilla CSS atau apa, bebas.
- Oh, jadi kita bisa bikin times di atas komponen-komponennya ya? - Betul.
- Dia emang di desain menerima dimming dari parent-nya. - Kosongan, kosongan, bener-bener.
- Tepat kan bahasanya, kosongan. Abis itu bikin palette-nya sendiri, bikin palette, bikin tim color-nya,
terus tinggal di implement, jadi mungkin pakai CSS variable, jadinya CSS variable ya,
kita tinggal ngasih CSS variable-nya, itu semuanya sama.
- Oh, cuma kalau si Radix ini, Radix UI, mereka bikin kayak related, cuma terpisah opsional, Radix colors.
Jadi itu sebenarnya mirip kayak tailwind ya, ada misalnya blue 500, blue 600, itu kan ada hitungannya.
- Iya. Nah kalau kita, maksudnya kita belum punya nih, kasusnya kita belum punya sistem warna sendiri,
pengen gampang lah, pengen cepet banget, pakai aja dari sini.
Cuma kalau misalnya kita udah punya sendiri dari desainer kita, ya kita bisa punya kita sendiri.
- Bakal kayak ini dong yang kita kembali tadi nanya itu, setcdn itu juga sebenarnya kosongan.
- Mirip-mirip juga? - Kayaknya ya.
- Oh itu malah lebih, itu lebih ekstrim lagi sih, itu kan kodenya kita kepas sendiri komponennya, coba deh buka.
- Sebentar, ini ada setcdn.com, ada ui.setcdn.com.
- Kalau setcdn.com ini udah ada.. - Oh itu websitenya Disney.
- Oh namanya setcdn.com, proyeknya UI.
- Iya, jadi ini tinggal pakai... - Kayaknya nggak bisa dipakai yang setcdn-nya, itu manusia.
- Jadi dia udah bikin unit komponennya kecil-kecil.
- Ini generator, kita generate, abis itu kode komponennya sendiri, kita kopas buat, jadi ini coba deh.
- Oh. - Itu, dikasih kode kita bikin aja button komponen sendiri.
- Bikin button komponen sendiri, oh ininya maksudnya.
- Iya, itu import button, coba lihat ya importnya dari mana, dari itu sendiri.
- Add component UI button. Ini dari mana? Install kan? Install dulu kan?
- Iya. - Kita add button.
- Itu kayak generator, ntx blablabla, jadi itu bakal nge-generate file button.tsx.
- Oh gitu, oh jadi dia akan menambahkan kode di proyek kita, bukan di node modules.
- Iya, jadi dia bukan... - Ada source-nya kan, ada source-nya ada generator-nya.
Tapi komponennya taruh di tempat kita, jadi kayak mungkin kalau skala nih, kayak bootstrap,
mungkin kayak material UI yang versi lama, itu kan beneran sulit buat di overwrite.
Makin kesini nih, makin mudah buat di overwrite dan customize kayak misalnya radix UI tadi,
tapi kan tadi masih ya komponen, cuma komponennya di breakdown ke banyak primitive
yang lebih gampang dipindah-pindahin. Nah kalau ini lebih ekstrem lagi, lebih kesini lagi.
Jadi kayak ya udah komponennya beneran taruh di tempat kita semua.
- Berarti ini adalah tools buat kita nge-buat komponen library yang kita sendiri.
- Nge-generate komponen kita berdasarkan opini-nya dia.
Kan dia tetap punya opini bahwa apa yang dimaksud dengan button, sebuah button itu harus bisa...
harus bisa ada children-nya, harus bisa di-click ya tetap aja lah.
- Intinya ada, sudah accessible-nya sudah ada, opini-nya sudah ada gitu.
- Sudah ada aturan-aturannya ya. - Aturan mainnya sudah ada.
Dan yang keren lagi itu... - Tapi pakainya gimana, ya terus sendiri.
- Yang kerennya lagi maksudnya sudah pernah tau itu yang v0 tau?
- V0, tau kan kita udah pernah demo juga kan? - Iya itu pakainya...
- SexyDN. - SexyDN.
- SexyDN. - SexyDN.
- SexyDN. - SexyDN.
- SexyDN. - SexyDN.
- SexyDN. - SexyDN.
- SexyDN. - SexyDN.
- Coba cari, mungkin ada tulisannya SexyDN. - How to pronounce.
- How to pronounce. - Coba.
- Gak penting. - SexyDN.
- Landing page for ngobrolin web. Coba, coba.
- Landing page for video podcast about web technology.
- Kayaknya harus daftar deh. - Authentic ya.
- Iya lah, makan compute seberapa banyak itu.
- Gitu apa ini? Nggak konek kesini, pakai browser yang lain.
- Baru apa? Saya tuh udah cukup tau lama SexyDN UI ini.
- Baru sekarang mengerti maksudnya dan bedanya apa sama UI library lain.
- Iya, jadi luar biasa ya program ini.
- SexyDN. - Jadi baru ngerti sekarang lho.
- Nggak ngerti malam ini, sebelum-sebelumnya tuh nggak ngerti apa sih SexyDN ini maksudnya gimana gitu.
- Karena nggak pernah pakai kan. Cuma lihat-lihat doang, oh button-nya kayak gini, oh kart-nya kayak gini.
- Kayaknya biasa aja. Yaudahlah gitu, ngapain pakai? Pas liat gini kan, nggak, nggak.
- Kalau ini ada @/, kirain dia akan.. - Pas itu ada di tempat kita sendiri.
- Iya, kirain tadinya ini dari node modules gitu. Makanya nggak nyadar.
- Coba lagi. - Jadi menghilangkan masalah mikir overwrite.
Gimana caranya misalnya kita mau ubah cuma kart deskripsinya doang nih.
Karena beneran nggak sesuai sama yang use case kebutuhan kita.
Nggak usah pusing-pusing, kodenya di kita. Yaudah mau dibongkar, mau diganti, mau di customize, siapain bebas.
- Nah ini baru mengerti malam ini. Jadi ya mantap, mantap, mantap.
Oke, kita coba ya. Stop screen, screen lagi, oh kok jadi bertiga begini? Nah.
Share screen, window, v0. Eh ini udah login belum ya? Kayaknya sih belum.
- Sudah tuh ada fotonya. - Oh sudah, oh iya sudah ya.
- Itu udah dibikinin juga, lagi dibikinin. Kayaknya si chat Cn-nya itu di-recruit sama Vercel ya, kalau nggak salah.
Gosip gitu, gosip web. - Gosip, gosip web.
- Beneran nggak sih? Atau cuma go doang? - You are in QEWI. Kamu gratisan.
Jangan minta yang... - Jangan minta cepat-cepat.
- Terlalu spesial. - Weh, weh, weh, weh. Tuh kan Jumbotron kan, Jumbotron kan? - Ini, ini tailwind sekali.
- Iya itu tailwind-tailwind-an. - Weh latest episode, eh keren juga loh.
- Udah deh kita bikin aja beneran. - Bikin aja di sini ya?
- Nanti next episode kita beneran ngoding bareng sejam gitu.
- Udah ya panjang, dari sini aja makanya ini.
- Ada sidebar-nya gitu, floating bar-nya gitu, popular category.
Weh, sudah selesai ya? - Udah.
- Ada tiga opsi lagi. - Itu ada tiga opsi di bawah.
- Opsi kedua, oh dia generate lagi ya? Meet the host.
- Weh, Jumbotron is a Cessna developer.
- Yang ketiga, oh yang ketiga kayaknya, ini apa nih? Gambar kali ya?
- Gambar, iya. - Gambar.
- Wah ini sederhana tapi bagus-bagus ya? - Yang kedua sih bagus, yang kedua bagus ya.
- Kedua ya? Lebih cakep ya? - Iya.
- Iya, coba kode apa hasil kodenya? Kalau kode, suruh kanan atas.
- Next.js lah pasti? - Iya, iya.
- Iya, iya. - Oh enggak, ini ini ShadCN.
- Oh iya, itu ShadCN banget ya, persis banget. - Yes.
- Nah mungkin karena apa? - Ini langsung nih?
- Ntx, venol, add. - Modular dan primitif.
Kayak dipotong-potong jadi basic, gampang diintegrate buat generator kayak gini ya.
- ShadCN UI-nya. - Aku menangis melihat ini panjang sekali.
Ini apa ya? Link, oh link yang ini ya kali ya.
Subscribe, oh di bawah ini, watch latest episode.
Watch latest episode aja yang putih begini panjangnya begini ya.
Tapi kan ada yang, apa, yang untuk mobile gitu ya.
- Mungkin buat layout-layoutnya. - Iya, udah responsif.
- Bisa dark mode juga, ada dark mode. - Coba caranya.
- Mana dark mode? - Itu yang di atas, iya itu tuh, ten.
- Ini? - Iya, klik.
- Coba klik. - Enggak, content.
- Oh bisa dikustomise fontnya juga ya? - Iya.
- Oh gitu, Libre Franklin, pakai Jetson.
Pasti nggak cocok, udah cocokin tadi.
- Ada lobster nggak? - Gak ada, nggak ada.
Laura, nggak, tetap Libre, udah paling bagus.
Paling cocok bukan paling bagus.
- Ada pasti. - Gak ada.
Star, Flag, oh ini kalau tablet, kalau mobile.
Ford, ini di sininya nggak ada ya.
Oh nggak ada, tapi keren ini.
Edan ya, gimana dong kita.
- Iya kan tetap butuh dikustomise. - Desainer akan tergantikan.
Desainer akan tergantikan, developer masih aman.
- Eh kalau kasusnya ini, lebih nggak aman developer sih daripada desainer.
Ya itu kalau buat branding kan butuh desainer.
Untuk ada soul-nya gitu ya, ini mungkin buat developer aja
yang enggan meng-hire desainer ya pakenya begini ya.
- Oke kita balik lagi ke... - Tapi hasilnya juga gitu-gitu doang jadinya.
Iya jadi pasaran juga kan ujung-ujungnya kan.
Kita kembali ke si Sat Sien ini.
Dia adalah desain engineer, pantasan ya. Engineer yang bisa desain.
Namanya siapa? Nama aslinya siapa?
- Sat Sien. - Sat Sien.
- Sat Sien. - Serius?
- Sat Sien. - Dia diversal sekarang bener.
- Tuh. - Diversal.
Nggak dia ada nama aslinya.
- Emang Sat Sien namanya ya? - Dia nggak mau ngasih nama aslinya gimana.
- Nggak, nggak boleh. Harus di-stalking sampai apa.
- Dia orangnya privacy.
- Tau dia lihat soalnya. - Tau dia lihat soalnya.
- Siapa? - Ya coba aja buka Twitter-nya.
- Itu ada ShedXN lagi, ShedXN. Apa lagi ShedXN?
- Itu pemberiannya? - Itu ada ShedXN tuh.
- Oh UI component. - Coba klik apaan tuh?
- Apa lagi? - Kok sama ya ininya?
- Ini kayak ini nih apa namanya?
- ShedXN is forked from ShedCN UI.
- Oh, forking-annya.
- Forking-annya. Kenapa di-forking? Alasannya apa?
- Ya itu karena pecah dulu.
Keterangannya.
- Namanya Pansos. Pansos-pansos.
- Desain tuh. - Experimental.
- Coba bikin ininya CLI tool-nya.
- Oh bisa pakai custom component registries.
Maksudnya kalau tadi kan NPX at ShedCN button,
button-nya cuma dari tempat si bikinan di ShedCN itu kan.
Nah kalau ini bisa pakai apa?
Component registriesnya bisa pakai custom registries
for personalized or public sharing of components.
Prinsipnya sama, tapi kayak source,
apa sumber registry yang dipakai buat kodenya bisa di-customize.
- Saya masih mencari-cari nih.
Seksinya ngobrol di web, itu yang di tadi, VNOL tadi.
Mana ngobrol di web?
Yang ada tulisan ngobrol di web?
- Nggak. Ya maksudnya diganti aja nama section-nya.
- Oh kirain. - Jadi ngobrolin web.
- Dia udah bisa nebak bahwa saya mau bikin landing page untuk ngobrolin web.
- Belum secembih itu kayaknya.
- Hebat sekali kalau bisa begitu.
Nggak ya. Oke, balik-balik.
ShedXN. Oh enggak, kita tadi mau cari namanya ya.
Yaudahlah lupakan lah ya.
- Stalking nama asli ShedCN.
- Iya, oke.
- Next. Apa lagi nih? Kita bahas apa lagi?
- Apa ya? UI Component Library yang favorit atau pernah dipakai lainnya.
- Oh iya. Mantin, mantin. Mantin itu bagus kan.
- Mantin sama Cakra. Itu yang...
- Cakra. Oh iya Cakra.
- Mantin dan Cakra itu dari segi apa?
Filosofi pendekatan sih nggak se-modern Redix dan ShedCN ya.
Cuma, ya lumayan lah aksesibelnya udah lumayan oke, customisable-nya, styling-nya juga udah lumayan oke juga.
Banyak yang pakai dan banyak-banyak contohnya.
Kalau Cakra, Cakra sama mantin itu nggak tahu kalau opini ku pribadi adalah secara estetik itu kayak lebih polished aja sih.
Kalau bootstrap kan style-nya kayak ketahuan agak kuno lah.
Maksudnya agak outdated ya dari segi trend kalau bootstrap tampilannya.
Nah kalau si Cakra sama mantin ini ya lebih modern lah.
- Cakra.
- Apa ada bahas Cakra UI kan, Julie ya?
- Iya, Cakra. - Bukan Cakra kan.
- Cakra semua.
Cakra UI, ini khusus React ya?
- Iya sih, nggak tahu kalau ada forking-nya. - Reakt application.
- Kayaknya ada forking juga deh. - Oh inget kontaknya sih tentang...
- Ada view-nya. - Tentang Cakra.
- Ada view nggak di sini? - Oh ada view.
- Apa tuh? - Tau.
- Panda, terus ini bikin Panda juga kan?
Ini Cakra UI view.
- Tau.
- Berarti udah ada view ya?
- Iya. - Cakra UI itu katanya aslinya designer.
Jadi makanya itu tadi kenapa estetikanya secara UI mungkin lebih polis.
Jadi dulunya aslinya dia UI designer, bukan developer.
Cuma nggak inget kenapa lah.
Maksudnya dia pengen bikin apa?
Ya kalau developer bikin, developer yang asli bikin kan kadang
set of design-nya rada fales ya.
Nah terus sih. - Fales.
- Masih yang bikin Cakra UI ini pengen mewujudkan ya kayak visinya dia.
Jadi dengan sensibilitasnya dia sebagai UI designer.
Tapi dia pengen mewujudkan dalam bentuk component library lah.
Akhirnya dia belajar sendiri jadi developer beneran.
- Dia belajar sendiri. - Dan bikin ini.
- Wow. - OOT, ini pakai docusaurus.
- Tau. Itu kasut ya. - Itu belum membahas ya.
Itu ada apa namanya?
Ada itu, uang kita mau bahas dokumentasi kan.
- Oh iya.
- Nah itu juga component library nggak sih?
Atau itu framework ya?
- Framework untuk website dokumentasi.
Iya itu menarik tuh. Astro juga bikin kan namanya Starlight.
- Iya. Starlight. Iya.
Spare feed juga ada. Yes.
Cakra. Wah menarik ya story-nya.
Ini yang sempat ada drama sama Telwyn bukan ya?
Yang saling meng-copy-copy.
- Oh gitu. Beritahu malah. - Kalau nggak salah.
Jadi Cakra apa? Pokoknya yang ini kan dia bikin panda kan.
Nah itu kalau nggak salah ada entah siapa yang meng-copy copyright siapa.
Maksudnya tulisan yang di landing page siapa itu saya nggak tahu pasti.
Tapi sempat ada percakapan di Twitter, ya biasa lah ya, ngajak perang gitu.
Yang ngasih tunjuk bahwa Telwyn sempat mencatut misalkan kayak gini nih.
Dicatut sama Telwyn di dokumentasinya atau di mana gitu.
Begitu juga sebaliknya.
- Kayak di kopas mentah-mentah? - Iya.
- Oh bukan. Coba dikomentasikan. - Windy ya?
- Bukan. Namanya Windy.
- Namanya aja berapa? - Saya salah ya.
Kalau Windy CSS emang dia dari Telwyn.
Terus juga sempat kan yang bikin siapa?
Yang si, aduh lupa.
Yang salah satu kontributornya Vue dan Nux.
Siapa itu? Yang Anfu.
Dia juga sempat, ya Anfu.
Dia sempat ini juga kan.
Sempat bilang kalau Telwyn sempat meng-copy tulisan yang ada di dokumentasinya.
Di kopas mentah-mentah dan ketahuan.
Oh Uno CSS ya.
Wah seru ya. Tidak hari ini tanpa drama.
Sayangnya udah nggak Twitter.
- Sekarang ini aja apa namanya yang baru ngetrend kemarin?
Jurnal aja di-copy, dimasukin cgpt, terus dipublish jurnalnya.
- Apa jurnal? - Sekarang banyak.
Jadi ada yang kalau ngomongin AI, cgpt.
Banyak sekarang orang-orang memanfaatkan buku.
Jadi dia meng-generate buku.
Summary video.
Bukan summary, buku.
Jadi si cgpt suruh bikin buku.
Tolong bikin buku tentang mindfulness gitu kan.
Bikin lah tuh banyak.
Abis itu dia mencatut nama autor.
Autor yang lain yang udah terkenal.
Jadi di jebak kita.
Ya kita ini di jebak, oh ini yang bikin buku ternyata Ivan nih.
Gue kenal Ivan nih, beli ah. Ternyata bukan.
Ternyata itu hasil generaitan dari AI.
Wah itu parah banget.
Itu salahnya berarti dua macem kan.
Maksudnya nipu bikin jualan yang hasil generate cgpt.
Dan kedua impersonation kan.
Maksudnya dia mengataskan si pengarangnya.
Padahal itu bukan dia.
Betul, jadi dua.
Dan kan sekarang istilahnya udah lebih demokratis kan.
Jadi kalau kita mau publish buku, kita bisa taro di Amazon.
Yang e-book gitu lah.
E-book itu kan bisa publish di Amazon.
Kita bisa tulis siapa aja kan.
Misalkan penulis yang terkenal siapa ya.
Misalkan Adi Osmani gitu.
Tau nya bukunya bahasa Indonesia.
Ya kan bisa aja kan kita daftar sebagai Adi Osmani.
Terus emang gak ada verifikasinya sama sekali ya berarti.
Misalnya tiba-tiba ada yang bikin cara beternak lele gitu.
Terus atas nama Risa Fahmi gitu.
Wah ya boleh, yang percaya jangan-jangan ya.
Gak berarti kita semua harus sering ngecek nama kita sendiri gitu ya.
Di platform.
Kalau terkenal.
Kalau gak terkenal ya mungkin gak ada yang mau mencetak juga.
Kalau pasti saya bikin buku "Ternak Lele" dengan menggunakan LXC.
Oh ide!
Ya.
Anyway.
Oh iya iya iya.
Telwin juga ada yang drag-and-drop.
Udah mulai banyak kan ya.
Nah ini ada yang bikin buat drag-and-drop
based on capra UI.
Hmm, gimana cara pakenya?
Ya di drag-and-drop.
Dari kiri itu yang ada alert gitu.
Oh iya, ok. Button.
Button, button. Nah tuh.
Loh gak bisa digerakin.
Oh ini dulu, container dulu, container.
Mana container?
Container dulu kan baru di dalamnya button.
Loh gak bisa di...
Nah.
Nah.
Sebelahnya mau ada button lagi.
Nah.
Nah.
Ini bisa di...
LG.
Iya.
Bisa di layout.
Button text-nya bisa diubah.
Flex.
Reverse.
Loh gak bisa.
Ini CSS di...
Di ini.
Di sidebarin.
Bingung ya?
Iya.
Color.
Wuih.
Oh ini color ya, bukan background color.
Maksudnya ini.
Background, nah itu.
Background.
Cuma ini usual sih buat orang yang bukan developer ya.
Mau saya apa?
Mau bikin proof of concept atau apalah.
Atau bikin wireframe atau bikin apa?
Cuma kebetulan aja pakainya chakra UI.
I see.
Oh dia pakai chakra UI ya.
Terus bisa di-export dari code gak?
Oh itu export code ya.
Harusnya bisa.
Export code.
Itu di kanan.
Mau pakai JSX, TSX, TSX.
JSXA.
Wuih langsung code sandbox langsung.
Wuih langsung bikinin code sandbox.
Wow.
Bagus ya.
Apa UX-nya?
Developer Experience brand UX.
DevX.
Kan user-nya adalah developer.
DevX.
Di sini kan kita sebagai user productnya OpenChakra.
Color twitter 500.
Iih jelek.
Oh dia mau mewarnai.
Ini adalah problem saya ya.
Jadi kalau biasanya kan kalau UI library itu kan keren-keren ya.
Ada lagi ada contohnya gitu kan.
Entah kenapa setiap saya pakai yang dibayangkan itu keren banget.
Begitu digabungin jadi biasa aja.
Kok jadi aneh ya.
Kok jadi lebih jelek daripada contoh ya.
Itu sering terjadi.
Kalau ngeliat di sini sih bagus.
Karena dia yang bikin juga.
Itu standard problem developer.
Oh iya ya.
Standard ya.
Karena bikin kan dia.
Jadi dia tahu caranya kan.
Kalau pengen yang lebih flashy, harus yang pilih yang opinionated.
Khususnya DCUI deh.
Kalau aku masalah itu baru terpecahkan.
Maksudnya pengen yang ya misalnya pengen quick prototyping ya.
Cuma pengen yang kalau orang liat wow bagus ya.
Pengen kayak gitu.
Apalagi tujuannya termasuk itu wow bagus ya.
Itu pakai DCUI.
Cuma ya opinionated.
Tapi ya cukup gampang di override kok.
Cuma karena ini based on tailwind.
Ya apa?
Expectasinya adalah harus pakai tailwind.
Akan lebih repot override-nya kalau kita nggak pakai tailwind.
Cuma maksudnya apa?
Dari tingkat apa ya?
Flashiness.
Polished dan flashy kayak yang orang liat wow bagus.
Iya iya iya.
Ini keren.
Ini keren.
Dan kita bisa tambahin tailwind juga tetap ya.
Walaupun misalkan ini kan udah dibungkus ke dalam ini ya.
Jadi dia ngumpuk ke config tailwind.
Jadi nggak bakal flashing.
Jadi kayak plug-in gitu ya seolah-olah ya.
Ya, literally plug-in tailwind.
Jadi kita install-nya tuh sebagai plug-in tailwind.
Tapi ini nggak butuh JavaScript kan ya.
Bisa dipakai di semua framework doang ya.
Bisa.
Ini hanya CSS ya.
HTML colosan pun bisa kalau mau.
Oke, mantap-mantap.
Oh ini keren.
Kalau teman-teman mau main-main AI, terus butuh chatbot.
Bisa langsung pakai ini aja.
Udah ada warna, udah ada kiri-kanan.
Tinggal pikirin yang ini nih.
Containernya gimana.
Mau sebesar apa atau sekecil apa.
Ini nih pamer project pribadi kemarin pas apa?
Gemini Sprint itu loh.
Wah ini keren nih punya ikan nih.
Demo, demo, demo.
Ini pakai Desi.
Iya Desi UI.
Lumayan kasi kan.
Enak dilihat kan.
Dan itu beneran apa?
UI-nya last minute.
Kayak beneran cuma 1 jam lah buat UI-nya.
Karena yang sebenarnya sepanjang weekend.
Jumat, Sabtu, Minggu.
Diseling makan.
Jumat malam, Sabtu seharian.
Diseling makan, diseling dan lain-lain.
Minggu juga seharian.
Tapi kan sebenarnya waktunya kepake bikin aplikasinya dan bikin apa?
Interaksi Gemini AI-nya.
Nah pas udah terakhir-terakhir nih udah last minute.
Udah injuri time.
Pengen bagusin UI-nya itu pakai Desi.
Coba at your own, at your own dong.
At your own.
Apa nih?
Find soulmate.
Coba-coba ketik siapa tau.
Finding soulmate.
Finding soulmate.
Finding your soulmate.
Coba, get diagram.
Diagram.
Bisa, bisa nggak?
Tidak bisa sih.
Ah terlalu safe ini jaman AI-nya.
Bisa bahasa Indonesia nggak?
Eh ininya ilang.
At your own.
Harus refresh ya?
Oh iya harus refresh.
Cari jodoh.
Cari jodoh.
Bisa nggak?
Oke.
Get diagram.
Gak bisa.
Jangan-jangan nggak bisa semua.
Jangan error nih.
Jangan jangan ya.
Create website.
Create how state works.
State lagi.
React.
US.
US state.
Coba oke.
Ini udah niche.
Gemini.
Wah ada nih.
Itu doang.
Create website bisa sih.
Create website relative normal sih.
Coba apa?
Create website.
Create website.
Oke.
How to create website?
Kau create website aja.
Website.
Create website.
Uis.
Nah itu relative normal lah.
Cuma finding soulmate.
Kok dia nggak bisa ya?
Yes.
Gemini API-nya open kah?
Sekarang freemium.
Jadi ada batasan query.
Per hari ya.
Temen-temen bisa cek di AI studio.
Gemini AI.
Bisa dapetin key apa?
Akses key sama secret key di sana.
Cuma mulai 2 Mei besok.
Itu harus disambungin ke Google Cloud Project.
Ke Google Cloud.
Nah kan itu sebetulnya.
Oh ya.
Udah harus ya.
Google Cloud itu kan ada free credit-nya ya.
Maksudnya ada free tier-nya lah.
Nah udah.
Cuma maksudnya masuk ke limit-nya itu.
Jadi kalau buat nyoba, ya bisa gratis.
Cuma kalau udah banyak pake, nggak bisa.
Nah soulmate bisa.
Coba deh refresh.
Soulmate doang tapi.
Soulmate.
Gimana diagramnya?
Gampang banget teori-nya.
Gampang.
Ya betul sih.
Tapi yang gitu nggak usah pake nanya AI.
Nah itu biar kelihatan polish dan acceptable lah.
Secara sense of design nggak falus-falus banget.
Ini membantu banget DCUI.
Akordionnya juga dari DCUI.
Coba deh learn more.
Learn more.
Kanan, kanan.
Kanan, kanan.
Atas.
Kanan, atas.
Atas.
Bawahnya kan akordiona.
Itu beneran no effort.
Beneran drop.
Tinggal pake apa?
Dari DCUI doang.
Soulmates.
And how to find yours.
Ada itunya instruksinya tuh.
The science of soulmates.
Itu kalau mau lihat sesuatu yang kompleks.
Gue paste.
Oke.
Details.
Mitochondria.
Iya coba masukin di itunya tadi.
Kok 404?
Nah masalahnya.
Ini suka halu kalau suruh ngasih link resource yang eksternal.
Kadang bisa kadang nggak.
Diagram blah blah.
Diagram mify.
Diagram mify.
Oh ini ada nih, back aja.
Nah.
Mitochondria.
Coba bentuknya gimana.
Details.
Wah.
Nggak bisa di zoom ya?
Nggak bisa.
Featurnya belum sampai situ.
Kinta segitiga gitu.
Mungkin akan roommate ya kinta segitiga.
Bisa love triangle.
Ya segitiga doang nanti hasilnya.
Anyway ini udah kemana-mana loh.
Topiknya.
Gitu.
Buat Valeria yang penasaran sama Jim ini.
Ada tutorialnya.
Saya bikin tutorial tertulisnya.
Jadi kalau mau cek bisa.
Saya juga punya indinya.
Nah coba demo demo.
Saya pribadinya silahkan.
Hah dia mau.
Nah ini bedanya.
Bedanya.
Eka sama saya kalau saya buatnya pakai.
Vanilla CSS.
Ya kan.
Kalau developer bikin nggak pakai UI library.
Jadinya begini.
Jadinya begini.
Kalau nggak pakai DCUI juga kayak gini.
Lebih parah malah.
Jadi begini ya kan.
Terima kasih DCUI.
Ini Vanilla CSS.
Vanilla JavaScript.
Semuanya Vanilla nggak pakai framework.
Kasih tantangan buat penonton.
Fork ini.
Jadi UI library jadi keren.
Terus 10 request.
Tapi sebetulnya kalau buat orang yang punya skillnya.
Ya kan nggak perlu framework apa-apa sih.
Difix dari CSS juga busa.
Nah cuma masalahnya kita fokusnya.
Bukan ekspertis utamanya.
Kan bukan di UI design ya.
Bukan di visual UI.
Iya.
Nah ini kan.
Ini.
Saya pakainya.
Server, create server.
Terkesan.
Routingnya begini pakai Iflu.
Nggak perlu.
Cuma satu halaman doa.
Kan satu halaman doa.
Nah kan nggak pakai routing.
Macam-macam juga routingnya nggak banyak.
Betul-betul.
Routingnya sedikit. Jadi nggak pakai framework.
Cuma perlu target formnya aja kan.
Cuma perlu target formnya aja kan.
Saya kopasnya dari Happy Hughes.
Kita bikin buku.
Ini template-nya.
Nah saya ngambil desainnya dari sini nih.
Tuh kelihatan kan mirip kan.
Cuma diganti ini aja.
Nah ini nih.
Ngambil ininya doang.
Iya ngambil ininya doang warna-warnanya.
Habis itu di-convert ke CSS.
Cuma ini pet peeve sih.
Kalau kita lihat contoh gini kayaknya
Wow Fleshy bagus dan profesional.
Pas kita bikin sendiri.
Jadi jadinya mendang mending tadi.
Coba bandingkan.
Bandingkan dari contoh.
Coba mending.
Mending DCUI.
Atau vanilla CSS.
Apa nih?
CSS framework ya.
Atau library.
Oh di aplikasi.
Sambil sharescan lah.
Oh iya nggak sharescan ya.
Lupa. Mending apa tadi?
Vanilla CSS.
DCUI atau?
Vanilla CSS.
Atau DCUI.
Ini ngeri error sih.
Mending DCUI.
Lebih cepat dan mudah digunakan.
Menyediakan banyak komponen yang sudah jadi.
Konsisten dan terdokumentasi.
Mendukung mode gelap.
Vanilla CSS juga bisa, mode gelap.
Cuma bikin sendiri.
Bikin sendiri, jadi lambat.
Oke, ada lagi yang mau dibahas.
Ini udah terlalu jauh kita.
Dan waktunya juga sudah terlalu jauh.
Kemana-mana.
Itu aja lah.
Ya, set cn.
Kalau untuk spell, spellkit ada yang namanya Skeleton.
Skeleton.tf ya.
Ini juga cukup menarik.
Buat saya lagi ngulik-ngulik.
Apa namanya, ngulik-ngulik.
Spell.
Spell ini jarang banget ya.
Ada UI library-nya kan.
Pengen deh, set cn ada.
Atau mantin, atau tadi cakra.
Set cn mah itu.
Agnostik framework.
Generik ya, sorry. Bukan set cn.
Mantin, cakra.
Yang ada di react tuh jarang.
Cuma kalau mantin cakra itu react center.
Jadi,
kalau gue sih selama,
kalau lagi pake spell tuh andalanya
ya itu kalau kebetulan pake tailwind,
antara tailwind UI atau DC UI,
kalau di war itu
karbon.
Karbon, oke.
Satu lagi, sudah cukup banget.
Satu lagi, ada yang menarik
selain open UI.
Kita bahas open UI dulu kali ya. Terakhir ya.
Dua terakhir.
Open UI, teman-teman ada yang tau open UI?
Ini dia.
Open UI adalah inisiatif baru ya.
Itu sebenarnya
W3C,
Community Group, yang
mendiskusikan UI Komponen apa sih.
Kayak mereka tuh memetakan.
Kan tadi kita banyak lalu bahas UI Komponen Library.
Semua pasti punya button.
Ada yang punya
jubotron.
Ada yang punya alert.
Pasti semua punya card.
Terus ada yang punya itu tadi yang Ivan bilang.
Select, drop them.
Open UI ini adalah
komunitas
di bawah W3C
yang memetakan
macam-macam
kayak pola sih.
Jadi mereka menganalisa
macam-macam desain sistem yang terkenal.
Terus ya itu memetakan
komponen apa sih yang paling banyak dipakai
dan dibutuhkan di user.
Contoh-contoh penggunanya, gimana
koncernnya apa. Ini undisain semua?
Iya, ini undisain.
Nah karena mereka
komunitas W3C
ada kemungkinan misalnya kalau misalnya banyak
dipakai nih. Kedepannya
bakal di-propose buat jadi web
komponen misalnya.
Atau minimal jadi
inspirasi, jadi referensi misalnya
ya kayak
dialog modal itu kan
sekarang udah ada di browser ya.
Yang Native Web API.
Nah itu kan inspirasinya dari
pola-pola yang
ada di UI
Component Library yang sudah ada sebelumnya.
Nah ini bisa jadi referensi sih.
Dan sebenernya seru aja sih.
Kalau kita lagi lupa namanya apa
cari aja di situ.
Oh iya, contoh-contoh ini ya. Contoh-contoh UI
yang sering digunakan.
Atau kita pengen nunjukin
orang nih misalnya.
Story ya kali ya.
Kumpulan.
Koleksi.
Oke menarik-menarik.
Ngomongin web komponen mungkin kalau
menurut saya justru web komponen
ini cocok sekali dibikin untuk
Component Library supaya
generic bisa dipakai di semua framework.
Ada. Salah satunya
adalah Shoelace.
Shoelace ini sekarang
dia berubah menjadi namanya Web Awesome.
Web Awesome
adalah dari tim Phone Awesome.
Mereka bikin framework baru.
Web Awesome.
Web Awesome.
Bukan framework, UI
Library baru. Jadi kayak bikinnya
pakai web komponen seperti ini.
Button, card,
ada alert,
pages, dan lain-lain tuh.
Hasilnya jadi
Shadow Domka
atau
hasilnya tinggal kita pakai gini aja.
Ya jadi Shadow Dom.
Web Komponen.
Ya kayak, enggak tau ya.
Kalau dia bilang turunannya
Shoelace, ya kita lihat.
Ya Web Komponen.
Style ya. Shadow Dom.
Hasilnya apa?
Nah, cuma kalau Web Komponen
itu agak males di
styling-nya sih. Kan
kalau nggak dibuka,
nggak bisa di styling dari luar.
Nggak tau kalau ini udah punya
mekanisme sendiri, cuma nggak bisa
di override, ditumpuk
segampang itu kan style-nya.
Kalau udah
ngomongin browser, berarti
ya Web Komponen jadinya jadi Shadow Dom.
Kalau jadi HTML
nggak mungkin dia nampilin ini kan ya.
Ini dia baru buka Kickstarter.
Jadi belum ada produknya.
Baru coming soon kayaknya.
Tapi ada yang free, tenang aja.
Seperti biasa ya.
Tapi Kickstarter-nya udah selesai.
Tapi udah tercapai belum target-nya?
Udah, udah. Jauh banget.
Tercapai.
Terus ntar drama lagi. Orangnya kabur
atau apa?
Perpecahan, ayo.
Perpecahan.
Oke, nah.
Udah, cukup?
Cukup ya. Cukup.
Banyak. Ini tadi ada
masukan dari Watashi.
Watashi wa Watashi.
Bahas Deno. Kita udah sempat
bahas belum ya? Udah kan ya.
Sedikit-sedikit sih ya. Nggak detail.
Kita bahas Deno.
Kita bahas Not Deno sama
Boon, kan.
JavaScript Engine itu masalah ya?
JavaScript Runtime.
Tapi nggak bahas Deno secara
spesifik.
Karena kita belum ada yang pake Deno.
Jadi kita nggak tau juga ekosistemnya ya.
Mungkin kalau ada
temen-temen kenalan.
Ada yang pake Deno, boleh ya.
Kita interview. Kita ajak
ngobrol lah. Karena kita penasaran
juga sama Denonya ini.
Terutama kalau di production ya.
Maksudnya kalau cuma buat Hello World
ya udah
apa? As expected.
Tapi maksudnya lebih ke
kalau udah
di ranah praktek kan kayak suka
ada hal yang oh ternyata nggak bisa ini
padahal perlu gini. Atau mungkin ada behavior
yang beda yang maksudnya yang perlu
kita tau. Nah, pengen
penasaran sama
itu sih.
Pake pengalaman-pengalaman.
Ingat Deno, jadi
ingat baru apa?
Si Ryan Dahlnya baru launching
produk baru. Bikin lagi?
Bukan. Ini untuk
registri.
Untuk menemani
NPM.
Menemani NPM dalam tanda kutip.
Jadi pikes-pikesnya.
Made for TypeScript
and ESM. Karena kan kalau
NPM kan ada
apa? Ada macem-macem ya nyampur-nyampur ya.
Ada ESM, ada
apa?
Tergantung entry point,
kalau ini dia
spesifik buat ESM dan TypeScript.
Jadi nggak ada lagi itu ya?
Yang apa?
Bundler.
Bundler biasa.
Iya.
Tapi dia tetap ngambilnya dari NPM.
Gak apa namanya? Bukan
Oh cuma dia pakai entry point yang
ya apapun itulah type
scriptnya.
Siapin internet kencang.
Internet kencang
buat apa?
Jangan
kapan itu.
Udah ganti
beberapa kali ya. Oke.
Mungkin untuk malam ini sekian dulu.
Sebelum kita makin ngantur, kita ketemu
lagi minum-minum
topik-topik yang berbeda. Jangan lupa
kalau temen-temen punya saran topik,
bisa kesanain
dot ngobrol in web. Tadi ada yang
menyarankan
bahas Deno, ada yang menyarankan bahas Elixir,
silahkan.
Kita diskusi disana.
Kalau temen-temen punya pertanyaan
seputar misalkan, wah ini
mau UI library yang mana ya? Yang keren ya?
Kita bahas setelah acara ini selesai,
bisa disitu juga.
Gak mesti harus bahas topik ya.
Bisa bahas juga misalkan
ada library yang bagus,
yang mungkin
kita jajal, kita coba.
Ya bisa disajis disana.
Oke. Untuk malam ini, sekian
dulu. Terima kasih banyak buat semuanya yang
sudah menemani kita
ngobrol-ngobrol dan belajar bareng malam hari ini.
To-de-iler-nya banyak sekali
malam ini ya.
Dan ngelantur juga kemana-mana.
Oke. Ketemu lagi minggu depan.
Selamat malam. Bye-bye.
Deskripsi asli dari YouTube
Video ini membahas tuntas tentang UI Library! Kita akan bahas keuntungan dan kerugiannya, kapan sebaiknya tidak digunakan, dan pengalaman developer yang dilarang (atau diharuskan) menggunakannya. Simak juga pertimbangan dalam memilih UI Library, komponen penting yang harus ada, dan perbandingan berbagai UI Library populer seperti Bootstrap, Tailwind UI, Material UI, Radix UI, Mantine, DaisyUI, Shadcn, dan AntD. Temukan UI Library favoritmu dan pelajari cara memaksimalkannya untuk membangun UI ya Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
11 Agu 2026
Local Development Server
Episode ini membahas local development server, dari XAMPP yang legendaris sampai pendekatan modern berbasis kontainer. P...
13 Apr 2023
Ngobrolin Format Warna
Topik malam itu terdengar sepele tapi tak terhindarkan: menentukan warna di CSS. Sesedikit apa pun kita berurusan dengan...
7 Des 2022
Ngobrolin Font
Font dipilih sebagai topik justru karena jarang dibahas orang, padahal separuh isi web adalah teks. Ia bisa membuat hala...
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 .