Ngobrolin Metode Rendering - Ngobrolin WEB ep19

3:20Oke, nah sebenarnya yang bisa disitu.

3:24Ada nih artinya proses menghasilkan citra dari sebuah model.

3:30Citra kan image kan?

3:35Render itu bahasa dari itu kali, artisistektur, artisistektur.

3:38Jadi kalau misalnya sudah dibikin desainnya, terus dirender, jadi tentu rumahnya gitu loh.

3:44Jadi kayaknya dianggil dari istilah itu.

3:48Iya, kalau awalnya walaupun tidak terlalu teknis, menampilkan isi halaman web.

3:55Sebenarnya topik yang disajakan sama salah satu penonton, sama teman-teman

4:02adalah sebenarnya dia mempertanyakan, menanyakan tentang client side rendering,

4:09server side rendering, hydration dan lain-lain, static side rendering.

4:15Mungkin teman-teman juga sering bingung karena singkatan itu banyak banget ya, ada SSR, SSG, CSR.

4:22CSR banyak ya.

4:26Dan dulu banget nih salah satu hal yang paling nyebelin, dulu pas pertama kali belajar webdev,

4:35itu kan yang ngetrend lagi SSR versus SSG.

4:40Nah, asumsi kan sama-sama depannya SS tuh, kirain sama singkatannya.

4:44Tahunya SSR dan SSG itu singkatan SS-nya mengacu ke hal yang sepenuhnya berbeda, itu nyebelin banget sih.

4:52Ada satu lagi SSG itu apa?

4:55Sambel SS.

4:57Special sambel ya.

4:59Ada juga loh di luar kota.

5:02Nah, SSG itu apa sih static side generation.

5:09Sementara SSR itu server side rendering yang ada hubungannya.

5:13Kebetulan aja depannya sama-sama SS.

5:17Nah, jangan sampai terjebak cuma ngapalin atau stuck di singkatan-singkatan itu.

5:26Cuma kita sekarang nih pengen lihat dari awal sejarahnya rendering di web itu gimana sih

5:32sampai bisa jadi ada banyak banget gitu yang kadang definisinya dan bahkan penggunaannya overlap ya.

5:38Bertumpuk-tumpuknya bisa berubah-ubah, bisa pakai beberapa cara sekaligus.

5:45Mulainya dari mana nih sekarang?

5:48Oke, kita bahas tentang perjalanan web dulu aja kali ya.

5:54Jadi kan di awal itu seperti yang teman-teman tahu atau mungkin ada yang belum tahu.

5:58HTML, CSS, dan JavaScript pada dasarnya di awalnya itu adalah dokumen statis gitu ya.

6:06Isinya HTML, ada outarnya atau link atau anchor gitu kan, diklik ke dokumen kedua.

6:13Dokumen kedua dilink ke dokumen ketiga dan seterusnya.

6:17Itu static semuanya, nggak ada sesuatu yang berubah.

6:21Misalkan artikel dan lain-lain itu ditulis manual semuanya, diketik ya.

6:24Artikel satu, artikel dua, artikel tiga, dan seterusnya.

6:28Terus kemudian berkembang, aplikasi web berkembang.

6:33Belum aplikasi web, dulu sebutannya kan web page atau website.

6:37Halaman web, jadi dokumen ya.

6:40Jadi titik beratnya pada dokumen yang saling terhubung satu sama lain ya.

6:45Nah itu yang tadi dia bilang, link, ngeklik satu link bisa pindah ke dokumen lain atau halaman lain.

6:51Jadi dulu 30 tahun lalu ternyata belum ada teknologi yang seperti itu yang terbuka buat masyarakat luas.

6:59Cuma dulu jaringan aja, misalnya jaringan di kampus atau institusi.

7:04Cuma belum ada jaringan seperti itu untuk masyarakat luas.

7:07Jadi presentasinya dokumen, terus image.

7:11Kalau pun ngeklik image, image-nya dulu belum ada di dalam halaman ya.

7:15Kayak cuma buka file, jadi file dokumen atau file image.

7:20- Jadi bisa dibilang. - Sudah ada itu juga kan, standarisasi yang mereka buat itu kan makanya disebut markup language-nya itu kan ya.

7:29Jadi dari kodenya itu disebut markup ya.

7:34Markup itu makanya HTML, hypertext markup language.

7:38Temannya yang lain ya, ada juga XML, ada juga apa lagi itu, yang lain lah.

7:46Dan markup language lainnya ya.

7:51Banyak. Kebetulan yang terkenal itu yang HTML, yang hypertext-nya itu.

7:56Ya, ditandai dengan ada tag pembuka dan tag penutup biasanya ya.

8:01Walaupun ada beberapa yang safe closing kan, kayak image, misalkan nggak perlu ditutup.

8:07Jadi kombinasinya lah. Nah, dari sana ternyata dokumen-dokumen ini dikumpulin udah cukup banyak.

8:17File text-nya lama-lama numpuk banyak dan sulit di-manage.

8:20Kalau misalnya kita satu website ada 20 halaman, misalnya ada yang diganti sedikit,

8:27bayangin footernya misalnya 20 harus diubah semua satu bersatu.

8:32Jadi, bisa dibilang awalnya sejarahnya kan dulu sepenuhnya static file status biasa.

8:41Nah, ini bentuknya kayak gini nih, kayak gini doang nih. Halaman web pertama.

8:46Oh, ini halaman web pertama nih. Sampai sekarang masih bisa dibuka kerennya.

8:50Masih bisa dibuka dan berfungsi.

8:55Iya, kita bisa lihat isinya benar-benar statis dan masih menggunakan ini, apa?

9:02Rupesar semua kayak orang marah-marah.

9:04Itu HTML3 ya, terakhir pakai Ruf Kapital kalau nggak salah.

9:09Iya, ini, apa namanya? Bisa diklik menuju ke halaman sebelumnya.

9:17Halaman ini, halaman berikutnya atau dokumen-dokumen yang kita mau.

9:23Tapi kita nggak bisa nggak ada itu, nggak ada navigasinya.

9:29Mau balik gimana? Kita pakai back button.

9:31Iya, ini masih sederhana sekali gitu kan.

9:35Kalau misalkan nanti katakanlah kita mau update nih, mau tambahin "About Us" misalkan.

9:40Ya, kita harus ketik manual di Text Editor gitu.

9:44Ya, itu adalah pertama kali HTML dan mungkin CSS setelah ini ya.

9:50Jadi untuk stylingnya itu diciptakan dan orang bisa langsung mengakses secara statik seperti ini.

9:58Jadi nama file dan nama extensionnya yaitu HTML.

10:02Iya, sama kayak file image yang misalnya kita punya sekarang di file system atau file blablabla.txt, blablabla.html.

10:10Ya, beneran yang disimpan di server adalah file statisnya.

10:14Karena lama-lama pusing akhirnya dibuat teknologi server side ya.

10:21Biasanya kan diindeks dulu kan, wah, si ini punya artikel ini, si itu punya artikel itu.

10:27Nah, muncul layanan-layanan seperti kalau dulu Yahoo itu dia indexing si halaman web yang tersedia public secara publik gitu kan.

10:37Nah, orang capek tuh lama-lama liat index itu kan kayak liat buku telepon kan. Harus kita cari A sampai Z gitu kan.

10:44- Yellow Pages lah. - Iya, Yellow Pages.

10:46Kayak kita LS di Unix ya. Maksudnya dulu masih, mindsetnya tuh masih kayak file system banget ya.

10:54- Karena sejarahnya emang statis. - Iya, jadi betul.

10:57Iya, setelah itu baru muncul mesin pencari.

11:00Jadi orang nggak perlu cari dari A sampai Z indexing kayak gitu, jadi mesin pencari.

11:05Nah, setelah itu baru berkembang lagi kebutuhan apa?

11:10Kebutuhan dokumen atau aplikasi web, bukan aplikasi, masih halaman web ini itu butuh lebih dinamis.

11:18Iya, butuh, misalkan saya punya dua artikel awalnya.

11:22Terus saya menulis artikel ketiga, masa saya harus menulis manual, tambahin di navigasi, tambahin di halaman yang ini.

11:29- Header footer, layout. - Iya, header footer dan lain-lain gitu kan, capek akhirnya.

11:36Kita minta tolong komputer buat rendering on the fly.

11:40Tapi Duh, cuma bisa di server site ya?

11:44Server site, jadi di server dia akan mengenerate, setiap ada permintaan, saya minta halaman index dong, index.html.

11:53Dia akan mengambil halaman index, terus dia akan mengenerate hal-hal yang dinamis.

11:59Misalkan artikelnya yang dua, yang tadinya dua, kita akses besoknya menjadi tiga, dan seterusnya dan seterusnya.

12:05- Pak, pakai semacam parsial ya namanya Duh. - Betul.

12:08Namanya server site scripting. Yang paling pertama itu dulu server site scripting itu pakainya Perl.

12:15Perl, TGI, common gateway interface.

12:19- Tidak nyamanin. - Tidak ngalamin juga sih, cuma tahu aja.

12:24- Perl, TGI programming. - Perl, Perl.

12:28- Masih ada tutorialnya Duh. - Masih, Perl itu masih ada.

12:32- Iya, masih sampai sedang nih, masih banyak. - Iya.

12:37Biasanya juga server site rendering ini itu di kombinasikan dengan database.

12:48Jadi kontennya atau isinya, artikelnya itu disimpan ke database,

12:53dan kemudian setiap ada request ke sebuah halaman, maka dia akan query ke database, dia ambil artikelnya.

13:00- Lakukan query. - Iya, digabungin.

13:03Halamannya dibuat dalam tanah kutip di render, baru dikirimkan ke klien.

13:08- Jadi isi text, HTML text yang tadi kita lihat itu dibikin programatically on the fly oleh si server itu.

13:17Ada for loopnya, ada macam-macam, ada kondisi kalau ini dia warnanya merah,

13:22kalau itu warnanya hijau, dan lain-lain. Termasuk juga sudah mulai muncul JavaScript,

13:27- walaupun penggunaannya hanya untuk hal-hal sederhana. - Masih baru client site ya, legend.

13:32Iya, nampilin informasi, alert, form validation, dan lain-lain, baru sampai di situ.

