Ngobrolin Island Architecture - Ngobrolin WEB Ep1

2:41Oke, saya sharing dulu nih.

2:43Kalau saya kan fokusnya di web performance.

2:47Jadi memang sering menggali apa sih yang bisa kita bikin lebih cepet lagi di soal web.

2:52Minggu lalu saya bahas mengenai apa itu namanya?

2:56Pakai tools performance insight supaya kita bisa improve core web vital.

3:02Yaitu largest content full pain, cumulative layout shift, sama first input delay.

3:08Terus, minggu ini saya mau lanjut.

3:12Selanjutnya apa sih yang bisa kita lakukan untuk mempercepat performance?

3:16Jadi kayaknya coba share screen.

3:21Kalau teman-teman punya web yang mau di-audit, boleh ya.

3:26Oh, kali ini bukan di-audit.

3:28Jadi saya cuma share informasi.

3:30Kalau minggu lalu kan kita itu ya.

3:33Langsung demo-audit web ya.

3:36Iya.

3:37Oke, coba dimasukin ke stream.

3:40Oke, so kali ini saya mau share sedikit mengenai quick link.

3:46Apa tuh quick link?

3:48Ini sebenarnya gawainnya kayak teman-teman di Google, Adi Osmani dan segala macemnya.

3:58Jadi mereka bikin library yang super kecil bagaimana bisa memanfaatkan prefetch.

4:05Jadi ada prefetch API ya.

4:07Jadi web itu kan bisa prefetch, preload.

4:12Apa sih prefetch itu?

4:18Jadi prefetch itu bagaimana si browser bisa melakukan request content saat kita berada di page tertentu.

4:29Jadi kalau kita load halaman homepage kita misalnya.

4:33Terus kita prefetch, artinya memberi sinyal kepada si browser, kita butuh assets ini loh.

4:42Atau kita bisa bilang, kita butuh halaman ini loh selanjutnya, tolong di prefetch.

4:48Jadi begitu si user kita lagi membaca halaman yang sekarang, browser sudah mengambil halaman yang selanjutnya.

4:58Contohnya mungkin teman-teman kalau di homepage bisa, kayak kita punya ada CTA button yang besar,

5:05di halaman utama yang 80% itu si user akan klik itu.

5:10Jadi kalau kita prefetch halaman yang dituju sebelum si user melakukan action terhadap link itu,

5:20artinya mempercepat page load kan, karena sudah di load sebelumnya.

5:26Nah, prefetch sudah lama sebenarnya ada di web,

5:31jadi semua web sudah mendukung prefetch, semua browser maksudnya.

5:37Apa sih quick link itu? Quick link ini cuma library kecil yang merubah semua html,

5:45semua ahref-ahref itu di prefetch, otomatis.

5:51Di saat browser sudah tidak sibuk.

5:57Nah, bingung kan apa yang saya bilang kan?

6:01Jadi ketika page load, ya kalau misalnya kita lihat sebuah halaman ini.

6:06Ketika page load, yang minggu lalu ingat nggak kita mendemokan performance insight,

6:13jadi saya coba pakai regular 4G, ini artinya page load ya.

6:17Saat page load, apa yang terjadi?

6:21Browser request, terus kemudian request halamannya, html-nya,

6:27terus kemudian request asset-assetnya, terus request image-nya, style-nya, font-nya, dan segala macam.

6:35Baru kemudian melakukan render terhadap halaman ini.

6:40Kita lihat yang di bawah ini ya. Saya gedein dulu deh.

6:44Saya lihat yang itu dulu, lihat yang ini dulu.

6:48Browser request, terus kemudian html-nya muncul, terus kemudian image-nya muncul.

6:57Itu artinya proses rendering.

6:59Dan di saat proses rendering, tentunya si browser itu kan pakai CPU main thread namanya.

7:09Jadi ada thread-nya, main thread-nya itu sibuk. Artinya jangan sampai kita mengganggu

7:17proses main thread itu melakukan dengan rendering dan kita lakukan prefetch.

7:23Jangan sampai seperti itu juga.

7:25Jadi quick link ini membantu untuk melakukan prefetch ke halaman yang lain

7:31yang ada ahref-nya, artinya URL-nya, link-nya, dan di prefetch di background saat browser tidak sibuk.

7:40Apa sih tanda browser tidak sibuk?

7:42Itu ada API namanya request idle callback.

7:48Request idle callback API.

7:52API ini memberi sinyal kayak sebuah event, kayak resize observer API, kayak apa lagi API?

8:02Yang kemarin, yang minggu lalu, si Mbak Eka Sher itu adalah sanitizer API.

8:08Request idle callback itu events.

8:11Events yang akan dipanggil saat si CPU sudah idle.

8:19Pertama kali idle, maka CPU akan memanggil idle callback.

8:24Hanya itu yang dilakukan API ini.

8:29Support-nya saat ini di Chrome pasti karena itu dari timnya Chrome.

8:34Terus kemudian Safari belum, masih behind flag.

8:39Firefox sudah support.

8:41Jadi Chrome-based browser semua sudah support.

8:48Hanya tinggal Safari yang behind flag.

8:50Jadi, teman-teman sudah bisa memakai ini.

8:53Dan untuk si Quicklink sudah include quality fill.

9:00Jadi kalau nggak ada akan ada quality fill-nya.

9:03Nah, apa sih? Kita lihat dia gimana cara kerjanya.

9:06Saya ada 2 demo.

9:08Yang pertama, saya hapus dulu case-nya biar...

9:18Yang kiri dan yang kanan.

9:22Jadi mini-ecom sama mini-ecom Quicklink.

9:26Saya refresh.

9:27Untuk reload pertamanya, nggak ada bedanya.

9:31Tapi kita lihat kecepatannya.

9:34Kalau saya klik ini sekali, ada waktu tunggu ya.

9:38Dan kalau saya klik ini, cepat ya.

9:42Kalau saya balik, saya klik yang lain.

9:44Cepat banget ya.

9:46Lihat?

9:48Kalau yang ini, saya balik.

9:52Saya klik yang lain, tunggu.

9:54Oke.

9:56Dan percaya sama saya,

9:58kalau ini yang satu bukan SP ya.

10:00Bukan single page application.

10:02Sama, kodnya sama.

10:04Dan dia hanya melakukan prefetch.

10:07Kita bisa lihat prefetch itu di tab other.

10:11Sorry.

10:13Di network, other.

10:15Jadi kalau saya refresh halaman ini,

10:17begitu sudah selesai,

10:19maka dia melakukan prefetch ke semua link yang ada di sini.

10:23Product details.

10:25Sedangkan halaman ini,

10:27dia tidak lakukan prefetch terhadap apapun.

10:31Jadi,

10:33library ini bisa membantu

10:37page speed kita untuk halaman selanjutnya.

10:42Jadi kita klik, sudah selesai. Langsung nge-load.

10:46Jadi canggih ya.

10:48Berasa SPA ya?

10:50Berasa SPA.

10:52Nanti saya share lagi,

10:54bagaimana cara supaya kelihatan lebih SPA.

10:56Tapi saya lanjut dulu soal quick link ini.

10:58Untuk konfigurasinya,

11:02tentunya tidak semana-mana,

11:04begitu install langsung jadi.

11:06Meskipun bisa.

11:08Tapi saya tidak menyarankannya,

11:10jangan sampai semua link.

11:12Kita perlu membatasi hanya domain kita saja.

