🗣️ Ngobrolin HTMX - Ngobrolin WEB

3:52Kalau saya, eh justru kemarin orang Bandung malah ke Jakarta, Pak Dika.

3:56Ke kampus hektiven kemarin, iya. Kita ketemu ada acara open house jadi Pak Dika diundang.

4:04Kita kapan diundang sih?

4:08Itu besok hari Selasa kan diundang. Acara yang lain.

4:12Itu nggak diambil masa kan, nggak narik masa siapa-siapa.

4:16Narik masa yang masa ibu sama masa budu.

4:20Iya, iya. Nah, kita langsung ke topik ya. Malam hari ini kita akan ngobrolin tentang

4:31salah satu framework yang lagi naik daun. Salah satunya karena memes ya.

4:36Jadi menarik ya. Teknik marketingnya adalah menggunakan memes ya.

4:40Apa sih belum pernah lihat?

4:43Terutama twitternya ya. Terutama twitternya.

4:47Di twitter official mereka juga mereka yang bikin memes-nya?

4:51Iya, mereka yang bikin memes-nya. Jadi mereka kayak lucu-lucuan.

4:55htmx_org.

4:57Ini lucu-lucu.

4:58Iya, underscore org.

5:01Nah, itu namanya adalah kita bahas tentang htmx.

5:05Htmx.

5:07Kadang-kadang apa ya, ada beberapa orang yang menganggap tidak serius karena memang

5:13sosial medianya nggak serius gitu. Ini beneran nggak sih, gitu kan?

5:19Oh ada essay-nya ya? Saya baru tahu nih.

5:23Enggak, meme bagi mereka ternyata dianggap sebagai bagian dari kayak media.

5:29Jadi coba aja buka halaman itu, mereka ngeling artikel-artikel yang serius.

5:33Cuma dibawahnya memes-nya juga di-feature di situ. Dan itu makes sense sih.

5:38Maksudnya kan, kayak tulisan yang serius sampai berbusa-busa itu kan salah satu cara komunikasi.

5:45Mem juga cara komunikasi kan, kalau emang jadi banyak yang pengen nyoba, berarti sukses.

5:51Cuma kalau misalnya maksain, norak, terus malah image-nya jelek, ya berarti gagal.

5:57Makanya kan tadi saya bilang teknik marketing kan, teknik marketing-nya adalah memes, salah satunya.

6:02Ini cukup unik ya.

6:04- Itu loh notepad, atasnya yang banner. - Oh banner, iya. Notepad ya?

6:09- Like treated with HTML.

6:12- Siapa yang nge-noding HTML-nya pakai notepad? Pernah pakai notepad?

6:18- Dulu pas pertama belajar. - Oh iya, pernah ya?

6:21- Iya. - Pernah semua kita ya berarti ya?

6:25- Tuh ada rekomendasi liburan tuh. - Tapi terakhir jadi blok-blok plus-plus. - Jonggol. - Jonggol, Gunung Batu atau Curug.

6:35Liburan keselamasi coba. Ini daerah mana ya? Tangsel ya? Tangerang ya? - Bandung Corit, enggak.

6:41- Bandung ya? - Enggak tahu. Kan tadi bahasa Bandung.

6:45- Oh iya. Jadi ini adalah salah satu teknik marketing-nya tuh, dia kayak menyela-nyela dalam tanda kutip ya?

6:53- Iya. - Siapa yang akan menang?

6:59- Google, Twitter, Facebook, React, HTMX, apa sih tadi? You get a lunatic in Montana and his internet friends.

7:09- Iya. Nah, yang mau saya sampaikan adalah meskipun teknik marketing-nya lucu-lucuan kayak gini,

7:18tapi yang buat itu dosen loh. Yang buat itu dosen. Jadi namanya Carson Gross itu adalah dosen.

7:28- Itu kan orang yang fotonya di-meme tadi bukan? - Eh, nggak tahu saya. Iya kali. - Tadi nggak meme yang tadi?

7:34- Oh iklannya banyak sekali. Iklan, iklan. Do not accent. Nah ini aja nih.

7:41- Nggak ada fotonya. - Carson Gross adalah creator HTMX dan hyperscript. The mind behind group brain developer,

7:49ini apa? Block kali ya. A professor of software engineering at Montana State University.

7:56- Wow. - Ingat nggak tadi ada meme-nya lunatic.

8:01- Oh, Montana tadi ya. Oh itu maksudnya. - Internet friends. Jadi kesannya dia orang random banget lah.

8:11Terus kayaknya Montana itu kan bukan kota besar, nggak kayak Silicon Valley gitu.

8:18- Iya, iya, iya, iya. - Atau apa? Kayak kota Bukatena gitu kali ya. Kalau di sini equivalent-nya.

8:25- Coba kita lihat fotonya ya. Jangan-jangan ini orangnya ya. - Iya, tadi sih nge-search kayaknya sih itu.

8:33Jadi dia nggak memimpin mutanya sendiri. Kok lucu sih. Ini masih ketawa lihat munyinya.

8:46- Barusan lihat soalnya. - Iya. Apa namanya, dia itu bukan hanya mencela dalam takut, mencela framework lain,

8:56tapi mencela dirinya sendiri juga, gitu. Jadi memes-nya itu apa ya, entertaining gitu ya. Menghibur.

9:04- Itu apa sih? - Woi, woi, woi.

9:08- Kenapa nih yang nge-berair? - Iya ya, apa maksudnya. Kita nggak dapet nih konteksnya.

9:16- Karena belum pakai. - Oh itu hydration, hydration.

9:21Oh ternyata ada juga yang pakai notepad ya. Kalau Valeri kan pakainya notepad plus-plus. Agung nih pakai notepad.

9:42- Kalau gue tuh gara-gara dulu belajarnya pakai front page. Tahu nggak dulu Microsoft itu punya wish week editor.

9:51Karena numpang di rumah, di rumah orang, di rumah saudara. Terus wah ini enak ya, bisa gini.

9:57Bisa wish week UI editor, bisa nge-check kode HTML-nya, jadi ngerti. Terus disimpen .html, develop with this.

10:06Dan kirain ya udah aman. Assumsi. Duh gue nggak ngerti. Duh gue nggak punya komputer, nggak punya PC di rumah.

10:12Jadi pokoknya dimana ada yang bisa ditumpangin, buka. Kirain Microsoft front page itu kayak Microsoft Word atau apalah.

10:19Yang bagian dari office week yang dimanapun ada. Ternyata nggak dibuka di Warnet, bukanya dari notepad. Ya udah.

10:28Ini beneran didokumentasikan semua ya. Semua memes yang muncul ternyata ya.

10:38Oh udah habis-habis. - Ada Haiku-nya, JavaScript fatigue, java script fatigue.

10:47Longing for hypertext already in hand. Ya boleh.

10:52Kalau yang nggak tahu Haiku itu apa? Haiku itu? - Format puisi. - Puisi ya? - Ya semacam puisi.

11:00Pokoknya kayak puisi dari Jepang emang puisi singkat. Paling atas 5 suku kata, tengah 7, bawah 5.

11:08Terus itu tuh kayak format puisi kuno. Biasanya kayak untuk hal-hal simpel kayak keindahan alam, atau makanan yang hal-hal yang simpel lah.

11:17Cuma 3 kalimat kan. Penek banget. - Wah di repost kita. Twitternya tuh.

11:23Di repost sama TML. Beneran. - Masa sih? - Ini di retweet-retweet.

11:31- Weee. - Ternyata kita di-recognize.

11:37- Wow. Oke. Jadi kita cukup ya happy-happy-nya. Sekarang kita serius. Serius mode.

11:48ATMX itu apa? - Jadi ATMX itu apa? - ATMX itu adalah front-end framework ya.

11:57Tapi agak sedikit berbeda approach-nya kalau front-end framework kan kita biasanya nulis kode dengan JavaScript kan.

12:10JavaScript front-end framework. Nah ini dia memanfaatkan HTML sebagai, jadi HTML yang di-extend.

12:23Makanya ada X-nya gitu kan ya. Jadi sintak-sintak atau ya apa namanya, property-property HTML-nya bisa ditambahkan.

12:33Misalkan kalau, nah ini ada motivasinya nih. Motivasinya adalah kenapa hanya anchor dan form yang bisa HTTP request.

12:46Jadi kalau misalkan kita mau ke halaman berikutnya misalkan halaman about gitu kan. Kita pakai anchor/about gitu kan.

12:54Itu kan HTTP get ya. Untuk mendapatkan halaman baru. Form juga sama. Bisa get, bisa post.

13:04Terus juga kalau click dan submit itu hanya click dan submit yang men-trigger event. Terus hanya bisa get dan post.

13:14Nggak bisa patch, nggak bisa yang lain. Dengan HTMLX itu dia tambahin dengan prefix HX-, misalkan kita mau post dari button aja.

13:25Nggak perlu pakai form. Kita bisa posting atau bisa kirim HTTP request post ke /click.

13:34Dan kemudian hasil respons-nya akan di swap, apa ya, swap itu kayak diganti, ditukar dengan outer HTML dari button ini.

13:48Outer HTML-nya, berarti di luar ini ya. - Bukan outer, jadi si button-nya yang diganti.

13:55- Button-nya yang ketukar ya. Button-nya hilang. - Ya. Sebelum-belumnya.

13:58Kalau inner HTML yang di dalam button. - Baru di dalam button.

14:01- Baru di dalam button-nya, children-nya. - Ya.

14:04- Cuma markup-nya tetap pakai markup menyerupai HTML ya. - HTML, ya.

14:08- Kayak kalau lihat kan React pakai solid dan lain-lainnya, pakai JSX.

14:13Jadi apa format markup khusus tapi yang based on JavaScript kan, sintaksinya. Nah kalau ini berarti markup-nya based on HTML.

14:23- HTML, betul. - Expectasi response adalah take HTML.

14:28- Ya. Jadi yang dikirimkan itu adalah HTML. Makanya HTML over the wire. Salah satu ininya ya konsepnya.

14:36Jadi HTML yang dikirimkan. Kalau kita mau kirimkan full HTML, boleh.

14:40Kita mau kirimkan part of HTML-nya juga boleh, seperti ini misalkan. Slash click ini kita kiriminin H1 misalkan.

14:47Dia akan jadi si button-nya hilang, digantikan dengan H1.

14:52- Ada beberapa... - Dari konsol nggak bisa di tes ya.

14:58- Nggak bisa. Harus pakai ini, script. Bisa langsung pakai script kayak gini.

15:03Bisa juga pakai NPM ya, standar ya. Tapi by default pakai begini aja udah bisa.

