🗣️ Ngobrolin HTMX
Ringkasan Episode
Bantu KoreksiEpisode Ngobrolin ini membahas tentang HTMX, sebuah front-end framework yang unik dengan pendekatan HTML-first. Berbeda dengan framework modern seperti React atau Vue yang berbasis JavaScript, HTMX memperluas kemampuan HTML melalui atribut khusus dengan prefix HX-, memungkinkan elemen HTML mana pun untuk melakukan HTTP request (GET, POST, PATCH, PUT, DELETE) tanpa perlu menulis kode JavaScript tambahan. Konsep kuncinya adalah "HTML over the wire" di mana server mengirimkan HTML sebagai respons yang kemudian langsung di-swap ke DOM, bukan JSON seperti pada SPA modern. Para pembicara juga menunjukkan demo live coding menggunakan Hono sebagai backend server untuk mendemonstrasikan fitur-fitur HTMX seperti hx-get, hx-post, hx-target, hx-swap, hx-indicator, dan hx-boost untuk membuat Single Page Application sederhana.
Poin-poin Utama
- •HTMX adalah front-end framework yang menggunakan pendekatan HTML-first dengan menambahkan atribut HX- pada elemen HTML, memungkinkan interaktivitas tanpa menulis JavaScript client-side yang kompleks.
- •Konsep "HTML over the wire" - server mengirimkan HTML sebagai respons (bukan JSON), yang kemudian langsung dirender ke browser, mengurangi kompleksitas state management di sisi client.
- •Creator HTMX adalah Carson Gross, seorang dosen Software Engineering di Montana State University, yang juga menulis buku "Hypermedia Systems" yang tersedia gratis untuk dibaca online.
- •HTMX mendukung berbagai metode HTTP (GET, POST, PATCH, PUT, DELETE) dari elemen HTML apa saja, tidak hanya anchor dan form seperti HTML tradisional.
- •Fitur penting HTMX meliputi: hx-target untuk menentukan elemen yang akan diupdate, hx-swap untuk mengontrol cara swapping (innerHTML, outerHTML, beforebegin, afterend, dll), hx-indicator untuk loading state, dan hx-boost untuk progressive enhancement.
- •HTMX dapat dikombinasikan dengan berbagai backend (Go, PHP, Python, Node.js) dan framework lain seperti Astro untuk API routing yang baik, serta Alpine.js untuk state management client-side tambahan.
- •Untuk fitur real-time, HTMX mendukung polling, SSE (Server-Sent Events), dan WebSocket melalui extensions, menjadikannya alternatif yang menarik bagi developer full-stack atau backend yang ingin mengurangi kompleksitas frontend.
Halo, halo. Sudah ada? Nah, sudah ada. Sudah live tapi orang-orangnya belum.
Halo, teman-teman. Ada sedikit kesalahan teknis. Ini produk baru lagi, produk baru.
Kita pakai restream. Karena pakai restream kan ngeri. Jadi harus di-adjust lagi ya.
Kaga bisa sekali. Publish dong. Nggak tahu. Untungnya video ID-nya masih tetap sama. Jadi nggak hilang yang tadi.
Bisa pakai tetap. Jadi teman-teman di sini nggak perlu pindah ke video yang lain.
Gimana kabarnya? Mudah-mudahan sehat-sehat ya.
Lihat-lihat semua. Lagi sibuk apa nih sekarang? Lagi sibuk apa? Oh iya.
Mohon info ya kalau ada apa? Misalkan ada kesalahan teknis, tolong diihormasikan.
Karena kita tidak tahu keadaannya gimana. Boleh ini juga, komen-komen ya. Yang sudah hadir.
Dari mana malam ini? Oke. Lagi sibuk apa nih? Lagi sibuk apa?
Sibuk apa ya? Sibuk seperti biasa kali ya. Business as usual. B.A.U.
Sama. Sama ya. Kemarin long weekend. Oh iya long weekend ya. Jogja gimana Jogja?
Macet banget jadi akhirnya nggak keluar. Gue ke Bandung, iya astaga.
Macet pasti. Macetnya banget. Terus ada acara kan, naik mobil. Oh naik mobil.
Terus ada acara kan, hari minggunya kemarin ada acara persis gitu.
Ada kayak, kayak long apa? Pawai itu, pawai mobil hias. Oh jadi macet lagi.
Ya ditutup jalannya, jalannya sebagian ditutup. Sisa jalanannya tambah macet.
Terus yang berplat B datang semua ke Bandung, ke Lembang sudah pasti nggak bisa.
Ke Dagos sudah pasti nggak bisa. Ke Selatan juga nggak bisa.
Ya udah kita main-main di satu tempat aja yang bisa semua happy.
Yaitu rumah mode. Rumah mode? Semua happy di rumah mode? Semua happy iya.
Kan ada tempat main anak, ada tempat main anak. Itu factory outlet bukan ya?
Iya factory outlet jadi gede banget kan. Masih di Bandung.
Rumah mode yang satu-satunya yang dari jaman, yang saya tahu dari jaman dulu sampe
sekarang bertahan dan terus grow. Jadi semua happy ya istri dan orang tua
yang saya happy bisa belanja baju, saya happy bisa ngopi, anak-anak sisa happy
di playground. Dan. Lengkap ya seluruh keluarga ya.
Iya. Anyway.
Wah, Pak Larry yang ini ya, yang ngelaporin ya. Yang apa monitor, monitor audio kita ya.
Tolong info ya teman-teman ya. Terima kasih.
Lihat transkrip lengkap (1547 segmen lagi)
Kalau saya, eh justru kemarin orang Bandung malah ke Jakarta, Pak Dika.
Ke kampus hektiven kemarin, iya. Kita ketemu ada acara open house jadi Pak Dika diundang.
Kita kapan diundang sih?
Itu besok hari Selasa kan diundang. Acara yang lain.
Itu nggak diambil masa kan, nggak narik masa siapa-siapa.
Narik masa yang masa ibu sama masa budu.
Iya, iya. Nah, kita langsung ke topik ya. Malam hari ini kita akan ngobrolin tentang
salah satu framework yang lagi naik daun. Salah satunya karena memes ya.
Jadi menarik ya. Teknik marketingnya adalah menggunakan memes ya.
Apa sih belum pernah lihat?
Terutama twitternya ya. Terutama twitternya.
Di twitter official mereka juga mereka yang bikin memes-nya?
Iya, mereka yang bikin memes-nya. Jadi mereka kayak lucu-lucuan.
htmx_org.
Ini lucu-lucu.
Iya, underscore org.
Nah, itu namanya adalah kita bahas tentang htmx.
Htmx.
Kadang-kadang apa ya, ada beberapa orang yang menganggap tidak serius karena memang
sosial medianya nggak serius gitu. Ini beneran nggak sih, gitu kan?
Oh ada essay-nya ya? Saya baru tahu nih.
Enggak, meme bagi mereka ternyata dianggap sebagai bagian dari kayak media.
Jadi coba aja buka halaman itu, mereka ngeling artikel-artikel yang serius.
Cuma dibawahnya memes-nya juga di-feature di situ. Dan itu makes sense sih.
Maksudnya kan, kayak tulisan yang serius sampai berbusa-busa itu kan salah satu cara komunikasi.
Mem juga cara komunikasi kan, kalau emang jadi banyak yang pengen nyoba, berarti sukses.
Cuma kalau misalnya maksain, norak, terus malah image-nya jelek, ya berarti gagal.
Makanya kan tadi saya bilang teknik marketing kan, teknik marketing-nya adalah memes, salah satunya.
Ini cukup unik ya.
- Itu loh notepad, atasnya yang banner. - Oh banner, iya. Notepad ya?
- Like treated with HTML.
- Siapa yang nge-noding HTML-nya pakai notepad? Pernah pakai notepad?
- Dulu pas pertama belajar. - Oh iya, pernah ya?
- Iya. - Pernah semua kita ya berarti ya?
- Tuh ada rekomendasi liburan tuh. - Tapi terakhir jadi blok-blok plus-plus. - Jonggol. - Jonggol, Gunung Batu atau Curug.
Liburan keselamasi coba. Ini daerah mana ya? Tangsel ya? Tangerang ya? - Bandung Corit, enggak.
- Bandung ya? - Enggak tahu. Kan tadi bahasa Bandung.
- Oh iya. Jadi ini adalah salah satu teknik marketing-nya tuh, dia kayak menyela-nyela dalam tanda kutip ya?
- Iya. - Siapa yang akan menang?
- Google, Twitter, Facebook, React, HTMX, apa sih tadi? You get a lunatic in Montana and his internet friends.
- Iya. Nah, yang mau saya sampaikan adalah meskipun teknik marketing-nya lucu-lucuan kayak gini,
tapi yang buat itu dosen loh. Yang buat itu dosen. Jadi namanya Carson Gross itu adalah dosen.
- Itu kan orang yang fotonya di-meme tadi bukan? - Eh, nggak tahu saya. Iya kali. - Tadi nggak meme yang tadi?
- Oh iklannya banyak sekali. Iklan, iklan. Do not accent. Nah ini aja nih.
- Nggak ada fotonya. - Carson Gross adalah creator HTMX dan hyperscript. The mind behind group brain developer,
ini apa? Block kali ya. A professor of software engineering at Montana State University.
- Wow. - Ingat nggak tadi ada meme-nya lunatic.
- Oh, Montana tadi ya. Oh itu maksudnya. - Internet friends. Jadi kesannya dia orang random banget lah.
Terus kayaknya Montana itu kan bukan kota besar, nggak kayak Silicon Valley gitu.
- Iya, iya, iya, iya. - Atau apa? Kayak kota Bukatena gitu kali ya. Kalau di sini equivalent-nya.
- Coba kita lihat fotonya ya. Jangan-jangan ini orangnya ya. - Iya, tadi sih nge-search kayaknya sih itu.
Jadi dia nggak memimpin mutanya sendiri. Kok lucu sih. Ini masih ketawa lihat munyinya.
- Barusan lihat soalnya. - Iya. Apa namanya, dia itu bukan hanya mencela dalam takut, mencela framework lain,
tapi mencela dirinya sendiri juga, gitu. Jadi memes-nya itu apa ya, entertaining gitu ya. Menghibur.
- Itu apa sih? - Woi, woi, woi.
- Kenapa nih yang nge-berair? - Iya ya, apa maksudnya. Kita nggak dapet nih konteksnya.
- Karena belum pakai. - Oh itu hydration, hydration.
Oh ternyata ada juga yang pakai notepad ya. Kalau Valeri kan pakainya notepad plus-plus. Agung nih pakai notepad.
- Kalau gue tuh gara-gara dulu belajarnya pakai front page. Tahu nggak dulu Microsoft itu punya wish week editor.
Karena numpang di rumah, di rumah orang, di rumah saudara. Terus wah ini enak ya, bisa gini.
Bisa wish week UI editor, bisa nge-check kode HTML-nya, jadi ngerti. Terus disimpen .html, develop with this.
Dan kirain ya udah aman. Assumsi. Duh gue nggak ngerti. Duh gue nggak punya komputer, nggak punya PC di rumah.
Jadi pokoknya dimana ada yang bisa ditumpangin, buka. Kirain Microsoft front page itu kayak Microsoft Word atau apalah.
Yang bagian dari office week yang dimanapun ada. Ternyata nggak dibuka di Warnet, bukanya dari notepad. Ya udah.
Ini beneran didokumentasikan semua ya. Semua memes yang muncul ternyata ya.
Oh udah habis-habis. - Ada Haiku-nya, JavaScript fatigue, java script fatigue.
Longing for hypertext already in hand. Ya boleh.
Kalau yang nggak tahu Haiku itu apa? Haiku itu? - Format puisi. - Puisi ya? - Ya semacam puisi.
Pokoknya kayak puisi dari Jepang emang puisi singkat. Paling atas 5 suku kata, tengah 7, bawah 5.
Terus itu tuh kayak format puisi kuno. Biasanya kayak untuk hal-hal simpel kayak keindahan alam, atau makanan yang hal-hal yang simpel lah.
Cuma 3 kalimat kan. Penek banget. - Wah di repost kita. Twitternya tuh.
Di repost sama TML. Beneran. - Masa sih? - Ini di retweet-retweet.
- Weee. - Ternyata kita di-recognize.
- Wow. Oke. Jadi kita cukup ya happy-happy-nya. Sekarang kita serius. Serius mode.
ATMX itu apa? - Jadi ATMX itu apa? - ATMX itu adalah front-end framework ya.
Tapi agak sedikit berbeda approach-nya kalau front-end framework kan kita biasanya nulis kode dengan JavaScript kan.
JavaScript front-end framework. Nah ini dia memanfaatkan HTML sebagai, jadi HTML yang di-extend.
Makanya ada X-nya gitu kan ya. Jadi sintak-sintak atau ya apa namanya, property-property HTML-nya bisa ditambahkan.
Misalkan kalau, nah ini ada motivasinya nih. Motivasinya adalah kenapa hanya anchor dan form yang bisa HTTP request.
Jadi kalau misalkan kita mau ke halaman berikutnya misalkan halaman about gitu kan. Kita pakai anchor/about gitu kan.
Itu kan HTTP get ya. Untuk mendapatkan halaman baru. Form juga sama. Bisa get, bisa post.
Terus juga kalau click dan submit itu hanya click dan submit yang men-trigger event. Terus hanya bisa get dan post.
Nggak bisa patch, nggak bisa yang lain. Dengan HTMLX itu dia tambahin dengan prefix HX-, misalkan kita mau post dari button aja.
Nggak perlu pakai form. Kita bisa posting atau bisa kirim HTTP request post ke /click.
Dan kemudian hasil respons-nya akan di swap, apa ya, swap itu kayak diganti, ditukar dengan outer HTML dari button ini.
Outer HTML-nya, berarti di luar ini ya. - Bukan outer, jadi si button-nya yang diganti.
- Button-nya yang ketukar ya. Button-nya hilang. - Ya. Sebelum-belumnya.
Kalau inner HTML yang di dalam button. - Baru di dalam button.
- Baru di dalam button-nya, children-nya. - Ya.
- Cuma markup-nya tetap pakai markup menyerupai HTML ya. - HTML, ya.
- Kayak kalau lihat kan React pakai solid dan lain-lainnya, pakai JSX.
Jadi apa format markup khusus tapi yang based on JavaScript kan, sintaksinya. Nah kalau ini berarti markup-nya based on HTML.
- HTML, betul. - Expectasi response adalah take HTML.
- Ya. Jadi yang dikirimkan itu adalah HTML. Makanya HTML over the wire. Salah satu ininya ya konsepnya.
Jadi HTML yang dikirimkan. Kalau kita mau kirimkan full HTML, boleh.
Kita mau kirimkan part of HTML-nya juga boleh, seperti ini misalkan. Slash click ini kita kiriminin H1 misalkan.
Dia akan jadi si button-nya hilang, digantikan dengan H1.
- Ada beberapa... - Dari konsol nggak bisa di tes ya.
- Nggak bisa. Harus pakai ini, script. Bisa langsung pakai script kayak gini.
Bisa juga pakai NPM ya, standar ya. Tapi by default pakai begini aja udah bisa.
- Tuh, kecil ya ukurannya. - Serasa jQuery ya.
Semuanya kembali ke jQuery.
- Tapi dengan kita menggunakan ini, penggunaan JavaScript kita jadi minimum.
Kita hanya menggunakan property-property yang disediakan oleh htmx.
- Kalau bahasa lainnya, interactivity API bukan sih namanya ini? Kayak gini?
- Interactivity API ya? Kalau alpine itu kayak gimana? Kayak gini juga ya bentuknya?
- Kayak ini kan? Kayak Vue juga kan? - Vue... Petit ya, kecil ya?
- Vue.cs atau kayak Svel juga begini kan? - Svel compiler.
- Agak beda sih. Vue ya, kayaknya lebih dekat ke Vue ya. VE, Vsomething gitu kan ya.
Tapi tetap ada kode JavaScript-nya. - Itu kayak apa sih, atribut custom-nya ya?
- Iya, Svel juga ada itunya. - Itu sekilas tentang htmx.
- Nah, htmx suksesornya apa tadi? Intercooler. - Intercooler.
- Namanya, lucu. - Ini yang bikin si Pak Dosen itu tadi juga sama.
- Oh, ini cikal bakalnya ya. - Jadi, Ajax with attributes.
Nah, dia akhirnya evolusi menjadi htmx. - Oke, incremental, simple, unrobustif.
Ini masih di-maintain nggak ya? - Kayaknya dipindahin dari Pak.
Maksudnya versi lamanya yang versi satu tetap di-maintain, abis itu ya dipindahin ke htmx.
- Dan yang menariknya juga, mereka atau si Bapak Dosen itu juga menerbitkan buku namanya Hypermedia System.
Ini bisa dibaca gratis ya? - Oh, gratis.
Read online-nya gratis. Ini tentang gimana caranya bikin aplikasi tapi dengan konsep htmx tadi ya.
Dia menjual htmx sebenarnya ya, sederhan aja.
- Cuma mungkin di buku itu kayak dia ngejelasin hal yang bukan teknis kodenya tapi kayak underlying filosofi gitu kali ya?
Biasanya kalau ke dunia kan dia terlalu suka ngelus-ngelus panjang yang susah banget yang detail-detail tentang apa kayak landasannya,
terus kayak apalah spesifikasi, blablabla.
- Ya, jadi dia bahas dia awali dengan web 1.0 itu seperti apa, yang kita sempat ngomongin juga kan,
apa, teknik rendering awalnya kan, page HTML, terus habis itu server render, terus habis itu ke client side, ya kan? Ini kan client side.
Terus habis itu datanya dikirimkan dengan JSON gitu.
Sedangkan si konsep htmx dan hypermedia ini adalah kita ngirimin HTML.
Itu sih perbedaan utamanya.
Jadi nggak ada nggak, bisa nggak sih kalau misalnya tag yang dikirimkan itu, misalnya kan HTML diterima,
tetapi ada dikasih ini lagi bisa nggak kayak tag H, HX-nya itu?
Misalnya button tadi kan direplace jadi list misalnya, tapi HTML yang dikirimkan itu ada HX kliknya gitu.
Apakah langsung dehydrate juga yang elemen yang baru direplace itu bisa punya event juga nggak sih?
- Wah, nggak tahu ya. Harus dicoba sih kalau itu ya.
- Ada playgroundnya nggak sih? - Baca dokumentasi dulu.
- Baca dokumentasi dulu. - Apa? Baca sekilas, habis itu entar coba apa?
- Htmx in a nutshell. - Oke, kalau anchor tag kayak gitu.
Kalau diklik pindah ke request ke blog, itu kan responsnya dokumennya.
Nah, terus coba scroll lanjut.
Ini dia ada HX trigger, ada targetnya, ada swapnya. Swapnya itu kayak kita mau swap inner HTML atau outer HTML atau body.
- Di swap dengan target itu ya, parent div, asumsinya di parentnya ada yang idnya parent-div.
Oke, scroll ke bawah lagi sedikit.
When a user clicks this button, issue HTTP post request to, oh tetap require endpointnya berarti.
Use the content from the response to replace element with the id parent-div.
- Jadi itu tadi nggak cuma anchor sama form yang bisa nge-trigger HTTP request. - Ya, berarti jadi semua element bisa punya event yang sama ya untuk trigger.
Bisa trigger HTTP request sesuai dengan minatnya, motivasi.
- Apa pun tag-nya itu nggak hanya anchor dan form ya. - Berarti binikartunggal HTTP request.
- Nggak masuk, Mas. Boleh coba lagi, Mas. Kurang, Mas, kurang.
- Lanjut, scroll. - Installing, installingnya dia saranin langsung pakai CDN, yang pertama ya.
Saking kecilnya ya dia breaking karena ini kecil dan jadi nggak butuh compile ya.
- Ini bahaya nggak sih kalau pakai CDN begini? - Kenapa bahayanya?
- Kalau CDN-nya terkompromis. - Kalau CDN-nya, ya, kompromis.
- Atau jangan-jangan ada mengerihkan. - Untuk enterprise client kita diwanti-wanti untuk tidak pakai dari CDN yang third party.
- Ya kita nge-serve sendiri juga bisa. - Download aja taruh di static folder.
Download a copy, baru terakhir dia kasih option-nya npm.
Tapi untuk menjalankan ini kita butuh backend kan ya, nggak bisa langsung sendiri kan.
- Itu karena tadi itu ya, dia based on request, HTTP request, request-response.
- Ini ada pakai WebPatch juga bisa ya ternyata ya. Ajax. - Ajax Amsterdam.
- Nah ini bukan hanya get dan post tapi bisa semua sampai delete pun bisa.
- Put patch juga bisa ternyata ya. - Bisa, iya.
- Sampai sekarang masih bingung antara put dan patch ya. - Iya, bukannya dua-duanya buat edit ya.
- Update nggak om? - Iya.
- Nggak ngerti patch loh patch. - Kalau teman-teman ada yang mengerti bisa dijelaskan.
- Terus? - Coba detail win playground, bisa ya?
- Mungkin bisa. - Coba, detail win playground.
- Emang ada backend ya, detail win playground? - Ya nggak, buat front-end-nya.
- Oh, kita ini aja langsung. - Di local.
- Di localhost, berarti harus pakai server ya. - Server apa aja?
- Mau coba nih, mau coba. - Served index HTML aja.
- Coba ya. NPM create HONO lah ya.
- Oh, ini udah ada ini ya. NPM create HONO htmx live.
- Live coding, yay. - Kita pakai apa? Boon atau Deno atau Node.js?
- Kurang trendy lah. - Cuma ngeser index HTML doang.
- Nggak kayak, anak jaman sekarang kan anak jaman now harus pakai Blitz.js.
- Aduh. - Jangan neks.js dong.
- Justru pakai htmx biar nggak usah pakai nxt. - Iya, biar nggak pake react gitu.
- Terus dikasihnya nxt.js, mengapa? Pakai boon ya? - Iya, boon aja boon.
- Boon, install. Emang NPM soalnya belum punya boon. - PNPM nggak ada?
- Nggak, ini masih ini banget, yaudahlah Node.js lah, sama kan ya.
- Udah lah, sama ya. Maaf agak lambat sedikit ya. - PNPM dong.
- Saya pakai nxt soalnya. Htmx live. Oke, ini udah ada ya.
Kita pakai z aja ya. - Akhirnya pakai z juga.
- Apa nih? - Ada HTML Skeleton nggak?
- Ada, ada, harusnya. Index ts. Hello Honu. Oh, kita pakai ini.
Import html. Kok from lead? Honu, Honu HTML ya kalau nggak salah ya?
- Iya. - Terus...
- Bisa itu pakai misalnya public kan, public dir, literally index html gitu, nggak ya?
- Bisa, bisa, tapi kayaknya begini aja. Oh, kebalik ya, html ini ya.
- Iya. Oh itu, wow. - Ini aja langsung dogpipe.
- Oh bisa. - Html, add, ya terus, terus, terus.
- Tep-tep aja. Terima kasih AI. - Oke. Terima kasih AI.
Di sini berarti kita tambahkan yang tadi ya. Install. Ini aja ya?
- Iya. - Sudah?
- Sudah, terus langsung copy aja demo button-nya. - Iya.
- Gak bisa on-click console lock ya. - Ini ya?
- Iya. - Maksudnya nggak bisa arbitrary...
- Tapi ini ada parang div, yang tadi aja yang awal ya. Yang ini.
- Yang mana aja ya, boleh. - Gini?
- Gak kejadian apa-apa juga kan belum ada endpoint click.
- Iya, kita bikin. Ini kita jalanin dulu ya. NPM run dev.
- Core 3000, localhost. Oke, ini kalau kita cek networknya, error. Ini error apa? Oh, pop icon.
- Pop icon. - Kalau di-click, klik tapi 404 ya.
- Berarti sudah sukses sebenarnya. - Nah, udah betul.
- Kita perlu bikin, itu POST ya? - Iya, POST.
- Coba GET aja. - Mau GET aja?
- Iya, sama aja sih, apapun jadilah. - Eh, jadi udah ada tuh.
- Iya. - Return, bukan, return-nya harus HTML kan?
- Iya, harus HTML, betul. - Nah, string kan HTML. Bisa di-render sebagai HTML.
- HTML, apa nih? H1. Eh, H-nya mana? - Itu HXGET.
- HXGET. - Gini ya?
- Tadah. Oh, belum di-refresh. - Refresh.
- Tadah. - Nah, sekarang pertanyaan saya selanjutnya tadi.
- Coba di yang return-nya itu tadi. - Return.
- Return. - Di H1-nya klik itu HXGET.
- Oh, ditambahin lagi ya tadi ya? - Iya, HXGET.
- Get. - Slash button.
- Full. - Gini.
- Ya. - Hmm. - Wait, wait, HX work. HX work outer HTML juga. Nah, bikin update button.
- Buat update button-nya. - Tadi udah ada nih.
- Iya. - Cepet sekali, udah gitu.
- Balik lagi ke, berarti harus, dia harus balik lagi ke button. - Fokus aja.
- Wow. - Gini, balik lagi ke klik, gitu.
- Balik lagi ke klik. Iya, balik lagi ke klik. Jadi bisa, blok blik, blok blik. - Toggle, toggle.
- Toggle. - Nah, coba.
- Klik, klik. - Nggak ada button-nya?
- Oh iya. - Wow.
- Oh my God, keren. - Bentar, ini dikirimin pakai apa ya?
- HTTP ya? - HTML, HTTP request.
- Cuma bisa HTTP, nggak ada cara lain. - Keren, websocket.
Dia bisa pakai websocket. Cuma yang ini HTTP request biasa.
- Oh. - Berarti dia langsung hydrate.
- Soalnya responsnya begini doang ya? - Iya.
- Responsnya, dia langsung handle-nya langsung, kalau bahasa jaman jQuery itu,
bukan hydrate jaman itu ya, di rebind, rebinding ulang.
Sebetulnya sih kayaknya di balik layar itu event ya, tiap kali ada yang berubah,
itu kayak ngefire event custom, dia kayak semacam nge-crawl si HX-nya kan.
- Kalau jaman jQuery saya pakai this, that gitu lah. This, that, dot, that.
- Oh iya. - This, dot, bind.
- Nah, tapi karena ini adalah property HTML, dia tetap kelihatan ya, kodenya ya.
Dan kode event-nya itu nggak kelihatan, kode event-nya nggak kelihatan karena adanya di dalam sini.
Di dalam HTMLX JavaScript-nya, di dalam library-nya, yang kita nggak perlu nge-coding JavaScript kan jadinya kan.
- Maksudnya nggak ada virtual dom, nggak ada apa-apa ya?
- Iya, walaupun di back-end-nya JavaScript ya, tapi di front-end-nya kita nggak nge-coding JavaScript gitu.
- Anak back-end kayaknya saya jatuh cinta ini.
Jadi secara event handler yang di depannya udah nggak usah pusingin lagi, nggak ada istilahnya staten lagi.
- Iya, statenya di back-end kan, itu adalah salah satu keunggulan dari HTML over the wire.
Jadi statenya itu nggak ada kompleksitas managing statenya di sisi klien atau di server.
Kita cukup taruhnya di server, kita kirimin apa perubahan yang terjadi di kliennya dalam bentuk HTML
atau representasi dari HTML.
- Dan itu bagus kalau selain buat penggunaan aplikasi baru, bisa buat legacy app juga ya.
Maksudnya kalau yang belum pakai apa lah, punya server buat Rails atau php, Laravel API.
- Temen-temen yang di sini, capek nggak sih pakai use effect?
- Saya belum mengalamin.
- Atau kalau nggak use effect harus pakai apa tuh yang namanya?
- Use Memo, tapi kabarnya React bakal bikin compiler jadi Use Memo-nya udah otomatis.
- Kan belum lagi dia, nanti harus upgrade lagi.
- Ini memang mirip konsepnya Live View, Live Wire sama Hotwire, makanya namanya HTML over the wire.
HTMLX juga salah satu termasuknya.
Cuman kan kalau yang Live View sama Live Wire itu kan spesifik ke satu framework, Laravel, Phoenix dan Ruby on Rails.
Kalau ini dia agnostik, mau pakai backend-nya Go, mau backend-nya php, bebas-bebas.
- Karena ini frontend asal ngelog si script itu kan, script yang tadi itu dari CBN.
- Iya, ini mas Kodos, dia pakai Golang, compile executable, embed asset ke executable, sama dengan solusi buat website cepat, asik.
- Website instant.
- Instant, iya tujuannya adalah untuk mengurangi kompleksitas frontend, semuanya dilakukan.
- Terus depannya sudah pakai Tailwind, senang hidup backend saya.
- HTMLX plus Alpine, kenapa HTMLX ditambahin Alpine? Buat apa ya Alpine ini?
- Iya, coba pengen tahu.
- Iya, Alpine digunakan buat apa? Karena ada juga...
- Apa, gimana pakainya belum pernah pakai?
- Kayak jQuery sebenarnya.
- Sering dengar, semua belum pernah pakai.
- Buat yang pilih ngelangin div, hide, show, gitu ya, nggak tahu sih.
- Oh, ini Alpine JS.
- Berarti kalau HTMLX ini cocok banget pakai view transition ya?
- Betul.
- Itu tadi dia kan diitakan ya, di webnya HTMLX, maksudnya kalian bisa pakai teknologi terbaru.
- Betul, jadi kalau misalnya link diklik nih, kan get tuh, get seluruh halaman,
terus pakai view transition.
- Ada juga yang mengkombinasikan antara Astro sama HTMLX.
- Oh, Astro ya dipakai buat routingnya berarti.
- Iya, karena kan Astro by default nggak pakai JavaScript kan, JavaScriptnya di sisi HTMLX saja, udah gitu kali ya.
Jadi dia hanya untuk backend ya.
- Atau mungkin ada sebagian yang perlu interactivity ala React, Sheldt, atau apa, tapi biar nggak,
ya biar bagian itu aja yang apa, di isolate komponennya, sisanya ya udah bisa pakai gini-gini doang,
kalau cuma above page gitu, apa ya, perlu pakai use effect, use memo, dan lain-lain.
- HTMLX bisa digabung sama dia nggak sih, ngeload React komponen gitu?
- Bisa aja. Buat apa tadi? - Bisa aja.
- Bisa aja. Nah ini anak-anak backend nih, apa, audiens-audiensnya Imre ya,
itu cocok sama HTMLX ya, oh buat interactivity ya, kalau Alpine-nya buat interactivity ya, kali ya.
- Cuma kalau lihat Alpine.js.dev ini agak overlap sih.
- Iya, kayaknya agak overlap. Eh beneran loh, Astro sama HTMLX, Astro sama HTMLX itu,
maksudnya Astro itu dipakai untuk backend-nya, bukan buat front-end-nya.
Jadi di sisi front-end-nya itu dia pakai HTMLX, tapi di sisi backend-nya dia pakai Astro,
karena Astro, by default kan nggak butuh JavaScript. - Astro, API routing-nya enak banget,
marketing-nya Astro gitu. - Marketing-nya Astro.
- Bisa bikin API route nih, misalnya itu tadi kan ada click, ada apa,
itu maksudnya API route-nya Astro itu kayak ada TypeScript definition-nya ya,
request-response juga, cuma DX-nya enak.
- Iya, intinya adalah kalau saya pakai Hono di sini, atau Express, gantinya adalah Astro, udah gitu aja.
Jadi front-end-nya nggak pakai React, nggak pakai Spell, nggak pakai View, nggak pakai Astro.
Yang front-end-nya ya, tapi pakai HTMLX gitu. Astro itu hanya untuk backend, gitu.
- Dan apa filosofinya nyambung sih, karena Astro itu kan zero JavaScript by default.
- Yes. Oh, kalau Mas Lepron ini dia lebih ke Remix ya, Tim Remix ya.
- Remix, overhead-nya Next.js, nah itu heboh kan tuh si siapa? Cetjipiti?
- Cetjipiti pindah ya? - Kemana dia pindah?
- Pindah kantor. - Pindah meta framework.
Tadinya pakai Next.js, sekarang jadi pakai Remix.
- Itu tagiannya udah gede. Tagiannya udah membangkak. Menarik ya. Apa lagi yang bisa ditangguhkan?
- Lanjut bekerja Docs. Tadinya dia lanjutin Docs-nya, masih banyak.
- Masih banyak. - Oh iya. Tadi kita udah coba sampai ini kan masih Ajax doang nih.
- Ini, "If you want to element poll the given URL rather than wait for an event,
you can use every syntax with the HX trigger."
Nah ini saya punya pertanyaan nih, apakah ini apa namanya kita pakai polling ini amankah?
- Karena dia kan nge-poll terus kan. - Aman.
- Iya kan server-nya server kita, itu kita yang...
- Ini salah satunya heartbeat mas, contohnya heartbeat. Bisa juga kan untuk anggap lagi nulis di editor.
Terus kemudian nge-pollingin bahwa contoh safe, contohnya itu bisa.
Terus bisa juga system blocking atau menandakan kalau ada yang edit post itu.
Ya intinya heartbeat masih bisa banyak sih, hal-hal yang bisa diciptakan dengan heartbeat.
Jadi sebenarnya sebagai framework dia menciptakan fitur itu aja sebenarnya mau digunakan
buat ngadidos website orang, terserah sih.
- Nah berarti yang nge-rate limit, tanggung jawab nge-rate limit kan ada di siapapun itu
yang terima request-nya kan, maksudnya API route kita kudu-rate limit.
Ini kan sebenarnya oper-operan kerjaan kan, kerjaan front-end kan, kerjaan back-end,
ya nggak berat sih, cuma maksudnya hal yang dipikir jadi lebih banyak.
- Ini yang mas Elissa bikin untuk polling? - Iya ini demo, demo yang rencarannya
mau didemo-in di JavaScript Bangkok. Ini ambilnya kan di back-end nih di laptop kan,
statistiknya. Jadi kan kalau di-click update, dia akan update kan.
Lihat memory usage-nya, CPU usage-nya, nah.
Kalau seandainya ini dijadikan polling, eh sorry, ini dijadikan polling,
ini kan trigger-nya load, saya jadikan every one second.
Dia akan update terus, polling terus tiap satu detik. Ini aman ya.
Ini nggak apa-apa ya. Ini secara performa oke, nggak masalah ya.
Dia ngirimin kira-kira terus nggak masalah.
Routing-nya jangan ini, routing-nya jangan yang harus, footprint-nya jangan banyak.
- Enggak, routing-nya cuma ganti ini doang nih. - Iya maksudnya kalau di real life application.
- Ini kan berarti masalah desain ya? - Iya masalah desain.
Saat nge-nembak endpoint itu jangan sampai ngeload.
Kalau database-nya yang kayak apa, nge-query table lain itu apa?
Kompeksitinya, big O-nya bisa bikin jebul sih kalau desainnya nggak dipikir.
Plus routing untuk endpoint-nya jangan ngeload, misalnya ngeload semua class.
Contohnya misalnya kalau Laravel nih, kan routing untuk satu endpoint-nya
harus ngeload semua class-nya se-abruk ya, memory consumption-nya kan tinggi.
Jadi kalau misalnya dibikin satu endpoint yang khusus untuk yang footprint-nya rendah, ya nggak masalah.
Server send event kan begini juga konsepnya polling.
Polling juga ya, sama ya. Berarti aman ya.
Tergantung situasi dan kebutuhan.
Tergantung desainnya juga ya.
Dan nggak semua jenis UI relevan buat polling kan.
- Oke. - Eh ini ada yang seru nih, buka docs lagi deh.
Special events. Load, Reveal, Intersect.
Jadi itu kayak help shorthand-nya ya, jadi kita nggak harus bikin event listener tepisah.
Jadi ada onload, onreveal, onintersect.
- Intersect itu apa? Oh yang ini ya? - Itu intersection observer.
Kalau misalnya ada elemen yang muncul ke layar, nge-scroll-scroll muncul di layar.
- Wow. - Terus edit setting-nya turun, threshold.
Berarti gue bisa bikin juga jadi WordPress crack kan ya.
Di project gue. Coba.
Apa lagi nih? Ini tadi load polling udah.
Sebenarnya Websocket juga bisa, cuma harus lewat extension.
Kalau nggak salah.
Ini kan polling ya. Load polling, lagi request indicator.
- Oh ada htmx indicator. - Iya dia bisa spinner.
- Loader. - Coba mas.
Coba spinner-nya gimana?
- Ya ketik aja. - Itu langsung pake kelasnya dia.
- Kelasnya dia mana? - Itu kan ada contoh tuh.
- Tapi ada src. - Nggak, pake spam.
Kan nggak harus image kan? Coba deh spam kelasnya kayak gitu.
- Gimana nih? - Ya ketik spam.
- Taruhnya di? - Di dalam click me-nya.
- Di dalam button-nya. - Di dalam click me.
- Bukan di inner html-nya. - Di sini?
Enter, ketik spam kelas sama dengan htmx indicator ya.
Indicator, terus isinya apa lah? loading titik-titik.
- Gini? - Iya.
- Gitu? - Coba.
Gak kelihatan karena cepat.
- Di apa? - Di sleep dulu.
- Set time out. - Set time out.
Handler-nya return ya. Langsung return ini.
Return, ya function.
- Gak usah pake return. - Iya.
- Terus coma? - Koma seribu.
- Ini? - Iya.
- Kok merah? - Berarti salah di luarnya tutup kurung.
- Ya, chtml itu salah. Chtml itu kan belum di tutup. Nah, kurung satu.
Ini harus dia return sesuatu kan? Ini di-return juga?
- Iya, coba aja. - Gak bisa.
- Coba gak ada autofix-nya? - Save aja.
Coba. Gak bisa. Error.
Gak bisa diklik soalnya gak ada return html-nya.
- Oh, harus ngereturn. - Oh, itu ini. Bentar.
Return html tetap berarti. Tapi sebelum return, harus dipakein sleep dulu.
- Di sini. - Semua ada sleep.
- Oh, tunggu. - Oh, tunggu.
- New promise. Ini? - Iya.
- Asing. - Udah.
Betul?
Seneng, Nek.
- Happy banget. - Tepat-tepat.
- Tanpa JavaScript client-side, loh. - Simple, ya?
Tanpa sedikit pun JavaScript client-side dari kita, ya. Dari htmx-nya yang nge-handle.
- Iya. Cuma nambahin kelas doang di sini, ya? - Iya.
Luar biasa. Menarik ini.
- Terus, yuk, lanjut. Lanjut, lanjut. - Semangat, semangat.
- Targets. - Oke. Apa lagi?
- Targets. - Targets.
- Targets bisa ke elemen lain. - Oh, bisa delay.
Terus maksudnya kalau action nge-klik, tapi mau di-render di tempat lain.
- Oh, ini buat live-search, ya? - Iya.
Search results, jadi sibling atau di elemen lain.
Bisa juga pakai ini, ya? Berarti yang targetnya itu juga bisa jadi kayak...
- Apa namanya? Query selector, kayak closer, sibling. - Oh, bisa, bisa.
- Dalam macam itu bisa. - Betul, betul, betul. Bisa, bisa.
Ya, atau bahkan nggak ada relasi apapun. Yang penting kita tahu ID-nya, kan?
Iya, kalau misalnya ini target, kan. Misalkan kita mau targetnya apa, body?
Ya udah, kegantilah itu body-nya.
- Ini kan? - Klik lagi, klik lagi, klik lagi.
- Jadi body-nya hilang. Eh, setelah body hilang, isi body-nya hilang. - Semua isi.
Semua isi direplace dengan responsi HTML.
Atau kalau misalkan di sini ada div dengan ID root.
- Kita taruh aja di sini ya. Atau di sini. - Oh, target.
- Itu kan? Eh, target ya? - Bukan target.
- Eh, bentar. Itunya namanya hx-target attribute-nya. - Oh, di sini aja, di sini.
Hx-target sama dengan root, ya.
Yang pertama 1 detik, yang kedua baru ke atas dia.
- Coba klik lagi. - Eh, sini.
- Klik lagi. - Klik lagi.
- Nggak bisa error. - Oh, bisa.
- Bisa. - Oh, ya bisa 2 kali ya.
Oh, tetap keganti, jadi ke replace yang tadi.
Tapi body-nya berarti bisa pakai arbitrary target. Gak harus inner atau outer HTML.
Oke, lanjut.
Swapping.
Swapping tadi udah ya?
Swapping tadi udah inner HTML, outer HTML, after begin.
- Opsinya banyak lagi. - Before begin, after end.
Ini semua yang... Ini semua yang...
- Available dari web API sendiri, sebenarnya. - HTML, iya.
- Punya, ini kan swapping-nya kayak... - Domain integration.
- Append, prepend. - Iya.
Ini berarti kayak gantiin, kalau kita nulis template dengan vanilla.js ya.
Inner HTML. Biasa kan kalau kita itu kan, kita populate dulu, le, ada 4.
Habis itu kita inner HTML-nya diganti gitu kan. Ini kayak pengganti itu ya.
Cuma memudahkan, karena semua dimasukin ke atribut.
Ini tuh jadi kayak nggak ekuivalen sih, cuma agak 11-12 tailwind, semua masing-masing property dimasukin ke kelas.
Kalau ini masing-masing metode, metode yang umum digunain, dibikin jadi HTML atribut.
View transition.
Bentar, itu yang morph-morph ini, apa sih nggak ngerti? Morph swap, masih memproses morphing swaps via extensions.
Merge new content into existing DOM.
Focus video state.
Video morph, morph DOM swap.
Apa sih maksudnya?
Kayak gantinya itu ada transisinya. Kayaknya view transition ini modelnya ya.
Swap-swapnya itu gantinya misalkan fade in, fade out, gitu-gitu kali ya.
Kayaknya bukan deh. - Bukan ya? Beda ya?
DOM-nya nggak direbride keliatannya.
Jadi misalnya ada yang mau diganti, kayak diselip-selipin tentang referensi yang lama.
Jadi kayak mungkin itu contohnya soalnya kayak focus video state, misalnya button-nya lagi difokus.
Kayak di-update, di-replace sama button yang baru nih, misalnya response kan klik terus responsnya tadi ada button gitu.
Kalau jadi button yang baru kan, fokusnya ilang.
Ini tuh kayak di, mungkin ada kayak algoritmanya sendiri, kayak tetap pakai button yang lama, yang masih lagi aktif ada fokusnya,
atau ada event listener, custom line-nya, tapi isinya pakai isi yang dari response itu.
Keliatannya sih kalau dari deskripsinya kayak gitu ya.
Tapi harus pakai extension ya. Jadi ini extension ya.
Karena ini yang kompleks ya. Maksudnya kayaknya kalau kita regular, kita penggunaan pada umumnya nggak terlalu butuh ya sebenarnya.
Nggak seperlu itu.
Berarti kan dia semacam mengkomparkan hasil HTML yang baru, yang dari endpoint yang diklik itu.
Oh iya, iya, iya. Jadi kayak dome div ya. Difference antara yang lama sama yang baru ya, kayak virtual dome gitu ya.
Diving note-nya itu biar nggak ditimpa.
Biar jangan digantikan keseluruhan, tapi digantikan beberapa part aja yang berubah kali ya.
Bisa gitu.
Canggif ya.
Oh ditambahin ini extension-nya juga pakai CDN juga ya.
Karena kecil, 2,1 kilo byte doang.
Gzip.
Dependency.
Cara pakainya adalah langsung pakai, ini harus JavaScript gitu ya.
Bukan existing note-nya tuh?
Iya.
Bisa string tuh, bisa string.
Oh iya bisa.
Note yang sebelumnya, note yang setelahnya.
Iya.
It will merge into new content.
Jadi kayak conflict resolution gitu, merging.
Oke.
Menarik.
Canggih ya.
Oke lanjut lagi. Oh ini ada Alpine.
Alpine.
Alpine morph, oh based on the Alpine plugin.
Ini Alpine.js gitu maksudnya?
Oh iya benar.
Jadi dia ada plugin namanya morph plugin, jadi bisa dipakai juga di sini.
Oh makanya ada yang kombinasi antara htmx sama Alpine mungkin ya.
Jadi kalau punya Alpine state, terus di kombinasi sama htmx, Alpine-nya nggak ketimpa.
Oke.
Ini spesifik banget ya.
New transition.
Blablabla.
Experiment with this new API.
Sebentar, sebelum new transition, kalau misalkan saya pengen,
kalau di klik pindah halaman.
Maksudnya ganti halaman tapi SPA.
Saat html-html-nya ya? Satu bodinya ya berarti ya, kayak tadi ya.
Response-nya kudu isi halaman baru itu.
Oh iya benar.
Mind blowing.
Tapi nggak usah semuanya, misalnya kan yang perlu kita replace kan cuma kontennya aja tuh.
Betul.
Jadi cuma div id root. Jadi dari server yang isi root-nya aja yang diganti.
Jadi bisa bikin SPA juga ya.
Iya kalau mau mempersingkatnya pakai hxboost ya.
Apa sih hxboost?
Mau field transition dulu apa hxboost dulu?
Field transition dulu.
Itu aja ganti nickname Mas Riza tuh. Riza Fahtmx.
Riza Fahtmx aja. Pas Riza Fahtmx.
Tugas nama, kudu tumpungan.
Gak boleh lah nanti ganti nama.
Kalau nickname boleh di tengah.
Ini setnya dimana?
Ada config-nya berarti bikin config file gitu.
Nggak dikasih tau ya caranya ya.
Nanti somewhere ada lah mungkin di docks-nya ada config-nya.
Transition tool.
Itu tuh tuh. Coba animation example page. Turun.
Itu yang di halaman utamanya.
Oh ini?
Iya.
Xswap.
Ini masih pakai keyframe.
Itu buat animasinya kan.
Nggak, nggak pakai itu juga.
Tapi pakai feed-in.
Transition through.
Ya tapi.
Gak gitu doang.
Kan kita mau liat demo-nya coba liat demo-nya.
Oh ini.
Nah tuh coba click. Swap it.
Restore it. Click.
Tapi gimana config-nya di mana?
Iya config-nya di mana?
Cari docks. Cari di docks-nya.
Tuh bawa-bawa-bawa. Kiri-bawa.
Balik ke docks. Nah.
Bawah lagi.
Configuring.
Taruhnya di mana?
Di mana?
Ini taruhnya di mana?
Nggak tau.
Kok nggak kelihatan ya?
Ini.
Oh metatag dong.
Benar-benar nggak pakai JavaScript.
Ini kan.
Ya kalau mau pakai JavaScript boleh.
Atau bisa pakai metatag.
Meta-name, htmxconfig.
Oke baiklah.
Kita coba ya.
Di metatag-an di sini ya.
Setelah sebelum-sebelum ya.
Tapi kita mau gantinya tadi apa?
Transition ya.
View transition mana tadi?
View transition.
Swapping.
Global view transitions.
Ini?
Iya.
Global view transitions.
Begini?
Kayaknya nggak ada ya. Global view transitions aja polosan.
Iya.
Global.
View transitions pakai S.
True.
Gini?
Iya. True.
Habis itu apa tadi?
Use the transition titik 2 true in this hxswap attribute.
Kita nggak pakai swap ya. Ini ya?
Iya.
Gini.
Ini ya.
Ada tuh?
Ada transitionnya tadi kelihatan sedikit.
Refresh reload tadi nggak lihat.
Nah.
Coba.
Oh iya.
Ada transitionnya.
Oke.
Bisa ditambah transitionnya.
Bisa ditambah. Mungkin transitionnya bisa bikin berapa?
Bisa pakai CSS. Kita gitu contohin tadi.
Contohnya pakai CSS ya?
Cuma bikin custom CSS. Kalau yang default tuh fade in, fade out.
Coba aja kita copy.
Biar nyontohin slide in, slide out.
Coba ya.
Disini ya.
Gini.
Terus cara pakainya adalah klasenya slide it ya?
Iya.
Ini dimananya?
Liat contohnya aja.
Di dalam sini kan?
Dikasih div sebelum button.
Terus ini transition true udah ya?
Sambangkan hal.
Targetnya nggak usah.
Oh bisa closest div juga.
Iya. Tadi kan ada tuh yang di opsi-opsinya.
Oke.
Wey.
Wey.
Masih zero JavaScript loh.
Sejauh ini.
Saya javascript.
Iya. Tapi kalau disini pasti ada javascriptnya kan ya?
Lah ya javascriptnya sih.
Berapa sih gedenya?
Gede kok kelihatannya.
Eh, H.
Nggak kelihatan disini.
Nggak kelihatan ya?
Itu, itu.
20,5.
Lumayan ya. Gede juga ya.
Ya kan buat semua, itu buat semua interaksi.
Udah min tapi ya.
Udah minim.
Lebih kecil react kayaknya.
Kode, tapi kode komponen reactnya ya kan?
Nggak, react, react polosan aja udah 70an kilobyte.
Reactnya doang mungkin.
Belum ada react dom.
Iya.
Terus routernya.
Terus state managementnya.
Belum lagi helmetnya.
Helmet.
Helmet.
Kayaknya udah discontinue ya nih Pak.
Pake apa sekarang?
Helmet.
Yang buat, itu kan buat ganti head kan?
Metatech.
Metatech aja.
Transition, swap, settle, ignore title, scroll, show, synchronization.
Show, synchronization.
What is synchronization?
Synchronization apa tuh?
Oh, coordinate request 2 element.
Oh, jadi kita ngatur urutan ya.
Jadi ini sebenarnya harus tetap mikir UI state juga sih.
Kalau misalnya itu nya kompleks ya.
UI nya kompleks.
Tapi per komponen tetap mikirnya per komponen.
Cuman jadi banyak ya endpointnya ya.
Iya.
Berarti cukup satu endpoint, tapi bisa banyak routing nya kayaknya.
Pake query string kali ya.
Ini cocok buat anak full stack.
Yang backend nya bikin sendiri.
Kalau minta tolong sama anak backend.
Eh tolong bikinin dong.
Bikinin lagi, bikinin lagi, bikinin lagi.
Iya, itu tadi.
Jadi ini kan ngeringanin kerjaan front-end.
Tambah tangan jawab, backend.
Tambah tangan jawab, backend.
Gak ada kayak cuma oper-operan aja.
Waw, waw, waw.
Tinggal silahkan di diskusikan cara musyawarah mufakar.
Musyawarah mufakar.
Bentar, bentar.
Ini kan kita pakai form,
bakal di-post ke store.
Input nya title.
Kalau udah diketik, dia akan validate.
On-change di-validate.
Eh on-change trigger nya kan validate kan.
Terus di-post.
Kalau gak pake hexing,
waktu di-post itu 2 kali gue validate dan store.
Padahal kita kan maunya
nunggu validate kelar, baru store.
Ya.
Oke.
Hxing, closest,
form, titik 2, abort.
Abort.
On the input, will watch for request on the form.
Oh, punya validate dulu.
Kalau validate-nya gak kelar,
berarti form-nya di...
apa? Abort ya?
Gak di-post.
Gak di-post.
Oke.
ATMX also supports programmatic way
to cancel request.
Oh, ada nih.
ATMX abort event.
On-click ya.
ATMX trigger, request button,
ATMX support.
Transition.
Ini boosting ya, yang tadi.
Ah, apa ini?
Apa sih itu?
Gabungan, gabungan antara
jadi kalau misalkan
kita pake, apa?
Tadi kan harus pakai
Hx-post atau Hx-get.
Terus di-swap.
Terus habis itu di-swap atau di-trigger.
Ini kita pakai Hx-post saja.
Semua yang Ahref
Something itu akan request ke server.
Ditaro mana semua nya?
Hah?
Ditaro bebas dimana aja.
Oh, trigger-nya...
Itu kan gak, berarti kan Ahref block itu
kalau di-click gak pindah
keseluruhan ke halaman, block kan.
Target the body of the page.
Jadi kayak mau bikin SPA.
Ya.
Single page application.
Wah, keren ya.
Jadi misalkan kita punya
halaman pertama nih.
Di sini halaman pertama.
Itu kan pattern
shell standard aja.
Kan misalnya shell atas ada header
gitu ada navigasinya.
Di dalamnya main.
Oh ya, cuma kereplace seluruh body deh.
Gak bisa.
Misalkan ini Ahref
sama dengan
page 2.
Ya, about boleh ya.
Terus berarti di sini
Hx-boost.
Sama dengan
True.
Halaman kedua kita harus bikin
app.get
about
return halaman lain.
Terus harus balik lagi dong.
Ahref kembali ke halaman pertama.
Pake apa sih modelnya?
Super Maven.
Bagus ya, kok cepet juga ya?
Cepet sekali.
Free ya?
Wow.
Tampilkan halaman kita lihat ya.
Ini ya.
Ini H1 dan Ahref.
Eh kegedean. Nah, segini ya.
Kalau kita klik
about, dia langsung ke halaman
about. Udah ada transisinya lagi ya.
Tadi kita bikin transisinya.
Ini udah halaman kedua.
Ininya juga udah about.
Tapi kalau kita refresh?
Oh bisa juga. Bisa, kan ada.
Kan ada di notification.
Iya.
Tapi gak ada itunya.
Di sini gak ada Hx-nya.
Oh iya.
Karena kita refresh.
Iya, tinggal ditambahin aja.
Maksudnya pakai template-nya aja
nanti. Oh iya template.
Apa? Pakai blade-blade.
Blade itu blade.
Blade gak tuh?
Pakai...
Itu aja smartie-smartie.
Mistake.
Apa handlebar?
Oke. Ini bisa balik lagi, balik lagi.
Asyik.
Itu untuk boost ya.
Boosting. Progressive enhancement.
Progressive enhancement.
It degrees, degrees fully. Oh, kalau gak ada
JavaScript, ya udah behavior-nya kayak
ya kayak HTML biasa.
Yes, betul. Ini
barusan kita omongin, pakai template.
Mau pakai Go, mau pakai
bahasa lain ya, bebas ya.
Setuju, setuju.
Oke. Berarti sama ya.
Mirip kayak Astro juga ya.
Filosofinya sama.
Accessibility.
Accessibility.
Nice.
Use semantic HTML
as much as possible.
Ensure focus state is clearly visible.
Associate text label
with all form field. Maximize readability
of your application, appropriate font,
contrast, and so on.
Bagus juga nih.
Htmx target market-nya
full stack atau back-end
yang biasanya gak tertarik run-end.
Dikasih edukasi soal
accessibility juga. Jadi maksudnya
itu pentingnya pakai
semantic HTML. Kalau
tag-nya bener kan.
Jadi fungsinya juga
by default-nya ada
focus state, blablabla.
Coba lihat itu SSE extension sama
WebSocket. Gimana sih?
Bisa ya.
Pakai SSE ya.
Jadi ini gantinya polling kan.
Kalau terima event, ya udah
langsung di-replace yang kayak tadi.
Kayak contoh dashboard kan.
Install-nya begini.
Simple ya.
Oh wow.
Wow. Kok gampang?
Kok gampang?
Gampang protest, susah protest.
Gak protest sih.
Oh berarti tadi yang dashboard
tadi bisa diganti pakai antara SSC atau
WebSocket ya.
Kalau WebSocket tuh
by direction nih.
Kalau SSE...
SSE juga by direction.
Tapi HTTP.
Eh gak sih. SSC.
Dari atas.
Dari atas dia gak ngirim...
Kita gak bisa ngirim data.
Cuma nerima.
Nerima doang.
Kan dulu kayaknya kita pernah
bahas.
Iya. Masin saya bisa
bikin kasusnya 3 tuh.
HTTP request, polling,
SSC,
dan WebSocket.
Menarik.
Sudah habis sendiri.
Sudah habis tuh.
Satu sesi udah. Kalar itu semua.
Semua bahasa seluruh.
Gak setutup ngomongin yang lain.
Ngomongin tentang
minimal JavaScript di conference
JavaScript ya.
Apa argumennya kan sebenernya
itu library JavaScript
yang membuat kita gak usah banyak-banyak
nulis JavaScript.
HXPulse.
Ini apa?
Simple mechanism for interactive with browser
and story API.
Ini kayak router. Ini maksudnya
fungsionalitas yang biasa kita
pake create router atau next router.
Snapshot, undoing,
don't mutation.
Apa lagi yang menarik nih?
Request response.
Jadi kalau bisa bikin nanti jQuery, select dong.
Response error, send error.
Apa nih?
HX select ya?
Ini apa HX select?
Select the content
you want to swap from response.
Oh iya, kayak jQuery ya.
Kayak query selektor.
Terus diganti isinya
dengan outer HTML-nya.
Info detailnya itu
ada di div yang ini kali ya.
Atau di tempat yang lain ya.
So this button you should get to
info and then select the
element with the id info detail.
Info then select the element
with the id.
Gak ngerti gua.
Select the element
with the id info detail.
Which will replace the entire button
in the DOM.
Apa bedanya sama target?
Iya ya.
Buat nge-replace
button-nya itu sendiri.
Huh?
Terus ininya apa info detailnya?
Oh iya.
Oh iya.
Apa itu? Gak tau.
Oh, jadi dia ngambil isi dari
outer HTML dari info detail
ditaro ke dalam button.
Dibindak ke isi button.
Tapi konten dari endpoint
apa route info?
Itu tuh, coba itu kata
si...
Bisa, bisa, bisa sebagian
saja berarti.
Yang kasus kita bahas tadi misalnya server
kirim seperti apa?
Ada tag HTML, head,
segala macam.
Yang direplace disitu cuma
isi info detailnya.
Berarti sebagian, sebagian
saja ya.
Thank you, thank you.
Gak kira mengerti.
Wow, keren.
Jadi gimana, gimana?
Kita coba ya, kita coba ya. Terakhir ya.
Jadi misalkan
kita punya
ini kita cancel dulu.
Misalkan
kita punya tadi ya.
Yang button tadi.
Oke.
Terus, harus
kita punya HX
get info.
Terus isinya disini adalah
info detail ya.
Ada dua, kasih aja ya.
Ya, tes.
Terus, abis itu satu lagi
adalah div dengan
id info detail, gitu ya.
Iya.
Jadi yang akan muncul adalah info detail ini ya.
Gitu.
Gak kelihatan textnya isi info detailnya apa.
Oh ya, sorry. Info detail.
Oh ya. Nah.
Harusnya sih bisa.
Oke, get info.
Keren.
Yang didapat
adalah yang info detail. Sedangkan
iya, padahal
padahal yang dikirim kan semuanya ya
ini ya. Tuh, dua-duanya kan dikirim ya
responsnya ya. Tapi yang
diambil hanya yang id info detailnya
aja.
Nice.
Oke.
Oke.
Ada lagi yang menarik?
Ini kayaknya pada jago-jago HTMX nih ya.
Boleh, boleh. Kalau ada yang menarik, boleh
tolong dikasih info
biar kita bisa
bahas terakhir. Caching.
Caching.
HTTP caching aja biasa. Karena kan
kirim HTML kan ya.
Request, request response biasa ya.
Docsnya kurang ya. Setuju sih.
Agak muter-muter sedikit ya.
Biasanya teman-teman
belajar HTMX dari mana nih?
Yang udah pintar-pinter nih.
Belajar HTMXnya dari mana? Referensi dong.
Eh, kepencet.
Tutorial. Itu.
Saya kemarin ketemu ini nih.
The Valley of Code.
Itu dia banyak banget. Mulai dari
internet, web, dan lain-lain sampai ada
HTMX segala. React juga
ada. VS Code, GitHub.
Oh, itu semacam roadmap
gitu ya? Kayak
free code cam atau semacamnya
yang hal-hal yang harus dipelajari
oleh seorang web player.
Nah, ini kalau di HTMX nih
apa, materialnya itu
cara installnya. Get request, swap,
post request, target, loading indicator.
Tadi udah juga ya. Confirm action
kita belum. Trigger udah
sedikit. Request header,
response header kita belum sampai
kesana. Terus ada event.
Ini
cukup membantu sih.
Ya, tadi itu point yang security
bagus tuh. Walaupun ya
lebih singkat. Oh, dari
YouTube PrimeGen ya?
Primagen.
Primagen. Primagen.
Dimana sih bacanya?
Primagen. Primagen ya?
I don't know.
Primagen.
Primagen. Keren.
Gak tau siapa sih itu.
Cukup convincing ya.
Cukup convincing ya. Ternyata Artemis ya.
Security.
Lebih simple daripada
framework-framework yang lain sebelumnya
pernah kita bahas.
Lebih simple dari custom element.
Yalah jelas. Jauh.
Kita gak ada nulis
JavaScript front-end
sama sekali ya.
Dan lebih dekat ke jQuery.
Custom element itu kan didesign
sebagai solusi yang
kayak native browser kan, yang
harusnya tinggal kopas aja jalan.
Tapi praktiknya nulisnya
agak kelibet.
Jadi ini bisa
mencapai itu kan
langsung jalan
tanpa nulis
client side JavaScript.
JavaScript sama sekali. Mungkin nanti akan butuh
tapi untuk hal-hal
yang sederhana seperti yang
kita demo kan tadi kayaknya gak ada sama sekali.
Masih zero-zero.
Kalau kayak custom field pose, misalnya kan tadi kan
bisa HX pose.
Tapi kita mau
kita mau definisikan
data yang mau dikirim kayak
mau ngambil data dari cookies
atau mau ngambil data dari session storage itu
bisa gak sih kayak custom pose
datanya? Ada gak?
Endpoint.
Benar, endpointnya ada.
Tapi kan data yang dikirimkan kan
perlu ada yang kirim.
Client yang kirim.
Sedangkan itu cuma button.
Tadi.
Tapi isi pose data, pose body-nya itu
masukinnya gimana sih?
Pake form.
Oh iya, kalau ada body
pake form. Kalau butuh putih
putihnya kan ada di input.
Iya, column session storage
dari local storage.
Taruh di hidden.
Input hidden.
Oh iya.
Kalo nulis Laravel
Blade sampai sekarang kayak gitu.
Cuma mungkin ada di doksnya yang tadi
kita belum baca sampai detail, mungkin
ada helper-nya. Kalo
cukup umum, cukup banyak dipake.
Coba ya.
Body.
Mana ya? Coba.
Request and responses.
Examples.
Nah, sebelumnya
warning security-nya dia
bagus deh. Jadi ini kan
apapun yang di HTML jalan.
Kayak tadi tuh, apa, response-nya
kirim ada HX attribute-nya
bisa jalan juga. Jadi kayak harus
ekstra hati-hati.
Kalo misalnya ada
user yang bisa masukin
HTML yang malisius, ya udah jalan.
Jadi harus
di sanitize.
Ini bukan.
Nah.
Berarti harus
pake JavaScript di front-end ya?
Nggak, itu kalo
di apa, apapun
yang bisa jalan di HTML bisa
di slip-in, bisa dikirim, dan akan
jalan di front-end.
Jadi harus di sanitize. Tadi kan
dia kasih contoh-contoh sanitize-nya.
Iya, kayak gini ya.
Secure your cookies.
Nggak, nggak ketemu.
Nggak ketemu contoh
real-nya.
Socket, cookies.
Reference. Nggak, belum
ketemu.
Kalo misalkan
kita
bikin
form,
terus ada submit button,
itu data yang kekirim
di dalam form itu
semuanya datanya kekirim, gitu ya?
Form event-nya.
Jadi apa, data itu ada
di dalam event
on submit
punya form-nya tuh. Event-nya
yang fire tuh namanya
submit.
Ini example-nya nggak ada
contoh form gitu.
Itu kan kayaknya salah satu.
Tapi kan cuma satu input
kalo contohnya tadi kan misalnya
datanya banyak gitu ya, yang biasa kita
kirim di body post request.
Misalnya yang gini nih.
Oh ini ada yang click to edit.
Bisa kan gini.
Terus ini hx post.
Terus kalo kita click submit, dia akan
ngerimin ke post info ya.
Terus disini kita bisa
dapat apa?
Ada event-nya nggak?
C.request.body
Ya harusnya ada datanya
berarti.
Nggak ada. Udah di C
aja, C.
Coba aja.
Loh.
Info detail?
Oh belum di refresh.
Udah kan?
Kok info detail?
Karena itu ditanda chtml.
Oh iya.
Tapi C-nya nggak ada. Oh di server.
Sorry, sorry, sorry.
Lupa.
Oh langsung coba.
Mana body?
Atau json?
Coba mungkin ada json.
Enggak dong, karena dia kan
html itu apa namanya?
Gini?
Bukan html, bukan itu.
Function?
Gini?
Kok error?
Coba.
Coba klik tuh edit.
Response.
Kosong.
Mungkin bukan body kali.
Oh harus di dot json.
Coba C dulu.
Eh mana dia?
Apa lagi ini?
Atas, atas.
Banyak banget.
Context.
Outgoing.
Get. Set.
Body. Text. Json.
Html.
Params nggak?
Bukan ya? Bukan params ya?
Params, query string harusnya.
Oh iya, query string.
Coba baca dulu ya.
Harusnya sih
di example yang klik tuh edit ini.
Coba postnya.
Coba postnya tadi.
Di halaman depan,
postnya itu.
Di network tab.
Oh iya.
Isinya apa info itu?
Payloadnya apa?
Oh form data.
Ya form data kan.
Name langsung.
Coba view source deh.
Response.
Bukan payload.
View source.
Gimana?
Ya berarti
C. Tadi ya.
Baca ini dulu.
Sebenernya itu si Hono nya punya sih bukan si Html.
Iya, Hono nya ya.
Hono, Hono.
Ngambil body, body, post data gimana caranya?
Form ya?
Iya.
Hono request.
Response kan.
Request, request bener.
C, C, C.
Itu yang get.
Where is header.
Apa lagi nih?
Parts body.
Parts body.
Oh berarti rec, bukan request.
Req.
C. rec.
Parts body.
Ya.
Coba.
Response, response, response.
Promise.
Await.
Oh.
Kok gak enak banget sih?
Kok gak enak ya?
Null.
Ya ada berarti kan nilainya.
Beneran.
Ya ada berarti kan nilainya.
Ya ada berarti kan kita dapat.
Kekirip udah ada.
Gimana sih?
Parts body bener.
Oh bukan.
Dot name gitu ya.
Gini.
Oh enggak.
Dot name, dot name.
Kayaknya wait sampai
parts body nya udah dikurung gak?
Oh iya bener, bener.
Sama wait nya.
Wait nya masuk.
Kurung.
Yes.
Oh gitu caranya.
Kalo pake express ya beda.
Tinggal cari aja
part body nya karena harus di install dulu kan
middleware nya ya.
Sesuai.
Framework masing-masing.
Oh ada form data juga ada ya.
Coba aja.
Direct form data.
Form data.
Oh iya.
Dot get name tuh ada tuh.
Bisa gitu.
Oh iya.
Asik ya.
Dan sesuai
perinsipta di request response.
Ya pokoknya kita harus ngenalin apa?
Genis
post request nya apa?
Kita yang
Batten.
Batten nya yang diklik.
Tetapi ngirim
custom data gak bisa ya.
Harus pakai form nya.
Dibungkus form.
Kasih input hidden.
Coba kalo gak pakai
form.
Atau form nya gak dikasih aix
post.
Data atribut.
Batten nya dikasih data atribut.
Ini aix post.
Ya.
Aix post.
Gini.
Tapi isinya apa?
Paling kosong.
Ininya berarti form data nya kita
apus.
Chain.request aja coba di
log chain request isinya apa?
Gak perlu pakai wait ya.
Coba isinya dulu.
Isi payload.
Isinya apa?
Oh tetep ada.
Tetep dapet.
Kok bisa tau dia?
Udah
di refresh belum?
Atau mungkin kalo
batten yang di dalam form
otomatis ya?
Coba gak pakai form.
Eh gak ada ya?
Gak ada payload.
Iya gak ada payload kosong.
Berarti disini
gak dikirim apa-apa ya?
Ya standar
event aja.
Jadi harus pakai form.
Meskipun form
aix post nya itu bukan di form tapi di
batten. Tetep bisa.
Aix post atribut.
Wait.
You can control...
Oh parameters.
Wait.
Gimana caranya ini?
Gak ngerti.
Nih.
Tunggu ya.
Tuh.
Aix post.
Aix post.
Tapi dari Aix post.
Terus kemudian...
Issue oppose.
Yang paling bawah kan you can control the data
submitted with the request in various way
documented in parameters.
Like...
By default is value
kalau ada value nya.
Or if the element is a form
it will include values of
all inputs.
Otomatis ya?
Kalau form.
Kalau element
hx include.
If you wish to include the values
of other elements
the element include.
Yes, by config request.
Bebat ya, jadinya.
Malah ribet ya.
Ya, pake pattern nya HTML
apapun yang mau dikirim
pake form.
Semantik.
Back to nature.
Back to basic.
Masa nya tetep ada escape hatch nya
kalau misalnya dari tempat lain
kalau ribet, kalau harus di platform semua
bisa kan tadi pake target
selektor.
Bisa tapi encourage
tetep pakai
polanya HTML.
Oke.
Kesimpulan, berarti
HTMLX adalah front-end framework
yang sangat
minimal JavaScript yang
kita tulis.
Terus...
Apa keuntungannya?
Keuntungannya adalah
tadi nggak perlu tulis JavaScript.
Minimal.
Minimal JavaScript.
Persetail. Apa?
Agnostik.
Agnostik buat berbagai framework.
Back-end nya bebas apa aja.
Hello Sun HTML JavaScript
kalau mau bisa.
Kalau misalnya mau pake full stack framework
apapun dari node
atau apalah...
Algo.
Terus dia berarti
kerja beratnya itu di sisi
server.
Jadi akan banyak
bersentuhan dengan, kalau tim
berarti akan banyak tektokan
sama orang back-end.
Gitu kan. Termasuk juga
itu.
Tagian server.
Berarti kerjaannya lebih berat kan.
Maksudnya renderingnya
di sisi server kan.
Kalau misalnya kita pake SPA kan renderingnya
di sisi klien juga ada.
Terus kalau ada autoscale-an
kundua tiati itu.
Nanti kalau sering gigit
net trigger buka itu.
Ini kan. Norholit nih.
Servernya langsung naik. Dapat
surat cinta dari telit.
Loadnya naik. Apa lagi
pakai websocket.
Terus real-time.
Gasboard tadi.
Ya karena nggak ada proses
apalah compile.
Mesti hati-hati ya. Saya bikin request
mesti hati-hati. Mesti, maksudnya mesti
mindful lah. Sama tadi
inject. Apapun yang diinject
bakal jalan. Yang dikirimin
jangan semua HTML-nya yang berubah
aja. Jangan satu halaman
semuanya dikirimin. Gitu kan.
Walaupun nggak ada perubahan, terus dikirimin semuanya.
Injection itu loh. Kode HTML
apapun kan bisa dijalani. Kode HTML harus disanitize.
Berarti harus disanitize.
Harus disanitize.
Cuman kelebihannya juga adalah
kompleksitas di sisi client
front-end framework client
dengan
state management,
terus
use effect,
use memo, dan lain-lain itu
kayaknya bisa di minimalisir ya.
Jadi langsung ke server
karena state-nya disimpan di server.
Ini cocok untuk
aplikasi
yang session-nya ada
di server ya.
Jadi
kembali lagi state-nya ada di server.
Artinya
tidak bisa digunakan
un. Maksudnya
bisa aja sih sebenarnya. Cuman
kalau misalnya
digunakan di kayak new site
yang sebenarnya stateless,
kurang cocok.
Kurang kurut juga ya sama bandwidth.
Request-nya jadi kebanyakan.
Ya nggak sih?
Ya sekali request berapa gede-nya ya?
Ya misalnya kalau kayak ada sesuatu yang diklik,
keci-keci-keci,
bisa aja sih sebenarnya.
Jadi caching kan sebenarnya.
Strategi caching-nya lebih sederhana
karena hanya caching di sisi
server kan. Maksudnya
HTML-nya di caching cukup
gitu kan. Kita nggak perlu mikirin caching macem-macem kan.
Iya.
Nggak perlu mikirin caching di
database segala macem. Loh, ilang.
Karena
hasil rendering-nya aja yang
di caching gitu kan.
Apa lagi ya?
Sudah ya.
Oh, hal lain yang seru
walaupun ini kan sebetulnya teknologinya
terkesan old school ya.
Maksudnya, bukan old school sih
cuma back to basic.
Tapi dia kompatibel dengan
apapun, apa?
Web API yang modern apapun kan
dia nggak
berlawanan gitu loh. Jadi kayak
view transition tetap jalan. Terus banyak
helper-helper kayak intersection
observer-nya juga ada. Jadi
apa ya, mindset-nya back to basic.
Tapi kita tetap bisa pakai
macem-macem fitur
API terbaru.
Berarti cukup ya untuk
malam ini. Kita udah lumayan
explore cukup jauh dengan
HTMX. Cukup puas.
Jadi, mudah-mudahan
teman-teman juga yang
yang lagi nyari-nyari
front-end framework, mungkin bisa dapat
pencerahan. Yang
beberapa kayaknya udah ada yang pakai juga.
Apa? Udah bagi-bagi pengalaman
juga.
Jadi, kita
cukupkan sampai di sini.
Kita ketemu lagi minggu depan dengan topik yang
berbeda. Selamat malam.
Selamat istirahat. Sampai jumpa
minggu depan. Bye-bye.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb 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...
2 Jan 2024
Yang Seru di 2024
Episode ini membahas tentang hal-hal seru yang dinantikan di dunia web development pada tahun 2024. Para host membahas p...
4 Jun 2025
Ngobrolin Astro
Episode ini membahas secara mendalam tentang fitur server-side Astro yang menjadikannya framework yang sangat versatile....
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 .