11:16Contohnya kita tidak perlu prefetch external URL, external domain.

11:20Atau kita hanya perlu prefetch yang halaman

11:23di dalam body container kita tertentu saja.

11:26Terus kita harus limit juga.

11:28Jangan sampai kalau misalnya kita buka sebuah halaman news portal

11:33yang satu halaman itu saja sudah ada 100 internal linking.

11:39Tentu kita tidak mau 100-nya kita prefetch.

11:43Karena jadinya nanti kita ngedidose server kita sendiri.

11:47Jangan sampai seperti itu juga.

11:49Tentu kita perlu throttle.

11:51Jangan sampai kebanyakan.

11:53Ini perlu konfigurasi.

12:01Dan konfigurasi itu harus disesuaikan

12:03dengan kebutuhan masing-masing web, teman-teman.

12:06Oh, satu lagi.

12:08Kalau saya misalnya pakai tampilan mobile,

12:15dia menggunakan intersection observer juga.

12:19Jadi kalau misalnya hanya above default-nya ada 4 link,

12:24dia hanya nge-load 4 saja.

12:26Jadi semakin saya scroll, baru dia nge-load yang lain.

12:30Jadi dia pakai intersection observer.

12:33Kalau teman-teman pengen tahu apa itu intersection observer,

12:37bisa baca nanti intersection observer API.

12:43Artinya hanya intersection observer API ini

12:54adalah API yang membuat elemen tertentu

12:58jika intersect dengan muncul di dalam viewport seperti itu.

13:03Jadi kalau kita bisa setting, elemen url-link ini

13:11muncul di dalam viewport baru dia dilakukan callback tertentu.

13:17Jadi bisa menggunakan namanya intersection observer API.

13:21Dan dia bisa, karena dia cuma library kecil,

13:28mau pakai di React, mau pakai di HTML biasa terserah.

13:34Cara kerjanya seperti ini.

13:37Visit page, saat idle time, dan saat user scroll dan intersect dengan viewport,

13:44hanya saat itu dia melakukan prefix.

13:47Dan kalau user klik link tersebut, maka kecepatannya jadi lebih cepat,

13:53karena aset yang dibutuhkan untuk halaman tersebut seperti HTML

13:59dan segala macam sudah di prefix di background oleh browser.

14:04Untuk dukungannya sudah berbagai macam,

14:07bahkan sudah ada dukungan langsung WordPress pluginnya,

14:11tinggal plug, setting, and play, tinggal dipakai.

14:18Dan untuk React, Angular, dan Vue sudah ada supportnya juga.

14:23Seperti yang saya janjikan, supaya terlihat lagi seperti SPA,

14:34itu bisa menggunakan yang namanya transition API.

14:39Pernah tahu transition API? Ini masih behind flag.

14:45- Masih flag sayangnya ya. - Iya, masih behind flag.

14:49Tetapi kalau itu kita gabung prefix dan transition API,

14:53maka kita bisa niscah ya.

14:56Suatu saat kalau ini sudah rilis, akan kelihatan seperti SPA beneran.

15:02Saya bisa contohin bagaimana saya reload.

15:07Kalau ini masih SPA ya, jadi belum menggunakan prefix segala macam.

15:13Tetapi bisa seperti ini transition API-nya.

15:17Jadi kalau ini kita gabung antara prefix dan transition API,

15:24maka alaman yang sudah kita download di background

15:27bisa kita munculin secara transition dengan menggunakan transition API.

15:32Silahkan nanti baca.

15:37Namun ini masih behind flag, hanya ada di Chrome dan perlu diaktifkan secara manual.

15:43Jadi saya perlu enable manual.

15:49Itu saja paling dari saya.

15:52Jadi prefix bisa segera digunakan jika kalian ingin mencoba di web page kalian

15:59untuk meningkatkan kecepatan loading halaman selanjutnya.

16:07Ini mirip-mirip sama ini.

16:09Waktu dulu sempat ada application frameworknya Svelte juga melakukan reload.

16:17Jadi bedanya adalah ketika linknya kita hover, itu dia melakukan reload.

16:23Hover baru pre-fetch.

16:26Keliatannya memang meta framework apapun built-in routernya pakai strategi yang ini ya.

16:32Kayak di Next.js juga kan ada next link itu pakai link komponennya Next.

16:38Dia kayak gitu.

16:39Mungkin si quick link ini memungkinkan, ya kan nggak semua orang pakai Svelte kita atau Next.js.

16:47Jadi mau yang pakai WordPress atau Drupal atau create track app biasa,

16:53pokoknya kalau di luar meta framework itu bisa dapatin behavior yang kayak gini.

17:01Tanpa harus pakai remix.

17:04Framework anostic.

17:07Jadi sekiranya seperti itu.

17:11Cuman kalau hover nggak enaknya di mobile kan nggak bisa hover.

17:14Iya juga ya. Benar juga ya.

17:17Kayaknya itu emang responsif deh kalau yang punya Next.js sama Svelte.

17:23Ya kalau di mobile sama kayak gitu kalau masuk viewport di revenge.

17:28Betul, betul, betul.

17:31Konceptnya mirip ya.

17:32Konceptnya mirip.

17:33Tapi ini stand alone.

17:36Stand alone.

17:37Ini stand alone kecil dan single purpose ya.

17:40Maksudnya nggak nempel sama framework apapun.

17:46Oke, ini ada load ke scriptnya berarti ini bukan menjadi API-nya si Chrome atau browser kan ya.

17:58Jadi tetap third party jatuhnya ya.

18:00Coba ulang pertanyaan yang gimana.

18:05Ini kan ada load quicklink.umd.js kan.

18:09Berarti ini bukan nggak akan disupport oleh browser kan.

18:13Bukan hanya browser dalam artian API browser.

18:17Dia hanya meng-enable API browser yang ada.

18:20Jadi API yang dipakai di sini ada dua.

18:23Intersection Observer.

18:27Terus kemudian Request Idle Callback dan Prefetch API.

18:31Oh Prefetch API-nya itu bawaan dari browser.

18:34Bawaan browser.

18:35Tapi untuk melakukan enable itu kita butuh import kan.

18:40Ini kayak rapper aja berarti ya? Kayak memudahkan aja?

18:43Rapper aja.

18:44Iya betul-betul.

18:45Hanya kayak listen, terus nanti dia akan jalanin event-nya.

18:49Sesuai dengan mendeteksi high-time email-nya itu aja.

18:53Sesuai dengan di intersection Observer.

18:55Kalau dia mendetek di intersection ada aharef.

18:58Bakal dia ambil aharef-nya.

19:01Dia prefetch.

19:04Semudah itu dia cara kerjanya.

19:06Seperti itu.

19:11Ada lagi yang mau ditambahkan?

19:15Itu aja. Sudah cukup.

19:18Tidak usah banyak-banyak dulu.

19:20Farid nih ada yang nanya sedang bahas apa.

19:23Tadi bahas Prefetch API ya.

19:25Jadi gimana caranya kita bisa menyulap aplikasi web kita yang multi-page application menjadi seperti single-page application.

19:34Seperti.

19:36Dia bisa mempercepat.

19:38Berikutnya Eka, silahkan.

19:43Nah ini mirip-mirip nih.

19:46Performance juga ngambil area-nya Ivan.

19:49Jadi ini ada artikel bagus.

19:52Ini menarik dan ini bikinannya Googler juga.

19:55Eddie Osmani dan ilustrator Libya Heli, kalau nggak salah.