15:10- Tuh, kecil ya ukurannya. - Serasa jQuery ya.

15:16Semuanya kembali ke jQuery.

15:22- Tapi dengan kita menggunakan ini, penggunaan JavaScript kita jadi minimum.

15:26Kita hanya menggunakan property-property yang disediakan oleh htmx.

15:31- Kalau bahasa lainnya, interactivity API bukan sih namanya ini? Kayak gini?

15:36- Interactivity API ya? Kalau alpine itu kayak gimana? Kayak gini juga ya bentuknya?

15:42- Kayak ini kan? Kayak Vue juga kan? - Vue... Petit ya, kecil ya?

15:48- Vue.cs atau kayak Svel juga begini kan? - Svel compiler.

15:54- Agak beda sih. Vue ya, kayaknya lebih dekat ke Vue ya. VE, Vsomething gitu kan ya.

16:01Tapi tetap ada kode JavaScript-nya. - Itu kayak apa sih, atribut custom-nya ya?

16:09- Iya, Svel juga ada itunya. - Itu sekilas tentang htmx.

16:19- Nah, htmx suksesornya apa tadi? Intercooler. - Intercooler.

16:24- Namanya, lucu. - Ini yang bikin si Pak Dosen itu tadi juga sama.

16:30- Oh, ini cikal bakalnya ya. - Jadi, Ajax with attributes.

16:39Nah, dia akhirnya evolusi menjadi htmx. - Oke, incremental, simple, unrobustif.

16:48Ini masih di-maintain nggak ya? - Kayaknya dipindahin dari Pak.

16:56Maksudnya versi lamanya yang versi satu tetap di-maintain, abis itu ya dipindahin ke htmx.

17:05- Dan yang menariknya juga, mereka atau si Bapak Dosen itu juga menerbitkan buku namanya Hypermedia System.

17:15Ini bisa dibaca gratis ya? - Oh, gratis.

17:19Read online-nya gratis. Ini tentang gimana caranya bikin aplikasi tapi dengan konsep htmx tadi ya.

17:29Dia menjual htmx sebenarnya ya, sederhan aja.

17:33- Cuma mungkin di buku itu kayak dia ngejelasin hal yang bukan teknis kodenya tapi kayak underlying filosofi gitu kali ya?

17:42Biasanya kalau ke dunia kan dia terlalu suka ngelus-ngelus panjang yang susah banget yang detail-detail tentang apa kayak landasannya,

17:50terus kayak apalah spesifikasi, blablabla.

17:53- Ya, jadi dia bahas dia awali dengan web 1.0 itu seperti apa, yang kita sempat ngomongin juga kan,

18:02apa, teknik rendering awalnya kan, page HTML, terus habis itu server render, terus habis itu ke client side, ya kan? Ini kan client side.

18:12Terus habis itu datanya dikirimkan dengan JSON gitu.

18:16Sedangkan si konsep htmx dan hypermedia ini adalah kita ngirimin HTML.

18:22Itu sih perbedaan utamanya.

18:29Jadi nggak ada nggak, bisa nggak sih kalau misalnya tag yang dikirimkan itu, misalnya kan HTML diterima,

18:38tetapi ada dikasih ini lagi bisa nggak kayak tag H, HX-nya itu?

18:45Misalnya button tadi kan direplace jadi list misalnya, tapi HTML yang dikirimkan itu ada HX kliknya gitu.

18:58Apakah langsung dehydrate juga yang elemen yang baru direplace itu bisa punya event juga nggak sih?

19:04- Wah, nggak tahu ya. Harus dicoba sih kalau itu ya.

19:09- Ada playgroundnya nggak sih? - Baca dokumentasi dulu.

19:13- Baca dokumentasi dulu. - Apa? Baca sekilas, habis itu entar coba apa?

19:19- Htmx in a nutshell. - Oke, kalau anchor tag kayak gitu.

19:29Kalau diklik pindah ke request ke blog, itu kan responsnya dokumennya.

19:37Nah, terus coba scroll lanjut.

19:42Ini dia ada HX trigger, ada targetnya, ada swapnya. Swapnya itu kayak kita mau swap inner HTML atau outer HTML atau body.

19:51- Di swap dengan target itu ya, parent div, asumsinya di parentnya ada yang idnya parent-div.

20:03Oke, scroll ke bawah lagi sedikit.

20:07When a user clicks this button, issue HTTP post request to, oh tetap require endpointnya berarti.

20:16Use the content from the response to replace element with the id parent-div.

20:28- 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.

20:44Bisa trigger HTTP request sesuai dengan minatnya, motivasi.

20:50- Apa pun tag-nya itu nggak hanya anchor dan form ya. - Berarti binikartunggal HTTP request.

21:02- Nggak masuk, Mas. Boleh coba lagi, Mas. Kurang, Mas, kurang.

21:12- Lanjut, scroll. - Installing, installingnya dia saranin langsung pakai CDN, yang pertama ya.

21:19Saking kecilnya ya dia breaking karena ini kecil dan jadi nggak butuh compile ya.

21:25- Ini bahaya nggak sih kalau pakai CDN begini? - Kenapa bahayanya?

21:30- Kalau CDN-nya terkompromis. - Kalau CDN-nya, ya, kompromis.

21:34- Atau jangan-jangan ada mengerihkan. - Untuk enterprise client kita diwanti-wanti untuk tidak pakai dari CDN yang third party.

21:46- Ya kita nge-serve sendiri juga bisa. - Download aja taruh di static folder.

21:52Download a copy, baru terakhir dia kasih option-nya npm.

22:02Tapi untuk menjalankan ini kita butuh backend kan ya, nggak bisa langsung sendiri kan.

22:09- Itu karena tadi itu ya, dia based on request, HTTP request, request-response.

22:17- Ini ada pakai WebPatch juga bisa ya ternyata ya. Ajax. - Ajax Amsterdam.

22:25- Nah ini bukan hanya get dan post tapi bisa semua sampai delete pun bisa.

22:30- Put patch juga bisa ternyata ya. - Bisa, iya.

22:34- Sampai sekarang masih bingung antara put dan patch ya. - Iya, bukannya dua-duanya buat edit ya.

22:41- Update nggak om? - Iya.

22:44- Nggak ngerti patch loh patch. - Kalau teman-teman ada yang mengerti bisa dijelaskan.

22:50- Terus? - Coba detail win playground, bisa ya?

22:59- Mungkin bisa. - Coba, detail win playground.

23:05- Emang ada backend ya, detail win playground? - Ya nggak, buat front-end-nya.

23:10- Oh, kita ini aja langsung. - Di local.

23:17- Di localhost, berarti harus pakai server ya. - Server apa aja?

23:23- Mau coba nih, mau coba. - Served index HTML aja.

23:30- Coba ya. NPM create HONO lah ya.

23:37- Oh, ini udah ada ini ya. NPM create HONO htmx live.

23:53- Live coding, yay. - Kita pakai apa? Boon atau Deno atau Node.js?

24:00- Kurang trendy lah. - Cuma ngeser index HTML doang.

24:07- Nggak kayak, anak jaman sekarang kan anak jaman now harus pakai Blitz.js.

24:13- Aduh. - Jangan neks.js dong.

24:19- Justru pakai htmx biar nggak usah pakai nxt. - Iya, biar nggak pake react gitu.

24:26- Terus dikasihnya nxt.js, mengapa? Pakai boon ya? - Iya, boon aja boon.

24:33- Boon, install. Emang NPM soalnya belum punya boon. - PNPM nggak ada?

24:41- Nggak, ini masih ini banget, yaudahlah Node.js lah, sama kan ya.

24:47- Udah lah, sama ya. Maaf agak lambat sedikit ya. - PNPM dong.

24:54- Saya pakai nxt soalnya. Htmx live. Oke, ini udah ada ya.

25:02Kita pakai z aja ya. - Akhirnya pakai z juga.

25:07- Apa nih? - Ada HTML Skeleton nggak?

25:12- Ada, ada, harusnya. Index ts. Hello Honu. Oh, kita pakai ini.

25:19Import html. Kok from lead? Honu, Honu HTML ya kalau nggak salah ya?

25:29- Iya. - Terus...

25:33- Bisa itu pakai misalnya public kan, public dir, literally index html gitu, nggak ya?

25:40- Bisa, bisa, tapi kayaknya begini aja. Oh, kebalik ya, html ini ya.

25:48- Iya. Oh itu, wow. - Ini aja langsung dogpipe.

25:54- Oh bisa. - Html, add, ya terus, terus, terus.

25:59- Tep-tep aja. Terima kasih AI. - Oke. Terima kasih AI.

26:04Di sini berarti kita tambahkan yang tadi ya. Install. Ini aja ya?

26:10- Iya. - Sudah?

26:15- Sudah, terus langsung copy aja demo button-nya. - Iya.

26:20- Gak bisa on-click console lock ya. - Ini ya?

26:27- Iya. - Maksudnya nggak bisa arbitrary...

26:29- Tapi ini ada parang div, yang tadi aja yang awal ya. Yang ini.

26:34- Yang mana aja ya, boleh. - Gini?

26:41- Gak kejadian apa-apa juga kan belum ada endpoint click.

26:46- Iya, kita bikin. Ini kita jalanin dulu ya. NPM run dev.

26:54- Core 3000, localhost. Oke, ini kalau kita cek networknya, error. Ini error apa? Oh, pop icon.

27:11- Pop icon. - Kalau di-click, klik tapi 404 ya.

27:17- Berarti sudah sukses sebenarnya. - Nah, udah betul.

27:22- Kita perlu bikin, itu POST ya? - Iya, POST.

27:28- Coba GET aja. - Mau GET aja?

27:33- Iya, sama aja sih, apapun jadilah. - Eh, jadi udah ada tuh.

27:37- Iya. - Return, bukan, return-nya harus HTML kan?

27:42- Iya, harus HTML, betul. - Nah, string kan HTML. Bisa di-render sebagai HTML.

27:48- HTML, apa nih? H1. Eh, H-nya mana? - Itu HXGET.

27:59- HXGET. - Gini ya?

28:02- Tadah. Oh, belum di-refresh. - Refresh.

28:09- Tadah. - Nah, sekarang pertanyaan saya selanjutnya tadi.

28:15- Coba di yang return-nya itu tadi. - Return.

28:21- Return. - Di H1-nya klik itu HXGET.

28:25- Oh, ditambahin lagi ya tadi ya? - Iya, HXGET.

28:28- Get. - Slash button.

28:32- Full. - Gini.

28:34- Ya. - Hmm. - Wait, wait, HX work. HX work outer HTML juga. Nah, bikin update button.

28:46- Buat update button-nya. - Tadi udah ada nih.

