Ngobrolin Templating Language - Ngobrolin WEB ep30

2:05Offline event? Wah itu juga boleh tuh.

2:08-Tapi... -Siapa tahu.

2:10-Siapa tahu. -22 minggu lagi berarti ya.

2:13Mas Jalan mau bilang "hello".

2:18Semangat, semangat, semangat, bisa.

2:21Masih bisa.

2:23Oke, dan edisi malam ini kita akan membahas tentang...

2:28-English language. -English language.

2:31Ya, kalau temen-temen familiar dengan framework seperti React.

2:36Atau Vue.js, atau Angular, atau Spelt.

2:39Atau apa pun, Laravel, ROR, gak bakal lepas dari templating language.

2:45-Ya, yang backend juga ada. -Yang backend ada?

2:48-Oh, baru tahu. -Yang ROR itu kan backend.

2:53Ada R, Laravel.

2:57-Blade. -Tapi kan itu untuk markupnya.

3:02Betul, tapi kan di-serve-nya framework yang request-respond dari server.

3:10Server side rendering lah.

3:12Yes, kalau misalkan yang tadi saya sebutkan seperti React, Vue, Angular itu kan yang front-end only kan.

3:20Kalau ada yang familiar dengan JSX, walaupun JSX, claim-nya adalah JS JavaScript.

3:28-Walaupun sebenarnya tidak. -Beda ya, beda.

3:31Vue.js juga pakai v-something-nya kan. Ada v-sieve, ada v-apalagi, banyak ya.

3:39Di-swele, ada curly brace, pager, if-else-nya kan pakai, dia punya syntax sendiri.

3:46Nah, itu semua bisa dianggap templating language.

3:49Nah, yang mau kita bahas adalah templating language itu apa, kemudian kenapa butuh.

3:56Dan apa ya, kayaknya kalau ditarik garis kira-kira itu kayaknya mirip-mirip lah ya.

4:07Walaupun syntax-nya mungkin ada perbedaan, ada fitur yang berbeda, tapi tujuannya tetap sama kan.

4:12Tujuannya sama, syntax-nya lain semua, pusing kalau kita harus context switching.

4:18Dari satu jenis templating language ke templating language lain.

4:22-Susah ya memang itu. -Iku susahnya.

4:25Plating language pertama kalian apa?

4:27-Apa ya? -Saya dulu pakenya Smarty.

4:34-Sama, saya dulu pakenya Smarty. -Untuk me-hp ya.

4:38Smarty. Udah lama banget ini Smarty.

4:44-Tapi masih aktif loh, bisa lihat. -Masih, 2022.

4:49Kita lihat ya dimana sentaknya.

4:55-Zoom in, zoom in. -Zoom in, oke.

4:59-Websitenya juga website ini ya. -Iya.

5:05Tapi intinya kok sponsornya kasino-kasino begini ya?

5:09Oh dia bertahan karena sponsornya aneh-aneh.

5:14-Apa? -Oh itu di-hack ya kayaknya, oh enggak itu partner ya ampun.

5:20-Kirain di-hack. -Sonsor loh.

5:22-Mungkin ya. -Ku-install ya.

5:25-Example app kok enggak? -Commentation.

5:28-Iya. -Udah lama banget ya.

5:32Iya, installation basic syntax, nah kita lihat ya.

5:36Nah ini dia pakai urung kurawal, jintang.

5:40Nah ini dia, jadi mengingat masa lalu ya.

5:45Ada include, ada macam-macam ya, ada for juga.

5:49Nah tapi sebelum kesitu mungkin kita bahas dulu tentang,

5:53ini templating lenjuts ini kan bagian, salah satu bagian dari

5:57istilahnya domain spesifik lenjuts kan.

6:00Jadi ada beberapa lenjuts yang mungkin bisa dikategorikan lenjuts dan tanda kutip gitu.

6:05Bahasa, tapi bahasanya simple.

6:08Jadi khusus untuk, ya itu domain spesifik, khusus untuk

6:12sesuatu yang sangat spesifik.

6:15Misalkan tadi untuk menjejret HTML, templating lenjuts.

6:19Ada juga kalau misalkan teman-teman pakai ORM misalkan,

6:24itu juga ada domain spesifik lenjutsnya.

6:26Misalkan mau definisikan skema database, itu kan pakai syntax tertentu kan.

6:32Bukan misalkan pakai syntaxnya Laravel,

6:36bukan pakai syntaxnya PISP, bukan pakai syntaxnya Ruby, dan lain-lain.

6:40Tapi itu berbeda, sedikit berbeda.

6:42Nah itu juga domain spesifik lenjuts.

6:44Ada file konfigurasi juga ada.

6:47Kayak YAML, TOML, dan belakangnya markup lenjuts lainnya juga

6:52itu bagian dari domain spesifik lenjuts.

6:55Domain spesifik lenjuts itu kependekannya DSL bukan sih?

6:59DSL, iya.

7:01Dan kita akan bahas salah satunya adalah templating lenjuts,

7:07dan juga template engine kali ya.

7:09Karena itu sepasang ya, di mana ada language, ada syntax khusus,

7:14ya di situ harus ada engine yang memproses si syntax, si karakter-karakter nggak jelas itu.

7:20Jadi kali ya diparsing, jadi masuk ke workflow-nya entah itu diparsing lagi ke HTML atau JavaScript atau apa pun.

7:29Nah itu tuh definisinya oke sih tuh, simple then.

7:33Singkat pada jelas di kalimat pertama.

7:37Jadi data, itu tadi kan contohnya entah dari database, atau dari apa lah sistem,

7:43misalnya dari PHP atau apa pun gitu.

7:47Dimasukkan ke structured format.

7:52Udah, itu doang.

7:54Contoh-contohnya kan tadi sebagian udah dibahas tuh.

7:58Iya, ada ERB, ada Hummel, ada Slim, terus ada Django, ada moustache atau handlebar.

8:10Ada banyak sekali.

8:12Nanti kita akan berbagi pengalaman kita pernah pakai templating lenjuts apa.

8:18Weh, ada ini ya.

8:23Featuring.

8:25Ada featuring ya.

8:27Coba ditanya tuh, favorite language-nya apa deh.

8:32Hello world-nya pakai bahasa apa.

8:36Oke.

8:37Nah, jadi tujuan si templating lenjuts adalah untuk mengkompilasi yang tadinya sinta-sinta HTML kan,

8:46karena HTML itu tidak ada logika di sana.

8:49Kita nggak bisa pakai for, nggak bisa pakai if, gitu kan.

8:53Kita bisa pakai logika yang biasa kita gunakan untuk komodaman, gitu.

8:58Jadi satu solusinya adalah menggunakan templating language.

9:02Jadi memudahkan, sebenarnya kan apapun templating language-nya yang pasti ada itu ngerender value-nya variable.

9:11Itu udah jelas.

9:13Kalau nggak bisa satu ini, ya udah ngapain ada templating language.

9:17Terus look.

9:19Ya, apa logic computation dimasukin ke markup intinya kan itu tadi.

9:28Jadi ada variable, ada kalkulasi, mungkin kalkulasi simple kan ya.

9:33Terus ada conditional, looping, kadang ada partial, udah intinya kan cuma itu.

9:40Partial atau include.

9:42Kita lihat sejarahnya ya, kayak templating engine-nya kayak jaman dulu itu, kalau moding PHP yang versi 4 ke bawah ya,

9:52yang dia masih pakai syntax-nya itu masih kayak tanda-tanya sama dengan, gitu ya.

10:00Oh, ada contohnya tuh buka yang warang file deh.

10:03Sama VbScrip jaman dulu tuh, saya masih ingat tuh VbScrip tuh masih pakai sikur-sikur persen sama dengan itu.

10:13Itu kan tau contohnya?

10:15Iya.

10:16Nah dulu tuh PHP, ya sebenarnya bisa, cuma kan kayak agak clunky ya, agak berentatan aja.

10:25Nah, bandingin bawahnya pakai templating language blade, ya relatif lebih rapih lah.

10:32Iya.

10:34Nah, ini sebenarnya kenapa kita butuh templating language?

10:40Supaya lebih rapih tadi ya, jawabannya.

10:43Supaya nggak banyak repeating element kan.

10:48Jadi kalau misalnya kita, iya.

10:51Jadi bisa modular salah satunya.

10:54Modular, bisa include ya.

10:56Ya, templating, kita bisa modular, jadi kita bikin satu header aja, satu footer aja,

11:02nanti bisa rame-rame semua.

11:04Kalau mau loop juga bentuknya bagus, kalau mau kondisional, kodonya bagus, lebih rapih.

11:11Intinya, view-nya kan, presentation.

11:14Presentation, iya.

11:16Model, view, controller, jadi view.

11:18Controller, ini untuk view.

11:20Iya, kita fokus di view-nya aja, jadi view itu nggak perlu proses business logic,

11:27hanya untuk mengambilin data, seperti benar-benar separation, kalau bahasa ini, separation of concern.

11:34Jadi, bahkan template-nya sudah kita, oke, kalau misalnya mau untuk user table ya di situ,

11:41kalau mau untuk user login ya di situ, header di situ.