20:00Ini patterns.dev ini website yang membahas pendekatan atau pattern-pattern yang ada di arsitektur round-end web.

20:12Nah salah satunya yang sering mungkin belakangan ini kita sering banget denger nih.

20:16Ini namanya Islands Architecture.

20:19Ini artiklenya panjang ya, lumayan.

20:22Ntar kalau temen-temen penasaran mau baca sendiri aja.

20:25Cuma intinya Islands Architecture ini adalah suatu filosofi atau pendekatan.

20:33Approach baru dalam menyosun arsitektur front-end web.

20:37Jadi ini yang di layar nih ada encourage small focus chunks of interactivity within server-rendered web pages.

20:46Nah maksudnya itu apa?

20:48Nah kita bayangin deh, ini pakai analoginya kan kepulauan.

20:52Nah kebetulan negara kita negara kepulauan juga kan.

20:55Jadi kita terbiasa nih, liat di peta nih, peta Indonesia bayangin lah.

20:59Ada laut kan ya, ada Samudra India, terus ada pulau-pulaunya.

21:04Nah dengan analogi ini, kalau diterapkan di aplikasi web front-end,

21:11seluruh wilayah Indonesia dalam hal ini, maksudnya seluruh wilayah geografis itu baik laut maupun darat, itu aplikasi web kita.

21:21Nah yang diibaratkan dengan pulau itu adalah bagian-bagian tertentu yang membutuhkan interaktifitas JavaScript.

21:32Jadi diibaratkan yang bagian laut-lautnya itu yang statik.

21:39Sementara ada pulau-pulau komponen user interface yang membutuhkan JavaScript.

21:46Nah kalau kita bayangin pulau ini kan, pulau ada yang besar, ada yang kecil.

21:51Terus mungkin masing-masing pulau ada iklimnya sendiri, ada kondisinya sendiri.

21:55Nah itu diibaratkan dengan komponen user interface.

22:01Terus kenapa bisa sampai ada teknik atau pendekatan seperti ini?

22:10Kita lihat tuh ada point 1 dan point 2.

22:13Nah dengan island architecture ini bisa menyeimbangkan 2 perspektif.

22:19Yaitu pertama ada CSR, client-side render, dan kedua ada SSR.

22:26Nah 2 approach ini sebetulnya punya keuntungan masing-masing.

22:31Jadi kalau CSR itu contohnya yang dulu banget ya, yang paling pertama muncul maksudnya misalnya kita pakai create-react-app atau semacamnya.

22:41Kan kita cuma punya shell HTML tuh, file index HTML-nya biasanya sangat sederhana.

22:47Cuma head, body, dalamnya 1 div kosong yang lalu nanti dehydrate.

22:53Kita harus nge-load sebuah file JavaScript entry point.

22:57Nah semuanya seisi halaman web kita itu seluruhnya dirender oleh JavaScript ke dalam div kosong itu.

23:06Nah itu tuh kan pasti punya beberapa kekurangan ya.

23:10Pertama pasti file JavaScript yang di-download ukurannya sangat besar karena semua-semua kodenya itu untuk merender seisi halaman web itu ada di situ.

23:22Nah yang kedua juga kan seperti tadi udah dibahas kan browser tuh punya satu main thread.

23:30Kalau harus ngerender DOM element dari awal semua nih dari tadi halaman kosong, 1 div kosong doang, sampai banyak, sampai ada isinya semua.

23:39Bahkan browser kerjanya jadi sangat banyak, itu main thread-nya juga harus bekerja keras dalam waktu lama itu kurang bagus untuk performance.

23:47Nah terus yang kedua nih tadi di, apa, setelah orang sadar kekurangan client-side rendering, ada approach lain yang namanya SSR, server-side rendering.

24:03Jadi semua DOM element-nya, HTML-nya dirender oleh server. Tapi ada masalah lagi nih kan dari server dikirim ke client.

24:12Nah terus ada bagian-bagian yang perlu dehydrate karena butuh interaktifitas atau mungkin ada konten yang harus berubah secara real-time.

24:22Nah sering nih yang terjadi adalah jadi harus kerja dua kali. Pertama apa, dirender oleh server, server render.

24:33Lalu tetap aja misalnya kita pakai yang paling sering misalnya Next.js atau Remix, kan tetap harus merender ulang.

24:41Kalau Next.js biasanya dia manggil JSON berisi isi halaman tersebut, lalu dihydrate ulang, dan komponennya direplace dengan hasil kalkulasi react runtime.

24:53Nah kadang itu juga menghasilkan atau menyebabkan masalah performance.

24:59Nah sementara kalau kita lihat nih isi suatu aplikasi seperti yang di layar itu, itu kan karakternya macam-macam ya, ada header, ada static menu, ada image carousel, product detail, dan lain-lain.

25:13Sebetulnya kalau kita lihat, tidak semua komponen UI itu perlu dihydrate dengan JavaScript.

25:22Nah dengan island architecture ini, kita memiliki kontrol yang lebih, kita bisa lebih fine-tune atau customized.

25:32Pertama, bagian-bagian mana saja atau ibaratnya pulau mana saja yang ingin kita hydrate dengan JavaScript, itu pertama.

25:41Lalu kedua, tingkat prioritas, kayak misalnya konten yang above default, pasti harus segera kita hydrate kan, karena itu sudah tampak muncul, udah dilihat oleh user.

25:54Ini mirip sama yang API-nya masih berhubungan dengan yang dibahas Ivan tadi.

26:00Sebetulnya kalau konten yang below default, kita bisa loading-nya belakangan saja, nunggu callback dari, apa tadi, request idle callback muncul.

26:11Kita bisa fine-tune sesuai kebutuhan aplikasi kita. Intinya dari island architecture itu seperti itu.

26:22Lalu sebetulnya island architecture sendiri itu kan tadi semacam filosofi atau pendekatan saja, tapi dia bukan belum masuk ke implementation detail.

26:33Nah detail implementasi atau penerapannya seperti apa sih? Itu kayak dikembalikan ke masing-masing framework.

26:41Jadi kalau yang kasus paling extreme, misalnya kita pengen manually hand roll semua, misalnya kita pasang saja, kita bikin web komponennya, kita bikin modul-modul,

26:54terus kita pasang intersection observer, terus kita juga observe request idle callback, terus kita menghydrate seluruh komponen kita secara manual berdasarkan behavior yang kita inginkan.

27:10Itu ya bisa, cuma mungkin sebagian besar developer nggak punya waktu dan tenaga sebanyak itu. Jadi pada umumnya sih orang menggunakan implementasi dalam bentuk framework yang sudah ada.

27:23Nah beberapa contoh framework yang menerapkan prinsip atau filosofi island architecture itu, dicontohnya ada Marko, terus yang paling baruni dan mungkin teman-teman sering dengar belakangan ini tuh ada Astro,

27:40lalu ada juga yang bikin integrasi, jadi kalau eleventy sendiri kan pure static, tapi ini ada yang bikin integrasi eleventy dan react untuk memperoleh behavior yang si island architecture seperti tadi.

27:57Kira-kira gitu. Kalau di artikel itu ada contohnya, contoh penerapan atau implementasi yang sederhana di Astro, itu sih sekedar contoh saja.

28:11Jadi misalnya kalau kita punya artikel atau blog post, artikelnya itu kan sendiri bisa dirender dari server site ya, dirender sebagai konten static HTML biasa aja, jadi yang dikirim dari server di awal mulai dari zero JavaScript.