13:39Karena dulu juga masih belum standard juga kan JavaScript, masih browser JavaScript di Netscape.

13:45Belum tentu sama dengan JavaScript di Internet Explorer.

13:50- Pada pernah bahas tentang browser juga. - Browser.

13:53Belum pernah di episode berapa, tahu deh.

13:56Nah, di fase ini, salah satu yang populer, walaupun masih populer juga sampai sekarang adalah PHP.

14:05Ada yang tahu kepanjangan PHP? Personal Homepage.

14:10- Awalnya si Personal Homepage. - Awalnya. Awalnya PHP itu adalah scripting ya.

14:17- Bahasa scripting ya. - Sekarang pre-hypertext processor.

14:20Oh, benar-benar. Rada maksa sih, cuma ya udahlah.

14:24Ini kalau di website ofisialnya, bahkan P yang di depan sudah dihilangin.

14:30Cuma php.2 hypertext pre-processor.

14:34- Pre-processor. - Tinggal HP.

14:37Itu kan kalau yang open source open source itu kan banyak yang, apa ya istilahnya ya?

14:43Rekursi ya, bukan ya?

14:45Jadi kayak KDE, ke desktop environment. Knya ya tetap K aja, nggak ada apa-apa gitu.

14:51Ya, intinya adalah...

14:55- Udahlah ya udahlah, ya gitu aja. - Ya.

14:57Selain P, yang mungkin kurang populer karena memang agak, secara developer experience,

15:03kurang ini ya, agak susah ya kita develop di sana.

15:06- Di sana. - Dan maksanya juga rumit ya.

15:08Paul itu dibuat oleh, saya lupa namanya yang buat, namun learning curve-nya tinggi.

15:16- Learning curve-nya tinggi. - Akhirnya.

15:18- Akhirnya. - Unit gaining traction.

15:21Sama siapa ya, si om siapa yang bikin php, kok gue lupa sih.

15:26Lalu tiba-tiba ngeblank, oh, om Rasmus Lidov.

15:30- Oh iya, Rasmus. - Nah, itu yang bikin.

15:32Nah, om Rasmus. Masih aktif lho sampe sekarang.

15:36Ya, ya, ya. Nah, kalau temen-temen penasaran, Perl itu kayak gimana ya?

15:40Kalau mau icip-icip, tau regex nggak? Nah, itu salah satunya.

15:45Asil dari Perl. Perl itu memang sangat powerful digunakan untuk string atau text manipulation.

15:52Jadi memang, apa namanya, spesialisasinya di sana.

15:56Jadi untuk yang bisa ngecode Perl itu, dia sangat low level, ya. Dia low level, bukan sangat, dia low level.

16:03Jadi semuanya harus sebagaia step-nya banyak untuk melakukan sebuah fungsi.

16:12Makanya muncul lah yang lebih high level, contohnya, php yang menyerupai cara coding-nya si C++.

16:21Ya, sudah satu family ya. Pakai kurung-kurawal, kurung bulat, function, kurung bulat, ada parameter dan lain-lain kan.

16:31Nah, php ini berjalan di atas web server, ya kan.

16:37Kalau dulu terkenalnya Apache, kalau sekarang nginx sudah bisa.

16:41Sekarang kerennya standard ya di Indonesia tuh banyak Apache.

16:44Jadi, php itu bukan programming language, scripting language, scripting language.

16:53Jadi, interpretor, dia itu interpretor.

16:56Jadi instruksi yang kita tulis dengan php, harus ditransform dulu layer selanjutnya, makanya ada namanya php handler.

17:08Modul ya? Bukan? Apa macam modul?

17:14Ada yang merubah dari scripting-nya si php, interpretor-nya php, ke bahasa mesin.

17:21Jadi, apa isilahnya itu?

17:25Kayak perentara yang lebih low level-nya apa?

17:28Interpreter.

17:30Ya, intinya si php tidak bisa dijelankan, maksudnya tidak bisa menjadi web server sendiri.

17:39Harus butuh antara Apache atau nginx yang ada modul php-nya.

17:44Jadi, dia bisa mengerti scripting php-nya, kira-kira seperti itu.

17:48Jadi, php tidak bisa berdiri sendiri, harus dibungkus sama executable-nya.

17:53Tapi sekarang sudah bisa kan?

17:55Enggak juga.

17:57Kalau dulu kan pakai SAM, UAM, PAM.

18:03Ya, php ada php CLI-nya, tetapi kan membutuh executable-nya untuk menjalankan si php.

18:11Oh, itu untuk development-nya saja.

18:13Kita install php juga, berarti ya, di mesin kita.

18:17Sekarang dengan C++, Go, atau segala macam, sekali dikomplain, sudah jadi executable, mau dipindahin ke selama asitor.

18:29Selama asitornya sama, bisa dijalankan.

18:33Itu bedanya ya.

18:35Ya, makanya dulu, mungkin sekarang sudah tidak ya, makanya dulu kalau kita mau pakai php,

18:41kita harus punya web server-nya, harus install apache, harus install nginx.

18:46Walaupun dibanding akhirnya kan ada SAM, ada MAM.

18:49XIMPP, MAMMP ya.

18:52Itu kan php dengan metal ya, dengan besi lah, dengan mesin.

18:59Nah, terus sementara php dengan user, dengan browser,

19:03ini kan berarti pelan-pelan mulai ada templating language ya, yang kayak semacam.

19:08View templating language kayak handlebar dan teman-temannya.

19:11Itu siapa yang paling duluan ya?

19:13Handlebar dulu itu, kalau di php itu yang masih ingat, Smarty dulu ada namanya, smart templating language.

19:22Itu cukup terkenal.

19:24Ada yang sebelum Smarty.

19:26Sebelum ya, ada yang sebelum ini.

19:28Smarty itu kan belum pernah dengar, Smarty.

19:32Smarty templating language.

19:35Nah, biasanya si php juga itu dikombinasikan pasangan yang paling ini adalah database-nya MySQL.

19:45MySQL, MySQL.

19:47Sebutannya LAMP dulu ya.

19:50LAMP, apache, MySQL, php.

19:54Karena XIMPP itu dan lain-lain udah ada MySQL juga.

19:59Jadi, sekali install udah ada apache, ada php, ada MySQL.

20:04Jadi, orang ya sudah no-brainer gitu, nggak perlu install macem-macem gitu kan.

20:08Itu awalnya si server site rendering atau dynamic web gitu muncul.

20:15Jadi, kita lihat petoknya dari HTML document aja.

20:20Dari full static file, terus jadi server site rendering.

20:24Tapi dulu istilahnya belum begitu ya, belum pakai SSR.

20:28Belum, belum, belum.

20:29Belum disebut SSR.

20:31Web aja, web server, sama ya, aksekusinya di client.

20:37Ya, dynamic.

20:38Dan itu disebutnya server site rendering.

20:43Sekarang kan sebutannya server site rendering itu sekarang kan?

20:47Betul. HTML-nya, jadi koneksi ke database, segala macem itu oleh server site scripting.

20:55Mau itu poll, mau itu php, mau itu ruby, mau itu apapun itu.

21:00Jadi, HTML-nya sudah diselesaikan, baru dikirimkan ke browser.

21:08Terus penuhnya dikirim ke browser, jadi browser user nggak tahu,

21:11sebetulnya nggak tahu apakah itu dikirim dari file static, file HTML status kayak di awal itu,

21:18atau di generate oleh suatu teknologi server site scripting.

21:22Kan sama aja, apalagi udah jadi text aja pas dikirim ke browser.

21:27Lalu diterjemahkan jadi di render jadi download oleh si browser ya.

21:32Ya, selain php, di masa ini yang cukup terkenal apa ya?

21:38Apa ya? Php sih yang paling ini ya.

21:42Ruby, Ruby on Rails itu masuk juga ke server, web server, server site rendering Ruby on Rails,

21:48framework-nya on Rails.

21:50Terus ada Python, Django, ada apa lagi ya?

21:54- Java juga ada. - Visual Basic juga.

21:57- Visual. - VB6.

22:01- VB6. - No, no, no.

22:03- Itu bisa buat ngerender web. - Ada web juga?

22:05- Oh, baru tahu. - Oh, oke.

22:08- Tapi pakai IES. - Oh, IES.

22:10Oh iya, itu web server-nya di Windows ya?

22:13- Iya. - Sebagai pengganti alternatif dari Apache.

22:18- Java harus pakai Tomcat. - Java harus pakai Tomcat.

22:23Benar, benar, benar.

22:25Dan ada banyak yang lain ya, tentunya banyak ya.

22:27Bahkan Perl juga masih ada sampai sekarang.

22:29Jadi yang cukup terkenal itu php yang paling merajai, terutama karena kemudahannya.

22:34Kemudian ada terus muncul setelah php itu, muncul Ruby on Rails, muncul Python, Django,

22:40dan sejenis lainnya yang sederhananya cara kerjanya request dan response.

22:46Jadi si klien yang melakukan request melalui web browser, kemudian di-respond oleh server

22:53dengan query database, base-nya dinamis, di-render di server, dikirimin file HTML-nya ke klien kembali.

23:00Itu cara kerja sederhananya.

23:03Keliatannya sih kalau dilihat makin high level kayak yang Django, Ruby on Rails, Laravel,

23:09itu kayaknya setara dengan atau pola yang sama dengan meta framework-nya jaman sekarang ya, kayak Next.js atau SvelteKit.

23:17Jadi kan sebetulnya Django itu pakai Python, Laravel itu pakai php,

23:22cuma dikasih berbagai kemudahan, kayak misalnya routing udah ada polanya lah, tinggal isi routing.

23:30Terus kayak pola-pola kontrolernya gimana, sampai ke view-nya gimana, kayak memudahkan aja.

23:36Trendnya sebenarnya berputar, nanti kita omongin lagi kan, jadi ini dari statik, dinamis server,

23:43kemudian orang mulai merasa lambat ya.

23:46Terus ribet kali ya infrastrukturnya, kan, mesti pasang Amat J dan lain-lain.

23:54Tapi ya, sudah mulai merasa ada kebutuhan untuk real-time.

24:01Terutama bukan masalah cepat atau lambatnya ya.