11:45Jadi, ngedibaginya juga gampang.

11:50Tapi nanti kita cerita apa pain point packet dan piping engine ya, nanti kita cerita.

11:54Yang mana sebenarnya, dibalik layer kan, diprosesnya oleh engine-nya kan,

11:59jadi sebetulnya ada satu lapisan pemprosesan lagi sih.

12:03Sama jika dipindahkin, biar mungkin developer yang bikin front-end,

12:09yang bikin view layer markup-nya lebih simple, ngetiknya.

12:15Nah, apa yang terjadi kalau kita tidak menggunakan template engine atau templating language?

12:21Yang terjadi adalah semuanya kita tulis di controller.

12:25Kalau tadi kita omong model view controller kan, dari model dapat datanya di controller,

12:31kita return string-nya, string HTML-nya kan, mulai dari HTML, buka sampai HTML tutup.

12:37Jadi kalau di PSP dulu, pakai petik 1 misalkan,

12:41abis itu di concatenasi dengan datanya, abis itu di for loop misalkan.

12:47Kalau PSP tadi itu kayak contoh yang atas itu kan.

12:51Kalau JavaScript sekarang mungkin ketolong, udah ada template literal ya.

12:56Di ECMAScript sendiri udah ada template literal.

13:00Jadi kalau mau looping, ya looping kayak JavaScript biasa aja.

13:04Tapi ya tetap aja. Tetap aja harus concatenate lah.

13:09Intinya concatenate kayak nyambung-nyambungin string yang isinya HTML.

13:13Karena bagaimanapun, harap diingat browser kan cuma bisa membaca HTML.

13:18Jadi kita mau pakai segala jenis templating engine language atau nggak pakai sama sekali,

13:24ujung-ujungnya pokoknya harus jadi string HTML.

13:28Ini kan tidak dalam untuk string kan. Kalau misalkan kita mau nggak pakai templating

13:34sama sekali, ini kita harus convert jadi string, abis itu ini di PHP-nya jadi...

13:40Di echo sih.

13:41Ujung-ujungnya adalah situation of concern.

13:44Jadinya semuanya ada di controller, jadi controllernya budaya banget itu.

13:48Satu template. Atau dia bisa baca file.

13:51Tapi kalau baca file juga mau gimana gitu.

13:54Butuh si templating engine juga kan untuk memasukkan data itu ke dalam tempat-tempatnya.

14:02Jadi file-nya HTML manual diketik satu, dibuat satu-satu.

14:07Yang kayak kita sering bahas dulu jaman static HTML file.

14:12Ya, jadi nggak efektif, nggak efisien sama sekali.

14:16Makanya muncul kebutuhan untuk templating engine dan templating language.

14:24Selanjutnya kita bahas tentang, apa lagi nih, perbandingan.

14:30Beberapa templating language yang ada ya.

14:33Biar ada bayangan aja sebagai contoh.

14:36Ini maksudnya apa sih templating, ngomongin apa gitu ya.

14:39Kalau di ekspresi itu yang paling terkenal adalah EJS.

14:41Yang terkenal ada yang built-in EJS ya.

14:45EJS yang built-in, tapi bisa diganti.

14:48Bisa pakai pack atau dulu namanya Jade. Jade ini juga cukup terkenal ya.

14:52Terkenal di Ruby Honor juga.

14:54Iya, ganti nama lah.

14:56Oh iya, pack dalam kurung formerly known as Jade.

15:01Tuh, di paragraf ketiga.

15:04Menarik Jade ini, dia modelnya kayak Python atau kayak stylus CSS preprocession.

15:12Jadi dia menggunakan spasi.

15:14Jadi ngetiknya tuh enak.

15:17Cuman ribet.

15:19Terus, rawan error.

15:23Bukan error sih, kayak formatting issue kali.

15:28Jadi pack ini salah satu yang filosofinya adalah nggak perlu tutup.

15:35Kalau tag HTML kan perlu buka, tutup kan.

15:37Tapi dia nggak perlu.

15:38Jadi dia kayak manggil function aja.

15:41Nama tagnya spasi, isinya gitu.

15:45Dan fun fact ini, sampai sekarang di CodePen pun kita masih bisa pakai pack.

15:53Misalnya kita malas nulis HTML complete nih.

15:55Di CodePen itu masih bisa pakai Hummel, Markdown, Slim atau Pack.

16:03Ya, nanti bisa dikompile jadi HTML ya.

16:06Ini contohnya, tuh menarik kan?

16:09Buat saya sih menarik ya.

16:11Itu bakal masalah nggak kalau misalnya identasinya misalnya nggak compact gitu.

16:16Ada yang pakai tag, ada yang pakai spasi.

16:19Mau lihat nggak?

16:21Kalau campur mungkin iya.

16:22Tapi kalau misalkan konsisten sih nggak harusnya.

16:26Pake editor config dong.

16:29Nah, harus kalau kerja sama orang lain, berarti harus ketat banget itunya.

16:33Harus pakai intro ya.

16:36Nah, ini dia kan kenapa nggak butuh tutup?

16:39Karena dia pakai spasi ini kan.

16:41Kalau misalkan identasinya begini, ya berarti ini adalah satu komponen kan.

16:46Itu bayang nggak sih gimana cara parsingnya ini, gimana cara nulis codenya?

16:51Ya, nulis engine-nya gitu gimana ya?

16:54Iya kan sama aja kayak kurung buka kurung tutup ya.

16:58Pokoknya dia nyari, dia ngitung jumlah identasinya aja sih.

17:03Kalau misalnya ditugaskan tuh coding tesnya atau kalau mau masuk perusahaan.

17:11Buatlah sebuah templating engine.

17:15Nggak ada yang datang.

17:16Menarik sebenarnya.

17:17Tapi menarik sih walaupun nggak jadi, gimana cara paratan didak itu, approach-nya.

17:24Tadinya kepikiran mau ini sebenarnya, mau live coding bikin templating engine sederhana.

17:30Jadi kan teori-nya ya, ini sederhananya. Ini versi paling sederhana.

17:35Kita punya string, string HTML blablabla.

17:38Terus kita punya sintaks misalkan, katakanlah kita mau coba yang handlebars.

17:46Yang kurung kurawal dua kali itu.

17:48Yaudah kita find aja, kurung kurawal dua kali isinya apa berarti itu variable-nya.

17:54String replace gitu ya.

17:56Ya entah itu berupa indentasi atau space atau kurung kurawal atau apa.

18:03Itu lebih besar lebih kecil ya, pokoknya kita cari tag-nya kan.

18:07Kalau ini berarti gimana ya?

18:10Berarti final replace, begitu ketemu body, diganti aja.

18:15Bukan tag body, terus body buka body tutup.

18:20Kita berarti detect element-nya, detect indentasi-nya, jumlah indentasi-nya.

18:28Buat nantuin apa? Kayak tree, kan bikin pohon kan, bikin tree nesting-nya.

18:34Kalau saya bukan bikin tree, ya maksudnya ada tree-nya juga.

18:40Tetapi sistemnya ini pakai balikannya si queue, stack, jadi buat pakai stack.

18:52Jadi semua diparsing, maksudnya dibaca per line.

18:57Dan setiap line, berarti ada tree.

19:01Dan masuk ke stack.

19:10Setelah masuk ke stack, baru nanti waktu dikeluarkan.

19:14Di susun lagi, di looping terus di susun.

19:17Ini bisa jadi tugas akhir.

19:24Tugas akhir bisa sih, tugas akhir.

19:29Itu aja, coding interview.

19:32Gimana cara kalian untuk membaca lojinya?

19:35Bikin templating language.

19:37Bikin templating language sendiri.

19:39Habis itu baru kan ada attribute-nya, ada value-nya.

19:42Kayak apa sih itu, class column-item, bisa ada attribute apa.

19:47Itu masih baru, yang saya jelaskan, masih baru yang ke bawah ya.

19:54Masih ada yang ke sampingnya, jadi setiap line-nya.

19:57Samping, bisa ada children, bisa ada attribute.

20:00Perlu diparsing juga.

20:03Jadi dibaca titik sama spasi.

20:07Cuma ini horror banget ya sih.

20:09String aja nggak pakai quote mark-in nih.

20:13Nggak enak banget liatnya.

20:15Openning pribadi ya, nggak enak banget liatnya sih.

20:19Nggak enak ya, oke.

20:21Uniknya adalah, kalau ada orang yang suka, dia suka banget.

20:28Tapi kalau ada orang yang suka, dia nggak suka banget.

20:31Divisive ya, ekipalanya kalau buah, durin.

20:34Maksudnya kalau aku atau jeruk kan orang, oh oke nggak.

20:38Suka banget yang nggak, sembel yang nggak.

20:41Cuma kalau dibiarkan, orang suka banget atau sembel.

20:44Atau ekipalanya itu kayak film.

20:47Kalau yang suka, udah nggak bisa menggunakan editor lain.

20:51Maksudnya setidaknya visual studio code pun pakai keybindingnya film.

20:56Sama kayak ini.

20:58Kalau dia udah kebiasaan, mau pakai templating engine lain tuh udah males.