28:27Karena isi artikelnya kan mark up seperti itu, tapi contohnya di artikel itu ada komponen atau pulau kecil yang butuh interaktifitas JavaScript, ya itu dalam bentuk kita bisa like atau dislike.

28:42Jadi ya udah, kita nge-load JavaScriptnya itu setelah dia muncul atau setelah browser main thread sudah tidak sibuk. Jadi intinya sih kita bisa dapetin the best of both worlds.

28:57Kita bisa dapet halaman yang SEO friendly, performennya bagus, dan lain-lain dengan konten HTML static, tapi kita juga bisa dapetin interaktifitas yang menggunakan JavaScript client-side.

29:12Apa yang terjadi ketika kita loading seperti ini, si JavaScriptnya kadang-kadang agak lambat, itu dia akan loading spinner dulu ya, berarti ya?

29:22Nah itu kita bisa, kita bisa customize sih, biasanya kan kita pakai placeholder ya spinner, atau malah kosong sama sekali.

29:31Cuma kalau above default itu nggak recommended ya, karena kan nanti jadi CLS-nya begitu dia loading kan jadiin dorong yang lain tuh, geser ke bawah semua.

29:42Jadi kalau above default, kita harus pastiin pakai placeholder yang ukuran atau dimensinya sama kayak kontennya.

29:50Tapi kalau di bawah sih ya, bebas. Geser gitu ya. Geser, ntar CLS kayak kemarin.

29:56Apa CLS? Kepanjangannya? Cumulative Playout Shift. Playout Shift, CLS, oke.

30:06Pro dan cons, performen sudah pasti kan? Oh iya, pro jelas, performen sih ya.

30:13Jadi sebenarnya sih kalau yang aku lihat nih, pro-nya ya standar lah. Maksudnya sesuai ekspektasi kita. Kan sebenarnya kita udah punya CSR, punya SSR.

30:22Nah, kita kayak memadukan keunggulan dari dua approach terhebut.

30:28Jadi benefit-nya ya apa, tetap bisa interaktif tapi cepat, dan kita bisa memprioritaskan konten yang kita butuhkan.

30:38Nah, cuma pastinya ada kekurangannya. Cuma yang aku lihat sini, kekurangannya lebih ke human factor-nya ya apa,

30:46factor penggunaan. Jadi kayak misalnya apa, kalau kita mau pakai ya, yang tadi itu, kita harus,

30:54ini kan karena customized banget ya, yang bisa mengontrol apa, yang bisa mengontrol mana yang harus dihydrate duluan,

31:02mana yang harus perlu dihydrate atau enggak, itu kan sangat subjektif tergantung aplikasi kita.

31:08Jadi ya kita harus pakai framework atau itu tadi kita hand roll semua sendiri dari awal.

31:14Lalu apa sih, mungkin karena relatif baru ya, jadi belum terlalu banyak nekonon,

31:21belum terlalu banyak diskusi tentang pendekatan ini. Terus kalau poin keempat sih ya, itu gimana kita lihat apa,

31:29gimana kita memahami produk kita kan. Misalnya nih kalau aplikasi kita semuanya,

31:35literally semuanya butuh client-side JavaScript, misalnya kita punya web-based game, kita punya game,

31:43atau aplikasi map, atau aplikasi apa... - Figma? - Sosial media.

31:47Pakai kanvas, ya Figma, pokoknya kalau emang dominan JavaScript ya, ini bukan solusi yang tepat

31:55buat aplikasi kita. Jadi itu lebih ke human factor ya, apa? Usage factor.

32:02- Oke. - Alaman memang rehydration itu adalah

32:07proses paling mahal untuk aplikasi JavaScript. - Mungkin bisa dijelaskan rehydration itu apa sih?

32:12- Oh ya, rehydration. - Oke, silahkan cek. - Kita punya markup HTML yang kalau berupa HTML

32:26pastinya masih statik kan ya. Nah, rehydrate itu ibaratnya disiram atau digelontor oleh JavaScript client-side

32:34yang ada event listener-nya mungkin, atau mungkin ada fungsionalitas misalnya nge-fetch konten,

32:41ya kayak misalnya like button, biasanya like button itu kan seringnya nampilin jumlah like yang sudah ada,

32:47atau mungkin ada avatar atau foto orang user sebelumnya yang sudah like. Nah, itu kalau pas awal kan

32:55mungkin hanya berupa button biasa dari apa, yang dikirim oleh server. Setelah dihydrate, setelah digelontor

33:03dengan JavaScript atau setelah apa, JavaScript dari konten itu, dari komponen itu berjalan,

33:12itu dia akan mereplace atau memodifikasi DOM yang sudah ada, yang tadi dikirim, yang sebelumnya dikirim dari server.

33:22- Oke. Jadi kayak dilanjutin ya, kerjaannya dilanjutin ya? - Iya, diberi interaktifitas.

33:30- Hmm, oke. Jadi dikasih layer tambahan untuk interaktifitasnya ya? - Iya, client-side JavaScript.

33:39- Oke. Kalau link yang kedua ini apa nih? Awesome. - Nah, link yang kedua itu masih berhubungan

33:45sama yang tadi. Itu kan tadi artikelnya masih di level apa ya, semi teori ya, penjelasan island itu apa,

33:53bla-bla-bla. Nah, cuma kalau kita ingin lihat penerapannya, itu ada beberapa contoh dari berupa framework,

34:00terus ada yang sebenarnya bukan framework, tapi misalnya berbasis react to, fresh itu bikinannya apa?

34:06Deno. Itu integrate sama Deno. Jadi ini lebih ke contoh bahwa si island architecture ini sekedar filosofi,

34:16penerapannya nggak terpaku pada salah satu language atau library atau framework apapun.

34:24Jadi misalnya bukan perkara react atau weld atau apapun, tapi lebih ke cara menyusun suatu aplikasi,

34:32lebih ke architecture. Itu ada yang berupa full meta framework, ada yang berupa library tambahan,

34:42bisa dipakai sama react, solid dan lain-lain. - Ada weld juga, kalau mau pakai weld,

34:51gampangnya pakai elder JS gitu ya, kalau nggak mau manual gitu ya. - Enak loh pakai elder JS,

34:57malah promosi framework. Pernah, pernah. - Oke. Mantap, mantap. Nah, berhubungan sama,

35:06masih berhubungan sama pembahasannya tentang EKA, nyambung nih. Saya mau membahas tentang Astro.

35:12- Yay, lanjut. - Yay, lanjut.

35:15- Astro baru ini kan? Baru apa? Baru launching. - Baru 1.0.

35:19- 1.0. Jadi sebenarnya awalnya Astro ini kalau gue lihat adalah dia seperti server-side,

35:27static-side generator SSG kan awalnya. Tapi ternyata lebih dari itu ya, ternyata ya.

35:35Jadi kurang lebih hampir sama, jadi si Astro ini menggunakan konsep si island,

35:41walaupun ya, dia sudah menggunakan kata-kata island di sini ya. Jadi kan kalau menurut EKA tadi

35:48dan menurut si Astro ini, website kita itu atau aplikasi web kita itu tidak 100% dinamis,

35:55kecuali ya tadi game atau Figma atau apa. Ada hal-hal yang tetap static kan,

36:00contohnya ini. Menu. Menu jarang sekali dinamis kan. Pasti bisa dibikin statis