28:50- Iya. - Cepet sekali, udah gitu.

28:53- Balik lagi ke, berarti harus, dia harus balik lagi ke button. - Fokus aja.

28:58- Wow. - Gini, balik lagi ke klik, gitu.

29:02- Balik lagi ke klik. Iya, balik lagi ke klik. Jadi bisa, blok blik, blok blik. - Toggle, toggle.

29:07- Toggle. - Nah, coba.

29:10- Klik, klik. - Nggak ada button-nya?

29:13- Oh iya. - Wow.

29:17- Oh my God, keren. - Bentar, ini dikirimin pakai apa ya?

29:20- HTTP ya? - HTML, HTTP request.

29:24- Cuma bisa HTTP, nggak ada cara lain. - Keren, websocket.

29:28Dia bisa pakai websocket. Cuma yang ini HTTP request biasa.

29:33- Oh. - Berarti dia langsung hydrate.

29:37- Soalnya responsnya begini doang ya? - Iya.

29:40- Responsnya, dia langsung handle-nya langsung, kalau bahasa jaman jQuery itu,

29:49bukan hydrate jaman itu ya, di rebind, rebinding ulang.

29:54Sebetulnya sih kayaknya di balik layar itu event ya, tiap kali ada yang berubah,

30:00itu kayak ngefire event custom, dia kayak semacam nge-crawl si HX-nya kan.

30:08- Kalau jaman jQuery saya pakai this, that gitu lah. This, that, dot, that.

30:14- Oh iya. - This, dot, bind.

30:16- Nah, tapi karena ini adalah property HTML, dia tetap kelihatan ya, kodenya ya.

30:25Dan kode event-nya itu nggak kelihatan, kode event-nya nggak kelihatan karena adanya di dalam sini.

30:31Di dalam HTMLX JavaScript-nya, di dalam library-nya, yang kita nggak perlu nge-coding JavaScript kan jadinya kan.

30:38- Maksudnya nggak ada virtual dom, nggak ada apa-apa ya?

30:41- Iya, walaupun di back-end-nya JavaScript ya, tapi di front-end-nya kita nggak nge-coding JavaScript gitu.

30:46- Anak back-end kayaknya saya jatuh cinta ini.

30:48Jadi secara event handler yang di depannya udah nggak usah pusingin lagi, nggak ada istilahnya staten lagi.

31:00- Iya, statenya di back-end kan, itu adalah salah satu keunggulan dari HTML over the wire.

31:07Jadi statenya itu nggak ada kompleksitas managing statenya di sisi klien atau di server.

31:13Kita cukup taruhnya di server, kita kirimin apa perubahan yang terjadi di kliennya dalam bentuk HTML

31:21atau representasi dari HTML.

31:24- Dan itu bagus kalau selain buat penggunaan aplikasi baru, bisa buat legacy app juga ya.

31:30Maksudnya kalau yang belum pakai apa lah, punya server buat Rails atau php, Laravel API.

31:40- Temen-temen yang di sini, capek nggak sih pakai use effect?

31:45- Saya belum mengalamin.

31:49- Atau kalau nggak use effect harus pakai apa tuh yang namanya?

31:54- Use Memo, tapi kabarnya React bakal bikin compiler jadi Use Memo-nya udah otomatis.

32:06- Kan belum lagi dia, nanti harus upgrade lagi.

32:16- Ini memang mirip konsepnya Live View, Live Wire sama Hotwire, makanya namanya HTML over the wire.

32:24HTMLX juga salah satu termasuknya.

32:26Cuman kan kalau yang Live View sama Live Wire itu kan spesifik ke satu framework, Laravel, Phoenix dan Ruby on Rails.

32:35Kalau ini dia agnostik, mau pakai backend-nya Go, mau backend-nya php, bebas-bebas.

32:41- Karena ini frontend asal ngelog si script itu kan, script yang tadi itu dari CBN.

32:47- Iya, ini mas Kodos, dia pakai Golang, compile executable, embed asset ke executable, sama dengan solusi buat website cepat, asik.

32:56- Website instant.

32:58- Instant, iya tujuannya adalah untuk mengurangi kompleksitas frontend, semuanya dilakukan.

33:06- Terus depannya sudah pakai Tailwind, senang hidup backend saya.

33:18- HTMLX plus Alpine, kenapa HTMLX ditambahin Alpine? Buat apa ya Alpine ini?

33:24- Iya, coba pengen tahu.

33:26- Iya, Alpine digunakan buat apa? Karena ada juga...

33:30- Apa, gimana pakainya belum pernah pakai?

33:32- Kayak jQuery sebenarnya.

33:34- Sering dengar, semua belum pernah pakai.

33:36- Buat yang pilih ngelangin div, hide, show, gitu ya, nggak tahu sih.

33:40- Oh, ini Alpine JS.

33:42- Berarti kalau HTMLX ini cocok banget pakai view transition ya?

33:47- Betul.

33:49- Itu tadi dia kan diitakan ya, di webnya HTMLX, maksudnya kalian bisa pakai teknologi terbaru.

33:58- Betul, jadi kalau misalnya link diklik nih, kan get tuh, get seluruh halaman,

34:05terus pakai view transition.

34:08- Ada juga yang mengkombinasikan antara Astro sama HTMLX.

34:16- Oh, Astro ya dipakai buat routingnya berarti.

34:21- Iya, karena kan Astro by default nggak pakai JavaScript kan, JavaScriptnya di sisi HTMLX saja, udah gitu kali ya.

34:27Jadi dia hanya untuk backend ya.

34:29- Atau mungkin ada sebagian yang perlu interactivity ala React, Sheldt, atau apa, tapi biar nggak,

34:36ya biar bagian itu aja yang apa, di isolate komponennya, sisanya ya udah bisa pakai gini-gini doang,

34:44kalau cuma above page gitu, apa ya, perlu pakai use effect, use memo, dan lain-lain.

34:50- HTMLX bisa digabung sama dia nggak sih, ngeload React komponen gitu?

34:56- Bisa aja. Buat apa tadi? - Bisa aja.

35:00- Bisa aja. Nah ini anak-anak backend nih, apa, audiens-audiensnya Imre ya,

35:07itu cocok sama HTMLX ya, oh buat interactivity ya, kalau Alpine-nya buat interactivity ya, kali ya.

35:19- Cuma kalau lihat Alpine.js.dev ini agak overlap sih.

35:27- Iya, kayaknya agak overlap. Eh beneran loh, Astro sama HTMLX, Astro sama HTMLX itu,

35:35maksudnya Astro itu dipakai untuk backend-nya, bukan buat front-end-nya.

35:39Jadi di sisi front-end-nya itu dia pakai HTMLX, tapi di sisi backend-nya dia pakai Astro,

35:47karena Astro, by default kan nggak butuh JavaScript. - Astro, API routing-nya enak banget,

35:52marketing-nya Astro gitu. - Marketing-nya Astro.

35:55- Bisa bikin API route nih, misalnya itu tadi kan ada click, ada apa,

35:59itu maksudnya API route-nya Astro itu kayak ada TypeScript definition-nya ya,

36:04request-response juga, cuma DX-nya enak.

36:07- Iya, intinya adalah kalau saya pakai Hono di sini, atau Express, gantinya adalah Astro, udah gitu aja.

36:14Jadi front-end-nya nggak pakai React, nggak pakai Spell, nggak pakai View, nggak pakai Astro.

36:19Yang front-end-nya ya, tapi pakai HTMLX gitu. Astro itu hanya untuk backend, gitu.

36:25- Dan apa filosofinya nyambung sih, karena Astro itu kan zero JavaScript by default.

36:32- Yes. Oh, kalau Mas Lepron ini dia lebih ke Remix ya, Tim Remix ya.

36:40- Remix, overhead-nya Next.js, nah itu heboh kan tuh si siapa? Cetjipiti?

36:45- Cetjipiti pindah ya? - Kemana dia pindah?

36:49- Pindah kantor. - Pindah meta framework.

36:55Tadinya pakai Next.js, sekarang jadi pakai Remix.

36:58- Itu tagiannya udah gede. Tagiannya udah membangkak. Menarik ya. Apa lagi yang bisa ditangguhkan?

37:12- Lanjut bekerja Docs. Tadinya dia lanjutin Docs-nya, masih banyak.

37:16- Masih banyak. - Oh iya. Tadi kita udah coba sampai ini kan masih Ajax doang nih.

37:28- Ini, "If you want to element poll the given URL rather than wait for an event,

37:34you can use every syntax with the HX trigger."

37:38Nah ini saya punya pertanyaan nih, apakah ini apa namanya kita pakai polling ini amankah?

37:44- Karena dia kan nge-poll terus kan. - Aman.

37:48- Iya kan server-nya server kita, itu kita yang...

37:55- Ini salah satunya heartbeat mas, contohnya heartbeat. Bisa juga kan untuk anggap lagi nulis di editor.

38:09Terus kemudian nge-pollingin bahwa contoh safe, contohnya itu bisa.

38:15Terus bisa juga system blocking atau menandakan kalau ada yang edit post itu.

38:25Ya intinya heartbeat masih bisa banyak sih, hal-hal yang bisa diciptakan dengan heartbeat.

38:29Jadi sebenarnya sebagai framework dia menciptakan fitur itu aja sebenarnya mau digunakan

38:35buat ngadidos website orang, terserah sih.

38:40- Nah berarti yang nge-rate limit, tanggung jawab nge-rate limit kan ada di siapapun itu

38:45yang terima request-nya kan, maksudnya API route kita kudu-rate limit.

38:50Ini kan sebenarnya oper-operan kerjaan kan, kerjaan front-end kan, kerjaan back-end,

38:56ya nggak berat sih, cuma maksudnya hal yang dipikir jadi lebih banyak.

39:01- Ini yang mas Elissa bikin untuk polling? - Iya ini demo, demo yang rencarannya

39:05mau didemo-in di JavaScript Bangkok. Ini ambilnya kan di back-end nih di laptop kan,

39:12statistiknya. Jadi kan kalau di-click update, dia akan update kan.

39:17Lihat memory usage-nya, CPU usage-nya, nah.

39:21Kalau seandainya ini dijadikan polling, eh sorry, ini dijadikan polling,

39:27ini kan trigger-nya load, saya jadikan every one second.

39:31Dia akan update terus, polling terus tiap satu detik. Ini aman ya.

39:38Ini nggak apa-apa ya. Ini secara performa oke, nggak masalah ya.

39:44Dia ngirimin kira-kira terus nggak masalah.

39:47Routing-nya jangan ini, routing-nya jangan yang harus, footprint-nya jangan banyak.