21:02Karena udah enak begini gitu kan.

21:05Lebih singkat, yang dideteknya lebih sedikit gitu lah.

21:09Kayak ngomong aja ya kayak, each tool will come, here is the home page, blablabla.

21:18Tapi kayaknya sekarang udah jarang yang pakai karena ini,

21:21begitu kita tab atau kita enter di visual studio code, udah jadi satu tag sendiri kan.

21:26Udah ada class namenya, udah ada bantuan taggingnya, jadi lebih cukup.

21:30Jadi dia dibuat obsolete oleh teknologi intelligence ya.

21:33Teknologi tagging.

21:35Iya, betul.

21:37Bukan obsolete sih, maksudnya jadi nggak sepenting itu.

21:40Maksudnya keunggulan, yang dulunya keunggulan dia, sekarang ya jadi kayak nggak penting.

21:45Ya, competitive talent testing jadi hilang.

21:49Terus tadi Pak udah, kalau IJS, mana IJS?

21:54Nah, IJS malah yang kedua ya. IJS anggar ya, mirip-mirip kayak Black juga.

21:59Dia modelnya kayak gini.

22:01Ya, cuma karakternya aja.

22:03Sama dengan itu berarti nama variable dan nanti dia akan muncul easy variable-nya.

22:08Kalau minus itu berarti without escaping, ini maksudnya apa?

22:15Maksudnya kalau ada ATML ditampilkan apa adanya?

22:19Nggak ada filter-nya ya, nggak ada sanitize-nya.

22:23Iya, jadi misalkan ada script JavaScript yang apa?

22:30Javascript yang berbahaya, misalkan alert gitu ditampilin aja udah.

22:35Dokumen cookie.

22:37Ya, ini bahaya kalau misalkan kita menerima inputan dari user misalkan komentar kita menggunakan ini.

22:44Jangan sekali-kali, bahaya.

22:47Jadi kalau mau yang aman, menggunakan ini ya.

22:51Ya, atau maksudnya mungkin ada use case-nya ya, tapi dibalik layar harus kita sanitize dulu.

22:57Di server-side-nya ya gimana? Kerana kita harus sending dulu.

23:01Nggak, ada satu motto yang di komunitas WordPress atau security juga sanitize early, escape late.

23:12Always.

23:13Apa maksudnya? Escape itu apa?

23:15Ya itu tadi escaping.

23:17Oh, escaping-nya terakhir ya?

23:19Jadi selalu gitu ya, nggak ada pengecualian gitu, nggak boleh ada pengecualian.

23:24Use case-nya waktu baru di input oleh user di layer pertama.

23:27Sanitize, layer pertama begitu mau ketemu input dari user, sanitize.

23:33Paling terakhir, output terakhir yang mau keluar ke HTML.

23:36Pas udah di front-end banget, pas udah markup, kayak view layer, baru escape.

23:41Escape, escape, always.

23:44Oke, ini contoh tampilan dari IJS.

23:48Ini ada subjek, ini nanti dia akan berganti, bergantung subjeknya apa isinya?

23:53Nah ini kan dilihatnya lebih enaknya, opini pribadi lagi, lebih mirip dengan HTML normal.

23:58Cuma ada sintaks khususnya, indikator sintaks khususnya apa?

24:02Yaitu tadi si apa? Tanda kurung buka sama percent sama-sama.

24:07Itu namanya opinionetik.

24:11Ada yang nggak suka liat kurung-kurung begini, "Ini beresaman, nggak penting gitu, ngapain sih gue liat kurung itu?"

24:19"Ngapain sih kurung itu? Gue udah tau itu buka itu tutup, ngapain gue liat gitu?"

24:22Kan ada juga.

24:25Selera, selera.

24:27Salah satu konsiderasi dari templating lenjus adalah ngetiknya.

24:31Kalo ngetik, kurung siku percent sama dengan, itu kan pake sieve kan?

24:37Kurung siku pake sieve, percent pake sieve, sama dengan lepas sievenya.

24:42Itu ada ergonomisnya juga.

24:46Kalo misalkan pake handlebar, kurung kerawal dua kali, lebih cepet kan?

24:51Kurung kerawal dua kali, makanya kayaknya IJS nggak terlalu populer, mungkin karena orang mulai males.

24:57Mulai males.

25:00Ya itulah teknologi ya. Kalo udah ada yang, "ini kok, cape ya nulisnya ya?"

25:05Ngetiknya gitu kan, akhirnya munculah solusi-solusi lain, seperti handlebar, must test, dan temen-temennya yang mirip-mirip.

25:13Must test itu mungkin karena curly brace-nya itu mirip kumis kali ya, kumis tapi di rotate 90 derajat.

25:20Oh, terus mirip itu juga, mirip handlebars seteng sepeda kan? Seteng motor, atau sepeda.

25:29Jadi kalo dibalik kesini jadi kumis, dibalik kesini jadi stang.

25:34Ya ini contohnya lebih beranak, tapi ini contohnya terlalu sederhana ya, nggak ada for loop dan lain-lain ya.

25:45Kalo kayak Vue itu dia membuat looping-nya itu langsung di, kan ada kalo v, dash apa itu sebenernya itu template-nya kan?

26:01Ini kita belum ngomongin yang di backend, yang di server, nanti kita ngomongin yang di client.

26:07Salah satu keunggulannya tadi kita udah sebutkan, dia bisa lebih modular, jadi bisa menggunakan parcial.

26:15Bisa input deh.

26:17Bisa direcycle, bisa digunakan berkali-kali, dan kalo di handlebar itu contohnya seperti ini.

26:25Recycle, reuse.

26:28Reuse ya, sorry. Recycle kayak sampah ya.

26:32Recycle berulang ke pol plastik.

26:37Ini adalah template navigation, kemudian kita mau tampilin di halaman utama misalnya.

26:43Nah template navigation-nya dimana, ya mungkin ada settingan di /template/something gitu kan, atau parcial, nanti dia akan ditampilin disini.

26:53Begitu juga dengan templating lanjut yang lain juga biasanya ada.

26:58Oke, itu beberapa contoh ya. Ini baru dari satu environment ya, baru dari express ya.

27:07Meskipun express ada banyak yang lain, karena express itu salah satu yang...

27:12Express itu extendable.

27:15Nah buka yang express aja.

27:17Ya express aja ya, express dulu ya, udah bahas ya.

27:20Mana?

27:22Express bawah-bawah.

27:28Jadi orang, kita biasanya taunya kalo pake express.js identik sama tiga yang dibahas tadi, karena itu yang paling kaman ya, paling umum.

27:38Tapi sebenarnya express itu contoh yang didesign, dia extendable.

27:43Jadi maksudnya template engine yang lain, templating language yang lain juga bisa disambungin, di-extend ke express, itu contohnya.

27:54Ada banyak yang mengerti ya, ada HBS yang tadi ya, Endelbars disingkat HBS.

27:59Ada APA, ada namanya lucu, ada Nanjax.

28:05Ini juga saya pernah pake.

28:08Bahkan kalo iseng bisa JSX disambungin ke express, kalo mau juga bisa.

28:14Eh gimana Nanjax?

28:16Nanjax ini yang pakai Mozilla, yang bikin timnya Mozilla.

28:20Dan dia terinspirasi dari Jinja, Jinja ini adalah templating language di Python.

28:25Coba liat contohnya.

28:27Ya Nanjax terinspirasi dari Jinja, Jinja terinspirasi dari templating language-nya Django.

28:33Itu udah inspirasi tangan kedua ini ya, inspirasi tangan kedua.

28:39Itulah indahan open source, indahnya open source, forking, forking tiada henti.

28:45Nah ini contohnya, jadi bisa di-extend seperti tadi.

28:49Kalo kita mau include gitu ya, kemudian ada block-blocknya.

28:52Itu pake apa sih, curly brace sama percent.

28:55Nah gusing-gusing lah itu indikatornya.

28:58Agak sedikit ini ya, tapi ini khusus untuk seperti block-extend.

29:06Tapi kalo misalkan untuk nampilin variable, tetep menggunakan modelnya handlebar.

29:11Itu paling umum sih, kayaknya di blade, Laravel blade juga pakenya double curly brace.

29:18Karena itu yang udah paling umum.

29:20Harus di-huffle-huffle, di-huffle-huffle ya.

29:23Ya kan sekarang ada jaman IDE modern ya, ada IntelliSense.

29:30Dan ada plugin, kayaknya asal kita pakenya jangan yang aneh-aneh amat gitu.

29:34Jangan pake Whiskers atau Hummel Coffee.

29:37Kalau kita pake yang cukup umum, pengguna-nya banyak, itu hampir pasti ada plugin-nya lah.

29:42Di PS Code.

29:44Dan ternyata di NodeGaze juga ada blade.

29:47Nah ini blade yang sama dengan game Mirk.

29:51Oh ini beda deh.

29:53Kayak bukan nurunya sama ya?

29:55Tapi kitanya sama gitu.

29:57Kitanya sama gak?

29:59Gini dia.

30:01Gede.

30:02Lah ini mah kayak tadi.

30:04Kayak puk.

30:06Kayak nama jenis anjing.