24:04Kalau server mungkin bisa di-optimized dan lain-lain.

24:07Tapi kebutuhan real-time-nya ini yang membuat orang akhirnya berfikir,

24:11"Oh, kenapa nggak di-rendernya di sisi-sisi klien?"

24:14Kalau sebelumnya kan di-rendernya semuanya, HTML-nya dikirimin semuanya.

24:19HTML, CSS, JavaScript yang di-compilasi atau di-generate di sisi server, hasil akhirnya dikirimkan ke klien.

24:32Nah, terus ada yang mikir, "Ya udah, karena si klien ini sudah cukup powerful."

24:39- Browser makin canggih. - Browser makin canggih.

24:42- Suruh browser aja yang urus. - Iya.

24:44- Itu siapa ya yang pertama kali punya ide kayak gitu? - Gak tahu.

24:49Untuk ukuran dulu kan itu kayak ide yang banget kan, yang breakthrough-nya.

24:53Iya, dulu-dulu tuh nggak tahu ya siapa yang memulai.

24:56Tapi dulu sempat awal-awal itu, kalau nggak salah,

24:59salah satu yang cukup populer jadi bahan omongan adalah Gmail.

25:03Kalau sebelum Gmail kan orang nge-check email itu kan refresh kan, F5 gitu kan.

25:09Ada email baru? Dulu. Ada email baru nggak ya, gitu kan.

25:12Harus request dulu ke server kan.

25:14Begitu Gmail itu mereka kalau nggak salah pakai Java, ada framework internal-nya si Google.

25:19Ada tuh JWIT.

25:23- Bukan JWIT, bukan. - Bukan, bukan.

25:26- Java apa gitu ya pokoknya. - Jacket.

25:30- Semacam applet ya berarti. - Iya, kurang lebih kayak gitu.

25:34Nah, dari situ ya berkembang lagi.

25:37Wah, ini apa, jadi yang dikirimkan bukan halaman web lagi,

25:44melainkan data. Data-nya dalam bentuk XML atau JSON.

25:48Jadi yang dikirimkan datanya aja.

25:50"Saya minta data email dong."

25:52Ya udah, dikirimin JSON-nya, dirender di sisi klien.

25:56Ketika data-nya udah didapat, ada subject, ada title, ada body.

26:02Nah, akhirnya si browser lah yang mendapatkan tanggung jawab.

26:06Java Script Engine di dalam browser yang mengolah itu,

26:12meng-convert jadi string, jadi HTML kan sebetulnya.

26:17Jadi HTML yang bisa dibaca oleh kita, gitu.

26:20Aku baru ingat namanya GWT, Google Web Toolkit.

26:24Google Web Toolkit masih ada sih sampai sekarang.

26:28Google Web Toolkit.

26:31- Toolkit, oh. - Iya, itu cikal bakalnya.

26:35Tapi nggak tahu ya, itu beneran dia yang awal, tapi itu yang cukup terkenal

26:39pada saat itu yang membuat orang-orang, "Wah, kayaknya menarik nih."

26:43"Bisa kita explore nih, client-side rather than nine."

26:45Tapi sebelumnya Java tuh punya applet, Mas.

26:49Oh iya, applet. Bahkan sebelum itu Flash.

26:52Iya, applet, terus si EA itu punya sendiri tuh yang ActiveX.

27:01- Silverlight. - Sebelum Silverlight.

27:04ActiveX, jadi ActiveX masih ada tuh.

27:08Jadi bisa diinstall ActiveX-nya, itu yang selingkuh kena hack.

27:13Kena vulnerability, kena virus, ya.

27:16Jadi bisa install ActiveX dan membuat si web-nya itu menjadi lebih dinamis di lokal client.

27:23Lebih interaktif.

27:25Betul.

27:27Ya, habis itu ada juga makromedia yang sekarang diambil Adobe kan.

27:32Makromedia Flash kan.

27:34Lebih interaktif lagi tetapi di browser.

27:37Iya, di browser kita bisa bikin game, tapi sebelum itu harus loading dulu kan.

27:42Dulu semua halaman web itu Flash moa gitu kan. Ada loading-nya.

27:46Ada loading-nya, loading screen dan lain-lain gitu.

27:49Dia download dulu si apa, si SWF-nya ini kan, engine untuk rendering-nya.

27:54Tapi dia isolated ya, dia nggak bisa berinteraksi sama dom note di browser kan.

28:01Cuma kayak di sandbox ke tempatnya dia sendiri.

28:05Nah, tapi yang menariknya di Flash ini, dia punya bahasa scripting sendiri namanya ActiveScript.

28:11Yang menjadi jika bakal JavaScript, ECMAScript versi 3 kalau nggak salah, yang modern sekarang itu salah satunya.

28:19Sintas-sintasnya mirip sekali.

28:21Terinspirasi.

28:23Masih satu turunan.

28:25Nah, dari interaktifitas itu akhirnya JavaScript baru mulai naik.

28:30Kalau sebelumnya JavaScript itu kayak pembantu aja.

28:33Iya, hanya sebagai pembantu aja dia cuma buat validasi form.

28:37Oh, email-nya formatnya salah. Oh, ini bukan number dan lain-lain gitu kan.

28:42Atau she'll learn to welcome to my website.

28:45Alher, apa, play.

28:49Dulu kan nggak ada format apa namanya audio, jadi pakainya MIDI.

28:55Cuma instrumen doang gitu kan.

28:59Lama-kelamaan akhirnya si JavaScript nih naik nih.

29:02Mungkin dia melihat, wah si Flash ini lumayan seru ya bisa bikin interaktif.

29:06Gimana kalau JavaScript kita bikin interaktif?

29:08Akhirnya jadilah JavaScript seperti sekarang.

29:11Itu yang bisa buat bikin request dulu masih XAR ya.

29:18Request, ngerender sesuai hasil request, dan lain-lain.

29:22Betul. Karena ya itu tadi si browser juga udah lumayan kuat kan, udah powerful.

29:29Si device-device-nya juga udah lumayan powerful gitu kan.

29:34Udah mampu melakukan rendering di jasi client.

29:38Jadi akhirnya jadilah ini yang disebut sebagai client-side rendering.

29:46Cuma kan sebetulnya di awal, terutama di awal,

29:51CSR itu kan nggak mutually exclusive sama teknologi yang sebelumnya kita bahas kan.

29:58Ke server-side yang pakai PHP, atau Rails, atau Django, atau apalah.

30:06Dan lain-lain WordPress, apapun itu kan.

30:08Sebetulnya di awal kebanyakan masih dirender dari server-side.

30:14Tapi buat interaktifitas selanjutnya baru pakai yang client-side kan.

30:20Masih banyak pola yang kayak gitu kan.

30:22Jadi halamannya tetap dirender oleh misalnya Laravel, cuma buat run-end-nya pakai jQuery biasanya.

30:32Jadi sebetulnya itu udah mulai kombinasi bukan nurni client-side rendering status juga bukan.

30:40Ketika di fase ini, yang terkenal itu pasti jQuery kan.

30:55Apalagi ya ada Dojo kalau nggak salah, ada XTJS, yang lain-lain, ada banyak lah ya.

31:02Yang paling terkenal jQuery.

31:04Nah setelah itu orang berpikir, ini di client udah makin kompleks kan.

31:09Semua dihandle di sisi client.

31:13Terus akhirnya mulailah muncul framework-framework yang mengadaptasi cara web bekerja di sisi server.

31:23Dalam artian arsitekturnya pakai model view controller.

31:28Muncul Backbone, ada Knockout.js, ada Batman, ada banyak ya macem-macem ya.

31:35Batman framework, belum pernah denger.

31:41Terus templatingnya pakai underscore.

31:44Templatingnya ada handlebar, must test.

31:54Terus di fase ini juga kalau teman-teman mungkin...

31:59Ada Batman.js kofi script.

32:03Di zaman ini ada satu framework yang akan menjadi cikal bakal framework kekinian.

32:09Namanya Raktiv, R-A-C-K-T-I-V.

32:13Itu yang buat adalah reseries.

32:16Yang akhirnya menjadi Svelte sekarang.

32:19Itu dia buat di waktu dia bekerja sebelum di New York Times.

32:24Jadi dia bekerja di media juga, media online juga.

32:28Nah dia bikin Raktiv.

32:30Dia bekerja di New York Times, akhirnya dia bikin Svelte.

32:34Itu awal ceritanya di situ.

32:37Dulu dia di Guardian.

32:40Jadi ini framework-framework ini udah mulai merasa butuh karena semuanya di handle oleh klien.

32:48Akhirnya muncullah state management.

32:51Waktu itu belum teroternal ya state management ya.

32:54Kalau yang pakai Backbone, Knockout.js itu belum ada ya.

32:57Ada tapi udah di include sama sih framework ini.

33:01Dan nggak terlalu rumit kan karena orientasinya dulu awalnya masih banyak server side.

33:08Expectasinya state-nya itu di handle di server lah.

33:12Betul.

33:13Jadi ini belum jamannya ada state management dan lain-lain.

33:20Dan belum jamannya tadi ngomong apa ya? Jadi lupa.

33:24Oh ini virtual DOM belum ada tuh.

33:27Jadi semua manipulasi DOM langsung aja.

33:29Seperti halnya si jQuery kan.

33:32Beberapa framework juga seperti Backbone itu basenya jQuery.

33:36Cuman sudah, arsitekturnya sudah menggunakan model view controller.

33:40Model disini ya mungkin dia ambil API.

33:43Terus abis itu kita bisa query, terus di handle sama controller view-nya ya buat nampilin.

33:49Ya kira-kira kayak gitulah.

33:51Dan biasanya jadi reactive. Reactive itu artinya.

33:54Kalau misalnya ada data yang berubah, tadinya kalau pakai jQuery ya.

34:03Kita harus, kalau ada data yang berubah, kita harus nge-domatin.

34:07Re-render lagi semuanya?

34:08Dua hal. Dua tempat yang berbeda.

34:10Oh iya.

34:11Sedangkan ya kalau dia reactive.

34:13Kirim event gimana tuh caranya?

34:15Ya dia observe. Observe kalau datanya berubah.

34:18Kayak Backbone itu model view controller.

34:21Kalau model data di modelnya berubah,