39:59- Enggak, routing-nya cuma ganti ini doang nih. - Iya maksudnya kalau di real life application.

40:05- Ini kan berarti masalah desain ya? - Iya masalah desain.

40:09Saat nge-nembak endpoint itu jangan sampai ngeload.

40:17Kalau database-nya yang kayak apa, nge-query table lain itu apa?

40:22Kompeksitinya, big O-nya bisa bikin jebul sih kalau desainnya nggak dipikir.

40:28Plus routing untuk endpoint-nya jangan ngeload, misalnya ngeload semua class.

40:36Contohnya misalnya kalau Laravel nih, kan routing untuk satu endpoint-nya

40:42harus ngeload semua class-nya se-abruk ya, memory consumption-nya kan tinggi.

40:48Jadi kalau misalnya dibikin satu endpoint yang khusus untuk yang footprint-nya rendah, ya nggak masalah.

40:58Server send event kan begini juga konsepnya polling.

41:02Polling juga ya, sama ya. Berarti aman ya.

41:08Tergantung situasi dan kebutuhan.

41:11Tergantung desainnya juga ya.

41:14Dan nggak semua jenis UI relevan buat polling kan.

41:20- Oke. - Eh ini ada yang seru nih, buka docs lagi deh.

41:25Special events. Load, Reveal, Intersect.

41:32Jadi itu kayak help shorthand-nya ya, jadi kita nggak harus bikin event listener tepisah.

41:39Jadi ada onload, onreveal, onintersect.

41:43- Intersect itu apa? Oh yang ini ya? - Itu intersection observer.

41:47Kalau misalnya ada elemen yang muncul ke layar, nge-scroll-scroll muncul di layar.

41:53- Wow. - Terus edit setting-nya turun, threshold.

41:57Berarti gue bisa bikin juga jadi WordPress crack kan ya.

42:02Di project gue. Coba.

42:07Apa lagi nih? Ini tadi load polling udah.

42:11Sebenarnya Websocket juga bisa, cuma harus lewat extension.

42:16Kalau nggak salah.

42:18Ini kan polling ya. Load polling, lagi request indicator.

42:25- Oh ada htmx indicator. - Iya dia bisa spinner.

42:31- Loader. - Coba mas.

42:34Coba spinner-nya gimana?

42:36- Ya ketik aja. - Itu langsung pake kelasnya dia.

42:41- Kelasnya dia mana? - Itu kan ada contoh tuh.

42:44- Tapi ada src. - Nggak, pake spam.

42:48Kan nggak harus image kan? Coba deh spam kelasnya kayak gitu.

42:52- Gimana nih? - Ya ketik spam.

42:56- Taruhnya di? - Di dalam click me-nya.

43:04- Di dalam button-nya. - Di dalam click me.

43:08- Bukan di inner html-nya. - Di sini?

43:13Enter, ketik spam kelas sama dengan htmx indicator ya.

43:23Indicator, terus isinya apa lah? loading titik-titik.

43:29- Gini? - Iya.

43:31- Gitu? - Coba.

43:41Gak kelihatan karena cepat.

43:46- Di apa? - Di sleep dulu.

43:52- Set time out. - Set time out.

43:58Handler-nya return ya. Langsung return ini.

44:06Return, ya function.

44:11- Gak usah pake return. - Iya.

44:16- Terus coma? - Koma seribu.

44:21- Ini? - Iya.

44:24- Kok merah? - Berarti salah di luarnya tutup kurung.

44:32- Ya, chtml itu salah. Chtml itu kan belum di tutup. Nah, kurung satu.

44:42Ini harus dia return sesuatu kan? Ini di-return juga?

44:53- Iya, coba aja. - Gak bisa.

44:59- Coba gak ada autofix-nya? - Save aja.

45:04Coba. Gak bisa. Error.

45:07Gak bisa diklik soalnya gak ada return html-nya.

45:17- Oh, harus ngereturn. - Oh, itu ini. Bentar.

45:20Return html tetap berarti. Tapi sebelum return, harus dipakein sleep dulu.

45:29- Di sini. - Semua ada sleep.

45:31- Oh, tunggu. - Oh, tunggu.

45:33- New promise. Ini? - Iya.

45:37- Asing. - Udah.

45:41Betul?

45:44Seneng, Nek.

45:51- Happy banget. - Tepat-tepat.

45:57- Tanpa JavaScript client-side, loh. - Simple, ya?

46:02Tanpa sedikit pun JavaScript client-side dari kita, ya. Dari htmx-nya yang nge-handle.

46:10- Iya. Cuma nambahin kelas doang di sini, ya? - Iya.

46:15Luar biasa. Menarik ini.

46:24- Terus, yuk, lanjut. Lanjut, lanjut. - Semangat, semangat.

46:28- Targets. - Oke. Apa lagi?

46:32- Targets. - Targets.

46:35- Targets bisa ke elemen lain. - Oh, bisa delay.

46:40Terus maksudnya kalau action nge-klik, tapi mau di-render di tempat lain.

46:48- Oh, ini buat live-search, ya? - Iya.

46:52Search results, jadi sibling atau di elemen lain.

46:57Bisa juga pakai ini, ya? Berarti yang targetnya itu juga bisa jadi kayak...

47:05- Apa namanya? Query selector, kayak closer, sibling. - Oh, bisa, bisa.

47:11- Dalam macam itu bisa. - Betul, betul, betul. Bisa, bisa.

47:13Ya, atau bahkan nggak ada relasi apapun. Yang penting kita tahu ID-nya, kan?

47:17Iya, kalau misalnya ini target, kan. Misalkan kita mau targetnya apa, body?

47:22Ya udah, kegantilah itu body-nya.

47:25- Ini kan? - Klik lagi, klik lagi, klik lagi.

47:31- Jadi body-nya hilang. Eh, setelah body hilang, isi body-nya hilang. - Semua isi.

47:39Semua isi direplace dengan responsi HTML.

47:44Atau kalau misalkan di sini ada div dengan ID root.

47:52- Kita taruh aja di sini ya. Atau di sini. - Oh, target.

47:59- Itu kan? Eh, target ya? - Bukan target.

48:01- Eh, bentar. Itunya namanya hx-target attribute-nya. - Oh, di sini aja, di sini.

48:06Hx-target sama dengan root, ya.

48:13Yang pertama 1 detik, yang kedua baru ke atas dia.

48:17- Coba klik lagi. - Eh, sini.

48:19- Klik lagi. - Klik lagi.

48:21- Nggak bisa error. - Oh, bisa.

48:23- Bisa. - Oh, ya bisa 2 kali ya.

48:25Oh, tetap keganti, jadi ke replace yang tadi.

48:30Tapi body-nya berarti bisa pakai arbitrary target. Gak harus inner atau outer HTML.

48:42Oke, lanjut.

48:44Swapping.

48:46Swapping tadi udah ya?

48:48Swapping tadi udah inner HTML, outer HTML, after begin.

48:51- Opsinya banyak lagi. - Before begin, after end.

48:54Ini semua yang... Ini semua yang...

48:57- Available dari web API sendiri, sebenarnya. - HTML, iya.

49:01- Punya, ini kan swapping-nya kayak... - Domain integration.

49:04- Append, prepend. - Iya.

49:09Ini berarti kayak gantiin, kalau kita nulis template dengan vanilla.js ya.

49:14Inner HTML. Biasa kan kalau kita itu kan, kita populate dulu, le, ada 4.

49:19Habis itu kita inner HTML-nya diganti gitu kan. Ini kayak pengganti itu ya.

49:24Cuma memudahkan, karena semua dimasukin ke atribut.

49:29Ini tuh jadi kayak nggak ekuivalen sih, cuma agak 11-12 tailwind, semua masing-masing property dimasukin ke kelas.

49:39Kalau ini masing-masing metode, metode yang umum digunain, dibikin jadi HTML atribut.

49:46View transition.

49:52Bentar, itu yang morph-morph ini, apa sih nggak ngerti? Morph swap, masih memproses morphing swaps via extensions.

50:01Merge new content into existing DOM.

50:05Focus video state.

50:09Video morph, morph DOM swap.

50:14Apa sih maksudnya?

50:16Kayak gantinya itu ada transisinya. Kayaknya view transition ini modelnya ya.

50:21Swap-swapnya itu gantinya misalkan fade in, fade out, gitu-gitu kali ya.

50:25Kayaknya bukan deh. - Bukan ya? Beda ya?

50:28DOM-nya nggak direbride keliatannya.

50:31Jadi misalnya ada yang mau diganti, kayak diselip-selipin tentang referensi yang lama.

50:37Jadi kayak mungkin itu contohnya soalnya kayak focus video state, misalnya button-nya lagi difokus.

50:44Kayak di-update, di-replace sama button yang baru nih, misalnya response kan klik terus responsnya tadi ada button gitu.

50:52Kalau jadi button yang baru kan, fokusnya ilang.

50:55Ini tuh kayak di, mungkin ada kayak algoritmanya sendiri, kayak tetap pakai button yang lama, yang masih lagi aktif ada fokusnya,

51:03atau ada event listener, custom line-nya, tapi isinya pakai isi yang dari response itu.

51:09Keliatannya sih kalau dari deskripsinya kayak gitu ya.

51:12Tapi harus pakai extension ya. Jadi ini extension ya.

51:15Karena ini yang kompleks ya. Maksudnya kayaknya kalau kita regular, kita penggunaan pada umumnya nggak terlalu butuh ya sebenarnya.

51:23Nggak seperlu itu.

51:26Berarti kan dia semacam mengkomparkan hasil HTML yang baru, yang dari endpoint yang diklik itu.

51:35Oh iya, iya, iya. Jadi kayak dome div ya. Difference antara yang lama sama yang baru ya, kayak virtual dome gitu ya.

51:44Diving note-nya itu biar nggak ditimpa.

51:49Biar jangan digantikan keseluruhan, tapi digantikan beberapa part aja yang berubah kali ya.

51:55Bisa gitu.

51:58Canggif ya.

52:02Oh ditambahin ini extension-nya juga pakai CDN juga ya.

52:08Karena kecil, 2,1 kilo byte doang.

52:13Gzip.

52:15Dependency.

52:17Cara pakainya adalah langsung pakai, ini harus JavaScript gitu ya.

52:23Bukan existing note-nya tuh?

52:26Iya.

52:28Bisa string tuh, bisa string.

52:30Oh iya bisa.

52:32Note yang sebelumnya, note yang setelahnya.

52:35Iya.

52:39It will merge into new content.

52:42Jadi kayak conflict resolution gitu, merging.

52:46Oke.

52:49Menarik.

52:51Canggih ya.