30:14Iya, memang itu, logonya anjing.

30:16Inspired.

30:18J.S.X bisa dipakai.

30:26Salah satu contohnya, front-end framework yang bisa digunakan di Express sebagai templating lanjut adalah Marko.

30:34Marko ini kan?

30:36Iya.

30:37Marko.js.

30:38Jadi, common.js ya di Convert ya.

30:41Dari tulisannya.

30:43Nah ini kan Express soalnya.

30:46Ini salah satu front-end framework yang bisa digunakan di back-end untuk di Express ya.

30:53Karena dia punya templating engine yang compatible dengan Express.

30:58Dan tadi sempat ngobrol juga dengan Eka sebelum acara.

31:02Si Express ini sangat flexible, makanya dia banyak banget.

31:07Bahkan kita bisa bikin sendiri kalau kita mau.

31:09Dia udah menyediakan adaptornya, udah menyediakan spesifikasinya.

31:17Jadi bisa jadi coding test ya, atau jadi interfintest.

31:22Bikinlah templating engine, terus disungling ke Express.

31:28Nah itu loh kayak ada yang bawa seumur hidup, belum pernah denger.

31:31Spritely, a very lightweight J.S.X engine, 45 lines of code, bla bla bla.

31:38Bikin templating engine yang lebih kecil lines of code-nya daripada spritely.

31:44Begitu kerja disuruh bikin crude.

31:47Marah-marah ntar.

31:52Life coding-nya susah-susah, kerjanya gampang banget.

32:00Pas kerja cuma suruh pasang meta-tech, nyambungin analytics doang sih.

32:05Pasang tech-manager, artikanya.

32:09As a user, I want to see tech-manager load.

32:13Mana ada user yang mau lihat tech-manager.

32:17As a member of marketing team, I want to see GTM event.

32:32Berikutnya kita masuk ke environment yang berbeda, ini PSP.

32:37PSP Laraksal.

32:41Jadi disini menggunakan blade.

32:47Templating-nya namanya blade.

32:50Kalau kita tadi pernah pakai smarty, ini masih biar dulu sekali.

32:55Kalau di codeignator pakai apa? Langsung pakai gini dia kan?

33:00Gak pakai template-nya ini kan?

33:02Dia ada template parser juga.

33:05Tapi punya dia sendiri, kayak gini nih.

33:09Sama ka, beda sedikit.

33:13Ini yang bawaan tadi ada link-nya template parser.

33:19Oh ini mirip, mirip sama.

33:22Cuma ada replace-replace doang, gak pakai.

33:29Gak salah ya, gak pakai looping atau kondisional.

33:33Kalau gak salah, udah lama gak pakai, jadi lupa.

33:39Yang lebih modern mungkin Laravel sekarang ya.

33:43Ini contohnya tadi udah bahas juga, jadi lebih sederhana dibandingkan ini.

33:50Menurut teman-teman, tapi hampir yang bersama.

33:53Ini kan contoh simple-nya, coba buka Laravel yang dokumentasi khusus blade.

34:01Di chat.

34:05Ini?

34:08Kalau penggunaannya sih macam-macam, tapi ini ada satu hal yang menarik.

34:15Nggak tahu gue rasa sih ini menarik ya, karena dulunya kan kalau full-stack framework kayak Laravel atau ROR,

34:23dia kan concern-nya presentation layer-nya, pokoknya gimana caranya bisa di-render ke HTML.

34:28Dulu jaman-nya belum terlalu dinamik di JavaScript front-end kan,

34:33client-side interactivity itu hal yang belum terlalu dipikir lah.

34:37Tapi kan sekarang ini Laravel 10 ya, udah ada integrasi JavaScript front-end-nya juga.

34:44Jadi ada potensi bisa clash, terus dia bikin itu tuh sintaks-nya lucu, liat yang hello name.

34:50Jadi kalau kita depannya pakai add symbol, itu mengindikasikan bahwa curly braces sama variable name-nya itu

35:02buat diproses sama JavaScript, jadi will remain untouched by the blade engine.

35:07Jadi kalau depannya nggak pakai add, itu bakal diproses oleh server side-nya kan, PHP, Laravel,

35:17PHP, Laravel, presentation layer, blade, view-nya kan, view file-nya di-generate jadi HTML.

35:25Tapi kalau depannya dikasih add, ya udah dianggap itu urusan integrasi client-side JavaScript.

35:32Karena di Laravel yang baru kan udah nyambung sama webpack mix.

35:38Jadi kayak escape, tapi emang diindikasikan itu urusannya JavaScript client-side.

35:47Jadi ternyata templating language pun pelan-pelan berkevolusi, bahkan yang sejarahnya dari server-side sekalikun.

35:57Wah menarik, menarik. Seru ya. Terus ya itu lucu-lucu sih bisa rendering JSON lah, ya macem-macem penggunaannya.

36:05Ya karena, ya mungkin karena saya nggak, nggak sempat pakai Laravel dan beberapa full-stack framework,

36:13jadi apa namanya, endpoint-nya nggak dapat. Kalau ini kan sih, mungkin yang menggunakan Laravel pasti bingung kan.

36:20Maksudnya bingung dalam artian. Kalau dulu kan kita bikin aplikasi, cukup sederhana ya.

36:26Di server-side, udah gitu. Client-side-nya hanya buat...

36:29Yang penting, family member, bisa looping, bisa include dan sebagainya.

36:34Terus tiba-tiba sekarang si...

36:36Developer banyak mau sekarang.

36:38Jadi mau istilahnya single-page application lah, mau interaksinya kicking market gimana,

36:44mungkin itu yang menyebabkan si Laravel juga menggunakan cara seperti ini,

36:49tujuannya untuk mengakomodir ya itu, platform and staff di sana gitu ya. Seru ya.

36:57Nah, ngomongin templating language, domain specific language, ada satu media atau satu platform ya, apa ya?

37:05Satu protocol sebenarnya yang juga menggunakan templating language, ya itu adalah email.

37:15Nah, itu contoh kasusnya si SendGrid itu ya.

37:19Ya, kalau kita mau ngirim email, yang sifatnya dinamis...

37:23Ada dynamic template, nah dia kan punya teknologi server-side sendiri sebetulnya kan,

37:28di SendGrid-nya atau yang nggak harus SendGrid lah, service apapun, tapi contohnya SendGrid.

37:34Nah kalau SendGrid ini dia built-in-nya handlebars.

37:37Misalkan teman-teman pakai service, kalau ada yang pernah bikin newsletter gitu ya,

37:46bukan berlangganan, kalau berlangganan kan kita terima, kita yang ngirim gitu.

37:49Kayak misalkan pakai MailChimp atau pakai SendGrid atau pakai apapun,

37:53itu ada templating-nya sendiri untuk menampilkan misalkan "Halo Eka, selamat datang" gitu kan,

38:01di newsletter edisi ketiga misalkan.

38:04Nah itu kan dinamis kan, kita ngirimnya ke seribu orang misalkan,

38:08ya nggak mungkin kita ngirim seribu-seribunya satu-satu gitu kan.

38:12Ya kalau ngirim seribu kali, kita nggak usah pakai layanan email kan.

38:16Iya, bikin aja dari Gmail langsung ya.

38:19Nah ini namanya itu bisa dinamis ya salah satunya juga karena templating edisi.

38:24Jadi masing-masing provider juga menggunakan templating edisi untuk memudahkan.

38:29Salah satu contoh pasus penggunaan template lenzud atau domain spesifik lenzud.

38:35Kalau nggak salah, ada templating lenzud buat email yang menggunakan JSX juga,

38:46tapi kita belum bahas JSX, ngerti aja ya, MLJS kalau nggak salah ya.

38:51Nah belum pernah soalnya, kalau selama ini cuma pernah pakai SendGrid.

38:56Ya nanti lah sambil dicari-cari kalau ya.

39:02Oke, berikutnya kita bahas tentang template engine.

39:09Painful engine, apa downside menggunakan template engine?

39:16Nah, tadi kan kita bahas keuntungannya, ada nggak downside-nya yang pernah kalian rasakan?

39:25Ada.

39:27Apa itu?

39:29Jadi ini mungkin case yang mungkin tidak semua orang mengalami.

39:38Dulu saya pernah pakai sebuah templating lenzud yang sangat powerful namanya Mako dari Python.

39:45Ini powerful banget, jadi kita bisa nulis syntax Python bisa di-evaluate di template itu.

39:53Ini udah agak melawan code red sih.

39:56Nah itu, di satu sisi power kita kan gede ya, tapi di sisi yang lain itu performanya ancur.

40:04Maksudnya itu bukan tempatnya aja sih kayaknya.

40:07Bukan tempatnya, iya.

40:09Itu yang membuat si akhirnya saya nggak jadi pakai, dulu sempat pakai kan.

40:13Lama-lama ah udah lah tulis di template aja semua, jadinya si textnya di template.

40:17Jadinya kebayang nggak ya, dari server, dari Python, dia harus melakukan kongkordinasi dan lain-lain.

40:24Kemudian diavolusi lagi, kemudian baru balik lagi ke string lagi.