34:23komponen yang lain yang dari view-nya itu re-render ulang, otomatis.

34:29Ya.

34:31Ya itu MVC di JavaScript.

34:36Ya itu beberapa framework yang jadul gitu ya.

34:40Yang tadi Backbone, OSJS, ada reactive, ada macem-macem gitu kan.

34:44Setelah itu mulai berkembang lagi.

34:48Mulai berkembang lagi muncul yang pertama kali framework modern,

34:51yang masih aktif sampai sekarang adalah Angular.

34:54Itu main bloom juga tuh.

34:55Angular JS-nya masih.

34:57Iya versi 1.

34:59Itu main bloom kenapa? Karena dia two-way data binding.

35:03Kalau dulu kita kan manual ya.

35:06One way.

35:08Jadi si Angular ini two-way data binding.

35:12Jadi ketika kita ketik, wah langsung berubah.

35:14Wah keren banget gitu.

35:16Sekarang mah udah biasa aja.

35:18Kalau dulu kayaknya, wah ini ini.

35:20Kalau dulu itu kalau kita ketik sesuatu di tempat sini,

35:22di tempat sini berubah secara otomatis,

35:24kayaknya dengan kayak kita...

35:27Kau pakai variable biasa gitu ya.

35:29Iya, code-nya simple.

35:30Tetapi beberapa tempat bisa berubah.

35:32Itu keren gitu.

35:33Karena kalau nggak, kita harus handle masing-masing.

35:38Masing-masing, betul.

35:39Satu per satu.

35:40Jadi ya itu lumayan menjadi milestone juga ya

35:44buat perkembangan web.

35:46Itu adalah Angular 1.

35:48Dan Angular 1 juga salah satu framework

35:50yang pertama kali mempopulerkan testing di sisi klien.

35:55Dia menggunakan Jasmine.

35:57Sebelum-sebelumnya testing di klien itu susah banget.

36:00Susah banget.

36:01Kayak hampir nggak ada gitu.

36:03Manual, manual testing.

36:05Iya, acceptance test.

36:07Orang yang ngetest gitu kan.

36:09Begitu ada Jasmine, dia bisa bikin auto-metet test dan lain-lain.

36:13Akhirnya diadaptasi sampai sekarang,

36:15testing itu udah enak banget.

36:17Itu salah satu handle-nya Angular juga.

36:21Berarti itu milestone juga ya.

36:23Bahwa di apapun yang terjadi di client-site,

36:26di browser, itu kayak ada logiknya,

36:28ada input-nya gimana, output-nya gimana.

36:31Itu kan berarti kita web developer sadar

36:35bahwa udah geser ke, nggak geser sih, udah nyebar ke...

36:39Selain di server, ya server tetap perlu ditest.

36:42Di klien juga perlu ditest juga.

36:44Betul, betul.

36:46Dan Jasmine juga masih ada sampai sekarang

36:50dan diadaptasi oleh Jess.

36:52Jess itu biasanya adalah Jasmine.

36:54Terus dari Angular ini baru muncul

36:57itu yang framework-framework yang sekarang,

36:59seperti React, ada...

37:01View.

37:02View, ada...

37:04Nah, View juga...

37:06Ya, View juga sebenarnya sederahnya menarik juga

37:09karena kabarnya si Ivan Yu itu

37:13dulu dia intern di Google, masuk ke timnya Angular.

37:17Makanya kan Angular 1 sama View awal kan mirip-mirip ya.

37:24Begitu mereka announce bahwa Angular yang kedua

37:30bakal diganti total, berubah total,

37:33kemudiannya ganti Ivan Yu-nya dan di sana

37:35akhirnya dia bikin View, gitu.

37:38Kalau React itu muncul karena kebutuhan si Facebook

37:43sebagai sosial media.

37:45Jadi datanya dinamis, gitu kan.

37:47Kalau tadi kan kita pathway data binding

37:50mungkin butuhnya lebih dari di Google ya.

37:53Facebook awalnya itu server-side rendering loh.

37:55Iya.

37:56Kan PHP, bahkan sampai tahun 2000,

37:59berapa lah, 2010-an pokoknya,

38:01masih server-side,

38:03masih alamatnya bahkan profile.php,

38:05cuma di depannya diperkaya oleh React.

38:09Ya, bahkan sekarang mereka udah bikin engine PHP sendiri kan.

38:13Sempat waktu itu kan PHP 5.6 stak ceritanya.

38:18PHP 5.6 agak stak.

38:21Nggak ada tuh 5.7 kayak masih kayak pada berantem gitu,

38:24terus akhirnya pada bikin PHP 6.

38:27Kayaknya selalu pada berantem dulu ya,

38:29aja plus script buat PHP.

38:31PHP 6.

38:32Tadi PHP 6-nya kayak masih kayak nggak ada persetujuan gitu,

38:38kayak nggak kompak.

38:39Akhirnya si Facebook bikin sendiri kan

38:41PHP engine-nya dia rewrite.

38:43Nggak, dia rewrite sih.

38:44Dia modifikasi.

38:45Gua lupa namanya apa.

38:47PHP engine-nya dia.

38:49Bukan.

38:50Highlight.

38:51Bukan, bukan.

38:52PHP engine-nya si Facebook itu namanya...

39:00Kok gua lupa.

39:03Itu dulu agak melenceng,

39:09tapi pertama kali si Facebook punya itu

39:12yang pakai namanya Just In Time.

39:14HHVM.

39:15Oh ya, HHVM.

39:17Jadi dia pakai tekniknya Hip Hop Virtual Machine.

39:21Jadi pakai Just In Time.

39:22Ya ampun namanya Hip Hop Virtual Machine.

39:24Tapi itu jadi cepet banget memang.

39:28Fast forward, PHP 7 keluar,

39:32maka semua tidak ada.

39:34Karena sudah kompak lagi semua.

39:36Udah dimasukin.

39:37Udah diintegrate.

39:38Polanya mirip kayak ECMAScript ya jadinya.

39:41Sejarah ECMAScript yang dulu pernah kita bahas di episode berapa tuh.

39:45Jadi, ya itu si React ini muncul karena kebutuhan social media

39:51yang datanya dinamis sekali kan.

39:53Dinamis.

39:54Ada chat baru, ada like baru.

39:56Ada like baru.

39:57Ada feed baru dan lain-lain gitu kan.

40:00Makanya si React ini muncul

40:03dan dia mau, kan dia mau mengetamakan developer experience kan.

40:11Kalau misalkan yang sebelumnya menggunakan 2D data binding,

40:15ternyata itu bagus, menarik secara developer experience,

40:20tapi kabarnya secara performa kurang.

40:24Karena dia harus, apa istilahnya tuh, ngecekin ini lagi kan.

40:28Tiap kali ada perubahan dia cek semua halaman dan itu berat gitu kan.

40:32Nah, tapi React juga nggak mau dia kalau misalkan,

40:37kalau dulu kita misalkan kayak server-site rendering,

40:42pokoknya dia berusaha untuk membuat developer experience-nya seperti server-site rendering,

40:47tapi ini di client-site.

40:48Artinya apa?

40:49Artinya misalkan kalau dulu kita mau cek email, ada email baru kan kita F5 ya.

40:53Refresh gitu kan.

40:54Nah, React pengen experience seperti itu.

40:57Jadi setiap ada hal yang baru, kita nggak perlu ngapain, tiba-tiba ada muncul itu.

41:02Makanya dia bikin virtual DOM.

41:03Jadi ketika ada sesuatu yang baru, sebenarnya itu dia ngerefresh semuanya,

41:09ngerender ulang semuanya, tapi yang hanya perubahannya aja.

41:12Itu yang bantu.

41:13- Dia punya gambar DOM yang real, yang nyata,

41:18terus dipindahin dulu ke tempatnya React sendiri,

41:24di dunia virtualnya dia,

41:26terus dicek satu persatu mana yang berubah,

41:29sampai dapet gambar yang baru sepenuhnya,

41:32terus baru di-apply lagi ke DOM yang asli, yang nyata.

41:36Karena browser juga masih belum terlalu super browser,

41:42masih belum sama ya, belum seragam.

41:44Jadi solusinya React kayak gitu.

41:47Memudahkan buat semacam polyfill atau backwards compatibility juga,

41:52karena semuanya digambar dulu di virtual DOM-nya dia.

41:55- Virtual DOM ini juga salah satu milestones ya,

42:00yang membuat framework-framework kalian juga mengikuti.

42:03- Makin lama, makin dominan JavaScript ya jadinya.

42:07- Iya.

42:08- Sampai di satu titik, semuanya pada pakai JavaScript,

42:13akhirnya website-nya lambat.

42:17- Website yang dikirim di awal nggak ada isinya?

42:20- Betul, kosongan.

42:22Dia nunggu datanya nyampe,

42:24begitu datanya nyampe, dirender,

42:26jadi ada proses si user menunggu loading pertamanya,

42:29hampir sama seperti kejadian seperti di Flash jaman dulu,

42:33harus loading dulu.

42:35Itu kejadian di client-side rendering.

42:38Walaupun tidak begitu kelihatan ya,

42:40karena mungkin koneksi internet udah bagus,

42:42yang dirender juga,

42:44ya mungkin text, image, dan lain-lain,

42:46ya mungkin cukup oke lah, masih bisa ditolerir lah,

42:49tapi untuk yang butuh performa yang bagus,

42:53itu menjadi hal yang kurang menyenangkan gitu,

42:56yang akhirnya munculah solusi-solusi seperti

43:02server-side rendering yang kombinasi.

43:07- SSG.

43:09- SSG dulu yang muncul ya?

43:11- Belum, belum.

43:13Itu yang kayak pakai itu loh, pre-render.

43:16Jadi pre-render.

43:18Karena gini, masalahnya kan di SEO jaman itu,

43:22Google Callbot itu belum bisa ngerender di JavaScript.

43:26- Belum bisa baca...

43:28- Bisa baca HTML-nya,

43:30tetapi tidak bisa ngerender di JavaScript.

43:32Jadi masalah, masalah nih bagi si Google.

43:38Jadi dia nggak tahu kontennya apa,

43:40web-site-web-site yang pakai client-side rendering itu,

43:43gimana solusinya?