52:54Oke lanjut lagi. Oh ini ada Alpine.

52:57Alpine.

53:00Alpine morph, oh based on the Alpine plugin.

53:03Ini Alpine.js gitu maksudnya?

53:06Oh iya benar.

53:08Jadi dia ada plugin namanya morph plugin, jadi bisa dipakai juga di sini.

53:12Oh makanya ada yang kombinasi antara htmx sama Alpine mungkin ya.

53:17Jadi kalau punya Alpine state, terus di kombinasi sama htmx, Alpine-nya nggak ketimpa.

53:25Oke.

53:28Ini spesifik banget ya.

53:31New transition.

53:34Blablabla.

53:37Experiment with this new API.

53:40Sebentar, sebelum new transition, kalau misalkan saya pengen,

53:45kalau di klik pindah halaman.

53:48Maksudnya ganti halaman tapi SPA.

53:51Saat html-html-nya ya? Satu bodinya ya berarti ya, kayak tadi ya.

53:56Response-nya kudu isi halaman baru itu.

53:59Oh iya benar.

54:02Mind blowing.

54:05Tapi nggak usah semuanya, misalnya kan yang perlu kita replace kan cuma kontennya aja tuh.

54:10Betul.

54:11Jadi cuma div id root. Jadi dari server yang isi root-nya aja yang diganti.

54:17Jadi bisa bikin SPA juga ya.

54:22Iya kalau mau mempersingkatnya pakai hxboost ya.

54:29Apa sih hxboost?

54:32Mau field transition dulu apa hxboost dulu?

54:36Field transition dulu.

54:39Itu aja ganti nickname Mas Riza tuh. Riza Fahtmx.

54:47Riza Fahtmx aja. Pas Riza Fahtmx.

54:51Tugas nama, kudu tumpungan.

54:55Gak boleh lah nanti ganti nama.

54:58Kalau nickname boleh di tengah.

55:01Ini setnya dimana?

55:05Ada config-nya berarti bikin config file gitu.

55:09Nggak dikasih tau ya caranya ya.

55:11Nanti somewhere ada lah mungkin di docks-nya ada config-nya.

55:15Transition tool.

55:17Itu tuh tuh. Coba animation example page. Turun.

55:21Itu yang di halaman utamanya.

55:23Oh ini?

55:24Iya.

55:28Xswap.

55:31Ini masih pakai keyframe.

55:36Itu buat animasinya kan.

55:38Nggak, nggak pakai itu juga.

55:40Tapi pakai feed-in.

55:42Transition through.

55:44Ya tapi.

55:45Gak gitu doang.

55:46Kan kita mau liat demo-nya coba liat demo-nya.

55:50Oh ini.

55:51Nah tuh coba click. Swap it.

55:55Restore it. Click.

55:59Tapi gimana config-nya di mana?

56:02Iya config-nya di mana?

56:04Cari docks. Cari di docks-nya.

56:07Tuh bawa-bawa-bawa. Kiri-bawa.

56:09Balik ke docks. Nah.

56:12Bawah lagi.

56:14Configuring.

56:17Taruhnya di mana?

56:19Di mana?

56:21Ini taruhnya di mana?

56:23Nggak tau.

56:25Kok nggak kelihatan ya?

56:27Ini.

56:29Oh metatag dong.

56:31Benar-benar nggak pakai JavaScript.

56:35Ini kan.

56:37Ya kalau mau pakai JavaScript boleh.

56:39Atau bisa pakai metatag.

56:41Meta-name, htmxconfig.

56:44Oke baiklah.

56:45Kita coba ya.

56:47Di metatag-an di sini ya.

56:51Setelah sebelum-sebelum ya.

56:54Tapi kita mau gantinya tadi apa?

56:56Transition ya.

56:58View transition mana tadi?

57:02View transition.

57:04Swapping.

57:06Global view transitions.

57:08Ini?

57:10Iya.

57:12Global view transitions.

57:14Begini?

57:16Kayaknya nggak ada ya. Global view transitions aja polosan.

57:19Iya.

57:21Global.

57:24View transitions pakai S.

57:30True.

57:32Gini?

57:34Iya. True.

57:36Habis itu apa tadi?

57:38Use the transition titik 2 true in this hxswap attribute.

57:46Kita nggak pakai swap ya. Ini ya?

57:48Iya.

57:52Gini.

57:54Ini ya.

57:56Ada tuh?

58:04Ada transitionnya tadi kelihatan sedikit.

58:06Refresh reload tadi nggak lihat.

58:08Nah.

58:10Coba.

58:12Oh iya.

58:14Ada transitionnya.

58:16Oke.

58:18Bisa ditambah transitionnya.

58:21Bisa ditambah. Mungkin transitionnya bisa bikin berapa?

58:24Bisa pakai CSS. Kita gitu contohin tadi.

58:26Contohnya pakai CSS ya?

58:28Cuma bikin custom CSS. Kalau yang default tuh fade in, fade out.

58:32Coba aja kita copy.

58:34Biar nyontohin slide in, slide out.

58:39Coba ya.

58:41Disini ya.

58:43Gini.

58:45Terus cara pakainya adalah klasenya slide it ya?

58:51Iya.

58:53Ini dimananya?

58:55Liat contohnya aja.

58:57Di dalam sini kan?

59:01Dikasih div sebelum button.

59:12Terus ini transition true udah ya?

59:15Sambangkan hal.

59:17Targetnya nggak usah.

59:18Oh bisa closest div juga.

59:20Iya. Tadi kan ada tuh yang di opsi-opsinya.

59:23Oke.

59:25Wey.

59:27Wey.

59:29Masih zero JavaScript loh.

59:39Sejauh ini.

59:41Saya javascript.

59:43Iya. Tapi kalau disini pasti ada javascriptnya kan ya?

59:47Lah ya javascriptnya sih.

59:49Berapa sih gedenya?

59:53Gede kok kelihatannya.

59:55Eh, H.

59:57Nggak kelihatan disini.

59:59Nggak kelihatan ya?

1:00:01Itu, itu.

1:00:0320,5.

1:00:05Lumayan ya. Gede juga ya.

1:00:07Ya kan buat semua, itu buat semua interaksi.

1:00:11Udah min tapi ya.

1:00:13Udah minim.

1:00:15Lebih kecil react kayaknya.

1:00:17Kode, tapi kode komponen reactnya ya kan?

1:00:22Nggak, react, react polosan aja udah 70an kilobyte.

1:00:25Reactnya doang mungkin.

1:00:27Belum ada react dom.

1:00:29Iya.

1:00:31Terus routernya.

1:00:33Terus state managementnya.

1:00:35Belum lagi helmetnya.

1:00:37Helmet.

1:00:39Helmet.

1:00:41Kayaknya udah discontinue ya nih Pak.

1:00:43Pake apa sekarang?

1:00:47Helmet.

1:00:49Yang buat, itu kan buat ganti head kan?

1:00:51Metatech.

1:00:53Metatech aja.

1:00:55Transition, swap, settle, ignore title, scroll, show, synchronization.

1:01:03Show, synchronization.

1:01:05What is synchronization?

1:01:07Synchronization apa tuh?

1:01:09Oh, coordinate request 2 element.

1:01:13Oh, jadi kita ngatur urutan ya.

1:01:17Jadi ini sebenarnya harus tetap mikir UI state juga sih.

1:01:21Kalau misalnya itu nya kompleks ya.

1:01:25UI nya kompleks.

1:01:27Tapi per komponen tetap mikirnya per komponen.

1:01:30Cuman jadi banyak ya endpointnya ya.

1:01:32Iya.

1:01:34Berarti cukup satu endpoint, tapi bisa banyak routing nya kayaknya.

1:01:38Pake query string kali ya.

1:01:40Ini cocok buat anak full stack.

1:01:42Yang backend nya bikin sendiri.

1:01:44Kalau minta tolong sama anak backend.

1:01:46Eh tolong bikinin dong.

1:01:48Bikinin lagi, bikinin lagi, bikinin lagi.

1:01:50Iya, itu tadi.

1:01:52Jadi ini kan ngeringanin kerjaan front-end.

1:01:54Tambah tangan jawab, backend.

1:01:56Tambah tangan jawab, backend.

1:01:58Gak ada kayak cuma oper-operan aja.

1:02:00Waw, waw, waw.

1:02:02Tinggal silahkan di diskusikan cara musyawarah mufakar.

1:02:06Musyawarah mufakar.

1:02:08Bentar, bentar.

1:02:10Ini kan kita pakai form,

1:02:12bakal di-post ke store.

1:02:14Input nya title.

1:02:16Kalau udah diketik, dia akan validate.

1:02:18On-change di-validate.

1:02:20Eh on-change trigger nya kan validate kan.

1:02:22Terus di-post.

1:02:24Kalau gak pake hexing,

1:02:26waktu di-post itu 2 kali gue validate dan store.

1:02:34Padahal kita kan maunya

1:02:36nunggu validate kelar, baru store.

1:02:38Ya.

1:02:40Oke.

1:02:42Hxing, closest,

1:02:44form, titik 2, abort.

1:02:46Abort.

1:02:48On the input, will watch for request on the form.

1:02:50Oh, punya validate dulu.

1:02:54Kalau validate-nya gak kelar,

1:02:56berarti form-nya di...

1:02:58apa? Abort ya?

1:03:00Gak di-post.

1:03:02Gak di-post.

1:03:04Oke.

1:03:08ATMX also supports programmatic way

1:03:10to cancel request.

1:03:12Oh, ada nih.

1:03:14ATMX abort event.

1:03:16On-click ya.

1:03:18ATMX trigger, request button,

1:03:20ATMX support.

1:03:24Transition.

1:03:28Ini boosting ya, yang tadi.

1:03:36Ah, apa ini?

1:03:38Apa sih itu?

1:03:40Gabungan, gabungan antara

1:03:42jadi kalau misalkan

1:03:44kita pake, apa?

1:03:46Tadi kan harus pakai

1:03:48Hx-post atau Hx-get.

1:03:50Terus di-swap.

1:03:52Terus habis itu di-swap atau di-trigger.

1:03:54Ini kita pakai Hx-post saja.

1:03:56Semua yang Ahref

1:03:58Something itu akan request ke server.

1:04:00Ditaro mana semua nya?

1:04:04Hah?

1:04:06Ditaro bebas dimana aja.

1:04:08Oh, trigger-nya...

1:04:10Itu kan gak, berarti kan Ahref block itu

1:04:12kalau di-click gak pindah

1:04:14keseluruhan ke halaman, block kan.

1:04:16Target the body of the page.

1:04:18Jadi kayak mau bikin SPA.