40:29Jadi ada dua kali proses kerjaan kan.

40:32Tapi si Mako ini digunakan oleh Reddit.

40:35Yang, ya ini, mungkin mereka harus menggunakan beberapa aturan ya.

40:42Nggak boleh ini, nggak boleh itu mungkin ya.

40:45Karena hasilnya ya lumayan.

40:48Cuman, kalau kita mau cepat, istilahnya mau, bukan cepat ya, mau apa ya.

40:53Mau simple juga ya, mau cepat jadilah gitu ya.

40:57Pragmatis lah ya, mau pragmatis.

40:59Yang penting jadi gitu.

41:01Yang penting jadi gitu kan, mau berantakan ya urusan belakangan gitu kan.

41:05Yang penting jalan dulu dah.

41:07Nah ini kalau untuk yang deadliners ini cocok gitu, karena ya udah kalau misalkan kesulitan nih.

41:15Kita mikirin logiknya di sisi, kan kadang-kadang ada susah kan.

41:20Kalau sekarang kan kayaknya datanya itu udah.

41:23Kita ngirimin API dalam bentuk array dan lain-lain bisa diproses di client kan.

41:27Kalau dulu kan di client belum bisa kan.

41:28Jadi terpaksa harus ditulis di template, template di sisi server juga.

41:32Jadi ya kita harus mikirin for loopnya, harus dimanipulasi datanya dan lain-lain.

41:37Nah kalau kesulitan, ya langsung tulis aja di sisi.

41:40Tulis di situ, atasnya ada to do, balikin ke to do.

41:44Nanti rapihin ke kode asli to do itu gak bakal dilihat lagi udah pas udah beres.

41:49Sama aja kayak apa ya, di code igniter kan di VU-nya, di HTML-nya kita bisa nelis PSP kan.

41:57Bisa diavolasi sebagai PSP code kan.

41:59Ya jadi agetik code juga sebenarnya jadinya, ujung-ujungnya.

42:03Itu downside-nya kalau dari saya.

42:07Kalau dari saya downside-nya itu ada, karena ada percent extent layer, terus kemudian kan dia dikompile.

42:13Biasanya blade, smartie, tweak segala macam itu biasanya ada dikompile menjadi file, static file.

42:23Static file?

42:24Ya jadi static file, jadi cache bahasanya sih.

42:27Jadi cache di file, jadi supaya gak di...

42:31Gak di render berulang-ulang.

42:33Iya itu.

42:34Pertama, kalo cache-nya tuh bisa full.

42:38Kalo share hosting-nya, share hosting segala macam.

42:41Penuh ya.

42:42Kalo kebanyakan penuh.

42:44Apalagi kalo nulisnya salah.

42:47Dan ada string yang dynamic dan akhirnya dia generate cache terus.

42:54Dan karena ada cache berarti ada system garbage collection.

43:00Jadi kalo misalnya si template-nya sudah out of date, biasanya dihapus.

43:07Kalo itu gak jalan, karena masalah permission lah atau apa, cache-nya bisa numpuk dan bisa error juga.

43:14Terakhir juga karena dia pake cache, masih berubah dengan cache, smartie atau apa pake cache.

43:20Karena kita udah berubah sesuatu tapi ternyata cache-nya gak ke update atau somehow gak ke update.

43:26Terus kita reverse-reverse, ini kenapa kita sudah berubah filenya, sudah berubah template-nya.

43:32Tapi hasilnya gak berubah-ubah gitu.

43:34Kenapa, kenapa akhirnya ngerimbang itu susahnya setengah mati.

43:38Karena gak tau, ternyata ini waktu cache-nya bukan template-nya.

43:42Nah itu dulu penpoint saya pake template engine.

43:47Karena case, makin susah kadang.

43:53Belum pernah ngalamin sih untungnya, pake Laravel Black pernah.

44:01Cuma keliatannya penggunaannya gak se intense itu buat gak trigger cache yang sampai ekstrim gitu.

44:10Atau mungkin by the time aku pake Laravel, mungkin cache invalidation atau apalah.

44:18Sudah bagus.

44:20Nah dan udah, sebenernya kan itu legacy code ya.

44:25Nah pelan-pelan banyak yang di kombinasi sama JavaScript based run and see.

44:32Pake React banyak yang client render.

44:34Jadi mungkin teringankan kerjaan si Blade juga. Di luar itu sih templating language-nya lebih banyak pake yang run and base.

44:44Misalnya React kan udah built-in JSX.

44:46Karena built-in ya kayak behavior segala macamnya kan yaudahlah itu urusan.

44:51Itu di handle sama React.

44:52Terus Aswell juga punya sendiri, itu kan built-in.

44:56Udah di handling sebaik mungkin sama library-nya sih.

45:02Jadi belum pernah yang sampe kejebak atau kegocek masalah templating language.

45:10Paling masalah ignore-nya sih kalau context switching.

45:14Lagi nulis Aswell, terus tiba-ibah harus pindah nulis Blade.

45:19Nah tapi kan itu masalah human error, itu human issue ya bukan masalah templating language-nya sendiri.

45:27Kayak refeks nulis curly brace dua kali.

45:32Context switching itu downside juga kan.

45:35Sama aja kayak kita biasa nulis misalkan di back-end-nya pake bahasa yang mengharuskan pake atau tidak menggunakan titik oma.

45:45Misalkan Python, terus di front-end-nya kita pake JavaScript.

45:50Terus tiba-tiba lagi nge-tick Python tiba-tiba titik oma gitu kan.

45:54Tepas titik oma itu sih agak terbantu VS Code, cuman bagaimanapun jari kita pasti lebih cepet ya.

46:01Jadi pasti ngalamin error lah.

46:06Jadi mungkin kita bisa, ini waktu yang tepat untuk memperkenalkan beberapa templating language di sisi front-end.

46:18Ya, atau di client-side ya. Salah satunya yang paling terkenal adalah GSX. Kenapa ini bahasa Indonesia ya?

46:24GSX, teman kita semua.

46:26GSX, teman kita semua.

46:28Jujur dulu waktu awal-awal React muncul itu ada penolakan dari diri sendiri.

46:35Ya pasti banyak yang penolakan.

46:38Di-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.

46:50Terus mungkin ada masalah imperatif VS deklaratif.

46:53Maksudnya kan menyuruh klik element. Buatlah element yang atributnya begini-gini.

46:59Kalau deklaratif, ini harus bentuknya harus kelihatan seperti ini.

47:05Ya, ini jadi dengan GSX kita bisa menulis sintak mirip seperti HTML, meskipun itu bukan HTML ya.

47:14Mirip seperti HTML ditambah dengan bisa kita evoluasi JavaScript misalkan menampilkan variable, manggil function, apa lagi, bisa forward it with...

47:23Sintaknya itu ya.

47:27Harus ada return ya. Harus ada return value ya.

47:29Kalau kita panggil void, di sini gak bisa ya.

47:32Makanya jarang orang yang menggunakan for loop, karena for loop itu tidak return apa-apa. Makanya pakai map kan.

47:39Karena dia return nilai. Pokoknya ini harus return sesuatu.

47:44Harus deklaratif.

47:46Yes, harus deklaratif.

47:47Kemudian ada view. View JS juga punya template yang lainnya sendiri.

47:52Nah, ini unik nih. Bentuknya beda ya. Sintaknya agak beda.

47:56Bentuknya agak beda.

47:57Ini masih familiar ya. Ini paling umum ya.

48:04Curly braces.

48:06Nah, dia menggunakan property dari @HTML.

48:13Seperti fee HTML atau fee something, fee bind, fee...

48:20Bahkan kondisionalnya kalau misalnya if.

48:23Kalau misalnya juga pakai itren.

48:27Ya, dia bisa kondisional, bisa looping, bisa.

48:33Oh, bisa begini juga ya.

48:38Itu aneh lagi.

48:41Kalau ini scene-nya sama dengan true, maka dia bisa muncul.

48:46Kalau scene-nya sama dengan false, dia hilang. Paragraph ini tidak dirender.

48:50Nah, di sini value scene-nya kan string ya.

48:53Tapi itu berarti dia dibalik layar mencari variable JavaScript lokal namanya scene.

49:00Kalau kemudian apa lagi? Spell. Spell juga punya sendiri.

49:06Sama mirip kayak si ini juga kan?

49:09Mirip, mirip.

49:10Ya, rata-rata mirip ya. Ini modelnya mirip-mirip sama view.

49:14Yang berbeda sendiri adalah si React ya.

49:17React dan temen-temennya. Preact, Inferno, Solid juga kayak React.

49:25Solid, ya. Solid pakai JSX juga.

49:29JSX juga ya.

49:31Nah, ini agak sedikit berbeda walaupun pakai kurung-kurawal, tapi ada menggunakan pager sebagai pembuka.

49:38Nah, itu tadi 2%. Sekarang ada pager. Kalau tengah-tengah titik 2.

49:42Kayaknya berbunyi-bunyi, berbunyi-bunyi.

49:45Ya, ini...

49:47Nah, ini.

49:49Tutup-tutup.

49:51Kalau if langsung tutup, tutupnya pakai... Eh, kok nggak bisa di-scroll?