43:45Akhirnya pakai namanya pre-render dulu.

43:48Jadi kalau di-detect,

43:50kalau yang request itu bot,

43:52masuk ke pre-render.

43:54Jadi di pre-render yang dikirimkan ke bot itu,

43:56HTML-nya berbeda dengan HTML yang dikirimkan oleh user.

43:59Itu awalnya pre-render.

44:02Baru muncul...

44:05- Baru muncul SSG,

44:07itu adeknya strategi pre-render.

44:11Sekalian aja dikirim HTML yang awal, yang mentah,

44:15ya dikirim aja ke user juga.

44:17Karena mungkin kena penalti,

44:19kan sebetulnya kalau SEO,

44:21crawling search engine kan sama Google dilarang kan ya,

44:25kalau experience bot sama experience user terlalu beda,

44:29kan sebenarnya itu kayak misleading kan,

44:31mungkin ada penaltinya atau apa kali ya.

44:33SSG itu dulu kayak mulai jamannya Gatsby kan.

44:37- Gatsby itu yang paling terkenal awalnya SSG.

44:39Atau apa tuh sebelumnya?

44:41- Sebenarnya sebelum itu udah ada.

44:43Ada Jekyll.

44:45- Oh ya Jekyll, Jekyll, Jekyll betul.

44:47- Ada Jekyll, itu awalnya banget.

44:49- Jekyll Hugo berarti ya temennya.

44:51Segenerasi.

44:53- Jekyll duluan,

44:55Hugo itu hampir segenerasi dengan Gatsby.

44:58Gatsby terkenal karena dia di ecosystem JavaScript.

45:02- Samaria Gatsby.

45:04- Iya dia nempelnya sama Riai, GraphQL dan lain-lain.

45:07Akhirnya yang bertransformasi,

45:10yang bertransformasi menjadi

45:12Jamstack.

45:14Yang sekarang lumayan terkenal.

45:18Karena orang kembali melihat kan,

45:20wah ini lambat.

45:22Kalau ke server ngapain golak-balik query ke database,

45:25padahal website kita nggak terlalu dinamis.

45:29Dalam artian, misalkan website pribadi nih.

45:32Artikel, kita bikin artikel,

45:34berapa sih, sebanyak apa sih, gitu kan.

45:36Sebulan sekali juga udah bagus, gitu kan.

45:38Lagi rajin, gitu kan.

45:40Jadi ngapain harus,

45:42setiap ada request harus ke server dulu,

45:44ke database, balik ke server, baru ke klien, gitu kan.

45:47Terlalu banyak makan resource.

45:49Akhirnya, ya udah.

45:51Yang bisa jadiin statik ya, di statikin aja.

45:53Terus abis itu yang ininya, artikelnya,

45:55di generate secara otomatis sekali aja.

45:57Di generate lagi.

45:59Di generate jadi file,

46:01artikel 1.0 HTML, artikel 2.0 HTML,

46:03dikirim balik ke server.

46:05Jadi prosesnya lebih cepat dan lebih aman,

46:07nggak ada database, nggak ada kemungkinan di hack,

46:11karena database-nya bobol atau gimana.

46:13Itu aman semuanya.

46:15Lebih irit juga kan, Debbie, ya.

46:17Balik ke awal kayak tadi Tim Berners-Lee lagi.

46:21Jadi dokumen-dokumen,

46:23tapi itu dibuat oleh si Gatsby

46:25yang tahu program.

46:27Walaupun itu di server lokal kita ya.

46:29Kita bisa jalankan NPM run build,

46:33itu nge-generate, kita push.

46:35Udah deh. Terus irit biaya.

46:37Biasanya...

46:39Gak perlu server.

46:41Kayak gini, biasanya dilakukan secara otomatis

46:43lewat CI/CD.

46:45Kalau teman-teman.

46:47Bukan CI/CD, lewat CI/CD.

46:49Jadi pakai jaman ini.

46:51Kita connect repo kita.

46:53Tapi yang sebelumnya kan,

46:55yang paling pertama ada runner-runner itu kan

46:57GitLab tuh yang awal-awal tuh.

46:59GitLab yang punya runner yang free.

47:01Nah, jadi biasanya kita push ke Git repo-nya,

47:05pakai hook,

47:07jalanin runner.

47:09Men-trigger mereka yang jalanin NPM run build gitu misalnya.

47:13Oh, biasanya pakai Travis dulu awal-awal tuh.

47:15Travis CI kan.

47:17Terus Travis-nya jalan.

47:19Terus kemudian nge-push ke

47:21kayak server-server SDN yang free.

47:25Kayak Netlify, atau apa?

47:27S3.

47:29Ke storage lah intinya ke storage ya.

47:33Yang tidak membutuhkan web server kan.

47:35Maksudnya yang gak butuh install web server,

47:37atau hosting yang ada PHP.

47:39Jadi sudah dikirim.

47:41Jadi bundlenya semua itu

47:43JavaScript-nya, CSS-nya,

47:45HTML-nya, lengkap-lengkap.

47:47Satu folder

47:49yang dikirimkan update.

47:51Nah, itu static site generation.

47:53Nah, terus kelebihan-nya

47:55dianggap dulu SEO-friendly.

47:57Karena misalnya blog,

47:59website pribadi atau blog,

48:01kan judulnya tetap sudah dikirim di

48:03tag H1, H1 heading.

48:05Ada titlenya, ada isinya.

48:07Nah, pas disajikan

48:09di server-user, tetap bisa di-hydrate.

48:11Misalnya jumlah like-nya kan berubah tuh.

48:13Jumlah like-nya mungkin

48:15bakal di-hydrate.

48:17Nah, disini mulai kenal sama istilah hydrate ya.

48:20Dipanggil dari JavaScript,

48:22terus di-render ulang.

48:24Tapi kan gak semua kan sebetulnya.

48:26Kayak judul blog juga kan

48:28gak terlalu sering berubah.

48:30Isinya juga gak terlalu sering berubah.

48:32Cuma misalnya ada komentar

48:34atau ada jumlah like baru itu yang

48:36dilakukan di client-site.

48:38Di client-site. Jadi di-hybrid lagi.

48:40Jadi sudah static.

48:42Static HTML dikirimkan.

48:44Cuma bagian-bagian tertentu

48:46di-hydrate.

48:48Di-generate.

48:50Di-hydrate ulang untuk request data

48:52untuk diperbarui.

48:54Ini ada

48:58sebenarnya gak perlu, maksudnya

49:00gak mesti pakai framework-framework

49:02juga ya. Gak perlu pakai framework

49:04kayak Gatsby, Jekyll. Karena

49:06saya pernah buat juga dengan WordPress.

49:08Jadi, dari php.

49:10Kan WordPress kan php.

49:12Dan server-user rendering. Jadi

49:14buat ngerender

49:16jadi setelah

49:18konten ditulis, ya kan?

49:20Konten ditulis itu

49:22HTML nya di-generate via

49:24php. Terus php yang meng-upload

49:26ke S3.

49:28Terus file itu

49:30di-serve via

49:32CDN. CDN Cloud Front.

49:34Biasanya. Ya kan?

49:36Itu juga bisa.

49:38Dan projeknya sampai sekarang masih aktif.

49:42Itu yang nge-generate itu

49:44kayak si php-nya

49:46gitu. Jadi gak mesti harus pakai

49:48framework-framework JavaScript.

49:50Dan kalau gak salah,

49:52Next.js yang baru-baru

49:54juga udah bisa

49:56melakukan itu kan?

49:58Benar gak sih?

50:00Dan sebetulnya, balik lagi.

50:02Lama-lama setelah

50:04masa bulan Madu lah

50:06honeymoon phase sama si

50:08SSG ini, kan orang makin

50:10developer sadar

50:12kadang ada kalanya

50:14butuh server-site ya, walaupun

50:16misalnya authentication

50:18atau hal-hal yang pakai

50:20API key atau

50:22punya butuh operasi server,

50:24ya bisa sih client-site,

50:26tapi kan tetap lebih

50:28robust lah, lebih solid,

50:30lebih enak kalau ada

50:32server-nya. Jadi ya tetap

50:34approach yang sama, cuma halamannya

50:36si HTML awalnya tadi

50:38degenerate oleh

50:40server. Nah Next.js itu kelihatannya

50:42yang paling pertama bisa

50:44hybrid, bisa kombinasi.

50:46Bisa pure start SSG,

50:48misalnya ya udah dikirim

50:50HTML-nya gitu aja, bisa

50:52juga combine SSR.

50:54Itu HTML-nya

50:56degenerate oleh si

50:58Next.js.

51:00Remix habis itu ya, yang baru

51:02remix bahkan

51:04pure, murni server-site.

51:06Karena kalau static-site

51:08generasi itu kan memang cepat,

51:10bisa di-service sedien, cuma

51:12cons-nya adalah scale,

51:14solid scale ya. Bayangkan aja

51:16kalau

51:18publishing site, new site, New York Times

51:20yang punya jutaan artikel,

51:22ya masa sekali

51:24ngerender itu

51:26nge-generate satu juta artikel.

51:28Bayangin aja kalau menu-nya

51:30dirobah,

51:32masa ngerender satu juta?

51:34Jadi nggak bisa.

51:36Scaling dari sisi

51:38generation-nya kan, bukan dari sisi

51:42kalau misalkan kayak

51:44S3 atau storage yang lain kan itu

51:46automatic scaling kan.

51:48Storage aman, tapi kan harus dibuild.

51:50Harus dibuild biar nggak

51:52generate sih file-file HTML tadi.

51:54File dan asset-asetnya.

51:56Banyak dan berat ya.

51:58Oke, oke.

52:00Nah.

52:02Jadi mungkin karena

52:04topiknya lumayan panjang,

52:06kita ini ya, kita recap

52:08dulu kali ya, kita recap ya. Jadi awalnya

52:10muncul

52:12di awal itu adalah

52:14server-site rendering dulu,

52:16walaupun dulu istilahnya nggak ada ya.

52:18Eh, static dulu dong, awalnya.

52:20Awalnya static dulu.

52:22Bahkan static file.

52:24Murni static file.

52:26Static document file.

52:28Terus ke server-site.

52:30Server-site yang dinamis, ya.

52:32Lalu kemudian baru ke...

