Ngobrolin Templating Language
Ringkasan Episode
Bantu KoreksiApa pun yang kita pakai untuk membangun web — React, Vue, Svelte, atau Laravel — kita tidak pernah benar-benar lepas dari templating language. Semuanya punya sintaksnya sendiri untuk menyisipkan nilai ke dalam markup, dari JSX sampai direktif Vue, dan meski bentuknya berbeda tujuannya sama persis. Justru perbedaan sintaks itulah yang merepotkan ketika kita berpindah antar proyek. Akarnya sederhana: HTML tidak mengenal logika. Tidak ada perulangan, tidak ada percabangan. Padahal isi halaman datang dari basis data dan bentuknya berubah-ubah. Tanpa templating, satu-satunya jalan adalah merangkai potongan string HTML di dalam controller — yang berujung pada controller gemuk dan lapisan tampilan bercampur logika bisnis. Templating mengembalikan pemisahan itu sekaligus membuat markup bisa dipecah jadi bagian yang dipakai berulang seperti header dan footer. Berbagai gayanya dibandingkan, dari Smarty di era PHP lama, Blade di Laravel, EJS di ekosistem Node, sampai Jade yang menghapus tag penutup sama sekali dan hanya mengandalkan indentasi — gaya yang memecah orang jadi sangat suka atau sangat benci, dan yang sampai sekarang masih bisa dipakai di CodePen bersama Slim dan Haml. Perbedaannya sering soal selera dan bahkan kenyamanan mengetik: kurung kurawal ganda ala Handlebars lebih cepat diketik daripada kombinasi bersimbol. Satu hal yang bukan soal selera adalah keamanan: sintaks yang menampilkan isi apa adanya tanpa escaping berbahaya kalau isinya datang dari pengunjung — aturannya sanitize early, escape late.
Poin-poin Utama
- •Semua framework punya templating language-nya sendiri dengan tujuan identik — dari JSX sampai direktif Vue; yang merepotkan justru berpindah sintaks antar proyek
- •Akarnya sederhana: HTML tidak mengenal perulangan maupun percabangan, padahal isi halaman datang dari basis data
- •Tanpa templating, markup harus dirangkai sebagai potongan string di dalam controller — controller jadi gemuk dan pemisahan tanggung jawabnya hilang
- •Templating juga memungkinkan markup dipecah jadi bagian yang dipakai berulang seperti header dan footer
- •Gayanya beragam: Smarty di era PHP lama, Blade di Laravel, EJS di Node, sampai Jade yang menghapus tag penutup dan hanya mengandalkan indentasi
- •Pilihan gaya sering soal selera dan kenyamanan mengetik — kurung kurawal ganda ala Handlebars lebih cepat diketik daripada kombinasi bersimbol
- •Sintaks yang menampilkan isi apa adanya tanpa escaping berbahaya kalau isinya dari pengunjung — aturannya sanitize early, escape late
Halo, halo, halo. Selamat malam semuanya. Selamat hari Selasa. Selasa waktunya? Waktunya ngobrolin.
Pertama kita mau mengecepen selamat lebat. Oh ya, selamat Ibu Pitering, mohon maaf lahir batin.
Kalau kita banyak-banyak salah, ya banyak sih salahnya. Oh jelas.
-Tolong, dimaafkan. -Mungkin kita sotau ya, tolong dimaafkan dan tolong dikoreksi.
Atau bikin itu mungkin. Atau salah ngasih info mungkin, nah kalau salah ngasih info, dikoreksi aja di komen ya.
Kita butuh kalian buat... Sama-sama belajar, ya.
Kita sama-sama belajar di sini, dan ini adalah episode ke-30 kita.
Oh. Tidak berasa ya. Sebenarnya ke-31 dong, berarti.
Ke-31 sebenarnya. Oh iya ya.
Sudah lebih dari setengah tahun ya, Wati ya.
-Setengah tahun ya? -Ya.
-Udah lebih ya. -Kenapa?
-Lebih. -Iyalah.
-Tahun ke-52. -Tahun ke-52 kan satu tahun ke-52.
-52 minggu ya? -Iya.
-Iya iya iya. -Iya.
-25 ya berarti ya. Ini 20-an. -Okay.
-26. -Berarti episode ke-50 kita harus ini ya.
-51 umpangan. -Celebrasi.
-Celebrasi. -Iya.
-Celebrasi, pakai balon. -Mengapain kita ya, nantilah kita pikirin ya.
Kalau temen-temen ada idea boleh ya, boleh.
Langsung dituangkan ke kolom komentar atau ke bit.ly/mobrolinweb.
Kira-kira episode ulang tahun kita, ulang tahun dan tanda kutip, kita nanti ngapain?
Apakah kita ngobrol sama temen-temen semua?
-Nanti diundang semuanya masuk ke YouTube. -Iya, itu lucu sih.
-Bisanya ya. -Discord kali ya?
Ya mungkin. Live di Discord mungkin.
-Bisa juga. -Atau ada itin lain?
Ada yang mau ngesponsorin, bikin offline event?
Lihat transkrip lengkap (1132 segmen lagi)
Offline event? Wah itu juga boleh tuh.
-Tapi... -Siapa tahu.
-Siapa tahu. -22 minggu lagi berarti ya.
Mas Jalan mau bilang "hello".
Semangat, semangat, semangat, bisa.
Masih bisa.
Oke, dan edisi malam ini kita akan membahas tentang...
-English language. -English language.
Ya, kalau temen-temen familiar dengan framework seperti React.
Atau Vue.js, atau Angular, atau Spelt.
Atau apa pun, Laravel, ROR, gak bakal lepas dari templating language.
-Ya, yang backend juga ada. -Yang backend ada?
-Oh, baru tahu. -Yang ROR itu kan backend.
Ada R, Laravel.
-Blade. -Tapi kan itu untuk markupnya.
Betul, tapi kan di-serve-nya framework yang request-respond dari server.
Server side rendering lah.
Yes, kalau misalkan yang tadi saya sebutkan seperti React, Vue, Angular itu kan yang front-end only kan.
Kalau ada yang familiar dengan JSX, walaupun JSX, claim-nya adalah JS JavaScript.
-Walaupun sebenarnya tidak. -Beda ya, beda.
Vue.js juga pakai v-something-nya kan. Ada v-sieve, ada v-apalagi, banyak ya.
Di-swele, ada curly brace, pager, if-else-nya kan pakai, dia punya syntax sendiri.
Nah, itu semua bisa dianggap templating language.
Nah, yang mau kita bahas adalah templating language itu apa, kemudian kenapa butuh.
Dan apa ya, kayaknya kalau ditarik garis kira-kira itu kayaknya mirip-mirip lah ya.
Walaupun syntax-nya mungkin ada perbedaan, ada fitur yang berbeda, tapi tujuannya tetap sama kan.
Tujuannya sama, syntax-nya lain semua, pusing kalau kita harus context switching.
Dari satu jenis templating language ke templating language lain.
-Susah ya memang itu. -Iku susahnya.
Plating language pertama kalian apa?
-Apa ya? -Saya dulu pakenya Smarty.
-Sama, saya dulu pakenya Smarty. -Untuk me-hp ya.
Smarty. Udah lama banget ini Smarty.
-Tapi masih aktif loh, bisa lihat. -Masih, 2022.
Kita lihat ya dimana sentaknya.
-Zoom in, zoom in. -Zoom in, oke.
-Websitenya juga website ini ya. -Iya.
Tapi intinya kok sponsornya kasino-kasino begini ya?
Oh dia bertahan karena sponsornya aneh-aneh.
-Apa? -Oh itu di-hack ya kayaknya, oh enggak itu partner ya ampun.
-Kirain di-hack. -Sonsor loh.
-Mungkin ya. -Ku-install ya.
-Example app kok enggak? -Commentation.
-Iya. -Udah lama banget ya.
Iya, installation basic syntax, nah kita lihat ya.
Nah ini dia pakai urung kurawal, jintang.
Nah ini dia, jadi mengingat masa lalu ya.
Ada include, ada macam-macam ya, ada for juga.
Nah tapi sebelum kesitu mungkin kita bahas dulu tentang,
ini templating lenjuts ini kan bagian, salah satu bagian dari
istilahnya domain spesifik lenjuts kan.
Jadi ada beberapa lenjuts yang mungkin bisa dikategorikan lenjuts dan tanda kutip gitu.
Bahasa, tapi bahasanya simple.
Jadi khusus untuk, ya itu domain spesifik, khusus untuk
sesuatu yang sangat spesifik.
Misalkan tadi untuk menjejret HTML, templating lenjuts.
Ada juga kalau misalkan teman-teman pakai ORM misalkan,
itu juga ada domain spesifik lenjutsnya.
Misalkan mau definisikan skema database, itu kan pakai syntax tertentu kan.
Bukan misalkan pakai syntaxnya Laravel,
bukan pakai syntaxnya PISP, bukan pakai syntaxnya Ruby, dan lain-lain.
Tapi itu berbeda, sedikit berbeda.
Nah itu juga domain spesifik lenjuts.
Ada file konfigurasi juga ada.
Kayak YAML, TOML, dan belakangnya markup lenjuts lainnya juga
itu bagian dari domain spesifik lenjuts.
Domain spesifik lenjuts itu kependekannya DSL bukan sih?
DSL, iya.
Dan kita akan bahas salah satunya adalah templating lenjuts,
dan juga template engine kali ya.
Karena itu sepasang ya, di mana ada language, ada syntax khusus,
ya di situ harus ada engine yang memproses si syntax, si karakter-karakter nggak jelas itu.
Jadi kali ya diparsing, jadi masuk ke workflow-nya entah itu diparsing lagi ke HTML atau JavaScript atau apa pun.
Nah itu tuh definisinya oke sih tuh, simple then.
Singkat pada jelas di kalimat pertama.
Jadi data, itu tadi kan contohnya entah dari database, atau dari apa lah sistem,
misalnya dari PHP atau apa pun gitu.
Dimasukkan ke structured format.
Udah, itu doang.
Contoh-contohnya kan tadi sebagian udah dibahas tuh.
Iya, ada ERB, ada Hummel, ada Slim, terus ada Django, ada moustache atau handlebar.
Ada banyak sekali.
Nanti kita akan berbagi pengalaman kita pernah pakai templating lenjuts apa.
Weh, ada ini ya.
Featuring.
Ada featuring ya.
Coba ditanya tuh, favorite language-nya apa deh.
Hello world-nya pakai bahasa apa.
Oke.
Nah, jadi tujuan si templating lenjuts adalah untuk mengkompilasi yang tadinya sinta-sinta HTML kan,
karena HTML itu tidak ada logika di sana.
Kita nggak bisa pakai for, nggak bisa pakai if, gitu kan.
Kita bisa pakai logika yang biasa kita gunakan untuk komodaman, gitu.
Jadi satu solusinya adalah menggunakan templating language.
Jadi memudahkan, sebenarnya kan apapun templating language-nya yang pasti ada itu ngerender value-nya variable.
Itu udah jelas.
Kalau nggak bisa satu ini, ya udah ngapain ada templating language.
Terus look.
Ya, apa logic computation dimasukin ke markup intinya kan itu tadi.
Jadi ada variable, ada kalkulasi, mungkin kalkulasi simple kan ya.
Terus ada conditional, looping, kadang ada partial, udah intinya kan cuma itu.
Partial atau include.
Kita lihat sejarahnya ya, kayak templating engine-nya kayak jaman dulu itu, kalau moding PHP yang versi 4 ke bawah ya,
yang dia masih pakai syntax-nya itu masih kayak tanda-tanya sama dengan, gitu ya.
Oh, ada contohnya tuh buka yang warang file deh.
Sama VbScrip jaman dulu tuh, saya masih ingat tuh VbScrip tuh masih pakai sikur-sikur persen sama dengan itu.
Itu kan tau contohnya?
Iya.
Nah dulu tuh PHP, ya sebenarnya bisa, cuma kan kayak agak clunky ya, agak berentatan aja.
Nah, bandingin bawahnya pakai templating language blade, ya relatif lebih rapih lah.
Iya.
Nah, ini sebenarnya kenapa kita butuh templating language?
Supaya lebih rapih tadi ya, jawabannya.
Supaya nggak banyak repeating element kan.
Jadi kalau misalnya kita, iya.
Jadi bisa modular salah satunya.
Modular, bisa include ya.
Ya, templating, kita bisa modular, jadi kita bikin satu header aja, satu footer aja,
nanti bisa rame-rame semua.
Kalau mau loop juga bentuknya bagus, kalau mau kondisional, kodonya bagus, lebih rapih.
Intinya, view-nya kan, presentation.
Presentation, iya.
Model, view, controller, jadi view.
Controller, ini untuk view.
Iya, kita fokus di view-nya aja, jadi view itu nggak perlu proses business logic,
hanya untuk mengambilin data, seperti benar-benar separation, kalau bahasa ini, separation of concern.
Jadi, bahkan template-nya sudah kita, oke, kalau misalnya mau untuk user table ya di situ,
kalau mau untuk user login ya di situ, header di situ.
Jadi, ngedibaginya juga gampang.
Tapi nanti kita cerita apa pain point packet dan piping engine ya, nanti kita cerita.
Yang mana sebenarnya, dibalik layer kan, diprosesnya oleh engine-nya kan,
jadi sebetulnya ada satu lapisan pemprosesan lagi sih.
Sama jika dipindahkin, biar mungkin developer yang bikin front-end,
yang bikin view layer markup-nya lebih simple, ngetiknya.
Nah, apa yang terjadi kalau kita tidak menggunakan template engine atau templating language?
Yang terjadi adalah semuanya kita tulis di controller.
Kalau tadi kita omong model view controller kan, dari model dapat datanya di controller,
kita return string-nya, string HTML-nya kan, mulai dari HTML, buka sampai HTML tutup.
Jadi kalau di PSP dulu, pakai petik 1 misalkan,
abis itu di concatenasi dengan datanya, abis itu di for loop misalkan.
Kalau PSP tadi itu kayak contoh yang atas itu kan.
Kalau JavaScript sekarang mungkin ketolong, udah ada template literal ya.
Di ECMAScript sendiri udah ada template literal.
Jadi kalau mau looping, ya looping kayak JavaScript biasa aja.
Tapi ya tetap aja. Tetap aja harus concatenate lah.
Intinya concatenate kayak nyambung-nyambungin string yang isinya HTML.
Karena bagaimanapun, harap diingat browser kan cuma bisa membaca HTML.
Jadi kita mau pakai segala jenis templating engine language atau nggak pakai sama sekali,
ujung-ujungnya pokoknya harus jadi string HTML.
Ini kan tidak dalam untuk string kan. Kalau misalkan kita mau nggak pakai templating
sama sekali, ini kita harus convert jadi string, abis itu ini di PHP-nya jadi...
Di echo sih.
Ujung-ujungnya adalah situation of concern.
Jadinya semuanya ada di controller, jadi controllernya budaya banget itu.
Satu template. Atau dia bisa baca file.
Tapi kalau baca file juga mau gimana gitu.
Butuh si templating engine juga kan untuk memasukkan data itu ke dalam tempat-tempatnya.
Jadi file-nya HTML manual diketik satu, dibuat satu-satu.
Yang kayak kita sering bahas dulu jaman static HTML file.
Ya, jadi nggak efektif, nggak efisien sama sekali.
Makanya muncul kebutuhan untuk templating engine dan templating language.
Selanjutnya kita bahas tentang, apa lagi nih, perbandingan.
Beberapa templating language yang ada ya.
Biar ada bayangan aja sebagai contoh.
Ini maksudnya apa sih templating, ngomongin apa gitu ya.
Kalau di ekspresi itu yang paling terkenal adalah EJS.
Yang terkenal ada yang built-in EJS ya.
EJS yang built-in, tapi bisa diganti.
Bisa pakai pack atau dulu namanya Jade. Jade ini juga cukup terkenal ya.
Terkenal di Ruby Honor juga.
Iya, ganti nama lah.
Oh iya, pack dalam kurung formerly known as Jade.
Tuh, di paragraf ketiga.
Menarik Jade ini, dia modelnya kayak Python atau kayak stylus CSS preprocession.
Jadi dia menggunakan spasi.
Jadi ngetiknya tuh enak.
Cuman ribet.
Terus, rawan error.
Bukan error sih, kayak formatting issue kali.
Jadi pack ini salah satu yang filosofinya adalah nggak perlu tutup.
Kalau tag HTML kan perlu buka, tutup kan.
Tapi dia nggak perlu.
Jadi dia kayak manggil function aja.
Nama tagnya spasi, isinya gitu.
Dan fun fact ini, sampai sekarang di CodePen pun kita masih bisa pakai pack.
Misalnya kita malas nulis HTML complete nih.
Di CodePen itu masih bisa pakai Hummel, Markdown, Slim atau Pack.
Ya, nanti bisa dikompile jadi HTML ya.
Ini contohnya, tuh menarik kan?
Buat saya sih menarik ya.
Itu bakal masalah nggak kalau misalnya identasinya misalnya nggak compact gitu.
Ada yang pakai tag, ada yang pakai spasi.
Mau lihat nggak?
Kalau campur mungkin iya.
Tapi kalau misalkan konsisten sih nggak harusnya.
Pake editor config dong.
Nah, harus kalau kerja sama orang lain, berarti harus ketat banget itunya.
Harus pakai intro ya.
Nah, ini dia kan kenapa nggak butuh tutup?
Karena dia pakai spasi ini kan.
Kalau misalkan identasinya begini, ya berarti ini adalah satu komponen kan.
Itu bayang nggak sih gimana cara parsingnya ini, gimana cara nulis codenya?
Ya, nulis engine-nya gitu gimana ya?
Iya kan sama aja kayak kurung buka kurung tutup ya.
Pokoknya dia nyari, dia ngitung jumlah identasinya aja sih.
Kalau misalnya ditugaskan tuh coding tesnya atau kalau mau masuk perusahaan.
Buatlah sebuah templating engine.
Nggak ada yang datang.
Menarik sebenarnya.
Tapi menarik sih walaupun nggak jadi, gimana cara paratan didak itu, approach-nya.
Tadinya kepikiran mau ini sebenarnya, mau live coding bikin templating engine sederhana.
Jadi kan teori-nya ya, ini sederhananya. Ini versi paling sederhana.
Kita punya string, string HTML blablabla.
Terus kita punya sintaks misalkan, katakanlah kita mau coba yang handlebars.
Yang kurung kurawal dua kali itu.
Yaudah kita find aja, kurung kurawal dua kali isinya apa berarti itu variable-nya.
String replace gitu ya.
Ya entah itu berupa indentasi atau space atau kurung kurawal atau apa.
Itu lebih besar lebih kecil ya, pokoknya kita cari tag-nya kan.
Kalau ini berarti gimana ya?
Berarti final replace, begitu ketemu body, diganti aja.
Bukan tag body, terus body buka body tutup.
Kita berarti detect element-nya, detect indentasi-nya, jumlah indentasi-nya.
Buat nantuin apa? Kayak tree, kan bikin pohon kan, bikin tree nesting-nya.
Kalau saya bukan bikin tree, ya maksudnya ada tree-nya juga.
Tetapi sistemnya ini pakai balikannya si queue, stack, jadi buat pakai stack.
Jadi semua diparsing, maksudnya dibaca per line.
Dan setiap line, berarti ada tree.
Dan masuk ke stack.
Setelah masuk ke stack, baru nanti waktu dikeluarkan.
Di susun lagi, di looping terus di susun.
Ini bisa jadi tugas akhir.
Tugas akhir bisa sih, tugas akhir.
Itu aja, coding interview.
Gimana cara kalian untuk membaca lojinya?
Bikin templating language.
Bikin templating language sendiri.
Habis itu baru kan ada attribute-nya, ada value-nya.
Kayak apa sih itu, class column-item, bisa ada attribute apa.
Itu masih baru, yang saya jelaskan, masih baru yang ke bawah ya.
Masih ada yang ke sampingnya, jadi setiap line-nya.
Samping, bisa ada children, bisa ada attribute.
Perlu diparsing juga.
Jadi dibaca titik sama spasi.
Cuma ini horror banget ya sih.
String aja nggak pakai quote mark-in nih.
Nggak enak banget liatnya.
Openning pribadi ya, nggak enak banget liatnya sih.
Nggak enak ya, oke.
Uniknya adalah, kalau ada orang yang suka, dia suka banget.
Tapi kalau ada orang yang suka, dia nggak suka banget.
Divisive ya, ekipalanya kalau buah, durin.
Maksudnya kalau aku atau jeruk kan orang, oh oke nggak.
Suka banget yang nggak, sembel yang nggak.
Cuma kalau dibiarkan, orang suka banget atau sembel.
Atau ekipalanya itu kayak film.
Kalau yang suka, udah nggak bisa menggunakan editor lain.
Maksudnya setidaknya visual studio code pun pakai keybindingnya film.
Sama kayak ini.
Kalau dia udah kebiasaan, mau pakai templating engine lain tuh udah males.
Karena udah enak begini gitu kan.
Lebih singkat, yang dideteknya lebih sedikit gitu lah.
Kayak ngomong aja ya kayak, each tool will come, here is the home page, blablabla.
Tapi kayaknya sekarang udah jarang yang pakai karena ini,
begitu kita tab atau kita enter di visual studio code, udah jadi satu tag sendiri kan.
Udah ada class namenya, udah ada bantuan taggingnya, jadi lebih cukup.
Jadi dia dibuat obsolete oleh teknologi intelligence ya.
Teknologi tagging.
Iya, betul.
Bukan obsolete sih, maksudnya jadi nggak sepenting itu.
Maksudnya keunggulan, yang dulunya keunggulan dia, sekarang ya jadi kayak nggak penting.
Ya, competitive talent testing jadi hilang.
Terus tadi Pak udah, kalau IJS, mana IJS?
Nah, IJS malah yang kedua ya. IJS anggar ya, mirip-mirip kayak Black juga.
Dia modelnya kayak gini.
Ya, cuma karakternya aja.
Sama dengan itu berarti nama variable dan nanti dia akan muncul easy variable-nya.
Kalau minus itu berarti without escaping, ini maksudnya apa?
Maksudnya kalau ada ATML ditampilkan apa adanya?
Nggak ada filter-nya ya, nggak ada sanitize-nya.
Iya, jadi misalkan ada script JavaScript yang apa?
Javascript yang berbahaya, misalkan alert gitu ditampilin aja udah.
Dokumen cookie.
Ya, ini bahaya kalau misalkan kita menerima inputan dari user misalkan komentar kita menggunakan ini.
Jangan sekali-kali, bahaya.
Jadi kalau mau yang aman, menggunakan ini ya.
Ya, atau maksudnya mungkin ada use case-nya ya, tapi dibalik layar harus kita sanitize dulu.
Di server-side-nya ya gimana? Kerana kita harus sending dulu.
Nggak, ada satu motto yang di komunitas WordPress atau security juga sanitize early, escape late.
Always.
Apa maksudnya? Escape itu apa?
Ya itu tadi escaping.
Oh, escaping-nya terakhir ya?
Jadi selalu gitu ya, nggak ada pengecualian gitu, nggak boleh ada pengecualian.
Use case-nya waktu baru di input oleh user di layer pertama.
Sanitize, layer pertama begitu mau ketemu input dari user, sanitize.
Paling terakhir, output terakhir yang mau keluar ke HTML.
Pas udah di front-end banget, pas udah markup, kayak view layer, baru escape.
Escape, escape, always.
Oke, ini contoh tampilan dari IJS.
Ini ada subjek, ini nanti dia akan berganti, bergantung subjeknya apa isinya?
Nah ini kan dilihatnya lebih enaknya, opini pribadi lagi, lebih mirip dengan HTML normal.
Cuma ada sintaks khususnya, indikator sintaks khususnya apa?
Yaitu tadi si apa? Tanda kurung buka sama percent sama-sama.
Itu namanya opinionetik.
Ada yang nggak suka liat kurung-kurung begini, "Ini beresaman, nggak penting gitu, ngapain sih gue liat kurung itu?"
"Ngapain sih kurung itu? Gue udah tau itu buka itu tutup, ngapain gue liat gitu?"
Kan ada juga.
Selera, selera.
Salah satu konsiderasi dari templating lenjus adalah ngetiknya.
Kalo ngetik, kurung siku percent sama dengan, itu kan pake sieve kan?
Kurung siku pake sieve, percent pake sieve, sama dengan lepas sievenya.
Itu ada ergonomisnya juga.
Kalo misalkan pake handlebar, kurung kerawal dua kali, lebih cepet kan?
Kurung kerawal dua kali, makanya kayaknya IJS nggak terlalu populer, mungkin karena orang mulai males.
Mulai males.
Ya itulah teknologi ya. Kalo udah ada yang, "ini kok, cape ya nulisnya ya?"
Ngetiknya gitu kan, akhirnya munculah solusi-solusi lain, seperti handlebar, must test, dan temen-temennya yang mirip-mirip.
Must test itu mungkin karena curly brace-nya itu mirip kumis kali ya, kumis tapi di rotate 90 derajat.
Oh, terus mirip itu juga, mirip handlebars seteng sepeda kan? Seteng motor, atau sepeda.
Jadi kalo dibalik kesini jadi kumis, dibalik kesini jadi stang.
Ya ini contohnya lebih beranak, tapi ini contohnya terlalu sederhana ya, nggak ada for loop dan lain-lain ya.
Kalo kayak Vue itu dia membuat looping-nya itu langsung di, kan ada kalo v, dash apa itu sebenernya itu template-nya kan?
Ini kita belum ngomongin yang di backend, yang di server, nanti kita ngomongin yang di client.
Salah satu keunggulannya tadi kita udah sebutkan, dia bisa lebih modular, jadi bisa menggunakan parcial.
Bisa input deh.
Bisa direcycle, bisa digunakan berkali-kali, dan kalo di handlebar itu contohnya seperti ini.
Recycle, reuse.
Reuse ya, sorry. Recycle kayak sampah ya.
Recycle berulang ke pol plastik.
Ini adalah template navigation, kemudian kita mau tampilin di halaman utama misalnya.
Nah template navigation-nya dimana, ya mungkin ada settingan di /template/something gitu kan, atau parcial, nanti dia akan ditampilin disini.
Begitu juga dengan templating lanjut yang lain juga biasanya ada.
Oke, itu beberapa contoh ya. Ini baru dari satu environment ya, baru dari express ya.
Meskipun express ada banyak yang lain, karena express itu salah satu yang...
Express itu extendable.
Nah buka yang express aja.
Ya express aja ya, express dulu ya, udah bahas ya.
Mana?
Express bawah-bawah.
Jadi orang, kita biasanya taunya kalo pake express.js identik sama tiga yang dibahas tadi, karena itu yang paling kaman ya, paling umum.
Tapi sebenarnya express itu contoh yang didesign, dia extendable.
Jadi maksudnya template engine yang lain, templating language yang lain juga bisa disambungin, di-extend ke express, itu contohnya.
Ada banyak yang mengerti ya, ada HBS yang tadi ya, Endelbars disingkat HBS.
Ada APA, ada namanya lucu, ada Nanjax.
Ini juga saya pernah pake.
Bahkan kalo iseng bisa JSX disambungin ke express, kalo mau juga bisa.
Eh gimana Nanjax?
Nanjax ini yang pakai Mozilla, yang bikin timnya Mozilla.
Dan dia terinspirasi dari Jinja, Jinja ini adalah templating language di Python.
Coba liat contohnya.
Ya Nanjax terinspirasi dari Jinja, Jinja terinspirasi dari templating language-nya Django.
Itu udah inspirasi tangan kedua ini ya, inspirasi tangan kedua.
Itulah indahan open source, indahnya open source, forking, forking tiada henti.
Nah ini contohnya, jadi bisa di-extend seperti tadi.
Kalo kita mau include gitu ya, kemudian ada block-blocknya.
Itu pake apa sih, curly brace sama percent.
Nah gusing-gusing lah itu indikatornya.
Agak sedikit ini ya, tapi ini khusus untuk seperti block-extend.
Tapi kalo misalkan untuk nampilin variable, tetep menggunakan modelnya handlebar.
Itu paling umum sih, kayaknya di blade, Laravel blade juga pakenya double curly brace.
Karena itu yang udah paling umum.
Harus di-huffle-huffle, di-huffle-huffle ya.
Ya kan sekarang ada jaman IDE modern ya, ada IntelliSense.
Dan ada plugin, kayaknya asal kita pakenya jangan yang aneh-aneh amat gitu.
Jangan pake Whiskers atau Hummel Coffee.
Kalau kita pake yang cukup umum, pengguna-nya banyak, itu hampir pasti ada plugin-nya lah.
Di PS Code.
Dan ternyata di NodeGaze juga ada blade.
Nah ini blade yang sama dengan game Mirk.
Oh ini beda deh.
Kayak bukan nurunya sama ya?
Tapi kitanya sama gitu.
Kitanya sama gak?
Gini dia.
Gede.
Lah ini mah kayak tadi.
Kayak puk.
Kayak nama jenis anjing.
Iya, memang itu, logonya anjing.
Inspired.
J.S.X bisa dipakai.
Salah satu contohnya, front-end framework yang bisa digunakan di Express sebagai templating lanjut adalah Marko.
Marko ini kan?
Iya.
Marko.js.
Jadi, common.js ya di Convert ya.
Dari tulisannya.
Nah ini kan Express soalnya.
Ini salah satu front-end framework yang bisa digunakan di back-end untuk di Express ya.
Karena dia punya templating engine yang compatible dengan Express.
Dan tadi sempat ngobrol juga dengan Eka sebelum acara.
Si Express ini sangat flexible, makanya dia banyak banget.
Bahkan kita bisa bikin sendiri kalau kita mau.
Dia udah menyediakan adaptornya, udah menyediakan spesifikasinya.
Jadi bisa jadi coding test ya, atau jadi interfintest.
Bikinlah templating engine, terus disungling ke Express.
Nah itu loh kayak ada yang bawa seumur hidup, belum pernah denger.
Spritely, a very lightweight J.S.X engine, 45 lines of code, bla bla bla.
Bikin templating engine yang lebih kecil lines of code-nya daripada spritely.
Begitu kerja disuruh bikin crude.
Marah-marah ntar.
Life coding-nya susah-susah, kerjanya gampang banget.
Pas kerja cuma suruh pasang meta-tech, nyambungin analytics doang sih.
Pasang tech-manager, artikanya.
As a user, I want to see tech-manager load.
Mana ada user yang mau lihat tech-manager.
As a member of marketing team, I want to see GTM event.
Berikutnya kita masuk ke environment yang berbeda, ini PSP.
PSP Laraksal.
Jadi disini menggunakan blade.
Templating-nya namanya blade.
Kalau kita tadi pernah pakai smarty, ini masih biar dulu sekali.
Kalau di codeignator pakai apa? Langsung pakai gini dia kan?
Gak pakai template-nya ini kan?
Dia ada template parser juga.
Tapi punya dia sendiri, kayak gini nih.
Sama ka, beda sedikit.
Ini yang bawaan tadi ada link-nya template parser.
Oh ini mirip, mirip sama.
Cuma ada replace-replace doang, gak pakai.
Gak salah ya, gak pakai looping atau kondisional.
Kalau gak salah, udah lama gak pakai, jadi lupa.
Yang lebih modern mungkin Laravel sekarang ya.
Ini contohnya tadi udah bahas juga, jadi lebih sederhana dibandingkan ini.
Menurut teman-teman, tapi hampir yang bersama.
Ini kan contoh simple-nya, coba buka Laravel yang dokumentasi khusus blade.
Di chat.
Ini?
Kalau penggunaannya sih macam-macam, tapi ini ada satu hal yang menarik.
Nggak tahu gue rasa sih ini menarik ya, karena dulunya kan kalau full-stack framework kayak Laravel atau ROR,
dia kan concern-nya presentation layer-nya, pokoknya gimana caranya bisa di-render ke HTML.
Dulu jaman-nya belum terlalu dinamik di JavaScript front-end kan,
client-side interactivity itu hal yang belum terlalu dipikir lah.
Tapi kan sekarang ini Laravel 10 ya, udah ada integrasi JavaScript front-end-nya juga.
Jadi ada potensi bisa clash, terus dia bikin itu tuh sintaks-nya lucu, liat yang hello name.
Jadi kalau kita depannya pakai add symbol, itu mengindikasikan bahwa curly braces sama variable name-nya itu
buat diproses sama JavaScript, jadi will remain untouched by the blade engine.
Jadi kalau depannya nggak pakai add, itu bakal diproses oleh server side-nya kan, PHP, Laravel,
PHP, Laravel, presentation layer, blade, view-nya kan, view file-nya di-generate jadi HTML.
Tapi kalau depannya dikasih add, ya udah dianggap itu urusan integrasi client-side JavaScript.
Karena di Laravel yang baru kan udah nyambung sama webpack mix.
Jadi kayak escape, tapi emang diindikasikan itu urusannya JavaScript client-side.
Jadi ternyata templating language pun pelan-pelan berkevolusi, bahkan yang sejarahnya dari server-side sekalikun.
Wah menarik, menarik. Seru ya. Terus ya itu lucu-lucu sih bisa rendering JSON lah, ya macem-macem penggunaannya.
Ya karena, ya mungkin karena saya nggak, nggak sempat pakai Laravel dan beberapa full-stack framework,
jadi apa namanya, endpoint-nya nggak dapat. Kalau ini kan sih, mungkin yang menggunakan Laravel pasti bingung kan.
Maksudnya bingung dalam artian. Kalau dulu kan kita bikin aplikasi, cukup sederhana ya.
Di server-side, udah gitu. Client-side-nya hanya buat...
Yang penting, family member, bisa looping, bisa include dan sebagainya.
Terus tiba-tiba sekarang si...
Developer banyak mau sekarang.
Jadi mau istilahnya single-page application lah, mau interaksinya kicking market gimana,
mungkin itu yang menyebabkan si Laravel juga menggunakan cara seperti ini,
tujuannya untuk mengakomodir ya itu, platform and staff di sana gitu ya. Seru ya.
Nah, ngomongin templating language, domain specific language, ada satu media atau satu platform ya, apa ya?
Satu protocol sebenarnya yang juga menggunakan templating language, ya itu adalah email.
Nah, itu contoh kasusnya si SendGrid itu ya.
Ya, kalau kita mau ngirim email, yang sifatnya dinamis...
Ada dynamic template, nah dia kan punya teknologi server-side sendiri sebetulnya kan,
di SendGrid-nya atau yang nggak harus SendGrid lah, service apapun, tapi contohnya SendGrid.
Nah kalau SendGrid ini dia built-in-nya handlebars.
Misalkan teman-teman pakai service, kalau ada yang pernah bikin newsletter gitu ya,
bukan berlangganan, kalau berlangganan kan kita terima, kita yang ngirim gitu.
Kayak misalkan pakai MailChimp atau pakai SendGrid atau pakai apapun,
itu ada templating-nya sendiri untuk menampilkan misalkan "Halo Eka, selamat datang" gitu kan,
di newsletter edisi ketiga misalkan.
Nah itu kan dinamis kan, kita ngirimnya ke seribu orang misalkan,
ya nggak mungkin kita ngirim seribu-seribunya satu-satu gitu kan.
Ya kalau ngirim seribu kali, kita nggak usah pakai layanan email kan.
Iya, bikin aja dari Gmail langsung ya.
Nah ini namanya itu bisa dinamis ya salah satunya juga karena templating edisi.
Jadi masing-masing provider juga menggunakan templating edisi untuk memudahkan.
Salah satu contoh pasus penggunaan template lenzud atau domain spesifik lenzud.
Kalau nggak salah, ada templating lenzud buat email yang menggunakan JSX juga,
tapi kita belum bahas JSX, ngerti aja ya, MLJS kalau nggak salah ya.
Nah belum pernah soalnya, kalau selama ini cuma pernah pakai SendGrid.
Ya nanti lah sambil dicari-cari kalau ya.
Oke, berikutnya kita bahas tentang template engine.
Painful engine, apa downside menggunakan template engine?
Nah, tadi kan kita bahas keuntungannya, ada nggak downside-nya yang pernah kalian rasakan?
Ada.
Apa itu?
Jadi ini mungkin case yang mungkin tidak semua orang mengalami.
Dulu saya pernah pakai sebuah templating lenzud yang sangat powerful namanya Mako dari Python.
Ini powerful banget, jadi kita bisa nulis syntax Python bisa di-evaluate di template itu.
Ini udah agak melawan code red sih.
Nah itu, di satu sisi power kita kan gede ya, tapi di sisi yang lain itu performanya ancur.
Maksudnya itu bukan tempatnya aja sih kayaknya.
Bukan tempatnya, iya.
Itu yang membuat si akhirnya saya nggak jadi pakai, dulu sempat pakai kan.
Lama-lama ah udah lah tulis di template aja semua, jadinya si textnya di template.
Jadinya kebayang nggak ya, dari server, dari Python, dia harus melakukan kongkordinasi dan lain-lain.
Kemudian diavolusi lagi, kemudian baru balik lagi ke string lagi.
Jadi ada dua kali proses kerjaan kan.
Tapi si Mako ini digunakan oleh Reddit.
Yang, ya ini, mungkin mereka harus menggunakan beberapa aturan ya.
Nggak boleh ini, nggak boleh itu mungkin ya.
Karena hasilnya ya lumayan.
Cuman, kalau kita mau cepat, istilahnya mau, bukan cepat ya, mau apa ya.
Mau simple juga ya, mau cepat jadilah gitu ya.
Pragmatis lah ya, mau pragmatis.
Yang penting jadi gitu.
Yang penting jadi gitu kan, mau berantakan ya urusan belakangan gitu kan.
Yang penting jalan dulu dah.
Nah ini kalau untuk yang deadliners ini cocok gitu, karena ya udah kalau misalkan kesulitan nih.
Kita mikirin logiknya di sisi, kan kadang-kadang ada susah kan.
Kalau sekarang kan kayaknya datanya itu udah.
Kita ngirimin API dalam bentuk array dan lain-lain bisa diproses di client kan.
Kalau dulu kan di client belum bisa kan.
Jadi terpaksa harus ditulis di template, template di sisi server juga.
Jadi ya kita harus mikirin for loopnya, harus dimanipulasi datanya dan lain-lain.
Nah kalau kesulitan, ya langsung tulis aja di sisi.
Tulis di situ, atasnya ada to do, balikin ke to do.
Nanti rapihin ke kode asli to do itu gak bakal dilihat lagi udah pas udah beres.
Sama aja kayak apa ya, di code igniter kan di VU-nya, di HTML-nya kita bisa nelis PSP kan.
Bisa diavolasi sebagai PSP code kan.
Ya jadi agetik code juga sebenarnya jadinya, ujung-ujungnya.
Itu downside-nya kalau dari saya.
Kalau dari saya downside-nya itu ada, karena ada percent extent layer, terus kemudian kan dia dikompile.
Biasanya blade, smartie, tweak segala macam itu biasanya ada dikompile menjadi file, static file.
Static file?
Ya jadi static file, jadi cache bahasanya sih.
Jadi cache di file, jadi supaya gak di...
Gak di render berulang-ulang.
Iya itu.
Pertama, kalo cache-nya tuh bisa full.
Kalo share hosting-nya, share hosting segala macam.
Penuh ya.
Kalo kebanyakan penuh.
Apalagi kalo nulisnya salah.
Dan ada string yang dynamic dan akhirnya dia generate cache terus.
Dan karena ada cache berarti ada system garbage collection.
Jadi kalo misalnya si template-nya sudah out of date, biasanya dihapus.
Kalo itu gak jalan, karena masalah permission lah atau apa, cache-nya bisa numpuk dan bisa error juga.
Terakhir juga karena dia pake cache, masih berubah dengan cache, smartie atau apa pake cache.
Karena kita udah berubah sesuatu tapi ternyata cache-nya gak ke update atau somehow gak ke update.
Terus kita reverse-reverse, ini kenapa kita sudah berubah filenya, sudah berubah template-nya.
Tapi hasilnya gak berubah-ubah gitu.
Kenapa, kenapa akhirnya ngerimbang itu susahnya setengah mati.
Karena gak tau, ternyata ini waktu cache-nya bukan template-nya.
Nah itu dulu penpoint saya pake template engine.
Karena case, makin susah kadang.
Belum pernah ngalamin sih untungnya, pake Laravel Black pernah.
Cuma keliatannya penggunaannya gak se intense itu buat gak trigger cache yang sampai ekstrim gitu.
Atau mungkin by the time aku pake Laravel, mungkin cache invalidation atau apalah.
Sudah bagus.
Nah dan udah, sebenernya kan itu legacy code ya.
Nah pelan-pelan banyak yang di kombinasi sama JavaScript based run and see.
Pake React banyak yang client render.
Jadi mungkin teringankan kerjaan si Blade juga. Di luar itu sih templating language-nya lebih banyak pake yang run and base.
Misalnya React kan udah built-in JSX.
Karena built-in ya kayak behavior segala macamnya kan yaudahlah itu urusan.
Itu di handle sama React.
Terus Aswell juga punya sendiri, itu kan built-in.
Udah di handling sebaik mungkin sama library-nya sih.
Jadi belum pernah yang sampe kejebak atau kegocek masalah templating language.
Paling masalah ignore-nya sih kalau context switching.
Lagi nulis Aswell, terus tiba-ibah harus pindah nulis Blade.
Nah tapi kan itu masalah human error, itu human issue ya bukan masalah templating language-nya sendiri.
Kayak refeks nulis curly brace dua kali.
Context switching itu downside juga kan.
Sama aja kayak kita biasa nulis misalkan di back-end-nya pake bahasa yang mengharuskan pake atau tidak menggunakan titik oma.
Misalkan Python, terus di front-end-nya kita pake JavaScript.
Terus tiba-tiba lagi nge-tick Python tiba-tiba titik oma gitu kan.
Tepas titik oma itu sih agak terbantu VS Code, cuman bagaimanapun jari kita pasti lebih cepet ya.
Jadi pasti ngalamin error lah.
Jadi mungkin kita bisa, ini waktu yang tepat untuk memperkenalkan beberapa templating language di sisi front-end.
Ya, atau di client-side ya. Salah satunya yang paling terkenal adalah GSX. Kenapa ini bahasa Indonesia ya?
GSX, teman kita semua.
GSX, teman kita semua.
Jujur dulu waktu awal-awal React muncul itu ada penolakan dari diri sendiri.
Ya pasti banyak yang penolakan.
Di-brainwash kan. Wah separation of concern nih. Kita udah misahin antara logic dengan view presentation layer dan lain-lain. Sama React digabungin lagi jadi satu gitu kan.
Terus mungkin ada masalah imperatif VS deklaratif.
Maksudnya kan menyuruh klik element. Buatlah element yang atributnya begini-gini.
Kalau deklaratif, ini harus bentuknya harus kelihatan seperti ini.
Ya, ini jadi dengan GSX kita bisa menulis sintak mirip seperti HTML, meskipun itu bukan HTML ya.
Mirip seperti HTML ditambah dengan bisa kita evoluasi JavaScript misalkan menampilkan variable, manggil function, apa lagi, bisa forward it with...
Sintaknya itu ya.
Harus ada return ya. Harus ada return value ya.
Kalau kita panggil void, di sini gak bisa ya.
Makanya jarang orang yang menggunakan for loop, karena for loop itu tidak return apa-apa. Makanya pakai map kan.
Karena dia return nilai. Pokoknya ini harus return sesuatu.
Harus deklaratif.
Yes, harus deklaratif.
Kemudian ada view. View JS juga punya template yang lainnya sendiri.
Nah, ini unik nih. Bentuknya beda ya. Sintaknya agak beda.
Bentuknya agak beda.
Ini masih familiar ya. Ini paling umum ya.
Curly braces.
Nah, dia menggunakan property dari @HTML.
Seperti fee HTML atau fee something, fee bind, fee...
Bahkan kondisionalnya kalau misalnya if.
Kalau misalnya juga pakai itren.
Ya, dia bisa kondisional, bisa looping, bisa.
Oh, bisa begini juga ya.
Itu aneh lagi.
Kalau ini scene-nya sama dengan true, maka dia bisa muncul.
Kalau scene-nya sama dengan false, dia hilang. Paragraph ini tidak dirender.
Nah, di sini value scene-nya kan string ya.
Tapi itu berarti dia dibalik layar mencari variable JavaScript lokal namanya scene.
Kalau kemudian apa lagi? Spell. Spell juga punya sendiri.
Sama mirip kayak si ini juga kan?
Mirip, mirip.
Ya, rata-rata mirip ya. Ini modelnya mirip-mirip sama view.
Yang berbeda sendiri adalah si React ya.
React dan temen-temennya. Preact, Inferno, Solid juga kayak React.
Solid, ya. Solid pakai JSX juga.
JSX juga ya.
Nah, ini agak sedikit berbeda walaupun pakai kurung-kurawal, tapi ada menggunakan pager sebagai pembuka.
Nah, itu tadi 2%. Sekarang ada pager. Kalau tengah-tengah titik 2.
Kayaknya berbunyi-bunyi, berbunyi-bunyi.
Ya, ini...
Nah, ini.
Tutup-tutup.
Kalau if langsung tutup, tutupnya pakai... Eh, kok nggak bisa di-scroll?
Kalau if langsung ditutup, tutupnya pakai slash, bukaannya pakai pager, tengah-tengah jangan pakai titik 2.
Kalau else atau each, mau...
Kalau nutup selalu slash.
Tapi kalau nutup slash sih, itu logikanya, bukan logika, kebiasaannya dari HTML ya, lumayan enak.
Kalau buka pakai pager, tengah pakai titik 2 tuh selalu lupa.
Apa begitu ya?
Iya, suka-sukanya.
Gak apa-apa.
Tapi kalau udah terbiasa, jadi apa ya, di otak kita tuh udah tahu.
Oh, kalau mau pakai if di awal pakai pager, tutupnya pakai slash, kalau ada else-nya pakai titik 2.
Mau each juga sama.
Kalo langsung drop-down, swell plugin.
Ya, pentingnya plugins untuk kehidupan sehari-hari developer.
Apa nggak kan kita bahas IDE ya?
Oh, iya. Boleh, menarik.
Udah masuk.
Sampai masih pakai Note 3++.
Nah, tadi kan b-swept ada syntax yang menarik sih, itu juga menyesuaikan kebutuhan front-end modern.
Ada a-wait, jadi kayak dia bisa asingkronus.
Nah, itu hal yang nggak ada di templating language lain.
Beritanya aja, sejauh.
Sejauh ini belum ada yang aku modir ya.
Cuma dia bikin shorthand untuk asingkronus.
Berarti ini di-load dia...
Oh, berarti ngeloadnya...
Swap itu membaca semua dari awal.
Sebelum di-compile.
Iya, tapi dia punya keuntungan, maksudnya swell punya keunggulan.
Dia kan nggak runtime ya.
Jalan-nya bukan dadakan dinantang.
Dia compil dulu.
Dia compil dulu, jadi dia udah tahu ada itu.
Itu salah satu, ini cukup berguna kalau untuk ngerjain ini ya.
Panggil API, nungguin data masuk, ini sangat berguna.
Dibandingkan kita harus back-and-forth dari JavaScript-nya.
Ini langsung di template.
Nah, ada beberapa lagi yang lain, tapi silahkan cari sendiri aja.
Angular juga menggunakan yang berbeda.
Ada apa lagi? Ada framework banyak sekali.
Angular punya ya?
Mithosis atau nemithosis?
Nah, ini yang menarik sebenarnya kemarin kita bahas di minggu lalu.
Kita bahas builder.io.
Dia punya satu converter template.
Gila ya, mereka tuh semua bagian dari ekosistem disambil ya.
Jadi kayak Quick dari meta framework-nya Quick.
Terus drag-n-drop dari CMS, kayak low-code builder, dia punya ya itu builder.io.
Bahkan ini templating ada mithosis.
Misalkan kita punya sintaks JSX atau kita punya komponen React.
Kita mau migrasi ke Vue JS atau Vue Quick atau mithosis JSX.
Jadi bisa.
Dia dipersing, apa? Dia nge-compile langsung ya?
Iya, ke-svelte juga bisa nih seperti ini.
Jadi dia lihat div-nya disini, dia bikin div-nya disini.
Terus ada binding-nya, karena ada on-change, ada set name.
Dia bisa lihat lah, gitu-gitu ya.
Oh makanya builder.io kemarin sebagai CMS kan, dia CMS yang...
framework atmostik kan, dia bisa ngambil, dia bisa punya komponen dari berbagai UI apa, front-end framework.
Gila ya, dia teknologinya modular gitu di pisah-pisah.
Kita mau pakai ini doang, mithosis ini doang.
Kalau emang cuma itu yang kita perluin ya boleh-boleh aja.
Tapi semua di-combine jadi produk-pomeril si builder.io itu.
Ini bisnis modelnya bisa dicontoh nih ya.
Ini contoh yang bagus buat bisnis model ya.
Komponen-komponennya open-source semua, tapi layanan yang ininya berbayar.
Dan itu bisa mendukung, saling mendukung ya satu sama lain.
Nah, svelte-osis kebalikannya.
Jadi dari-svelte bisa ke yang lain.
Ke React.
Jadi Quick.
Quick ini juga kayak pakai JSX kan, walaupun dia menggunakan engine yang berbeda.
Sama nggak engine-nya?
Belum berapa ya Quick sih?
Belum berapa, sama.
Bisa rake native, wuih.
Canggih ya.
Bisa rake server-komponen?
Enggak, Nen.
Ah, RSC.
Ini belum sampai ke situ.
Esplorasinya.
Nah, ini mithosis juga baru ketemu kemarin.
Pas lihat.
Keren, keren, keren.
Kalau misalkan ada yang kesulitan.
Karena salah satu JSX yang bikin agak memusingkan adalah
ketika kita disediakan template-nya dari misalkan kita download.
Template dari woodstrap something gitu ya.
Itu kan harus 20 plus name.
Iya, ini kan terlalu banyak, harus find and replace kan.
Ada kemungkinan salahnya juga cukup besar kan.
Downside-nya lah.
Kalau ini, kalau view, harus tambahin vsomething, vsomething.
Oh, kalau itu sih, itu kan interactivity.
Sebenarnya yang nggak enak JSX doang kalau kopas dari PureHTML ya.
Kalau yang lain aman ya.
Kalau swell, view aman.
Swell pernah, soalnya pernah halamin, apa,
convert template yang PureHTML, kopas, aman.
Tapi ya, kalau dynamic, kayak buat, ya itu tadi, keperluan nameplating language kan.
Variable lah, dynamic, copying, ya itu mau nggak mau kan,
harus dikasihkan sendiri.
Kelas lagi harus jadi kelas nih, kan, kalau diri ya.
Nah, kalau jadi kelas, iya.
Masih, masih dipertahankan ya?
Masih lah, kan itu JavaScript.
Nggak boleh, nggak boleh tabrakan.
Nggak boleh tabrakan protected keyword.
Oke, nah, ngomongin yang tadi, email.
Nah, ini ketemu nih namanya MJML.
MJML, wow.
Iya, jadi kalau kita mau bikin service yang bisa ngirim email,
nah, ini kita bisa pakai template engine-nya,
template language-nya seperti JSX kayaknya ya.
Jadi pakai komponen-komponen.
Contohnya...
Lebih cepatnya, lebih kayak jadi custom element.
Custom component, nanti di-rendernya jadi itu, jadi email.
Karena kan email tricky sekali ya.
Kita nggak bisa pakai CSS.
Harus pakai CSS inline, kan, satu.
Itu udah penyusahkan sekali.
Terus kemudian nggak bisa pakai layout yang kekinian, kayak pakai float.
Kayak flex grid.
Flex grid, float mungkin bisa ya.
Harus pakai table, kan.
Jadi itu rumit-rumit.
Makanya butuh kayak ini.
Basic layout, section, misalkan kan.
Caranya gimana?
Nah, ini.
Udah tinggal tulis begini aja.
Ada section, nanti dia akan jadi seperti...
Kenapa nggak ada contohnya?
Nah, ini.
Ini section, mungkin header, ada arrow, ada body, dan lain-lain.
Tapi dia bisa buat dynamic data nggak sih?
Bisa ya?
Harusnya bisa.
Cuma syntax custom element dua.
Coba kita lihat ya.
Komponen.
Gimana ya caranya?
Nggak ada ya?
Ini kan mungkin templatingnya doang.
Mungkin untuk ininya...
Bisa partial?
Oh, oh iya tuh.
Include?
Include-as.
Include, file inline.
Kalau non-dynamic, misalnya tadi tuh newsletter, "Halo Eka, terima kasih sudah membeli kopi..."
Itu kan berarti harus masukin customer name sama produknya.
Variable apa?
Kayaknya emang nggak.
Kayaknya nggak ada ya.
Tapi dia semacam custom element aja, dan bisa include.
Kalau nggak salah, variable itu kan diproses sama si engine-nya, si email provider kan.
Jadi konten.
Oh, servicenya.
Oh, kalau ini nggak nempel ke service apapun ya?
Ini cuma bisa...
Oh, iya.
Ini iya, betul-betul.
Jadi bisa, dia harus ada temannya nih kayak React, Komponen, atau pakai Ruby, atau pakai Python, PHP.
Ini Laravel MJML.
Jadi udah dibawa apa namanya, variable-nya.
Ya nggak tahu ya, kita belum pernah pakai soalnya.
Jadi belum dapat use case-nya yang cocok mungkin ya.
Mungkin teman-teman di chat ada yang pernah pakai?
Boleh ya bagi-bagi pengalamannya.
Siapa tahu ada yang lebih berpengalaman dalam hal ini?
Kita cuma tahu gitu-gitu doang, seandainya belum pernah pakai.
Pertama, pernah pakai send grid sih sebenarnya kalau buat email.
Lebih gampang aja.
Nah, terakhir nih, penutup.
Penutup kita akan bahas tentang...
Dari HTML, yang baru itu ada yang namanya HTML Templatech kan.
HTML, bukan.
Oh, bukan.
Bukan.
Bukan, ini HTML Murni sih.
Murni, Murni.
Oh, ini maksudnya.
Ini kayak custom element kan.
Ini udah lama kali.
Iya, tapi kan banyak yang nggak tahu juga.
Oh, iya, iya.
Kita ingat aja lagi.
Gue pakai ini tahun berapa ya?
Udah lama banget gue pakai ini template.
Karena underscore itu bisa membaca template.
Karena template ini nggak dirender kan.
Jadi template ini kayak HTML template.
Ada di markup, tapi nggak direnderkan dong.
Jadi lebih menguntungkan pakai template daripada pakai element, tapi kita display now.
Karena display now masih dirender.
Kalau template jadi...
Nambah-nambahin kerjaan.
Karena ini bisa di skip.
Iya.
Underscore pakai ini.
Salah satu kenapa kita menggunakan templating LNG adalah...
Kan kalau kita mau bikin data tabular, pokoknya yang ada for loop, itu kan susah ya.
Harus memenuhi JavaScript tadi kan.
Atau templating engine kan.
Kali dengan ini kan sebenarnya bisa.
Tapi ternyata ini natively maksudnya dalam arti browser udah langsung bisa memproses ya.
Enggak perlu pakai library tambahan.
Contohnya disini misalkan ada table gitu kan.
Terus kemudian dalamnya table isinya itu kan kita harus render satu persatu kan.
Misalkan ada seribu row.
Masing-masing row.
Data-nya harus dimasukin ke seribu row.
Wow.
Nah kita pakai template.
Pakai template dengan cara manual ini.
Ini sangat manual ya.
Makanya agak panjang gitu ya.
Kita pen-pen.
Kemudian baru di...
Vanilla.
Oh iya.
Kalau manual ini murahan gitu ya.
Vanilla.
Frame bombnya vanilla.
Oke.
Nah cuman ini kayak yang kita omongin di episode web component sih.
Custom elements sebenarnya oke bagus.
Ini kan oke banget udah natively supported di browser.
Tapi itu kayak nggak enak dilihat aja sih.
Kayaknya rata-rata developer yang kecuali kepepet ya.
Di luar kasus kepepet.
Kalau lihat ini, aduh kok sintaksnya gitu.
Tetap bisa juga kan dia.
Maksudnya bukan...
Ini kan dia cuma jadikan template dan itu jadi bisa di-clone.
Jadi waktu mau language-nya apa aja sebenarnya bisa sih.
Moja query.
Ma... sorry.
Language.
Maksudnya pakai library Java segala apapun tetap bisa.
Framework, UI framework apapun juga bisa.
Iya.
Dia kayak jadi dokumen, get element idea aja sebenarnya.
Terus dapat HTML elementnya.
Kita parsing atau inject...
Value-nya.
Udah jadi HTML element tinggal di append child kemana gitu.
Kalau pakai library apapun sebenarnya bisa.
Nah ada satu tambahan lagi kali ya.
Untuk apa namanya.
Mungkin ini tidak terlalu berhubungan sama templating language.
Ini framework juga.
I'll find.
Ini adalah...
Ini lagi Xdata.
Button, add, click.
Xdata.
Ada Xdata, ada Xdata.
Iya ini apa ya.
Secara tidak langsung replacement dari jQuery.
Jadi kalau misalkan butuh interactivity yang sederhana, ringan.
Yang pasti client-side.
Iya yang pasti client-side.
Kita cukup menambahkan script SRC LPJS.
Kemudian kita sudah bisa pakai templating language-nya dia.
Termasuk onclick.
Onclick-nya pakai add, click.
Yang di sini Xdata.
Xtool.
Terus itu langsung kayak jaradin JavaScript di dalam string ya.
Jadi kayak string open, 2 false.
Itu kan berarti dia mau modifikasi, nge-declare, re-declare value-nya variable open.
Iya.
"Think of it as powerful as hell."
Nah ini juga mungkin subjektif.
Cuma dilihat kan randa gimana ya.
Bisa.
Ini ada kebutuhan.
Contohnya kita cuma mau buat landing page yang simple aja.
Cepet aja kan gak butuh sampai harus...
Ngapain pakai CreateJS atau Next.js kan.
Nah cuma ini subjektif lagi.
Sekarang JavaScript juga udah bagus.
Edmascript yang baru udah bagus.
Landing page doang.
Yaudah HTML JavaScript.
Biasa aja lah.
Kan butuh dibuat interaktif ceritanya.
Interaktif.
Masukin email.
Jadi setiap diketik itu email-nya ada animasi apa?
Dokumen.query selektor.
Iya, iya, iya.
Kembali lagi subjektif ya.
Contoh mau bikin akordion.
Akordion, tab item, atau simple slider kan lebih...
Kalau ada kayak gini kan lebih cepet ya.
Ya, ini akhirnya diantara vanilla dan framework.
Jadi dia di tengah-tengah lah.
Belum terlalu butuh framework, tapi vanilla udah agak susah.
Kira-kira gitu.
Gak tahu butuhannya kapan.
Pasti ada kok.
Akordion bener kan?
Akordion, modal.
Oh, persis akses.
Oh, ini berbayarnya ya.
Oh, kelebihannya.
Maksudnya kelebihannya adalah dia udah bikin komponen-komponennya.
Jadi tinggal masukin aja udah.
Tinggal kelpas.
Iya.
Tapi lumayan banyak juga ya.
Ada teleport.
Oh.
Ada magic.
Kayak react portal kali ya.
Jadi kayak apa?
N-nya bukan di situ, tapi N-nya bisa random.
Bisa di luar lah. Bisa di body atau tempat lain.
Oh, bisa masking.
Yang buat ini buat...
Betul.
Ya, jadi kalau...
Misalkan awalnya kan tadinya kita bikin landing piece atau bikin tema sederhana.
Oh, butuh kebutuhan ini.
Mau convert HTMLCCS itu ke react atau ke spell.
Kayaknya terlalu jauh jalannya kan.
Ya, pakai ini aja.
Jalan tengahnya.
Jadi agak niche ya ini ya.
Si frame of ini ya.
Enggak juga ya. Sebenarnya kalau kayak...
Membangun...
Apa ya, ibaratnya ya.
Dashboard.
Ini aja bangun dashboard yang kita punya server side rendering.
Masih server side rendering.
Terus di aplikasi...
Misalnya kita...
Sales report untuk point of sales lah.
Jadi bagi pengguna yang untuk lihat tampilan...
Cuma lihat sales chart, lihat table-nya.
Kayaknya pakai kayak gini cukup ya.
Cukup ya.
Atau ada lagi sih use case-nya.
Gimana, gimana?
Nah, use case-nya adalah...
Programmer atau developer yang bukan...
Yang ga suka, yang ga jarang pakai front-end...
Mundirin sama sekali.
Gak mau belajar react, ga tertarik.
Mungkin emang bukan kerjaannya gitu lah.
Misalnya mungkin selama ini ada lebih banyak focus back-end.
Tapi pepet harus bikin front-end...
Cepet dan ga mau belajar...
Maksudnya ga minat...
Ngedelemin ekosistem react dan lain-lain.
Cuma pengen yang cepet jadi plug-and-play.
Phone-nya kalo di-click, ini buka kalo di...
Itu tadi masking input, misalnya...
Gimana caranya biar format-nya...
Format inputnya, date, month, year.
Gak tertarik teknologi front-end apapun itu lainnya.
Sebagai contohnya, kayak...
Framework PHP, contohnya yang YI.
YI framework tuh, yang sudah menyediakan...
Cerutnya by core gitu.
Cerutnya sudah jadi.
Kebutuhan datanya sudah jelas.
Table-nya sudah jelas, sudah tau.
Hanya tuh tinggal menampilkan table data...
Yang sebagai cakep dan ada interactivity-nya.
Ngapain pusing pakai Next.js gitu.
Dibuat headless, contohnya ya.
Setup-setup...
Buat tabelnya...
Kata-kata... Seperti dulu mungkin ya...
Project ERP 2 minggu kelar, gitu.
Contoh.
Ya bener-bener.
Kan bisa juga kan?
Iya. Maksudnya yang gak butuh...
Gak butuh apa ya? Gak butuh di...
Transpilasi dan lain-lain kan butuh...
Banyak ini kan.
Kalo Alpine tetap butuh di Transpile kan?
Dia tetep ada prosesnya kan?
Enggak.
Enggak ya? Langsung?
Enggak.
CDN Unpacked tadi langsung pakai interactivity-nya jadi?
Iya.
Itu salah satu penggulannya dia CDN aja.
Jadi cuma drop aja langsung jadi gitu.
Jadi ya lumayan lah buat menambah-nambah...
Perbenaraan Library.
Jadi jangan langsung jump in ke Library yang terlalu besar.
Karena juga berpengaruh ke performa juga ujung-ujungnya.
Tapi tetep mengerti tujuannya.
Mengerti concert-nya.
Di belakang kasusnya.
Cara kerjanya.
Dipakailah teknologi yang sesuai dengan kebutuhan.
Iya, jangan berlebihan.
Iya, tadi bener sih.
Setuju dengan Eka tadi.
Ada tipikal orang yang backend banget.
Dan dia gak mau jadi host tech, gak mau belajar front-end.
Yaudah pakai...
Atau kelamaan, maksudnya dikejar waktulah.
Masa belajar front-end dulu?
Orang program yang perlu jadi sekarang?
Gak cair. Nanti PHR gak cair.
Saya kan lebih sering urusannya sama backend dan JavaScript.
Kalau sudah disuruh CSS pusing kepala saya.
Ya, tailwindin aja.
Ya, tailwindin aja gitu ya.
Kalau saya harus belajar...
Masanya belajar lebih banyak mengenai...
CSS.
Konsepsi CSS yang mendalam.
Butuh waktu.
Waktu adalah uang.
Sedangkan...
Saya...
Sulit banget.
Artnya belum sampai gitu.
Ya, udahlah pakai tailwind aja.
Oke.
Bahkan pun tailwindnya pun...
Kalau misalkan ada budget...
Bisa pakai yang tailwind component UI itu.
Tailwind UI, tinggal copy paste, copy paste jadi.
Walaupun nanti ujung-ujungnya...
Website-nya mirip-mirip sama yang lain.
Sama kayak...
Contohnya library untuk bikin chart.
Kalau mau canggih, bikin aja chart sendiri.
Cukup pakai.
Tapi kalau saya, mah enggak.
Saya tinggal kasih tau klien.
Saya buka chart yang paling mahal.
High chart, cakep.
Beli license-nya, tinggal pasang.
Pakai, sesuaikan option-nya.
Jadi deh, cakep.
Mungkin kalau dibalik nih.
Kebalikannya juga kayak misalnya...
Sekarang kan banyak tuh yang kayak kita bahas kemarin.
Backend as a service.
Terus kayak ORM yang segala ada.
Kayak Prisma, itu kan...
Mungkin kalau orang yang...
Ngedalemin banget backend, mungkin...
Itu ya, nggak sesuai...
Nggak sesuai selera.
Cuma kalau buat orang yang kayak frontend.
Atau nggak terlalu ngedalemin.
Nggak bisa my SQL.
Nggak terlalu ngerti database.
Ya kan, biar cepet.
Jadi ya...
Pake superbase, udah tinggal panggil...
Atau kemarin tuh, pakai directis.
Direktis.
Direktis.
Direktis.
Direktis.
Terutusnya direktus.
Bacanya direktis.
Ya itu.
Itu kan intinya biar kita bisa...
Get up and running, memproduksi MVP.
THR cair.
Ya.
Siap, siap, siap.
Oke, kalau gitu.
Untuk ngobrolin templating language.
Mungkin udahan dulu.
Terima kasih buat teman-teman yang sudah nonton.
Terima kasih juga yang sudah...
Bagi-bagi ideal.
Buat topik.
Jangan lupa, kita masih menunggu.
Topik-topik menarik dari teman-teman.
Kira-kira teman-teman ingin...
Kita membahas apa.
Mengobrolin apa.
bisa ke bit.ly/ngobrolin
Terus juga...
Mungkin...
Minggu depan kita bahas apa.
Ya tunggu aja.
Jangan lupa di subscribe juga channel-channel kita.
Di youtube-youtube terdekat.
Terdekat.
Sampai jumpa.
Minggu depan di hari Sulasa.
Kembali lagi.
Mulai episode ini dan episode berikutnya kita...
Balik lagi ke jam 8.
Karena puasanya sudah lewat.
Di Sulasa malam jam 8.
Minggu depan kita bakal live lagi ya.
Minggu depan kita bakal live lagi karena...
Minggu ini kita masih dalam...
Sulasana lebaran jadi kita...
Diburan dulu lah.
Maksudnya...
Ngobrol terus.
Sampai jumpa di episode berikutnya.
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 Pembahasan: * Apa itu templating language * Beberapa conto & use cases * Beberapa opsi templating language * Kenapa butuh bahasa untuk templating? * Apa itu Domain Specific Language * Berbagi pengalaman menggunakan berbagai templating language ------------------------------------------------- Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
9 Agu 2023
Ngobrolin URL
Episode ini bagian dari niat baru mereka: menyelipkan topik yang benar-benar mendasar setidaknya sebulan sekali, alih-al...
4 Jun 2025
Ngobrolin Astro
Episode ini membahas secara mendalam tentang fitur server-side Astro yang menjadikannya framework yang sangat versatile....
10 Jul 2024
Ngobrolin State of JavaScript
Episode ini membahas hasil State of JavaScript 2023 survey yang baru dirilis, memberikan gambaran komprehensif tentang l...
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 .