49:57Kalau if langsung ditutup, tutupnya pakai slash, bukaannya pakai pager, tengah-tengah jangan pakai titik 2.

50:05Kalau else atau each, mau...

50:08Kalau nutup selalu slash.

50:10Tapi kalau nutup slash sih, itu logikanya, bukan logika, kebiasaannya dari HTML ya, lumayan enak.

50:18Kalau buka pakai pager, tengah pakai titik 2 tuh selalu lupa.

50:22Apa begitu ya?

50:24Iya, suka-sukanya.

50:26Gak apa-apa.

50:28Tapi kalau udah terbiasa, jadi apa ya, di otak kita tuh udah tahu.

50:33Oh, kalau mau pakai if di awal pakai pager, tutupnya pakai slash, kalau ada else-nya pakai titik 2.

50:39Mau each juga sama.

50:41Kalo langsung drop-down, swell plugin.

50:45Ya, pentingnya plugins untuk kehidupan sehari-hari developer.

50:51Apa nggak kan kita bahas IDE ya?

50:53Oh, iya. Boleh, menarik.

50:55Udah masuk.

50:57Sampai masih pakai Note 3++.

51:03Nah, tadi kan b-swept ada syntax yang menarik sih, itu juga menyesuaikan kebutuhan front-end modern.

51:10Ada a-wait, jadi kayak dia bisa asingkronus.

51:14Nah, itu hal yang nggak ada di templating language lain.

51:19Beritanya aja, sejauh.

51:21Sejauh ini belum ada yang aku modir ya.

51:24Cuma dia bikin shorthand untuk asingkronus.

51:29Berarti ini di-load dia...

51:33Oh, berarti ngeloadnya...

51:36Swap itu membaca semua dari awal.

51:38Sebelum di-compile.

51:40Iya, tapi dia punya keuntungan, maksudnya swell punya keunggulan.

51:44Dia kan nggak runtime ya.

51:46Jalan-nya bukan dadakan dinantang.

51:48Dia compil dulu.

51:50Dia compil dulu, jadi dia udah tahu ada itu.

51:54Itu salah satu, ini cukup berguna kalau untuk ngerjain ini ya.

51:59Panggil API, nungguin data masuk, ini sangat berguna.

52:04Dibandingkan kita harus back-and-forth dari JavaScript-nya.

52:13Ini langsung di template.

52:15Nah, ada beberapa lagi yang lain, tapi silahkan cari sendiri aja.

52:19Angular juga menggunakan yang berbeda.

52:22Ada apa lagi? Ada framework banyak sekali.

52:25Angular punya ya?

52:27Mithosis atau nemithosis?

52:29Nah, ini yang menarik sebenarnya kemarin kita bahas di minggu lalu.

52:35Kita bahas builder.io.

52:37Dia punya satu converter template.

52:41Gila ya, mereka tuh semua bagian dari ekosistem disambil ya.

52:46Jadi kayak Quick dari meta framework-nya Quick.

52:50Terus drag-n-drop dari CMS, kayak low-code builder, dia punya ya itu builder.io.

52:57Bahkan ini templating ada mithosis.

53:00Misalkan kita punya sintaks JSX atau kita punya komponen React.

53:05Kita mau migrasi ke Vue JS atau Vue Quick atau mithosis JSX.

53:12Jadi bisa.

53:15Dia dipersing, apa? Dia nge-compile langsung ya?

53:20Iya, ke-svelte juga bisa nih seperti ini.

53:23Jadi dia lihat div-nya disini, dia bikin div-nya disini.

53:26Terus ada binding-nya, karena ada on-change, ada set name.

53:30Dia bisa lihat lah, gitu-gitu ya.

53:33Oh makanya builder.io kemarin sebagai CMS kan, dia CMS yang...

53:38framework atmostik kan, dia bisa ngambil, dia bisa punya komponen dari berbagai UI apa, front-end framework.

53:46Gila ya, dia teknologinya modular gitu di pisah-pisah.

53:50Kita mau pakai ini doang, mithosis ini doang.

53:53Kalau emang cuma itu yang kita perluin ya boleh-boleh aja.

53:56Tapi semua di-combine jadi produk-pomeril si builder.io itu.

54:01Ini bisnis modelnya bisa dicontoh nih ya.

54:04Ini contoh yang bagus buat bisnis model ya.

54:07Komponen-komponennya open-source semua, tapi layanan yang ininya berbayar.

54:13Dan itu bisa mendukung, saling mendukung ya satu sama lain.

54:17Nah, svelte-osis kebalikannya.

54:20Jadi dari-svelte bisa ke yang lain.

54:24Ke React.

54:27Jadi Quick.

54:29Quick ini juga kayak pakai JSX kan, walaupun dia menggunakan engine yang berbeda.

54:33Sama nggak engine-nya?

54:35Belum berapa ya Quick sih?

54:37Belum berapa, sama.

54:39Bisa rake native, wuih.

54:42Canggih ya.

54:44Bisa rake server-komponen?

54:46Enggak, Nen.

54:47Ah, RSC.

54:49Ini belum sampai ke situ.

54:51Esplorasinya.

54:52Nah, ini mithosis juga baru ketemu kemarin.

54:55Pas lihat.

54:56Keren, keren, keren.

54:57Kalau misalkan ada yang kesulitan.

54:59Karena salah satu JSX yang bikin agak memusingkan adalah

55:07ketika kita disediakan template-nya dari misalkan kita download.

55:12Template dari woodstrap something gitu ya.

55:15Itu kan harus 20 plus name.

55:17Iya, ini kan terlalu banyak, harus find and replace kan.

55:21Ada kemungkinan salahnya juga cukup besar kan.

55:25Downside-nya lah.

55:27Kalau ini, kalau view, harus tambahin vsomething, vsomething.

55:33Oh, kalau itu sih, itu kan interactivity.

55:37Sebenarnya yang nggak enak JSX doang kalau kopas dari PureHTML ya.

55:41Kalau yang lain aman ya.

55:42Kalau swell, view aman.

55:44Swell pernah, soalnya pernah halamin, apa,

55:48convert template yang PureHTML, kopas, aman.

55:53Tapi ya, kalau dynamic, kayak buat, ya itu tadi, keperluan nameplating language kan.

55:58Variable lah, dynamic, copying, ya itu mau nggak mau kan,

56:02harus dikasihkan sendiri.

56:03Kelas lagi harus jadi kelas nih, kan, kalau diri ya.

56:06Nah, kalau jadi kelas, iya.

56:07Masih, masih dipertahankan ya?

56:11Masih lah, kan itu JavaScript.

56:13Nggak boleh, nggak boleh tabrakan.

56:16Nggak boleh tabrakan protected keyword.

56:19Oke, nah, ngomongin yang tadi, email.

56:22Nah, ini ketemu nih namanya MJML.

56:25MJML, wow.

56:27Iya, jadi kalau kita mau bikin service yang bisa ngirim email,

56:32nah, ini kita bisa pakai template engine-nya,

56:34template language-nya seperti JSX kayaknya ya.

56:38Jadi pakai komponen-komponen.

56:40Contohnya...

56:41Lebih cepatnya, lebih kayak jadi custom element.

56:44Custom component, nanti di-rendernya jadi itu, jadi email.

56:50Karena kan email tricky sekali ya.

56:52Kita nggak bisa pakai CSS.

56:53Harus pakai CSS inline, kan, satu.

56:56Itu udah penyusahkan sekali.

56:58Terus kemudian nggak bisa pakai layout yang kekinian, kayak pakai float.

57:05Kayak flex grid.

57:06Flex grid, float mungkin bisa ya.

57:08Harus pakai table, kan.

57:10Jadi itu rumit-rumit.

57:13Makanya butuh kayak ini.

57:16Basic layout, section, misalkan kan.

57:20Caranya gimana?

57:22Nah, ini.

57:24Udah tinggal tulis begini aja.

57:25Ada section, nanti dia akan jadi seperti...

57:28Kenapa nggak ada contohnya?

57:30Nah, ini.

57:31Ini section, mungkin header, ada arrow, ada body, dan lain-lain.

57:38Tapi dia bisa buat dynamic data nggak sih?

57:41Bisa ya?

57:42Harusnya bisa.

57:43Cuma syntax custom element dua.

57:47Coba kita lihat ya.

57:50Komponen.

57:53Gimana ya caranya?

57:54Nggak ada ya?

57:55Ini kan mungkin templatingnya doang.

57:57Mungkin untuk ininya...

57:59Bisa partial?

58:02Oh, oh iya tuh.

58:04Include?

58:05Include-as.

58:07Include, file inline.

58:09Kalau non-dynamic, misalnya tadi tuh newsletter, "Halo Eka, terima kasih sudah membeli kopi..."

58:19Itu kan berarti harus masukin customer name sama produknya.

58:28Variable apa?

58:31Kayaknya emang nggak.

58:33Kayaknya nggak ada ya.

58:35Tapi dia semacam custom element aja, dan bisa include.

58:39Kalau nggak salah, variable itu kan diproses sama si engine-nya, si email provider kan.

58:46Jadi konten.