36:09walaupun akan ada kemungkinan perubahan kan, tapi jarang sekali. Dan hal-hal seperti ini

36:15mungkin masih ada hubungannya juga dengan App Shell gitu ya. App Shell itu kan

36:21sudah static kan. Yang dinamis itu yang di dalamnya kan. Jadi mungkin perkembangan dari sana.

36:27Dan si Astro ini ingin menerapkan konsep island tadi ke framework-nya.

36:35Salah satunya yang dijual adalah ketika di load pertama kali by default itu

36:39JavaScript-nya zero atau kosong. Karena seperti yang sudah kita tahu sama-sama,

36:44kalau di web itu ada beberapa aset yang paling besar dan bikin loading-nya lama.

36:53Yang paling lama adalah image. Yang pertama image. Kedua itu font mungkin ya.

37:00Font yang ketiga itu JavaScript gitu. Jadi belum-belum baru landing page tiba-tiba

37:06sudah ada JavaScript yang segedegaban gitu kan. Padahal sebenarnya yang butuh interaksi

37:10sebenarnya mungkin di halaman lain gitu. Di halaman kontekah atau di halaman yang

37:16ada form-nya, ada button-nya dan lain-lain. Pada saat landing page sebenarnya belum

37:20perlu di load JavaScript. Jadi JavaScript-nya bukan benar-benar kita buat

37:24aplikasi web tanpa JavaScript. Tidak begitu. Tapi lebih ke di awal JavaScript-nya

37:29nol dulu. Tidak ada dulu. Ketika butuh interaksi, ketika kita sudah sampai

37:34scroll ke sini, nah itu dia baru load. Seperti preload tadi ya, kurang lebih ya.

37:39Konsepnya juga masih mirip-mirip ya. Kurang lebih seperti itu.

37:44Lebih tepatnya lazy load sih. Kalau preload itu artinya saat page load,

37:51bukan, sebelum page load, dia mengambil duluan. - Font biasanya itu.

37:56- Preload itu paling pertama. Ya preload itu paling highest priority itu preload.

38:00- Oke. Nah disini fitur utamanya ya inilah, sudah kelihatan ya. Component Island,

38:07yang tadi sudah kita bahas. Kemudian ada ngomongin hydration juga.

38:12Zero J is by default. Edge ready ini mungkin bisa jadi topik berikutnya ya

38:17tentang edge function gitu ya. - Nah bahas tuh.

38:20Gue nggak ngerti-ngerti soalnya. - Jadi intinya kita mau bawa

38:24fungsi-fungsi yang di belakang layar, kayak back-end gitu ya, itu dekat dengan,

38:30sedekat mungkin dengan pengguna. Jadi bisa nempel ke CDN lah, kira-kira kayak gitu.

38:36Ada Cloudflare Worker, ada banyak lagi yang lain. Si Versal juga punya,

38:42ada Deno juga, dan lain-lain. Kita bahas nanti di episode-episode berikutnya.

38:48Jadi tungguin aja. Subscribe, subscribe. - Oke.

38:52- Oke. Tadi juga sudah sempat dibahas di Island Architecture. Salah dua-duanya adalah

38:59namanya Quick. Ini juga cukup baru ya. Ini malah lebih unik lagi dalam artian,

39:04kita tadi ngomongin hydration, sementara Quick ini katanya tidak ada hydration.

39:08- Oh. - Gimana caranya?

39:12Nah itu, saya juga belum tahu, tapi ini menarik gitu ya. Dia sudah support

39:18otomatis lazy loading, jadi kita nggak perlu install apa-apa, ada image kah,

39:23ada apa dia bikinin lazy loading-nya, dan ada Edge Optimized juga,

39:27masih mirip dengan Astro juga. Dan yang menarik adalah yang bikin,

39:31mana dia? Oh nggak usah, ntar dulu. Ya ini ya, zero loading, katanya nggak perlu

39:36hydration, karena it is resumable, saya belum tahu ini resumable-nya kayak gimana,

39:42konsepnya ya. Jadi lazy loading-nya sudah by default, dan lain-lain bisa dibaca sendiri.

39:50Nah, yang saya mau highlight adalah yang bikin. Yang bikin ini.

39:55- Yang bikin angular ya? - Dispoiler pre ini adalah yang bikin angular.js.

39:58Saya nggak tahu, kayaknya dia bikin juga angular 2 ya, angular yang versi

40:03berikutnya ya. Dia bekerja di Google, mungkin sekarang sudah nggak ya.

40:07Terus, si ini, Manu, dia bikin, yang bikin Gin, framework-nya Goleng ya,

40:17kalau nggak salah. Terus juga stencil ini adalah framework untuk Web Component.

40:21- Web Component ya? - Ya. Dan yang ketiga, Adam itu dari Ionic.

40:26Jadi mereka kayaknya pecahannya angular ya. Ionic kan cukup populer di, apa?

40:34Ionic awalnya kan hanya support angular kan, walaupun sekarang sudah bisa semua kan.

40:38Jadi ini menarik, dan dengar-dengar juga, si Google itu sebenarnya punya

40:46framework internal yang tidak dipublish keluar, yang konsepnya adalah seperti ini.

40:51Seperti Island, seperti Astral, dan seperti Quake. Tapi tidak di open source dan

40:56tidak dipublish. Mereka pakai untuk web mereka sendiri. Begitu.

41:01Jadi cara kerjanya Quake ini, sedikit, yang saya tahu ya, karena saya baru baca-baca.

41:08- Siap. - Dia Hardtml, maksudnya yang JavaScript yang sudah di-hydrate itu,

41:18kan katanya no-hydration. Ya, memang betul. Jadi bisa scroll up,

41:23saya lupa namanya. Nanti saya salah ngomong, jadi ini lagi.

41:27- Semua si Huax. - Atas sedikit, atas sedikit.

41:32Oke, dia bilang that's summable. Jadi sebenarnya dia sudah secara HTML,

41:41di bagian server-side, dia sudah ngerender HTML-nya. Terus yang bagian JavaScript,

41:46yang event yang perlu di-handle itu, dia sudah simpan di data attribute,

41:52di attribute HTML-nya. Jadi dia tinggal replace.

41:57Oh, jadi bukan hydration kayak ekspektasi. Kita kan tadi si JavaScript-nya

42:03bikin atau mengkalkulasi DOM di-replace. Kita kan bayangin Hydrate gitu.

42:10Asil kalkulasinya sudah disimpan sebagai data attribute, sehingga data attribute-nya

42:14itu gede, tetapi karena data attribute itu tidak perlu dirender oleh browser, ya.

42:19- Iya, si browser-nya nggak kejauh lagi. - Jadi dia tinggal replace.

42:22- Oh, oke. Galaxy Brain approach-nya ini. - Ini yang lucunya, ya bukan lucu ya,

42:31agak sedikit menyedihkan mungkinnya buat saya. Maksudnya, saya tuh baru tau

42:37island stikler ya sekarang-sekarang ini. Tahu astrol memang sudah cukup lama,

42:43baru-baru tau ternyata astrol itu pakai island, kan. Dan hydration dan lain-lain

42:48juga baru-baru belajar, gitu kan. Eh, ternyata udah ada framework yang sudah

42:52menyelesaikan masalah di hydration. Hydration ini katanya lumayan kompleks,

42:57ya kan. Terus take several seconds juga, ada loading time-nya juga, kan.

43:05- Banyak banget. - Iya, dan lain-lain gitu kan.