1:04:20Ya.

1:04:22Single page application.

1:04:24Wah, keren ya.

1:04:30Jadi misalkan kita punya

1:04:34halaman pertama nih.

1:04:36Di sini halaman pertama.

1:04:38Itu kan pattern

1:04:44shell standard aja.

1:04:46Kan misalnya shell atas ada header

1:04:48gitu ada navigasinya.

1:04:50Di dalamnya main.

1:04:52Oh ya, cuma kereplace seluruh body deh.

1:04:54Gak bisa.

1:04:56Misalkan ini Ahref

1:04:58sama dengan

1:05:00page 2.

1:05:02Ya, about boleh ya.

1:05:04Terus berarti di sini

1:05:10Hx-boost.

1:05:12Sama dengan

1:05:14True.

1:05:18Halaman kedua kita harus bikin

1:05:20app.get

1:05:22about

1:05:24return halaman lain.

1:05:26Terus harus balik lagi dong.

1:05:34Ahref kembali ke halaman pertama.

1:05:38Pake apa sih modelnya?

1:05:44Super Maven.

1:05:46Bagus ya, kok cepet juga ya?

1:05:48Cepet sekali.

1:05:50Free ya?

1:05:52Wow.

1:05:54Tampilkan halaman kita lihat ya.

1:05:56Ini ya.

1:05:58Ini H1 dan Ahref.

1:06:00Eh kegedean. Nah, segini ya.

1:06:02Kalau kita klik

1:06:04about, dia langsung ke halaman

1:06:06about. Udah ada transisinya lagi ya.

1:06:08Tadi kita bikin transisinya.

1:06:10Ini udah halaman kedua.

1:06:12Ininya juga udah about.

1:06:14Tapi kalau kita refresh?

1:06:16Oh bisa juga. Bisa, kan ada.

1:06:18Kan ada di notification.

1:06:20Iya.

1:06:22Tapi gak ada itunya.

1:06:24Di sini gak ada Hx-nya.

1:06:26Oh iya.

1:06:28Karena kita refresh.

1:06:30Iya, tinggal ditambahin aja.

1:06:32Maksudnya pakai template-nya aja

1:06:34nanti. Oh iya template.

1:06:36Apa? Pakai blade-blade.

1:06:38Blade itu blade.

1:06:42Blade gak tuh?

1:06:44Pakai...

1:06:46Itu aja smartie-smartie.

1:06:48Mistake.

1:06:50Apa handlebar?

1:06:52Oke. Ini bisa balik lagi, balik lagi.

1:06:54Asyik.

1:06:56Itu untuk boost ya.

1:07:04Boosting. Progressive enhancement.

1:07:06Progressive enhancement.

1:07:08It degrees, degrees fully. Oh, kalau gak ada

1:07:10JavaScript, ya udah behavior-nya kayak

1:07:12ya kayak HTML biasa.

1:07:14Yes, betul. Ini

1:07:18barusan kita omongin, pakai template.

1:07:20Mau pakai Go, mau pakai

1:07:22bahasa lain ya, bebas ya.

1:07:24Setuju, setuju.

1:07:26Oke. Berarti sama ya.

1:07:34Mirip kayak Astro juga ya.

1:07:36Filosofinya sama.

1:07:40Accessibility.

1:07:42Accessibility.

1:07:52Nice.

1:07:54Use semantic HTML

1:07:56as much as possible.

1:07:58Ensure focus state is clearly visible.

1:08:00Associate text label

1:08:02with all form field. Maximize readability

1:08:04of your application, appropriate font,

1:08:06contrast, and so on.

1:08:08Bagus juga nih.

1:08:10Htmx target market-nya

1:08:12full stack atau back-end

1:08:14yang biasanya gak tertarik run-end.

1:08:16Dikasih edukasi soal

1:08:18accessibility juga. Jadi maksudnya

1:08:20itu pentingnya pakai

1:08:22semantic HTML. Kalau

1:08:24tag-nya bener kan.

1:08:26Jadi fungsinya juga

1:08:28by default-nya ada

1:08:30focus state, blablabla.

1:08:32Coba lihat itu SSE extension sama

1:08:34WebSocket. Gimana sih?

1:08:38Bisa ya.

1:08:40Pakai SSE ya.

1:08:42Jadi ini gantinya polling kan.

1:08:44Kalau terima event, ya udah

1:08:46langsung di-replace yang kayak tadi.

1:08:48Kayak contoh dashboard kan.

1:08:50Install-nya begini.

1:08:52Simple ya.

1:08:54Oh wow.

1:08:58Wow. Kok gampang?

1:09:02Kok gampang?

1:09:04Gampang protest, susah protest.

1:09:06Gak protest sih.

1:09:08Oh berarti tadi yang dashboard

1:09:14tadi bisa diganti pakai antara SSC atau

1:09:16WebSocket ya.

1:09:18Kalau WebSocket tuh

1:09:20by direction nih.

1:09:22Kalau SSE...

1:09:24SSE juga by direction.

1:09:26Tapi HTTP.

1:09:28Eh gak sih. SSC.

1:09:34Dari atas.

1:09:36Dari atas dia gak ngirim...

1:09:38Kita gak bisa ngirim data.

1:09:40Cuma nerima.

1:09:42Nerima doang.

1:09:44Kan dulu kayaknya kita pernah

1:09:46bahas.

1:09:48Iya. Masin saya bisa

1:09:52bikin kasusnya 3 tuh.

1:09:54HTTP request, polling,

1:09:56SSC,

1:09:58dan WebSocket.

1:10:00Menarik.

1:10:02Sudah habis sendiri.

1:10:04Sudah habis tuh.

1:10:06Satu sesi udah. Kalar itu semua.

1:10:08Semua bahasa seluruh.

1:10:10Gak setutup ngomongin yang lain.

1:10:12Ngomongin tentang

1:10:16minimal JavaScript di conference

1:10:18JavaScript ya.

1:10:20Apa argumennya kan sebenernya

1:10:24itu library JavaScript

1:10:26yang membuat kita gak usah banyak-banyak

1:10:28nulis JavaScript.

1:10:32HXPulse.

1:10:34Ini apa?

1:10:38Simple mechanism for interactive with browser

1:10:40and story API.

1:10:42Ini kayak router. Ini maksudnya

1:10:44fungsionalitas yang biasa kita

1:10:46pake create router atau next router.

1:10:48Snapshot, undoing,

1:10:56don't mutation.

1:10:58Apa lagi yang menarik nih?

1:11:00Request response.

1:11:02Jadi kalau bisa bikin nanti jQuery, select dong.

1:11:08Response error, send error.

1:11:14Apa nih?

1:11:16HX select ya?

1:11:18Ini apa HX select?

1:11:28Select the content

1:11:30you want to swap from response.

1:11:32Oh iya, kayak jQuery ya.

1:11:34Kayak query selektor.

1:11:38Terus diganti isinya

1:11:42dengan outer HTML-nya.

1:11:44Info detailnya itu

1:11:46ada di div yang ini kali ya.

1:11:48Atau di tempat yang lain ya.

1:11:50So this button you should get to

1:11:54info and then select the

1:11:56element with the id info detail.

1:11:58Info then select the element

1:12:04with the id.

1:12:06Gak ngerti gua.

1:12:14Select the element

1:12:16with the id info detail.

1:12:18Which will replace the entire button

1:12:22in the DOM.

1:12:26Apa bedanya sama target?

1:12:28Iya ya.

1:12:30Buat nge-replace

1:12:40button-nya itu sendiri.

1:12:42Huh?

1:12:44Terus ininya apa info detailnya?

1:12:46Oh iya.

1:12:54Oh iya.

1:12:56Apa itu? Gak tau.

1:12:58Oh, jadi dia ngambil isi dari

1:13:00outer HTML dari info detail

1:13:02ditaro ke dalam button.

1:13:04Dibindak ke isi button.

1:13:06Tapi konten dari endpoint

1:13:08apa route info?

1:13:10Itu tuh, coba itu kata

1:13:12si...

1:13:14Bisa, bisa, bisa sebagian

1:13:18saja berarti.

1:13:20Yang kasus kita bahas tadi misalnya server

1:13:22kirim seperti apa?

1:13:24Ada tag HTML, head,

1:13:26segala macam.

1:13:28Yang direplace disitu cuma

1:13:30isi info detailnya.

1:13:32Berarti sebagian, sebagian

1:13:36saja ya.

1:13:38Thank you, thank you.

1:13:40Gak kira mengerti.

1:13:42Wow, keren.

1:13:44Jadi gimana, gimana?

1:13:46Kita coba ya, kita coba ya. Terakhir ya.

1:13:48Jadi misalkan

1:13:50kita punya

1:13:52ini kita cancel dulu.

1:13:54Misalkan

1:13:58kita punya tadi ya.

1:14:00Yang button tadi.

1:14:02Oke.

1:14:04Terus, harus

1:14:06kita punya HX

1:14:08get info.

1:14:10Terus isinya disini adalah

1:14:12info detail ya.

1:14:14Ada dua, kasih aja ya.

1:14:16Ya, tes.

1:14:18Terus, abis itu satu lagi

1:14:20adalah div dengan

1:14:22id info detail, gitu ya.

1:14:24Iya.

1:14:26Jadi yang akan muncul adalah info detail ini ya.

1:14:28Gitu.

1:14:32Gak kelihatan textnya isi info detailnya apa.

1:14:34Oh ya, sorry. Info detail.

1:14:36Oh ya. Nah.

1:14:38Harusnya sih bisa.

1:14:40Oke, get info.

1:14:42Keren.

1:14:44Yang didapat

1:14:46adalah yang info detail. Sedangkan

1:14:48iya, padahal

1:14:50padahal yang dikirim kan semuanya ya

1:14:52ini ya. Tuh, dua-duanya kan dikirim ya

1:14:54responsnya ya. Tapi yang

1:14:56diambil hanya yang id info detailnya

1:14:58aja.

1:15:00Nice.

1:15:02Oke.

1:15:04Oke.

1:15:08Ada lagi yang menarik?

1:15:10Ini kayaknya pada jago-jago HTMX nih ya.

1:15:12Boleh, boleh. Kalau ada yang menarik, boleh

1:15:14tolong dikasih info

1:15:16biar kita bisa

1:15:18bahas terakhir. Caching.

1:15:20Caching.

1:15:22HTTP caching aja biasa. Karena kan

1:15:24kirim HTML kan ya.

1:15:26Request, request response biasa ya.

1:15:28Docsnya kurang ya. Setuju sih.

1:15:32Agak muter-muter sedikit ya.

1:15:38Biasanya teman-teman