52:34Dynamic scripting language tadi ya.

52:36Iya. Kita coba buka ya, ngeliat ya

52:38contohnya ya di sini.

52:40Ini sih

52:42apa namanya, kalau SSR itu

52:44istilah yang dibuat setelah

52:46proses apa,

52:48setelah fase-phase

52:50web server itu terkenal dulu kan.

52:52Ya, ini udah modern sih.

52:54Jadi

52:56ini server-site, kemudian muncul

52:58client-site.

53:00Client-site juga tadi ada fase-fasenya mulai dari

53:02yang sederhana sampai yang

53:04sudah modern seperti sekarang.

53:06Client-site salah satunya adalah

53:08react misalkan.

53:10Jadi ketika kita buka, kalau misalkan yang client-site

53:12salah satu ciri khasnya adalah

53:14kita akan dapatkan, awalnya

53:16kita akan dapatkan sebuah

53:18halaman kosong. Karena semua

53:20degenerate di sisi klien.

53:22Seperti itu.

53:24Lalu kemudian

53:26kita ke static-site

53:28generation, static rendering

53:30ini proses

53:32pre-render

53:34ya, jadi

53:36HTML dan

53:38JavaScriptnya static

53:40tapi ada proses generationnya

53:42yang membuat dia setengah

53:44dinamis, semidinamis ya.

53:46Contohnya tadi misalkan

53:48kita punya artikel,

53:50artikel ini degenerate supaya

53:52menjadi file-file static.

53:54Tidak melalui

53:56server dan tidak

53:58menggunakan database sama sekali.

54:00Pro dan consnya

54:02temen-temen bisa baca sendiri. Tadi kita juga sudah bahas

54:04cukup pendalam ya, untuk masing-masing.

54:06Saya bisa kasih gambaran

54:08pros dan consnya.

54:10Kalau dokumen

54:12static-site, kita mulai dari server-site

54:14dulu deh. Karena itu mungkin teman-teman

54:16sekarang itu ngerti PHP atau

54:18yang dynamic itu.

54:20Apa sih kebagusnya

54:22dengan server-site, datanya bisa

54:24dinamis, jadi real-time.

54:26Apapun yang kita lihat, real-time.

54:28Cuman kelemahannya adalah TTFB-nya tinggi.

54:30Time-to-verse-back-nya tinggi, karena harus ada

54:32proses request, server yang memproses

54:34ngambil data dari database,

54:36case segala macam, baru balik.

54:38Jadi TTFB-nya tinggi.

54:40Kalau klien...

54:42Dan yang lupa biaya.

54:44Dan SEO-nya bagus, karena

54:46datanya update, karena yang dikirimkan sudah

54:48HTML yang sudah tinggal di-render.

54:50Jadi dari sisi bagusnya,

54:52HTML-nya hanya tinggal perlu

54:54dirender oleh si browser,

54:56jadi FCP dan LCP-nya

54:58secara side-performance bisa

55:00lebih baik.

55:02Kalau client-site rendering,

55:04server kan tidak

55:06perlu memproses apa-apa.

55:08Dia cuma kayak kirimkan,

55:10ini HTML kosongan,

55:12ini JavaScript-nya,

55:14ini datanya,

55:16render aja nih.

55:18Jadi TTFB-nya bagus,

55:20karena cepat,

55:22bahkan bisa di-case

55:24oleh CCDN dengan bagus,

55:26karena datanya sudah ada di-CDN semua.

55:28Jadi cepat banget.

55:30Tapi blocking time-nya

55:32bakal tinggi.

55:34Ya, kelemahannya FCP dan LCP-nya

55:36side-performance-nya,

55:38untuk user bisa ngelihat

55:40konten-nya,

55:42butuh waktu sampai JavaScript-nya selesai di-download.

55:44Betul.

55:46Downside-nya

55:48SEO, secara SEO

55:50kurang bagus, karena

55:52crawler board itu harus

55:54men-download JavaScript yang besar,

55:56dan ada crawler board itu

55:58punya budget

56:00untuk nge-download itu.

56:02Kalau kita ke-block gara-gara itu,

56:04bakal konten kita nggak bisa dibaca.

56:06Balik lagi ke

56:08static-site.

56:10Static-site itu, TTFB-nya

56:12bagus, karena

56:14HTML-nya sudah di-case,

56:16sudah jadi.

56:18Sudah disiapkan, sudah jadi file.

56:20LCP-nya, kalau

56:22misalnya dengan JavaScript-nya nggak berat ya,

56:24asumsi nggak berat, LCP-nya

56:26bagus. Jadi secara SEO juga bagus.

56:28Konten-nya sudah jadi semua.

56:30Kelemahannya adalah,

56:32kalau file-file-nya atau

56:34publishing-site yang

56:36besar,

56:38akan

56:40makan

56:42waktu untuk nge-generate ulang.

56:44Jadi

56:46scalability-nya kurang bagus.

56:48Dan satu sisi, datanya

56:50tidak real-time.

56:52Jadi nggak masuk akal

56:54untuk website

56:56atau web-app yang banyak konten user

56:58generated, nggak mungkin tiap.

57:00Misalnya kayak medium

57:02atau booking-site yang user-nya banyak,

57:04setiap orang nge-post artikel baru,

57:06generate ulang semua.

57:08Itu recap-nya.

57:10Oke, oke.

57:12Jadi itu

57:14pro dan cons-nya.

57:16Kalau penggunaannya,

57:18kapan kita perlu menggunakan

57:20server-site, kapan kita perlu

57:22website, web seperti apa?

57:24Biasanya bagi teman-teman itu,

57:26"Tus yang bagus yang mana?"

57:28"Tus saya pakai yang mana?"

57:30Server bullet.

57:32Padahal sebenarnya semua

57:34bisa diakalin dalam tanda kutip ya.

57:36Misalkan contohnya,

57:38static-site generator ini

57:40nggak bisa bikin, mungkin kurang bagus.

57:42Bukan nggak bisa ya, kurang bagus untuk

57:44yang sifatnya dinamis.

57:46Sebenarnya bisa juga. Misalkan nih, kita

57:48bisa bikin aplikasi e-commerce

57:50dengan SSG.

57:52Gimana caranya?

57:54Ya SSG-nya biasa.

57:56Kelain site, sisanya semua.

57:58Kontennya dari mana?

58:00Kontennya kita pakai yang headless.

58:02Misalkan headless e-commerce apa namanya?

58:04Yang dikirimkan cuma yang

58:08degenerate shell-nya doang.

58:10Ya, shell-nya doang. Selebihnya

58:12di generate di sisi klien dengan menggunakan JavaScript.

58:14Dia cek ke API,

58:16"Oh, ini ada data baru."

58:18Data item atau barang-barang yang

58:20mau di render di halaman satu yang mana

58:22munculin. Itu bisa.

58:24Tapi secara SEO,

58:26belum tentu bagus karena

58:28balik lagi.

58:30Pre-render. Apatih server-site.

58:32Balik-balik, bolak-balik kita.

58:34Bingung kan yang mana kan?

58:36Sebenarnya gampangnya gini, kalau kita terlalu banyak

58:38dicoba aja dulu, maksudnya kita

58:40tetap perlu pernah nyoba semua.

58:42Kita nyobain semua nih.

58:44Terus kita tahu plus-minusnya.

58:46Gampangnya sih kalau kita terlalu banyak pakai workaround,

58:48ada satu titik

58:50dimana udah mending pakai

58:52server-site aja.

58:54Satu titik trade-off-nya

58:56gak sebanding ya, ya udah.

58:58Kalau use case kayak e-commerce

59:00atau dynamically

59:02user-generated site,

59:04ada titik dimana kita

59:06lebih baik pakai server-site

59:08rendering. Nah itu kan tergantung

59:10use case spesifiknya buat

59:12siapa ya. Cuma kalau cuma pengen nyoba,

59:14explore, ya saksah

59:16aja semua cara dipakai.

59:18Kalau menurut saya tergantung

59:20aplikasinya mau dibikin apa.

59:22Kalau sifatnya

59:24banyak konten,

59:26janganlah pakai static site.

59:28Ya, jangan pakai static site.

59:30Mau gak mau kan

59:32atau misalnya banyak konten dan pengen

59:34kontennya diindeks oleh

59:36search engine. Itu syaratnya ya.

59:38Jadi jangan pakai static site karena akan

59:40makan waktu untuk build time.

59:42Kalau misalnya

59:44situsnya kecil,

59:46blog pribadi yang nulisnya sekali sebulan,

59:48ya gak perlu juga server-site.

59:50Karena ada biaya kan

59:52untuk biaya server kan.

59:54Minimal beli hosting.

59:56Kalau sedangkan kalau pakai

59:58static site,

1:00:00yang itu minimal kita bisa

1:00:02hosting-nya di github.io, gratis kan.

1:00:04Iya, betul.

1:00:06Nah, cuma sekarang

1:00:08kalau penggunaannya kecil

1:00:10sedikit sih, sebenarnya sekarang udah banyak

1:00:12free tier yang lumayanlah.

1:00:14Netrify,

1:00:16gratis ya.

1:00:18Tapi ya,

1:00:20kalau penggunaannya kecil, kalau misalnya

1:00:22udah mulai terkenal, banyak pengunjungnya,

1:00:24ya,

1:00:26free tier-nya habis.

1:00:28Maksudnya itu kan konsekuensi lah.

1:00:30Yang bikin covid,

1:00:32situs yang untuk

1:00:34menampilkan jumlah kasus covid,

1:00:36kawal covid.

1:00:38Madroid, ya.

1:00:40Iya.

1:00:42Oh iya.

1:00:44Itu kan sebenarnya

1:00:46hanya

1:00:48dia tampilkan itu

1:00:50hanya dengan static site.

1:00:52Klien site rendering.

1:00:54Jadi nggak perlu karena misalnya

1:00:56situsnya hanya dipakai

1:00:58untuk kebutuhan tertentu

1:01:00dan kita belum tentu

1:01:02contohnya

1:01:04buat nge-tracking sesuatu

1:01:06yang datanya nggak perlu SEO,

1:01:08SEO amat. Contohnya

1:01:10dashboard, dashboard internal

1:01:12yang bisa kita bikin internal