43:09Yang menyebabkan performa-nya agak kurang, gitu. Dan sudah ada solusinya di Quick.

43:14Jadi memang itu tadi yang kita sempat ngomong di belakang layar framework JavaScript itu

43:20luar biasa ya perkembangannya, ya. - Jadi pengalaman saya dulu waktu kerja

43:26di sebuah project itu headless dan full pakai React application.

43:31Yang terjadi adalah dia news site, news portal, cukup gede. Dan tentunya

43:41kalau dibuild pertama itu kan kecil ya. Tapi makin lama-makin lama komponen

43:45makin banyak, terus kemudian feature makin banyak, tambah sini, tambah sana.

43:53Terus itu ininya apa namanya itu? High order komponen terus kayak sudah berlapis-lapis tuh.

44:01Hoc-nya itu bisa kayak berlapis-lapis, lapis-lapis. Dan akhirnya... - Oh pusingnya tuh.

44:05- Kan terus dia ada server-side karena butuh SEO, server-side rendering.

44:10Saya sampai pusing kepala gimana caranya apa tuh namanya, tree-shaking supaya

44:18di halaman home page ini dong. Belum ada, jaman itu belum ada Next.js teman-teman.

44:23Waktu itu jaman tahun 2000. - Jaman jangil liat ya.

44:27- Awal-awal liat lah ya, 2000. Saya bukan awal-awal banget.

44:32Tapi jaman itu Next.js belum se-mampu sekarang, secanggi sekarang.

44:38Jaman itu masih belum. 2017, 2018 lah. Nah, jadi belum ada Gatsby.

44:48Masih baru kayak pure application gitu. Nah kita bikin itu supaya,

44:54saya setengah waktu itu mahir main dengan webpack 4 atau webpack 4 gimana

45:00supaya optimization terus kemudian chunk-nya itu dipisah-pisah.

45:06Tapi at the end, pusingnya adalah saat dehydration dia itu butuh

45:12download semua chunk yang dibutuhkan itu supaya bisa melakukan hydration.

45:18Untuk download chunk itu segitu banyak. Mau pakai preload kan tetap aja preload.

45:22Kalau preload 1,4 megabyte ya tetap aja gede. - Iya, jadi memperlambat juga ya.

45:28- Ke Parsing 1.1 juga browser-nya kerja kan kalau chunk-nya terlalu banyak. - Iya, targetnya 600 kilobytes.

45:36Sudah sama image ya kan. Ini JavaScript doang, 1.4 megabyte coba.

45:44- Satu floppy disk itu. - Pusingnya adalah,

45:51belum ada yang namanya isiannya partial rehydration. Kan ada tuh ya.

45:57Kemudian React nggak bisa hydration mahal, terus kemudian Vue muncul,

46:03Vue mengeluarkan partial rehydration, akhirnya React support sedikit baru-baru ini partial rehydration.

46:13- Server component sekarang juga udah bisa. - Jadi...

46:17- React server component ya?

46:21- Jadi, sekarang saya lihat arah framework itu kaya island pattern ini.

46:27Kalau bisa first page load, no JavaScript. Itu yang betul.

46:33First page load, jadi gunakan environment atau gunakan sistem yang sudah ada dari browser.

46:41Banyak loh API-API browser, mungkin kita bahas minggu depan atau selanjutnya ya.

46:46Banyak banget API-API browser yang sudah menarik. Contohnya, intersection observer.

46:53Dulu kan kalau kita mau scroll, kita harus kaya, apa itu istilahnya? Get bound rectangle.

47:02Untuk tau intersection sekarang, intersection observer. Resize observer.

47:09Kalau screen-nya di resize, bisa otomatis. Container view, di CSS juga sudah ada container.

47:19Kemarin kita bahasa. - Container query.

47:22- Container query, udah canggih. - Ada back-forward cache juga.

47:29- Oh ya, cache. - Itu juga, gue belum belajar tuh back-forward cache.

47:36Ada nggak sih framework yang wrapping di atas API-API ini? Yang murni dari wrapper-nya untuk ini aja.

47:48Karena kan kalau kita pakai satu-satu, capek juga kan? Harus setup satu-satu kan?

47:52- Harus digantung kebutuhan atas. - Sebenarnya sih, makin kesini kayaknya

47:57makin banyak metaframework yang pakai native web API, ya. Jadi kayak misalnya, remix, ya.

48:06Astro juga. Jadi Astro itu kan, kalau kita pakai UI, pakai swell, triac, atau pakai JavaScript-based component,

48:17kita tuh bisa pakai direktif namanya client, client idle, client visible, sama kalau yang default sih langsung di-hydrate.

48:26Nah, kalau di Astro nih, si client idle dan client side idle dan client side visible ini juga sebetulnya itu nge-wrap web API.

48:37Jadi idle itu tadi, request idle callback, visi dari intersection observer.

48:44Jadi kayaknya sih, dengan makin bagusnya browser interoperability, jadi apa, web API udah mulai banyak diadopsi di browser-browser,

48:53kayaknya trend framework dan metaframework dengan sendirinya makin streamline mungkin ya.

49:00Daripada dia bikin sendiri baru, dia pakai spesifikasi yang udah ada, karena user pun udah familiar.

49:08- Yes. Tapi kadang-kadang kebalik. Jadi ide muncul awal ide-nya itu adalah dari framework biasanya.

49:17- Oh. - Preload misalkan. Oh ini, apa namanya, oh JSX kan. Dulu sempat ada wacana katanya JSX masukin dong ke Chrome atau ke browser gitu kan.

49:26Jadi kita nggak preloading kan ada gitu kan. - Eh nggak jadi ya tuh ya.

49:29- Jadi sebenarnya yang ngedrive si web API yang ada di browser, salah satunya juga framework kan.

49:36- Ya juga. - Web itu komunitas, Mas.

49:40Komunitas web. Web itu komunitas yang ada di seluruh dunia dan kita itu tergabung dalam sebuah ekosistem yang namanya web.

49:48Dan sebenarnya web itu adalah hanya halaman yang disimpan di mesin yang lain yang terhubung dengan network.

49:57Ya kan? Bener ya? - Betul.

50:01- Komunitas terbesar di dunia adalah komunitas web. Pengguna web.

50:10- Iya. Walaupun kalau dari sisi bisnis, kadang-kadang orang tuh cukup sering berpendapat, berasumsi kalau sebenarnya lebih apa ya, prioritasnya tuh lebih ke mobile. - Tergantung bisnisnya juga sih.

50:31- Atau familiaritas dari user, kalau yang user awam kan terbiasa nginstall dari Play Store, App Store ya. Tapi itu kan udah mulai bisa diadres dengan TWA.

50:42- Ya.

50:45- Belum lama yang gak kedengeran tuh TWA. Gimana nasibnya tuh? Udah mature ya? Yang penting kalau buat web jadi Play Store. - Yang pake sih tetap ada gitu, maksudnya udah gak diomongin lagi, pake-pake aja gitu.

51:03- TWA, sekarang ada Trusted Web App, itu jadi kayak apa? Ya sebenarnya kayak Android Web View tapi yang lebih powerful lah. Jadi kita tetap nge-deploy web biasa, udah bisa diinstall dari Play Store.

51:18Kalau secara performa dan secara apa ya, API-API yang kan kadang-kadang Android ataupun iOS itu kan ada butuh akses kamera lah atau apa gitu. Itu aman semua.