58:47Oh, servicenya.

58:48Oh, kalau ini nggak nempel ke service apapun ya?

58:51Ini cuma bisa...

58:52Oh, iya.

58:53Ini iya, betul-betul.

58:55Jadi bisa, dia harus ada temannya nih kayak React, Komponen, atau pakai Ruby, atau pakai Python, PHP.

59:03Ini Laravel MJML.

59:08Jadi udah dibawa apa namanya, variable-nya.

59:13Ya nggak tahu ya, kita belum pernah pakai soalnya.

59:15Jadi belum dapat use case-nya yang cocok mungkin ya.

59:20Mungkin teman-teman di chat ada yang pernah pakai?

59:23Boleh ya bagi-bagi pengalamannya.

59:26Siapa tahu ada yang lebih berpengalaman dalam hal ini?

59:30Kita cuma tahu gitu-gitu doang, seandainya belum pernah pakai.

59:34Pertama, pernah pakai send grid sih sebenarnya kalau buat email.

59:37Lebih gampang aja.

59:39Nah, terakhir nih, penutup.

59:43Penutup kita akan bahas tentang...

59:45Dari HTML, yang baru itu ada yang namanya HTML Templatech kan.

59:50HTML, bukan.

59:52Oh, bukan.

59:54Bukan.

59:55Bukan, ini HTML Murni sih.

59:58Murni, Murni.

59:59Oh, ini maksudnya.

1:00:01Ini kayak custom element kan.

1:00:03Ini udah lama kali.

1:00:05Iya, tapi kan banyak yang nggak tahu juga.

1:00:08Oh, iya, iya.

1:00:10Kita ingat aja lagi.

1:00:12Gue pakai ini tahun berapa ya?

1:00:15Udah lama banget gue pakai ini template.

1:00:17Karena underscore itu bisa membaca template.

1:00:21Karena template ini nggak dirender kan.

1:00:24Jadi template ini kayak HTML template.

1:00:27Ada di markup, tapi nggak direnderkan dong.

1:00:31Jadi lebih menguntungkan pakai template daripada pakai element, tapi kita display now.

1:00:38Karena display now masih dirender.

1:00:40Kalau template jadi...

1:00:41Nambah-nambahin kerjaan.

1:00:43Karena ini bisa di skip.

1:00:45Iya.

1:00:46Underscore pakai ini.

1:00:48Salah satu kenapa kita menggunakan templating LNG adalah...

1:00:53Kan kalau kita mau bikin data tabular, pokoknya yang ada for loop, itu kan susah ya.

1:00:57Harus memenuhi JavaScript tadi kan.

1:00:59Atau templating engine kan.

1:01:01Kali dengan ini kan sebenarnya bisa.

1:01:03Tapi ternyata ini natively maksudnya dalam arti browser udah langsung bisa memproses ya.

1:01:09Enggak perlu pakai library tambahan.

1:01:12Contohnya disini misalkan ada table gitu kan.

1:01:15Terus kemudian dalamnya table isinya itu kan kita harus render satu persatu kan.

1:01:20Misalkan ada seribu row.

1:01:22Masing-masing row.

1:01:24Data-nya harus dimasukin ke seribu row.

1:01:27Wow.

1:01:28Nah kita pakai template.

1:01:30Pakai template dengan cara manual ini.

1:01:33Ini sangat manual ya.

1:01:34Makanya agak panjang gitu ya.

1:01:36Kita pen-pen.

1:01:38Kemudian baru di...

1:01:40Vanilla.

1:01:42Oh iya.

1:01:43Kalau manual ini murahan gitu ya.

1:01:46Vanilla.

1:01:47Frame bombnya vanilla.

1:01:49Oke.

1:01:53Nah cuman ini kayak yang kita omongin di episode web component sih.

1:01:57Custom elements sebenarnya oke bagus.

1:01:59Ini kan oke banget udah natively supported di browser.

1:02:03Tapi itu kayak nggak enak dilihat aja sih.

1:02:06Kayaknya rata-rata developer yang kecuali kepepet ya.

1:02:09Di luar kasus kepepet.

1:02:10Kalau lihat ini, aduh kok sintaksnya gitu.

1:02:13Tetap bisa juga kan dia.

1:02:15Maksudnya bukan...

1:02:17Ini kan dia cuma jadikan template dan itu jadi bisa di-clone.

1:02:21Jadi waktu mau language-nya apa aja sebenarnya bisa sih.

1:02:25Moja query.

1:02:27Ma... sorry.

1:02:28Language.

1:02:29Maksudnya pakai library Java segala apapun tetap bisa.

1:02:32Framework, UI framework apapun juga bisa.

1:02:36Iya.

1:02:37Dia kayak jadi dokumen, get element idea aja sebenarnya.

1:02:40Terus dapat HTML elementnya.

1:02:43Kita parsing atau inject...

1:02:48Value-nya.

1:02:50Udah jadi HTML element tinggal di append child kemana gitu.

1:02:54Kalau pakai library apapun sebenarnya bisa.

1:02:58Nah ada satu tambahan lagi kali ya.

1:03:06Untuk apa namanya.

1:03:08Mungkin ini tidak terlalu berhubungan sama templating language.

1:03:12Ini framework juga.

1:03:14I'll find.

1:03:15Ini adalah...

1:03:18Ini lagi Xdata.

1:03:20Button, add, click.

1:03:22Xdata.

1:03:24Ada Xdata, ada Xdata.

1:03:26Iya ini apa ya.

1:03:28Secara tidak langsung replacement dari jQuery.

1:03:32Jadi kalau misalkan butuh interactivity yang sederhana, ringan.

1:03:38Yang pasti client-side.

1:03:40Iya yang pasti client-side.

1:03:42Kita cukup menambahkan script SRC LPJS.

1:03:47Kemudian kita sudah bisa pakai templating language-nya dia.

1:03:50Termasuk onclick.

1:03:52Onclick-nya pakai add, click.

1:03:54Yang di sini Xdata.

1:03:56Xtool.

1:03:58Terus itu langsung kayak jaradin JavaScript di dalam string ya.

1:04:02Jadi kayak string open, 2 false.

1:04:06Itu kan berarti dia mau modifikasi, nge-declare, re-declare value-nya variable open.

1:04:12Iya.

1:04:14"Think of it as powerful as hell."

1:04:18Nah ini juga mungkin subjektif.

1:04:22Cuma dilihat kan randa gimana ya.

1:04:24Bisa.

1:04:26Ini ada kebutuhan.

1:04:28Contohnya kita cuma mau buat landing page yang simple aja.

1:04:32Cepet aja kan gak butuh sampai harus...

1:04:34Ngapain pakai CreateJS atau Next.js kan.

1:04:39Nah cuma ini subjektif lagi.

1:04:43Sekarang JavaScript juga udah bagus.

1:04:45Edmascript yang baru udah bagus.

1:04:47Landing page doang.

1:04:48Yaudah HTML JavaScript.

1:04:50Biasa aja lah.

1:04:52Kan butuh dibuat interaktif ceritanya.

1:04:54Interaktif.

1:04:56Masukin email.

1:04:57Jadi setiap diketik itu email-nya ada animasi apa?

1:05:01Dokumen.query selektor.

1:05:05Iya, iya, iya.

1:05:08Kembali lagi subjektif ya.

1:05:10Contoh mau bikin akordion.

1:05:13Akordion, tab item, atau simple slider kan lebih...

1:05:18Kalau ada kayak gini kan lebih cepet ya.

1:05:21Ya, ini akhirnya diantara vanilla dan framework.

1:05:27Jadi dia di tengah-tengah lah.

1:05:29Belum terlalu butuh framework, tapi vanilla udah agak susah.

1:05:32Kira-kira gitu.

1:05:34Gak tahu butuhannya kapan.

1:05:36Pasti ada kok.

1:05:38Akordion bener kan?

1:05:40Akordion, modal.

1:05:42Oh, persis akses.

1:05:44Oh, ini berbayarnya ya.

1:05:46Oh, kelebihannya.

1:05:48Maksudnya kelebihannya adalah dia udah bikin komponen-komponennya.

1:05:52Jadi tinggal masukin aja udah.

1:05:55Tinggal kelpas.

1:05:57Iya.

1:05:59Tapi lumayan banyak juga ya.

1:06:01Ada teleport.

1:06:03Oh.

1:06:05Ada magic.

1:06:07Kayak react portal kali ya.

1:06:09Jadi kayak apa?

1:06:11N-nya bukan di situ, tapi N-nya bisa random.

1:06:14Bisa di luar lah. Bisa di body atau tempat lain.

1:06:18Oh, bisa masking.

1:06:20Yang buat ini buat...

1:06:25Betul.

1:06:27Ya, jadi kalau...

1:06:31Misalkan awalnya kan tadinya kita bikin landing piece atau bikin tema sederhana.

1:06:36Oh, butuh kebutuhan ini.

1:06:38Mau convert HTMLCCS itu ke react atau ke spell.

1:06:43Kayaknya terlalu jauh jalannya kan.

1:06:45Ya, pakai ini aja.

1:06:47Jalan tengahnya.

1:06:49Jadi agak niche ya ini ya.