1:15:40belajar HTMX dari mana nih?

1:15:42Yang udah pintar-pinter nih.

1:15:44Belajar HTMXnya dari mana? Referensi dong.

1:15:46Eh, kepencet.

1:15:48Tutorial. Itu.

1:15:50Saya kemarin ketemu ini nih.

1:15:52The Valley of Code.

1:15:54Itu dia banyak banget. Mulai dari

1:15:56internet, web, dan lain-lain sampai ada

1:15:58HTMX segala. React juga

1:16:00ada. VS Code, GitHub.

1:16:02Oh, itu semacam roadmap

1:16:04gitu ya? Kayak

1:16:06free code cam atau semacamnya

1:16:08yang hal-hal yang harus dipelajari

1:16:10oleh seorang web player.

1:16:12Nah, ini kalau di HTMX nih

1:16:14apa, materialnya itu

1:16:16cara installnya. Get request, swap,

1:16:18post request, target, loading indicator.

1:16:20Tadi udah juga ya. Confirm action

1:16:22kita belum. Trigger udah

1:16:24sedikit. Request header,

1:16:26response header kita belum sampai

1:16:28kesana. Terus ada event.

1:16:30Ini

1:16:32cukup membantu sih.

1:16:34Ya, tadi itu point yang security

1:16:36bagus tuh. Walaupun ya

1:16:38lebih singkat. Oh, dari

1:16:40YouTube PrimeGen ya?

1:16:42Primagen.

1:16:44Primagen. Primagen.

1:16:46Dimana sih bacanya?

1:16:48Primagen. Primagen ya?

1:16:50I don't know.

1:16:52Primagen.

1:16:54Primagen. Keren.

1:16:56Gak tau siapa sih itu.

1:16:58Cukup convincing ya.

1:17:00Cukup convincing ya. Ternyata Artemis ya.

1:17:02Security.

1:17:04Lebih simple daripada

1:17:06framework-framework yang lain sebelumnya

1:17:08pernah kita bahas.

1:17:10Lebih simple dari custom element.

1:17:12Yalah jelas. Jauh.

1:17:14Kita gak ada nulis

1:17:16JavaScript front-end

1:17:18sama sekali ya.

1:17:20Dan lebih dekat ke jQuery.

1:17:22Custom element itu kan didesign

1:17:24sebagai solusi yang

1:17:26kayak native browser kan, yang

1:17:28harusnya tinggal kopas aja jalan.

1:17:30Tapi praktiknya nulisnya

1:17:32agak kelibet.

1:17:34Jadi ini bisa

1:17:36mencapai itu kan

1:17:38langsung jalan

1:17:40tanpa nulis

1:17:42client side JavaScript.

1:17:44JavaScript sama sekali. Mungkin nanti akan butuh

1:17:46tapi untuk hal-hal

1:17:48yang sederhana seperti yang

1:17:50kita demo kan tadi kayaknya gak ada sama sekali.

1:17:52Masih zero-zero.

1:17:54Kalau kayak custom field pose, misalnya kan tadi kan

1:17:56bisa HX pose.

1:17:58Tapi kita mau

1:18:00kita mau definisikan

1:18:02data yang mau dikirim kayak

1:18:04mau ngambil data dari cookies

1:18:06atau mau ngambil data dari session storage itu

1:18:08bisa gak sih kayak custom pose

1:18:10datanya? Ada gak?

1:18:12Endpoint.

1:18:14Benar, endpointnya ada.

1:18:16Tapi kan data yang dikirimkan kan

1:18:18perlu ada yang kirim.

1:18:20Client yang kirim.

1:18:22Sedangkan itu cuma button.

1:18:24Tadi.

1:18:26Tapi isi pose data, pose body-nya itu

1:18:28masukinnya gimana sih?

1:18:30Pake form.

1:18:32Oh iya, kalau ada body

1:18:34pake form. Kalau butuh putih

1:18:36putihnya kan ada di input.

1:18:38Iya, column session storage

1:18:40dari local storage.

1:18:42Taruh di hidden.

1:18:44Input hidden.

1:18:46Oh iya.

1:18:48Kalo nulis Laravel

1:18:50Blade sampai sekarang kayak gitu.

1:18:52Cuma mungkin ada di doksnya yang tadi

1:18:58kita belum baca sampai detail, mungkin

1:19:00ada helper-nya. Kalo

1:19:02cukup umum, cukup banyak dipake.

1:19:04Coba ya.

1:19:08Body.

1:19:10Mana ya? Coba.

1:19:12Request and responses.

1:19:14Examples.

1:19:18Nah, sebelumnya

1:19:24warning security-nya dia

1:19:26bagus deh. Jadi ini kan

1:19:28apapun yang di HTML jalan.

1:19:30Kayak tadi tuh, apa, response-nya

1:19:32kirim ada HX attribute-nya

1:19:34bisa jalan juga. Jadi kayak harus

1:19:36ekstra hati-hati.

1:19:38Kalo misalnya ada

1:19:40user yang bisa masukin

1:19:42HTML yang malisius, ya udah jalan.

1:19:44Jadi harus

1:19:46di sanitize.

1:19:48Ini bukan.

1:19:56Nah.

1:19:58Berarti harus

1:20:06pake JavaScript di front-end ya?

1:20:08Nggak, itu kalo

1:20:10di apa, apapun

1:20:12yang bisa jalan di HTML bisa

1:20:14di slip-in, bisa dikirim, dan akan

1:20:16jalan di front-end.

1:20:18Jadi harus di sanitize. Tadi kan

1:20:20dia kasih contoh-contoh sanitize-nya.

1:20:22Iya, kayak gini ya.

1:20:26Secure your cookies.

1:20:30Nggak, nggak ketemu.

1:20:40Nggak ketemu contoh

1:20:42real-nya.

1:20:44Socket, cookies.

1:20:46Reference. Nggak, belum

1:20:52ketemu.

1:20:56Kalo misalkan

1:20:58kita

1:21:00bikin

1:21:02form,

1:21:04terus ada submit button,

1:21:06itu data yang kekirim

1:21:08di dalam form itu

1:21:10semuanya datanya kekirim, gitu ya?

1:21:12Form event-nya.

1:21:14Jadi apa, data itu ada

1:21:16di dalam event

1:21:18on submit

1:21:20punya form-nya tuh. Event-nya

1:21:22yang fire tuh namanya

1:21:24submit.

1:21:26Ini example-nya nggak ada

1:21:32contoh form gitu.

1:21:34Itu kan kayaknya salah satu.

1:21:36Tapi kan cuma satu input

1:21:42kalo contohnya tadi kan misalnya

1:21:44datanya banyak gitu ya, yang biasa kita

1:21:46kirim di body post request.

1:21:48Misalnya yang gini nih.

1:21:50Oh ini ada yang click to edit.

1:21:52Bisa kan gini.

1:21:54Terus ini hx post.

1:21:56Terus kalo kita click submit, dia akan

1:21:58ngerimin ke post info ya.

1:22:00Terus disini kita bisa

1:22:08dapat apa?

1:22:10Ada event-nya nggak?

1:22:12C.request.body

1:22:14Ya harusnya ada datanya

1:22:16berarti.

1:22:18Nggak ada. Udah di C

1:22:20aja, C.

1:22:22Coba aja.

1:22:28Loh.

1:22:34Info detail?

1:22:36Oh belum di refresh.

1:22:38Udah kan?

1:22:40Kok info detail?

1:22:42Karena itu ditanda chtml.

1:22:44Oh iya.

1:22:46Tapi C-nya nggak ada. Oh di server.

1:22:48Sorry, sorry, sorry.

1:22:50Lupa.

1:22:52Oh langsung coba.

1:22:54Mana body?

1:22:56Atau json?

1:22:58Coba mungkin ada json.

1:23:00Enggak dong, karena dia kan

1:23:02html itu apa namanya?

1:23:04Gini?

1:23:06Bukan html, bukan itu.

1:23:08Function?

1:23:10Gini?

1:23:12Kok error?

1:23:18Coba.

1:23:20Coba klik tuh edit.

1:23:22Response.

1:23:26Kosong.

1:23:28Mungkin bukan body kali.

1:23:32Oh harus di dot json.

1:23:34Coba C dulu.

1:23:36Eh mana dia?

1:23:40Apa lagi ini?

1:23:42Atas, atas.

1:23:44Banyak banget.

1:23:48Context.

1:23:50Outgoing.

1:23:52Get. Set.

1:23:58Body. Text. Json.

1:24:00Html.

1:24:02Params nggak?

1:24:06Bukan ya? Bukan params ya?

1:24:08Params, query string harusnya.

1:24:10Oh iya, query string.

1:24:16Coba baca dulu ya.

1:24:18Harusnya sih

1:24:28di example yang klik tuh edit ini.

1:24:30Coba postnya.

1:24:32Coba postnya tadi.

1:24:34Di halaman depan,

1:24:40postnya itu.

1:24:42Di network tab.

1:24:46Oh iya.

1:24:48Isinya apa info itu?

1:24:50Payloadnya apa?

1:24:52Oh form data.

1:24:56Ya form data kan.

1:24:58Name langsung.

1:25:00Coba view source deh.

1:25:02Response.

1:25:06Bukan payload.

1:25:08View source.

1:25:10Gimana?

1:25:14Ya berarti

1:25:16C. Tadi ya.

1:25:20Baca ini dulu.

1:25:24Sebenernya itu si Hono nya punya sih bukan si Html.

1:25:28Iya, Hono nya ya.

1:25:30Hono, Hono.

1:25:32Ngambil body, body, post data gimana caranya?

1:25:34Form ya?

1:25:36Iya.

1:25:44Hono request.

1:25:46Response kan.

1:25:48Request, request bener.

1:25:50C, C, C.

1:25:52Itu yang get.

1:25:54Where is header.

1:25:56Apa lagi nih?

1:25:58Parts body.

1:26:00Parts body.

1:26:02Oh berarti rec, bukan request.

1:26:04Req.

1:26:06C. rec.

1:26:08Parts body.

1:26:10Ya.

1:26:12Coba.

1:26:14Response, response, response.

1:26:18Promise.

1:26:20Await.

1:26:22Oh.

1:26:24Kok gak enak banget sih?

1:26:28Kok gak enak ya?

1:26:30Null.

1:26:34Ya ada berarti kan nilainya.

1:26:36Beneran.

1:26:38Ya ada berarti kan nilainya.

1:26:40Ya ada berarti kan kita dapat.

1:26:42Kekirip udah ada.

1:26:44Gimana sih?

1:26:46Parts body bener.

1:26:48Oh bukan.

1:26:50Dot name gitu ya.