51:33- Ya, tetap pake permission sih. Permissionnya web. Jadi ya flow-nya sih sama aja. Kita yang handle aplikasinya yang handle UI untuk munculin dialog permission.

51:50- Hmm, oke. Nah ini ada yang menarik juga nih, tambahin dikit ya.

51:59- Apa tuh?

52:01- Ini Astro, dia bahas tentang MPA versus SPA. Ini bisa jadi topik kita.

52:06- Nah nyambung dong, asik ya nyambung. Topik kita semua nyambung.

52:09- Banyak sekali ya topik kita ya. Kita harus catat nih. Topiknya banyak sekali yang akan kita bahas. Karena lucu ya, jadi tren itu berputar kan dari awalnya memang MPA, awalnya kan multi-page application gitu kan.

52:23- Server-side MPA, jadi kayak Laravel, Rubion Rails ya kan. - Terus abis itu bergeser kan trennya ke SPA. Semua server SPA kan.

52:33- SPA dan Pure Client, client render kan dulu pas awal-awal react.

52:38- Oh bahasa kerennya, headless, headless, headless gitu ya. Semua headless, tiba-tiba trennya headless.

52:45- Terus abis itu setelah SPA-nya dirasa performanya kurang bagus, balik lagi ke MPA lagi. Walaupun MPA-nya udah plus-plus ya, udah beda dengan MPA jaman dulu ya.

52:56- Udah banyak API-API, salah satunya yang tadi, salah duanya yang dibahas Ivan di awal tadi, bisa menyulap dalam tanda kutip multi-page application menjadi seperti, seolah-olah seperti SPA. Secara performa juga jauh lebih cepat, sehingga user itu paling sulit untuk disuruh menunggu kan.

53:17Kalau nggak ada respon selama beberapa detik udah di-close aja tuh tab-nya, segampang itu. Makanya kita harus baik-baikin tuh si user gimana caranya supaya dia tidak kabur.

53:29- Gantung kontennya, Mas. - Gantung kontennya. Kalau kontennya apa? Clickbait gitu ya.

53:36- Kalau kontennya manis. - Kalau kontennya jelek ya nabur.

53:40- Kalau kontennya banyak gulanya, loh kok gula lagi. - Nanti bisa nggak sih, awas.

53:48- Kalau si multi-page app ini, Astro itu kan multi-page app, dia belum punya single client-side router kayak Next dan lain-lain.

53:58Tapi Astro ini kan point of view-nya emang pengen pakai web standar. Jadi dia pakai, bukan si Astro-nya sendiri, cuma ada orang yang pengguna Astro yang bikin eksperimen.

54:12Itu tadi pakai Shared Element Transition API yang tadi dibahas Ivan Skilas, dikombinasikan sama pre-fetch halaman, dikombinasikan dengan Astro.

54:27Jadi intinya dia bikin MPA rasa SPA. Jadi emang Astro itu emang sangat perspektifnya itu tadi menggunakan web API yang sudah ada untuk improve performance.

54:42Jadi mengurangi kerja si JavaScript yang kayak di React Router atau Library Router tradisional, jadi dia lebih ke web API untuk optimasi performance.

55:00- Kalau bisa, saya lihat trendingnya ke depan, sebisa mungkin pakai environment atau native-nya dari browser itu sendiri.

55:10Jadi native-browser-nya yang development-nya makin kencang. Saya lihat banyak banget API baru muncul.

55:19- Remix-nya ini sama seperti remix juga kayaknya ya si Astro ini juga.

55:26- Emang belum pernah pakai remix tuh? - Iya. Kalau Astro ini kan sudut pandangannya sedikit berbeda. Kalau Astro ini dia lebih dari HTML CSS.

55:40Kalau butuh JavaScript, baru ditambahkan. - Dan itu islands per komponen. Kalau remix di level aplikasi ya dia?

55:48- Di level aplikasi JavaScript. - Optimasinya. - Iya, optimasinya. Terus kemudian menggunakan API web yang ada.

55:59- Kalau remix itu menariknya di form-nya justru yang gue lihat. Dia punya itu komponen form sendiri kan.

56:07Dia punya komponen form dengan perspektifnya sama. Kayak itu kalau kita pengen hydrate dengan JavaScript, kita opt-in.

56:18Tapi by default, komponen form bawaan remix itu menggunakan web API untuk form. Jadi itu bisa dibikin full server side.

56:27Jadi dia malah jadi kayak Laravel atau Ruby on Rails atau semacamnya. Jadi by default itu HTML, HTML only menggunakan web API yang udah ada.

56:38Tapi kalau mau kita bisa opt-in untuk hydrate dengan JavaScript. - Terus kalau yang gambar-gambar gitar ini apa?

56:48- Itu contoh transisinya. Coba diklik. Cuma flag shared element transisinya udah di-enable atau belum tuh?

57:00- Belum. - Kalau belum ya nggak bisa. - Ini masih loading ya? - Ini nih. - Ya, nggak bisa.

57:08- Bentar, ini flag-nya nih. Lokasi di private chat. Tapi harus reload browser ya. - Oh reload ya, mana? - Iya.

57:21- Namanya adalah document transition. - Dokumen transition. - Belum ada ini. - Maksudnya pakai edge. - Edge berapa Chrome? Oh belum ada, dia harus Chrome 104. Chrome 104.

57:38- Belum, belum masuk. - Ada kanari ya kanari? - Nggak usah kenari. Chrome biasa asal pakai flag.

57:52- Ini flag-nya aja belum ada. 105 versi 105 belum ya? - Iya, udah kok. - Udah harusnya. - Dokumen transition nggak ada. - Chrome 104 adanya. - 105, nggak ada.

58:09- I use. - Defect. Defect tuh John John versinya. - Coba di masukin stream saya. - Oh ya, sorry. - Oke. Tadi Astro Music ya.

58:26- Tuh, bisa gitu tuh. Wih keren. Terus dia lazy load juga nih. Cuyung. Wih. Serasa SPI ya. - Ini SPI ya? Oh wow. - Iya, MPA, pure MPA. Cuma pakai web API itu tadi shared document transition.

58:48Kita lihat ininya. Kita lihat load-nya biar sah gitu ya. Kita kan web. Tuh. Bener nggak ini? Tuh, bener tuh. Dia nge-request tuh. - Oke. - Kita coba yang lain.

59:08- Itu ada countdown di atas itu buat apa ya? - Supaya ngasih tahu kalau ini nggak pindah halaman. - Oh, nggak pindah halaman. - Bukan, bukan. Supaya ngasih tahu kita nggak pindah halaman.

59:19Karena kalau di-reload kan jadi nol lagi. - Nol. Jadi behavior-nya beneran kayak client-side routing padahal dia pakai, ya, apa? Ah, ref, anchor, eh, elemen biasa ya. Cakep. - Ini, ini. - Oh, nice.

59:39- Ya, they load, they load fragment nih. Oh, menarik ini untuk di kulik lagi, ya. - Nah, cuma ngomong-ngomong flag nih, apa, ada nggak sih yang bisa kita kerjain, kita lakuin sebagai developer biar mempercepat si flag ini, apa, feature ini diadopsi oleh browser lainnya.

1:00:03Kayak misalnya kita file, kita mungkin ada apa gitu, isu atau apa di browser lain, +1. - Ikut di web konsorsi, pasti ada.