1:06:53Si frame of ini ya.

1:06:55Enggak juga ya. Sebenarnya kalau kayak...

1:06:58Membangun...

1:07:00Apa ya, ibaratnya ya.

1:07:02Dashboard.

1:07:04Ini aja bangun dashboard yang kita punya server side rendering.

1:07:08Masih server side rendering.

1:07:10Terus di aplikasi...

1:07:12Misalnya kita...

1:07:14Sales report untuk point of sales lah.

1:07:19Jadi bagi pengguna yang untuk lihat tampilan...

1:07:23Cuma lihat sales chart, lihat table-nya.

1:07:26Kayaknya pakai kayak gini cukup ya.

1:07:28Cukup ya.

1:07:30Atau ada lagi sih use case-nya.

1:07:32Gimana, gimana?

1:07:34Nah, use case-nya adalah...

1:07:37Programmer atau developer yang bukan...

1:07:40Yang ga suka, yang ga jarang pakai front-end...

1:07:43Mundirin sama sekali.

1:07:45Gak mau belajar react, ga tertarik.

1:07:47Mungkin emang bukan kerjaannya gitu lah.

1:07:49Misalnya mungkin selama ini ada lebih banyak focus back-end.

1:07:52Tapi pepet harus bikin front-end...

1:07:54Cepet dan ga mau belajar...

1:07:56Maksudnya ga minat...

1:07:58Ngedelemin ekosistem react dan lain-lain.

1:08:01Cuma pengen yang cepet jadi plug-and-play.

1:08:04Phone-nya kalo di-click, ini buka kalo di...

1:08:07Itu tadi masking input, misalnya...

1:08:09Gimana caranya biar format-nya...

1:08:11Format inputnya, date, month, year.

1:08:14Gak tertarik teknologi front-end apapun itu lainnya.

1:08:18Sebagai contohnya, kayak...

1:08:21Framework PHP, contohnya yang YI.

1:08:24YI framework tuh, yang sudah menyediakan...

1:08:27Cerutnya by core gitu.

1:08:31Cerutnya sudah jadi.

1:08:33Kebutuhan datanya sudah jelas.

1:08:35Table-nya sudah jelas, sudah tau.

1:08:37Hanya tuh tinggal menampilkan table data...

1:08:39Yang sebagai cakep dan ada interactivity-nya.

1:08:43Ngapain pusing pakai Next.js gitu.

1:08:46Dibuat headless, contohnya ya.

1:08:49Setup-setup...

1:08:51Buat tabelnya...

1:08:53Kata-kata... Seperti dulu mungkin ya...

1:08:57Project ERP 2 minggu kelar, gitu.

1:08:59Contoh.

1:09:01Ya bener-bener.

1:09:03Kan bisa juga kan?

1:09:05Iya. Maksudnya yang gak butuh...

1:09:07Gak butuh apa ya? Gak butuh di...

1:09:09Transpilasi dan lain-lain kan butuh...

1:09:11Banyak ini kan.

1:09:13Kalo Alpine tetap butuh di Transpile kan?

1:09:15Dia tetep ada prosesnya kan?

1:09:17Enggak.

1:09:18Enggak ya? Langsung?

1:09:19Enggak.

1:09:20CDN Unpacked tadi langsung pakai interactivity-nya jadi?

1:09:24Iya.

1:09:25Itu salah satu penggulannya dia CDN aja.

1:09:27Jadi cuma drop aja langsung jadi gitu.

1:09:30Jadi ya lumayan lah buat menambah-nambah...

1:09:34Perbenaraan Library.

1:09:37Jadi jangan langsung jump in ke Library yang terlalu besar.

1:09:40Karena juga berpengaruh ke performa juga ujung-ujungnya.

1:09:43Tapi tetep mengerti tujuannya.

1:09:46Mengerti concert-nya.

1:09:48Di belakang kasusnya.

1:09:50Cara kerjanya.

1:09:51Dipakailah teknologi yang sesuai dengan kebutuhan.

1:09:54Iya, jangan berlebihan.

1:09:56Iya, tadi bener sih.

1:09:58Setuju dengan Eka tadi.

1:10:00Ada tipikal orang yang backend banget.

1:10:04Dan dia gak mau jadi host tech, gak mau belajar front-end.

1:10:06Yaudah pakai...

1:10:08Atau kelamaan, maksudnya dikejar waktulah.

1:10:10Masa belajar front-end dulu?

1:10:12Orang program yang perlu jadi sekarang?

1:10:14Gak cair. Nanti PHR gak cair.

1:10:18Saya kan lebih sering urusannya sama backend dan JavaScript.

1:10:23Kalau sudah disuruh CSS pusing kepala saya.

1:10:25Ya, tailwindin aja.

1:10:27Ya, tailwindin aja gitu ya.

1:10:29Kalau saya harus belajar...

1:10:31Masanya belajar lebih banyak mengenai...

1:10:33CSS.

1:10:35Konsepsi CSS yang mendalam.

1:10:37Butuh waktu.

1:10:39Waktu adalah uang.

1:10:41Sedangkan...

1:10:43Saya...

1:10:45Sulit banget.

1:10:47Artnya belum sampai gitu.

1:10:49Ya, udahlah pakai tailwind aja.

1:10:51Oke.

1:10:53Bahkan pun tailwindnya pun...

1:10:55Kalau misalkan ada budget...

1:10:57Bisa pakai yang tailwind component UI itu.

1:10:59Tailwind UI, tinggal copy paste, copy paste jadi.

1:11:01Walaupun nanti ujung-ujungnya...

1:11:03Website-nya mirip-mirip sama yang lain.

1:11:05Sama kayak...

1:11:07Contohnya library untuk bikin chart.

1:11:09Kalau mau canggih, bikin aja chart sendiri.

1:11:12Cukup pakai.

1:11:14Tapi kalau saya, mah enggak.

1:11:16Saya tinggal kasih tau klien.

1:11:18Saya buka chart yang paling mahal.

1:11:20High chart, cakep.

1:11:22Beli license-nya, tinggal pasang.

1:11:24Pakai, sesuaikan option-nya.

1:11:26Jadi deh, cakep.

1:11:28Mungkin kalau dibalik nih.

1:11:32Kebalikannya juga kayak misalnya...

1:11:34Sekarang kan banyak tuh yang kayak kita bahas kemarin.

1:11:36Backend as a service.

1:11:38Terus kayak ORM yang segala ada.

1:11:40Kayak Prisma, itu kan...

1:11:42Mungkin kalau orang yang...

1:11:44Ngedalemin banget backend, mungkin...

1:11:46Itu ya, nggak sesuai...

1:11:48Nggak sesuai selera.

1:11:50Cuma kalau buat orang yang kayak frontend.

1:11:52Atau nggak terlalu ngedalemin.

1:11:54Nggak bisa my SQL.

1:11:56Nggak terlalu ngerti database.

1:11:58Ya kan, biar cepet.

1:12:00Jadi ya...

1:12:02Pake superbase, udah tinggal panggil...

1:12:04Atau kemarin tuh, pakai directis.

1:12:10Direktis.

1:12:12Direktis.

1:12:14Direktis.

1:12:16Direktis.

1:12:18Terutusnya direktus.

1:12:20Bacanya direktis.

1:12:22Ya itu.

1:12:24Itu kan intinya biar kita bisa...

1:12:26Get up and running, memproduksi MVP.

1:12:28THR cair.

1:12:30Ya.

1:12:32Siap, siap, siap.

1:12:34Oke, kalau gitu.

1:12:36Untuk ngobrolin templating language.

1:12:38Mungkin udahan dulu.

1:12:40Terima kasih buat teman-teman yang sudah nonton.

1:12:42Terima kasih juga yang sudah...

1:12:44Bagi-bagi ideal.

1:12:46Buat topik.

1:12:48Jangan lupa, kita masih menunggu.

1:12:50Topik-topik menarik dari teman-teman.

1:12:52Kira-kira teman-teman ingin...

1:12:54Kita membahas apa.

1:12:56Mengobrolin apa.

1:12:58bisa ke bit.ly/ngobrolin

1:13:00Terus juga...

1:13:02Mungkin...

1:13:04Minggu depan kita bahas apa.

1:13:06Ya tunggu aja.

1:13:08Jangan lupa di subscribe juga channel-channel kita.

1:13:10Di youtube-youtube terdekat.

1:13:12Terdekat.

1:13:14Sampai jumpa.

1:13:18Minggu depan di hari Sulasa.

1:13:20Kembali lagi.

1:13:22Mulai episode ini dan episode berikutnya kita...

1:13:24Balik lagi ke jam 8.

1:13:26Karena puasanya sudah lewat.

1:13:28Di Sulasa malam jam 8.

1:13:30Minggu depan kita bakal live lagi ya.

1:13:32Minggu depan kita bakal live lagi karena...

1:13:34Minggu ini kita masih dalam...

1:13:36Sulasana lebaran jadi kita...

1:13:38Diburan dulu lah.

1:13:40Maksudnya...

1:13:42Ngobrol terus.

1:13:44Sampai jumpa di episode berikutnya.

1:13:46Bye.