1:26:52Gini.

1:26:54Oh enggak.

1:26:58Dot name, dot name.

1:27:00Kayaknya wait sampai

1:27:02parts body nya udah dikurung gak?

1:27:04Oh iya bener, bener.

1:27:06Sama wait nya.

1:27:08Wait nya masuk.

1:27:10Kurung.

1:27:12Yes.

1:27:22Oh gitu caranya.

1:27:24Kalo pake express ya beda.

1:27:26Tinggal cari aja

1:27:28part body nya karena harus di install dulu kan

1:27:30middleware nya ya.

1:27:32Sesuai.

1:27:34Framework masing-masing.

1:27:36Oh ada form data juga ada ya.

1:27:38Coba aja.

1:27:40Direct form data.

1:27:42Form data.

1:27:44Oh iya.

1:27:46Dot get name tuh ada tuh.

1:27:48Bisa gitu.

1:27:52Oh iya.

1:27:56Asik ya.

1:27:58Dan sesuai

1:28:00perinsipta di request response.

1:28:02Ya pokoknya kita harus ngenalin apa?

1:28:04Genis

1:28:06post request nya apa?

1:28:08Kita yang

1:28:10Batten.

1:28:12Batten nya yang diklik.

1:28:14Tetapi ngirim

1:28:16custom data gak bisa ya.

1:28:18Harus pakai form nya.

1:28:20Dibungkus form.

1:28:22Kasih input hidden.

1:28:24Coba kalo gak pakai

1:28:26form.

1:28:28Atau form nya gak dikasih aix

1:28:30post.

1:28:32Data atribut.

1:28:34Batten nya dikasih data atribut.

1:28:36Ini aix post.

1:28:38Ya.

1:28:40Aix post.

1:28:42Gini.

1:28:44Tapi isinya apa?

1:28:46Paling kosong.

1:28:48Ininya berarti form data nya kita

1:28:50apus.

1:28:52Chain.request aja coba di

1:28:54log chain request isinya apa?

1:28:56Gak perlu pakai wait ya.

1:29:02Coba isinya dulu.

1:29:04Isi payload.

1:29:06Isinya apa?

1:29:08Oh tetep ada.

1:29:12Tetep dapet.

1:29:14Kok bisa tau dia?

1:29:16Udah

1:29:18di refresh belum?

1:29:20Atau mungkin kalo

1:29:22batten yang di dalam form

1:29:24otomatis ya?

1:29:26Coba gak pakai form.

1:29:32Eh gak ada ya?

1:29:34Gak ada payload.

1:29:36Iya gak ada payload kosong.

1:29:38Berarti disini

1:29:40gak dikirim apa-apa ya?

1:29:42Ya standar

1:29:44event aja.

1:29:46Jadi harus pakai form.

1:29:48Meskipun form

1:29:50aix post nya itu bukan di form tapi di

1:29:52batten. Tetep bisa.

1:29:54Aix post atribut.

1:29:56Wait.

1:30:02You can control...

1:30:04Oh parameters.

1:30:06Wait.

1:30:10Gimana caranya ini?

1:30:12Gak ngerti.

1:30:32Nih.

1:30:34Tunggu ya.

1:30:36Tuh.

1:30:38Aix post.

1:30:40Aix post.

1:30:42Tapi dari Aix post.

1:30:46Terus kemudian...

1:30:48Issue oppose.

1:30:50Yang paling bawah kan you can control the data

1:30:54submitted with the request in various way

1:30:56documented in parameters.

1:31:02Like...

1:31:04By default is value

1:31:06kalau ada value nya.

1:31:08Or if the element is a form

1:31:10it will include values of

1:31:12all inputs.

1:31:14Otomatis ya?

1:31:16Kalau form.

1:31:18Kalau element

1:31:20hx include.

1:31:24If you wish to include the values

1:31:28of other elements

1:31:30the element include.

1:31:32Yes, by config request.

1:31:34Bebat ya, jadinya.

1:31:38Malah ribet ya.

1:31:40Ya, pake pattern nya HTML

1:31:44apapun yang mau dikirim

1:31:46pake form.

1:31:48Semantik.

1:31:50Back to nature.

1:31:52Back to basic.

1:31:54Masa nya tetep ada escape hatch nya

1:31:56kalau misalnya dari tempat lain

1:31:58kalau ribet, kalau harus di platform semua

1:32:00bisa kan tadi pake target

1:32:02selektor.

1:32:04Bisa tapi encourage

1:32:06tetep pakai

1:32:08polanya HTML.

1:32:10Oke.

1:32:12Kesimpulan, berarti

1:32:14HTMLX adalah front-end framework

1:32:16yang sangat

1:32:18minimal JavaScript yang

1:32:20kita tulis.

1:32:22Terus...

1:32:24Apa keuntungannya?

1:32:26Keuntungannya adalah

1:32:28tadi nggak perlu tulis JavaScript.

1:32:30Minimal.

1:32:32Minimal JavaScript.

1:32:34Persetail. Apa?

1:32:36Agnostik.

1:32:38Agnostik buat berbagai framework.

1:32:40Back-end nya bebas apa aja.

1:32:42Hello Sun HTML JavaScript

1:32:44kalau mau bisa.

1:32:46Kalau misalnya mau pake full stack framework

1:32:48apapun dari node

1:32:50atau apalah...

1:32:52Algo.

1:32:54Terus dia berarti

1:32:56kerja beratnya itu di sisi

1:32:58server.

1:33:00Jadi akan banyak

1:33:02bersentuhan dengan, kalau tim

1:33:04berarti akan banyak tektokan

1:33:06sama orang back-end.

1:33:08Gitu kan. Termasuk juga

1:33:10itu.

1:33:12Tagian server.

1:33:14Berarti kerjaannya lebih berat kan.

1:33:16Maksudnya renderingnya

1:33:18di sisi server kan.

1:33:20Kalau misalnya kita pake SPA kan renderingnya

1:33:22di sisi klien juga ada.

1:33:24Terus kalau ada autoscale-an

1:33:26kundua tiati itu.

1:33:28Nanti kalau sering gigit

1:33:30net trigger buka itu.

1:33:32Ini kan. Norholit nih.

1:33:34Servernya langsung naik. Dapat

1:33:38surat cinta dari telit.

1:33:40Loadnya naik. Apa lagi

1:33:42pakai websocket.

1:33:44Terus real-time.

1:33:46Gasboard tadi.

1:33:48Ya karena nggak ada proses

1:33:50apalah compile.

1:33:52Mesti hati-hati ya. Saya bikin request

1:33:54mesti hati-hati. Mesti, maksudnya mesti

1:33:56mindful lah. Sama tadi

1:33:58inject. Apapun yang diinject

1:34:00bakal jalan. Yang dikirimin

1:34:02jangan semua HTML-nya yang berubah

1:34:04aja. Jangan satu halaman

1:34:06semuanya dikirimin. Gitu kan.

1:34:08Walaupun nggak ada perubahan, terus dikirimin semuanya.

1:34:10Injection itu loh. Kode HTML

1:34:12apapun kan bisa dijalani. Kode HTML harus disanitize.

1:34:14Berarti harus disanitize.

1:34:16Harus disanitize.

1:34:18Cuman kelebihannya juga adalah

1:34:20kompleksitas di sisi client

1:34:24front-end framework client

1:34:26dengan

1:34:28state management,

1:34:30terus

1:34:32use effect,

1:34:34use memo, dan lain-lain itu

1:34:36kayaknya bisa di minimalisir ya.

1:34:38Jadi langsung ke server

1:34:40karena state-nya disimpan di server.

1:34:42Ini cocok untuk

1:34:44aplikasi

1:34:46yang session-nya ada

1:34:48di server ya.

1:34:50Jadi

1:34:52kembali lagi state-nya ada di server.

1:34:54Artinya

1:34:56tidak bisa digunakan

1:34:58un. Maksudnya

1:35:00bisa aja sih sebenarnya. Cuman

1:35:04kalau misalnya

1:35:06digunakan di kayak new site

1:35:08yang sebenarnya stateless,

1:35:10kurang cocok.

1:35:14Kurang kurut juga ya sama bandwidth.

1:35:16Request-nya jadi kebanyakan.

1:35:18Ya nggak sih?

1:35:20Ya sekali request berapa gede-nya ya?

1:35:22Ya misalnya kalau kayak ada sesuatu yang diklik,

1:35:24keci-keci-keci,

1:35:26bisa aja sih sebenarnya.

1:35:28Jadi caching kan sebenarnya.

1:35:34Strategi caching-nya lebih sederhana

1:35:36karena hanya caching di sisi

1:35:38server kan. Maksudnya

1:35:40HTML-nya di caching cukup

1:35:42gitu kan. Kita nggak perlu mikirin caching macem-macem kan.

1:35:44Iya.

1:35:46Nggak perlu mikirin caching di

1:35:48database segala macem. Loh, ilang.

1:35:50Karena

1:35:52hasil rendering-nya aja yang

1:35:54di caching gitu kan.

1:35:56Apa lagi ya?

1:36:00Sudah ya.

1:36:04Oh, hal lain yang seru

1:36:08walaupun ini kan sebetulnya teknologinya

1:36:10terkesan old school ya.

1:36:12Maksudnya, bukan old school sih

1:36:14cuma back to basic.

1:36:16Tapi dia kompatibel dengan

1:36:18apapun, apa?

1:36:20Web API yang modern apapun kan

1:36:22dia nggak

1:36:24berlawanan gitu loh. Jadi kayak

1:36:26view transition tetap jalan. Terus banyak

1:36:28helper-helper kayak intersection

1:36:30observer-nya juga ada. Jadi

1:36:32apa ya, mindset-nya back to basic.

1:36:34Tapi kita tetap bisa pakai

1:36:36macem-macem fitur

1:36:38API terbaru.

1:36:40Berarti cukup ya untuk

1:36:48malam ini. Kita udah lumayan

1:36:50explore cukup jauh dengan

1:36:52HTMX. Cukup puas.

1:36:54Jadi, mudah-mudahan

1:36:58teman-teman juga yang

1:37:00yang lagi nyari-nyari

1:37:02front-end framework, mungkin bisa dapat

1:37:04pencerahan. Yang

1:37:06beberapa kayaknya udah ada yang pakai juga.

1:37:08Apa? Udah bagi-bagi pengalaman

1:37:10juga.

1:37:12Jadi, kita

1:37:14cukupkan sampai di sini.

1:37:16Kita ketemu lagi minggu depan dengan topik yang

1:37:18berbeda. Selamat malam.

1:37:20Selamat istirahat. Sampai jumpa

1:37:22minggu depan. Bye-bye.