1:00:14- Ya, maksudnya kita ramai-ramai bilang, please dong browser lain, please adopt, apa, shared element transition ini secepatnya. Pengen nggak sih bisa pakai itu tadi semua, apa, kalau ini kan sebenarnya cuma demo untuk nunjukin API ini bisa dipakai buat apa sih.

1:00:32Tapi kan realistically, masih bakal lama banget kan sampai kita bisa beneran pakai ini, dapetin behavior kayak gini tanpa install library tambahan yang berat.

1:00:44- Kayaknya bisa. Kalau nggak salah kan kita di invite, ada di GDE meeting tuh soon. Kan pasti bakal ada, kalau nggak salah di bagian Fugu, Fugu kali ya, Fugu API ya.

1:00:59- Oh iya, kita +1 yang banyak gitu. Nah, kalau ini kan sebenarnya dia udah beyond RFC ya, maksudnya ini kan udah masuk di Chrome, terus standarnya juga udah ada di Chromium,

1:01:17tapi kan terserah untuk masing-masing browser untuk mau mengadopsi atau nggak. Nah, berarti kita tuh kayak harus nge-spam, apakah kita harus nge-spam browser-browser lain, please, please dong masukin API ini, kita pengen pakai, ini berguna, ini bagus, dan lain-lain.

1:01:33- Kalau untuk khususnya untuk yang dokumen transition ini, nggak tahu ya secara web consort SIM, dia sudah, kan masih draft ya, spesifikasinya ya. Kalau khusus transition ini, dia masih draft spesifikasinya.

1:01:49Jadi, masih butuh waktu yang panjang. Masih di diskusi nih bahasannya. - Ah, oke. Ya, sedih. - Tunggu-tunggu. Kalau lo pengennya ini bisa, apa namanya, pengen ini jadi kenyataan, ya kan?

1:02:13Bisa nih ikut di specification, dan developer feedback is really important. - Oh, important. - Kita bisa bantu, kita bantu tes. Kita bantu tes dan kita bantu bikin isu.

1:02:29Itu satu. Kedua, coba-coba kita ikut ke consort SIM ini. - Tapi kan ini mostly Chrome, kan? - Nggak, ini W3 standard. No, no, no.

1:02:47- Dia kan, pertama kan, memang ini lahirnya dari Chrome, dari CJ Archibald sih. Kan sudah dibikin spesifikasi, dibikin, no, no, no.

1:02:59Kalau sudah di-approved dulu di web standard, tuh, draft-nya aja baru update, 2022. Jadi, kalau ini sudah, udah clear semua dan jadi web standard, sudah di-approved nih, masuk nih,

1:03:16jadi web standard, baru web browser lain, adopsi, jadi masih lama nih ceritanya. - Sedih.

1:03:32- Tapi bisa bantu untuk ngetes kalau memang kita pengen banget, gitu.

1:03:39- Kalau salah satu caranya ini, kan, buat kontribusi ke GitHub-nya atau ke draft-nya atau ke request for comment, kan.

1:03:50Kontribusi lain adalah bikin itu, bikin use case yang akhirnya mereka mempercepat, ya itu tadi bikin framework.

1:04:01Loh, katanya. - Loh, found. - Sebegitu, absolutely replace. Loh.

1:04:11- Ayo, udah nggak ada. - Pindah kali, paling pindah. Apa, ganti URL?

1:04:19- Tapi ya, sebenarnya bagusnya, walaupun ini bakal masih lama, sampai kita bisa pakai yang demo, kayak yang demo kita lihat tadi, bagusnya kan web itu selalu backwards compatible by default.

1:04:33Jadi, walaupun si shared element transition API itu belum supported pun tadi, ya kita klik, kita tetap bisa navigasi ke halaman satunya, kan, karena itu fallback-nya adalah, apa, encore a-ref, elemen a-ref biasa, jadi nggak masalah.

1:04:53Sementara kalau misalnya kita bergantung PureJS, misalnya kita pakai React Router atau semacamnya, kalau belum supported, ya udah nggak bisa pindah halaman, runyem, kan.

1:05:03- Ini minimal bisa pindah halaman meskipun counter-nya ke reset, ya maksudnya. - Ke reset dan nggak secakep, nggak se-WOW yang versi shared element API-nya.

1:05:17- MPA. Semi-MPA. - MPA rasa S-P-A.

1:05:23- Wah, kita udah sejam lebih loh. - Iya, nggak terasa.

1:05:37- Mau main? - Oh iya, buat teman-teman yang mau kasih bantuan untuk topic diskusi atau link-link menarik atau pertanyaan-pertanyaan seputar web, bisa langsung aja di-submit.

1:05:55Di-submit di komentar, kalau lagi live, di-komentar, tapi kalau misalkan lagi tidak live, misalkan teman-teman nonton yang recording, yang rekamannya, bisa ke bit.ly/ngobrolinweb, ya.

1:06:07Bisa di-submit aja di situ, topik-topik yang mau dibahas. Tadi kita udah banyak banget bahas tentang, apa, tentang...

1:06:15- Yes, quickly. - Iya, private sama tadi, apa, request idle. - Idle callback. - Ya, beberapa web API. - Request idle callback. - Yes. Terus juga bahas tentang island architecture dan beberapa framework yang berkaitan dengan island architecture.

1:06:29Tadi juga udah sempet muncul beberapa idle, bahas tentang MPA versus SPA, terus juga ada bahasan tentang edge function, ada apa lagi tadi ya. Itu harus kita catat dan harus kita jadikan topik-topik berikutnya.

1:06:46Kritik dan saran juga bisa ya, kirimin ke sini aja. Siapa tahu teman-teman punya apa ya, "Wah, ini kayaknya formatnya ini lebih bagus kalau ditambahin segmen ini, segmen ini." Kita akan terima sekali karena ini baru 2 episode ya, baru 2 episode.

1:07:02Dan kita sendiri juga masih belum tahu formatnya yang bagus kayak gimana, jadi kita cuman ya udah ngobrol aja, ngobrol santai. Kalau ada apa, ada yang mau demo-demo dikit, boleh. Kalau nggak, ya kita ngobrol aja, gitu. Karena kembali lagi, tujuan kita adalah untuk up to date, supaya tetap up to date.

1:07:21- Kami kita sendiri juga update. - Belajar satu sama lain. - Betul, karena di pekerjaan kita masing-masing sudah mulai menggunakan web API atau framework atau apapun, library, yang itu-itu saja.

1:07:39Belum ada, misalkan yang baru-baru kayak apa, tadi query, CSS query apa, ya itulah banyak ya. Container query dan lain-lain. Nah itu kita belum sempat pake, gitu.

1:07:53Dan kalau kita mau bahas itu di sini, sekalian belajar, gitu. Kalau nggak, kita nggak ada kesempatan belajar. Jadi, terima kasih buat temen-temen yang sudah hadir, yang sudah nonton, ditunggu juga.

1:08:09- Ada yang mau jadi apa, mau ngobrol sama kita juga boleh. - Bintang tamu. Featuring. Collab. - Benar. Mungkin ada yang mau ditanyakan langsung atau ada yang mau kasih pendapat tentang satu topik, silahkan.

1:08:25Dan untuk malam ini, kita sudahi dulu, karena sudah jam, sudah satu jam kita ngobrol. Mudah-mudahan kita ketemu lagi di lain kesempatan. - Minggu depan. - Mudah-mudahan minggu depan kita usahakan.

1:08:40- Itu aja untuk malam hari ini. Terima kasih dan selamat malam. - Terima kasih semua. - Bye bye.