1:01:14pakai static,

1:01:16sorry, klien site, dan

1:01:20datanya itu

1:01:22real-time misalnya.

1:01:24Dynamis, real-time.

1:01:26Dan interaktif bahasanya.

1:01:28Ya udah, pakai aja

1:01:30klien site rendering, nggak perlu mikir-mikir

1:01:32yang sampai mewah-mewah

1:01:34pakai server site rendering atau static

1:01:36site generation.

1:01:38Kalau internal, klien site aja.

1:01:40Nggak ada SEO.

1:01:42Atau mungkin kontennya emang yang harus JavaScript

1:01:44generated. Misalnya

1:01:46game atau aplikasi yang

1:01:48kan fast banget tuh.

1:01:50Banyak pakai teknologi kan fast

1:01:52WebGL. Ya itu kan

1:01:54bakal klien render juga.

1:01:56Jadi nggak perlu terlalu menikmati

1:01:58di rendering method.

1:02:00Anggap aja aplikasinya Figma,

1:02:02contoh. Anggap aja. Itu kan

1:02:04klien site rendering kan.

1:02:06Jadi

1:02:08ada patternnya. Tapi kan Figma

1:02:10juga punya main site-nya kan.

1:02:12Itu yang main site-nya.

1:02:14Ya static aja main site-nya.

1:02:16Marketing site,

1:02:18static aja biar cepet dan

1:02:20hemat.

1:02:22Blocknya pakai server site, pakai aja

1:02:24WordPress, beres kan.

1:02:26Jadi tergantung situasi.

1:02:28Jadi satu domain pun

1:02:30bisa banyak.

1:02:32Mungkin halaman utamanya

1:02:34static site,

1:02:36blocknya server site,

1:02:38aplikasinya sendiri

1:02:40client site.

1:02:42Itu

1:02:44penggunaannya.

1:02:46Jelas ya.

1:02:48Ada lagi yang seru nih. ISR kita belum bahas nih.

1:02:50Si incremental static rendering.

1:02:52Incremental static rendering.

1:02:54Ini kelihatannya dipopuler

1:02:56dipopulerkan

1:02:58sama Next.js ya

1:03:00kalau nggak salah.

1:03:02Ini ya, ISG ini. Bukan.

1:03:04ISG, iya.

1:03:06Jadi ini trobosan yang lumayan

1:03:08baru sebetulnya.

1:03:10Kalau tadi kan SSG dibuild sekali,

1:03:12abis itu ya udah.

1:03:14Kalau misalnya ada konten baru,

1:03:16nge-build ulang semuanya.

1:03:18Kalau misalnya satu website

1:03:20punya 300

1:03:22artikel atau 300

1:03:24konten, harus build ulang

1:03:26keseluruhan

1:03:28ya semua 300 halaman itu.

1:03:30Nah, ISG ini

1:03:32memungkinkan bahwa

1:03:34nge-build ulang cuma halaman yang berubah

1:03:36aja.

1:03:38Cuma ini relatif baru sih.

1:03:40Beratif baru ya.

1:03:42Namun ada kelemahannya

1:03:44disini, kalau yang berubah itu

1:03:46elemen yang

1:03:48ada di seluruh page,

1:03:50di seluruh page ya, mau nggak mau

1:03:52render mula.

1:03:54Contoh menu, logo.

1:03:56Navigation gitu-gitu ya.

1:03:58Ya, navigation.

1:04:00Cuma ini membantu aja sih

1:04:02alternatif buat enrich.

1:04:04Ya, misalnya kita belum terlalu butuh

1:04:06glom se-level media

1:04:08kayak New York Times atau Guardian.

1:04:10Maksudnya kita belum sebesar itu.

1:04:12Cuma emang pengen

1:04:14nge-build, misalnya tetap

1:04:16personal site, sebetulnya cuma blog pribadi

1:04:18aja. Cuma ya misalnya kita mulai

1:04:20produktif lah. Tadinya

1:04:22lepost sebulan sekali, sekarang

1:04:24jadi sebulan 3-4 kali.

1:04:26Terus kita mulai males kalau harus

1:04:28nungguin nge-build semua.

1:04:30Kalau yang berubah emang cuma

1:04:32satu bagian, satu post.

1:04:34Misalnya kalau kita cuma

1:04:36satu post kan yang perlu dirender adalah

1:04:38misalnya halaman index-nya sama

1:04:40halaman

1:04:42post-nya itu sendiri ya, asumsi

1:04:44kita nggak banyak widget atau

1:04:46site bar atau apalah, kita cuma punya

1:04:48website sederhana. Ini kan

1:04:50bagus buat DX sih.

1:04:52Buat developer experience-nya ya.

1:04:54Kita bisa lebih produktif

1:04:56bikin post baru, tanpa

1:04:58males, aduh nge-build-nya lama.

1:05:00Ya, sekarang lumayan.

1:05:02Terus kalau untuk server site

1:05:04rendering juga

1:05:06kita bisa

1:05:08ngakalin biaya

1:05:10atau beban dari server

1:05:12site rendering sebenarnya diakalin dengan

1:05:14cache. Kita

1:05:16manfaatin cache

1:05:18sebisa mungkin, jadi yang di-serve

1:05:20adalah cache, jadi lebih cepat

1:05:22juga. Oh, ini yang

1:05:24benar-benar dimanfaatkan oleh

1:05:26Remix ya, kalau nggak salah ya.

1:05:28Dia menggunakan... Remix dan Next.js.

1:05:30Dan Next.js, oke.

1:05:32Mereka punya text yang

1:05:34memudahkan caching.

1:05:36Gimana dengan framework-nya

1:05:38baru seperti Astro?

1:05:40Astro dia pakai arsitektur

1:05:42island ya. Island architecture ya.

1:05:44Sudah pernah kita bahas kan.

1:05:46Sudah pernah kita bahas. Mungkin TLDR-nya

1:05:48bisa dijelaskan sedikit

1:05:50aja. Nah, si Astro...

1:05:52Oh, island ya. Island itu

1:05:54memandang seluruh

1:05:56dome itu kayak

1:05:58apa ya, secara geografis lah.

1:06:00Jadi,

1:06:02dibagi jadi modul-modul

1:06:04kayak di layar itu. Nah, kan

1:06:06nggak semua perlu

1:06:08dinamik dan

1:06:10terus-menerus berubah.

1:06:12Jadi, ini dianggap

1:06:14semua di awal, status,

1:06:16bagian-bagian yang perlu

1:06:18dinamis, di hydrate,

1:06:20atau di

1:06:22dome-nya diubah

1:06:24atau ditimpa dengan

1:06:26JavaScript saat

1:06:28butuh. Jadi, saat butuh itu apa?

1:06:30Bisa waktu pertama kali di loading,

1:06:32misalnya waktu suatu blog post pertama

1:06:34kali muncul, kita pengen tahu jumlah like-nya

1:06:36kan harus nampilin di like

1:06:38beberapa orang. Yaitu begitu loading,

1:06:40bisa dilangsung panggil.

1:06:42Atau bisa juga

1:06:44nggak usah dulu. Misalnya, comment kan paling bawah.

1:06:46Kan belum masuk viewport tuh.

1:06:48Belum tentu user scroll sampai bawah.

1:06:50Jangan ngeboros, jangan bikin boros

1:06:52total booking time ya itu.

1:06:54Abang, biar

1:06:56JavaScript browser bisa ngerjain hal lain.

1:06:58Ya udah, biarin dulu.

1:07:00Nggak usah melakukan apa-apa.

1:07:02Kalau user mulai scroll ke arah

1:07:04ke bawah, ke arah comment,

1:07:06baru JavaScript-nya

1:07:08muncul dan beraksi dan

1:07:10nge-fetching, ngambil data comment

1:07:12terus nge-replace

1:07:14dome-nya di browser dengan isi

1:07:16komentar.

1:07:18Pasti saya bisa scroll sedikit.

1:07:20Jadi, dia kayak hybrid. Scroll lagi ke bawah sedikit.

1:07:22Jadi,

1:07:24si framework ini akan menentukan

1:07:26mana yang harus di server,

1:07:28sorry, bagian yang tadi.

1:07:30Naik atas-naik atas sedikit.

1:07:32Ya, stop.

1:07:34Jadi, si framework itu bisa menentukan

1:07:36yang mana yang perlu dirender di server,

1:07:38yang mana perlu dirender di client.

1:07:40Jadi, contohnya, untuk page layout-nya

1:07:42dirender server-side rendering,

1:07:44block title-nya server-side rendering,

1:07:46block content-nya

1:07:48itu sudah static side,

1:07:50dia sudah

1:07:52case secara static,

1:07:54dan untuk beberapa

1:07:56tempat, dia sudah

1:07:58di server render, cuma belum di-hydrate.

1:08:00Mungkin dia perlu

1:08:02interactivity, ya,

1:08:04perlu interactivity, dan hanya

1:08:06di-hydrate saat

1:08:08itu muncul di viewport.

1:08:10Oke, berarti ini

1:08:12sederhananya gabungan

1:08:14antara server-side

1:08:16rendering dengan

1:08:18side generation. Benar nggak?

1:08:20Dan ada client-side

1:08:22dan ada client-side rendering juga.

1:08:24Ya, pokoknya gabungan semua yang

1:08:26tadi kita ceritakan, gitu ya.

1:08:28Menarik sekali. Ini

1:08:30ada contoh framework-nya, ada Marko,

1:08:32Astro, ada Elefanti,

1:08:34yang bisa di-communicate.

1:08:36Si creator Angular

1:08:38bikin lagi, apa tuh?

1:08:40Quick. Dia island juga, kan ya?

1:08:42Gak salah, ya.

1:08:44Ya, ya.

1:08:46Quick island. Perusahannya gimana?

1:08:48K-W-I-K.

1:08:50Builder.io, kalau nggak salah, kan?

1:08:56Nah, ini dia, benar.

1:08:58Kalau nggak salah, ya.

1:09:04Anggular, betul?

1:09:06Misko Hegri.

1:09:08Ini island architecture,

1:09:10betul. Island, ya?

1:09:12Dia ada tulis di sini, ya?

1:09:14Dia kan yang diutamakan

1:09:16di sini, kan? Resumeable ini, kan?

1:09:18Iya.

1:09:20Jadi makin lama, makin banyak kombinasinya, ya.

1:09:24Iya. Jadi ada

1:09:26dari semua pendekatan itu

1:09:28ya kayak base of

1:09:30both worlds, ya. Kayak dicomot mana yang

1:09:32bermanfaat, mana yang

1:09:34banyak dibutuhkan,

1:09:36di-mix semua.

1:09:38Betul.

1:09:40Terakhir,

1:09:42sebelum kita

1:09:44tutup, ya, dan tadi udah ada

1:09:46server side, ada yang lain-lain, teman-teman

1:09:48bisa ke patterns.dev untuk melihat

1:09:50metode-metode apa?

1:09:52Contoh-contohnya sama detailnya.

1:09:54Sama detailnya, ada

1:09:56yang bahas macam-macam juga.

1:09:58Nah, ini ada sesuatu

1:10:00yang menarik di

1:10:02beberapa

1:10:04bulan belakangan.

1:10:06Jadi, kan tadi di awal,

1:10:08kalau server side trending itu

1:10:10mengirimin semua static site-nya

1:10:12yang degenerate di server

1:10:14ke client-nya.

1:10:16Ya, kontennya, semua kontennya, kan.

1:10:18Kemudian berubah di

1:10:20client side itu yang dikirimkan

1:10:22adalah datanya.

1:10:24Tapi dengan

1:10:26mengirimkannya dengan request dan

1:10:28response, kan.

1:10:30Nah, ini muncul

1:10:32tren lagi

1:10:34yang dikirimkan itu

1:10:36HTML-nya, HTML CSS dan

1:10:38JavaScript-nya, tapi dikirimkan tidak

1:10:40melalui

1:10:42request-response yang biasa, tapi melalui

1:10:44websocket.

1:10:46Websocket.

1:10:48Ini ada contohnya

1:10:50di sini, namanya Unpoly.

1:10:52Jadi kayak streaming, dong?

1:10:54Iya, kayak streaming.

1:10:56Ya, kelebihan-nya berarti speed dan

1:10:58kayak observability juga ya, berarti

1:11:00itu secara ga langsung, kan?

1:11:02Dia sebenarnya dirender di server, tapi dikiriminnya

1:11:04pakai websocket jadi agak lebih cepat

1:11:06dibandingkan server side trending.

1:11:08Ini ada beberapa contoh, ada Unpoly

1:11:10yang sifatnya

1:11:12lebih unopinionated

1:11:14atau Hotwire.

1:11:16Hotwire ini

1:11:18mumpulnya bareng

1:11:20si Ruby on Rails yang

1:11:22dibikin oleh Basecamp, kan?

1:11:24Hotwire. Ada satu lagi

1:11:26nah, ini

1:11:28dia beradanya dimana?

1:11:30Dia beradanya diantara server side

1:11:32trending dengan SPA.

1:11:34Jadi, dia ada di tengah-tengah sini.

1:11:36Jadi, dia

1:11:38secara halaman itu tetap

1:11:40di server

1:11:42yang harusnya cukup cepat

1:11:44kemudian, tapi

1:11:46secara interaktifitasnya

1:11:48bisa menyayangi single-place application.

1:11:50Menarik.

1:11:54Ada baru lagi.

1:11:56Ini baru ya.

1:11:58Jadi, ada tadi Hotwire.

1:12:00Kalau ga salah, Laravel juga ada.

1:12:02Namanya apa ya? Livewire, kalo ga salah.

1:12:04Ada ga disini?

1:12:06Kenapa mirip-mirip namanya?

1:12:08Livewire itu

1:12:10kayak ini, kayak

1:12:12aplikasi jaman dulu, Livewire.

1:12:14Nah, ini Hotwire.

1:12:16Kalau temen-temen tertarik,

1:12:18ini implementasinya dimana?

1:12:20Kalo ga salah, hey.com

1:12:22itu email kliennya si Basecamp

1:12:24itu menggunakan Hotwire.

1:12:26Iya.

1:12:28Dia menggunakan frameworknya namanya Stimulus.

1:12:30Framework JavaScriptnya.

1:12:32Ada Django juga ada.

1:12:34Kemudian untuk

1:12:36Phoenix Elixir ada namanya Liveview.

1:12:38Itu semua pake Websocket.

1:12:40Pake Websocket.

1:12:42Bukan HTTP.

1:12:44Kenapa?

1:12:46Itu Laravel Livewire.

1:12:48Itu Livewire?

1:12:50Ada juga.

1:12:52Dan Unpoly yang

1:12:54sifatnya unopinated.

1:12:56Jadi framework

1:12:58agnostik.

1:13:00Htmx juga ada.

1:13:02Oh, Htmx.

1:13:04Htmx itu kayaknya sering disebut.

1:13:06Sering disebut ya.

1:13:08Nah, itu.

1:13:10Trendnya ke arah sana.

1:13:12Kita ga tau ya, yang mana yang lebih

1:13:14populer nantinya.

1:13:16Tapi ini alternatif aja.

1:13:18Karena kalo di software, renderingnya pasti cepet.

1:13:20Tapi proses ngirim ke

1:13:22HTTP-nya lambat. Kurang bisa

1:13:24interaktif. Kalo misalkan diklik kayak gini ya.

1:13:26Retweet atau like gitu kan.

1:13:28Apa namanya?

1:13:30Gak bisa kan kalo di software kan.

1:13:32Harus refresh kan.

1:13:34Nah, ini di tengah-tengahnya.

1:13:36Jadi dia tetep bisa update, tapi...

1:13:38Tinggal kalian pake Websocket.

1:13:40Terus meringankan kerja

1:13:42JavaScript Engine di browser.

1:13:44Karena ga harus passing apa-apa ya.

1:13:46Dikirim udah jadi HTML.

1:13:48Jadi yang kerja beratnya tetep software.

1:13:50Oke, makin banyak ide aneh-aneh.

1:13:52Kurangan. Yang bikin...

1:13:54Kenapa Websocket?

1:13:56Kenapa ga HTTP? HTTP kan dia

1:13:58request-response kan. Harus ada proses

1:14:00refresh-nya gitu kan.

1:14:02Kalo Websocket dia kan kebuka terus.

1:14:04Koneksinya kan.

1:14:06Jadi ketika ada update, ya udah.

1:14:08Dia bisa komunikasi lagi gitu.

1:14:10Kalo HTTP kan dia

1:14:12begitu request, response udah nyampe,

1:14:14udah dia putus kan koneksinya kan.

1:14:16Kalo kita mau request yang baru, kita harus

1:14:18konek lagi.

1:14:20Jadi ini adanya di tengah-tengah.

1:14:22Jadi sebagai alternatif juga,

1:14:24lain pattern-pattern yang kita

1:14:26pelajari tadi. Mungkin

1:14:28disini lebih ke streaming server side

1:14:30kali ya? Masuknya ya?

1:14:32Ada kekurangannya?

1:14:34Ada kekurangannya sih

1:14:36dengan Websocket. Artinya

1:14:38server-nya harus kuat, karena

1:14:40Websocket itu harus

1:14:42keep alive.

1:14:44Iya, dia buka terus jaringannya.

1:14:46Apa, koneksinya ya?

1:14:48Koneksinya. Dan kalo

1:14:50ga bisa pake CDN, ya. Rata-rata CDN

1:14:52itu ga bisa sih. Contohnya kalo

1:14:54CloudFront itu ga bisa

1:14:56keep alive.

1:14:58Jadi harus konek langsung ke load balancer.

1:15:00Jadi load balancernya temen-temen harus

1:15:02kuat.

1:15:04Intinya orang infrared-nya kudu

1:15:06jago ya. Kalo engga, bisa ga

1:15:08sengaja ngedidos itu sendiri.

1:15:10Apa isilahnya?

1:15:12Rawan...

1:15:14Kan satu...

1:15:16Koneknya kan tetap liat

1:15:20load balancer. Nah, load balancernya itu harus

1:15:22kayak punya bandwidth

1:15:24yang besar. Karena harus bisa

1:15:26simultaneous user kan depends ya.

1:15:28Tergantung sama komedian. Jadi kalo

1:15:30Websocket semuanya dibuka

1:15:32ya harus kuat.

1:15:34Tapi ya memang cepet sih.

1:15:36Iya.

1:15:38Dari sisi klien juga lebih ringan

1:15:40kan. Karena yang bertugas

1:15:42melakukan rendering itu adalah

1:15:44pekerjaan yang paling berat itu di sisi server kan.

1:15:46Jadi klien tidak terlalu diberatkan untuk

1:15:48renderingnya.

1:15:50Ya, gitu.

1:15:52Oke.

1:15:54Kita sudah satu jam lebih? Ada

1:15:56lagi yang mau didiskusikan?

1:15:58Engga. Tidak ada?

1:16:00Sudah cukup? Oke.

1:16:02Kalo gitu, untuk

1:16:04episode kita

1:16:06malam hari ini, yang tadinya

1:16:08kita bingung mau ngomong apa, ternyata

1:16:10panjang juga ya. Ternyata tetep jam

1:16:12juga. Tetep ya. Tetep sih jam juga ya.

1:16:14Emang luar biasa ya.

1:16:16Berolan kita sampai

1:16:18kemana-mana. Ya, jadi

1:16:20itu dia

1:16:22pembahasan tentang berbagai metode

1:16:24untuk melakukan rendering. Mulai dari

1:16:26static,

1:16:28server, klien,

1:16:30dan kombinasi-kombinasi yang lainnya.

1:16:32Dan ada banyak lagi

1:16:34kedepannya juga pasti akan berkembang terus.

1:16:36Jadi, untuk itu

1:16:38sekian dulu aja untuk episode kita

1:16:40episode ke-19 tentang

1:16:42metode rendering. Buat teman-teman

1:16:44yang punya pertanyaan atau

1:16:46mau diskusi topik

1:16:48tertentu bisa ke

1:16:50bit.ly/ngobrolinweb

1:16:52gitu ya. Terima kasih

1:16:54buat atensinya.

1:16:56Kita ketemu lagi di episode

1:16:58berikutnya minggu depan.

1:17:00Selamat malam. Dadah.