Ngobrolin Astro - Ngobrolin WEB

1:29Waktu masih

1:31balik aja kemarin itu suara saya,

1:33mungkin sekarang masih, suaranya belum

1:35balik 100%

1:37Event dari sana udah

1:39udah nge-drop.

1:41Pas lagi kesana aja udah nge-drop.

1:43Nyampe,

1:45ya itu gara-gara ah, nggak tau lah.

1:47Terus nyampe.

1:49Gue nggak tahu, kebanyakan makan leis,

1:51rasa timun, sama makan

1:53susu goreng, nggak tahu lah.

1:55Gue juga sakit tenggorokan

1:57gara-gara jajan aneh-aneh.

1:59Untung langsung.

2:01Susu goreng.

2:03Itu yang kami bawain itu ya?

2:05Waktu dimakan lambian itu ya?

2:07Iya.

2:09Iya.

2:11Oke.

2:13Suaranya belum balik, akhirnya

2:15minggu lalu saya

2:17meminta izin.

2:19Israhatkan badan, israhatkan suara.

2:21Saya dan istri saya nggak ngomong.

2:23Nggak ngomong hanya.

2:25Terpaksa nggak ngomong

2:27pakai bahasa isyarat.

2:29Oke, akhirnya kita bisa

2:37live lagi, ya nggak live ya.

2:39Kita bisa rekaman lagi karena

2:41ya karena saya ada kelas juga,

2:43kelas malam, jadinya nggak bisa.

2:45Selasa malam itu ada kelas.

2:47Jadi terpaksa rekaman

2:49mungkin dalam 1-2 minggu ke depan.

2:51Mudah-mudahan kita bisa latih lagi nanti

2:53di minggu 3 ya.

2:55Habis itu selasa depannya lagi,

2:57murid-muridnya suruh nonton ini aja.

2:59Extra credit nanti.

3:01Siap, siap, siap.

3:05Oke.

3:07Kita mau ngomongin random atau ngomongin topic?

3:09Tadi di random,

3:11sekarang topic lah.

3:13Topic sapalas.

3:17Malam hari ini kita akan bahas

3:19tentang salah satu framework yang bisa dibilang

3:21yang cukup

3:23menjadi kemenang ya

3:25waktu di normal.

3:27Oh iya, oh iya ya.

3:29Seperti kemarin kan lumayan

3:31selain usage-nya

3:33lumayan banyak.

3:35Cuma, sebenarnya usage-nya masih kalah banyak

3:37dari beberapa framework lain ya.

3:39Cuma sentimennya positif.

3:41Jadi orang-orang yang pakai itu

3:43senang, termasuk saya.

3:45Kau punya 2 framework

3:47favorit saya?

3:49Satu, udah pernah dibahas ya RedBoot kayaknya waktu itu.

3:51Yang kedua ini,

3:53baru sekarang ngebahas.

3:55Dan selama ini, kira-kira udah pernah.

3:57Ternyata belum ya.

3:59Dekup sering disinggung, tapi belum pernah dibahas

4:01secara mendalam.

4:03Ya.

4:05Yaitu,

4:07Astro.

4:09Astro Boy.

4:11Survey dulu. Disini, temen-temen

4:13yang tau Astro Boy,

4:15selain saya dan Irfan.

4:17Oh itu indikasi,

4:19itu jubahkan umur juga ya.

4:21Jubahkan umur.

4:23Astro Boy.

4:25Dulu nonton

4:27movie-nya atau

4:29baca bukunya?

4:31Ada comic-nya.

4:33Kartun, kartun.

4:35Ada comic-nya, ada kartun ya.

4:37Saya baca comic-nya malah duluan.

4:39Iya, emang ada comic-nya.

4:41Sebelumnya ada comic-nya, abis itu ada kartunnya.

4:43Terus kayaknya ada live-action-nya.

4:45Ada,

4:47ada yang animasinya 3D ya.

4:493D-nya ada.

4:51Yang paling ingat saya, dia punya

4:53senjata.

4:55Profesor-nya gitu.

4:57Ya itu reset kan.

4:59Iya, kayak loncat atau apalah gitu.

5:01Buat take over.

5:03Ini jam sini

5:05nonton, minum doang.

5:07Apaan ini om-om?

5:09Beras kartun aneh.

5:11Namanya juga random.

5:15Jadi Astro ini adalah salah satu

5:17front-end, ya front-end,

5:19meta framework.

5:21JavaScript framework.

5:23Ada apa, dia jalan di back-end

5:25dan di front-end.

5:27Tapi punya apa ya?

5:31Punya keunikan.

5:33Berbeda dengan, apa,

5:35dengan beberapa framework.

5:37Buka perkenalan homepics-nya.

5:39Zoom in seperti biasa.

5:47Oh, zoom in.

5:49Baiklah.

5:51Oke.

5:53Ini

5:55apa sih?

5:57Sebenarnya Astro itu, ada yang bisa menjelaskan nggak

5:59tentang Astro itu apa?

6:01Astro itu meta framework.

6:03Ya sebetulnya

6:05framework, meta framework itu kan semi-buzzword ya.

6:07Maksudnya bukan istilah teknikal

6:09yang strik banget, tapi yang

6:11sering disebut dengan meta framework

6:13ya seperti ini.

6:15Web meta framework

6:17berbasis JavaScript.

6:19Ya, gitu.

6:21Intinya adalah meta framework.

6:23Maksudnya, dia take care

6:25routing, kayak routing

6:27terus, apa, misalnya

6:29handle, rendering mode,

6:31data fetching, ya apa ya?

6:33Templating,

6:35hal-hal yang kita expect,

6:37misalnya, setaranya

6:39secara fungsi, itu

6:41kinect.js,

6:43shellkit, jadi, apa, nanti kita

6:45bakal bahas soal UI framework-nya

6:47sendiri, tapi kalau Astro sendiri

6:49positioning-nya itu. Web

6:51sekarang full stack meta

6:53framework.

6:55Ya, latar

6:57belakangnya mungkin ya, sedikit latar

6:59belakang, Astro ini dimulai dari

7:01yang ini ya, content-based,

7:03jadi kayak CMS.

7:05Dia biasanya digunakan

7:07untuk bikin block, ada

7:09markdown-nya, terus

7:11nanti dia akan otomatis, bisa

7:13apa, static site generation

7:15juga kan, SSG juga kan ya? Sekarang

7:17udah bisa hybrid, nah, dulunya emang

7:19pertama kali banget, baru static

7:21doang.

7:23Kayak Jackill dulu, pro jaman

7:25dulu, Jackill. Kayak Jackill, kayak

7:27Gatsby, betul.

7:29Mas awal-awal banget.

7:31Iya, terus abis itu berkembang,

7:33sampai sekarang

7:35kayaknya Astro sudah

7:37sekarang udah SSG, SSR, hybrid

7:39juga bisa, udah bisa semua.

7:41Apapun yang di Next.js

7:43bisa, Astro bisa.

7:45Dia tetep mempertahankan

7:47content-driven websites ya.

7:49Kira ini bakal diganti gitu.

7:51Enggak, entah

7:53sebenernya kalau kenapanya, nggak tahu ya,

7:55karena misalnya, ya

7:57kok bukan bagian dari itunya mereka,

7:59cuma lihat dari di Discord,

8:01kadang kan suka ada apa,

8:03pertanyaan,

8:05content-driven, itu kan

8:07lawan katanya yang ad

8:09banget ya, jadi ada webpage, webpage itu

8:11biasanya misalnya yang lebih ke content,

8:13ada juga web app yang

8:15lebih ke misalnya

8:17interactive, dan banyak

8:19line site interaction, ada yang

8:21nanya, misalnya sering ada yang nanya apakah

8:23Astro bisa dipakai buat

8:25keperluan seperti itu.

8:27Entah kenapa, marketing message-nya

8:29adalah

8:31Astro itu fokusnya untuk content-driven

8:33yang butuh SEO, yang lebih banyak,

8:35maksudnya walaupun ada interactivity-nya

8:37kayak like, comment, atau semacamnya,

8:39cuma lebih ke content-oriented,

8:41tapi sebetulnya secara teknis

8:43ya nggak ada hal yang

8:45membatasi.

8:47Jadi, misalnya

8:49cuma load 3 component

8:51yang isinya full

8:53interactivity ya boleh-boleh aja sih,

8:55cuma mungkin positioning ya

8:57kalau dilihat sekilas.

8:59- Oh.

9:01Websitenya Netlify ya dibuat

9:03pakai Astro ya?

9:05- IDX.dev juga pakai Astro?

9:07- Iya.

9:09- Kayaknya sih Google tuh banyak yang

9:11demen Astro deh, itu Firebase juga

9:13marketing sama blocknya,

9:15marketing site sama blocknya Firebase

9:17juga di Astro tuh?

9:19- Padahal kan

9:21kontributor Google banyak

9:23yang ngerjain Elevante, kenapa

9:25dia nggak pakai Elevante?

9:27- Bahkan beda orang kali.

9:29Cuma itu nggak kenapa,

9:31Astro itu kayaknya sekali coba,

9:33terus jadi pengen pakai terus.

9:35Ya nggak tahu, ini

9:37observasi subjektif ya, cuma maksudnya

9:39buktinya orang-orang itu yang punya

9:41banyak off-sea line,

9:43itu juga pada pakai Astro jadinya.

9:45- Plus, kalau company segede

9:47Google belum tentu loh, itu yang

9:49ngerjain internal Google-nya

9:51bisa jadi agensi.

9:53- Bisa. - Karena

9:55yang tim Google sendiri

9:57kan misalnya urus

9:59IDX ya, core timnya ya

10:01taunya cuma urus IDX-nya.

10:03Nggak bisa nyiasin.

10:05Dan kalau misalnya mau bikin

10:07tampilan depannya, mungkin ditanya

10:09timnya, ada nggak yang bisa bikin

10:11marketing site pada geleng

10:13semua ya udah pasti, dia nggak bisa

10:15ambil dari tim lain

10:17untuk membuat, misalnya kayak tim

10:19Elevante yang untuk membuat

10:21site-nya nggak bisa, itu udah cross-team.

10:23Kemungkinan besar mereka

10:25pakai, mereka

10:27pakai budget-nya untuk cari external

10:29agensi.

10:31- Misalnya differential-nya firebase, pasti

10:33kan bikarnya kan buat bikin demo-demo

10:35content firebase kan, maksudnya

10:37kalau bloknya

10:39sendiri dibikin pakai apa, ya udah

10:41kayak prioritas

10:43selanjutnya lah.

10:45- Saya, saya tahu begitu

10:47karena pernah jadi

10:49pernah kerja untuk

10:51agensi yang

10:53mengerjakan projeknya Google, jadi ya

10:55memang ada lebih itu

10:57caranya.

10:59- Jadi ASTRO kayaknya

11:01- Kelihatannya salah satu itu deh

11:03agensi itu, maksudnya salah satu target

11:05audience-nya ASTRO

11:07ini, kan mereka harus bikin

11:09banyak apa

11:11website yang content-orientated

11:13serata kan, kalau agensi

11:15langsung buat demo-demo

11:17marketing kan

11:19mudah

11:21di-customize tuh, termasuk yang

11:23di kanan tuh.

11:25- Server-first, content-driven dan

11:27customizable. Server-first

11:29berarti server render ya

11:31maksudnya ya.

11:33- By default, ya by default

11:35semuanya server render, kita bisa

11:37opt-in untuk client render.

11:39- Okay.

11:41- Wow. - Nah, yang mungkin

11:43sedikit berbeda adalah

11:45arsitekturnya, mereka

11:49kabarnya menggunakan

11:51island-architektur ya.

11:53- Salah satu dari, ya

11:55mungkin udah, sekarang udah mulai

11:57ada beberapa ya web framework

11:59yang pakai island-architektur. - Apa itu island-architektur?

12:01- Nah, boleh jelaskan. - Nah, kita dulu pernah bahas ya.

12:03- Episod 1.

12:05- Ya. - Episod 1.

12:07- Episod 1.

12:09- Ya, jadi

12:11apa sih? Tempet.

12:13Ada penjelasannya di block-nya harusnya.

12:15Cuma, nanti aja.

12:17- Di block?

12:19- Iya, episode 1 kita

12:21ngomong island-architektur.

12:23- Cuma di astro,

12:25di dokumentasi astronya juga ada

12:27di somewhere.

12:29- Ada di halaman depan.

12:31Salah, salah.

12:33Core concept di

12:35documentation.

12:37Di dokumentasinya.

12:39Kita ga ada dokumentasi ya.

12:41- Terus, itu core concept.

12:43Astro island.

12:45- Biar ada ilustrasinya deh.

12:47- Ada gambarnya

12:49dibawah. - With history.

12:51- Pioneer and popularize

12:53ya, mengklaim bahwa

12:55mereka yang mempionir

12:57dan mempopularkan

12:59architektur front-end

13:01yang disebut island.

13:03Yang kita bahas dulu di episode

13:05berapa? 0? 1?

13:07- From Fondant Island was first coined

13:09by Etsy front-end architect

13:11at the Tyler Miller

13:13in 2019.

13:15General idea from island

13:19architektur is deceptively simple.

13:21Render HTML pages on server

13:23and inject as holder

13:25or slot around highly dynamic

13:27regions.

13:29It can then be hydrated on the client

13:31into small self-contained widget

13:33for reusing their server

13:35and their initial HTML.

13:37- Jadi dari server, kiri markup

13:39HTML, kan sebetulnya

13:41yang kita bahas sekilas tadi

13:43sebagian besar halaman web

13:45kan ga semua bagiannya

13:47interaktif dan butuh

13:49banyak JavaScript ya, terutama

13:51kalau jenis-jenis kayak marketing, landing page,

13:53blog, yang kayak

13:55text-textnya, text, gambar

13:57ya udah, itu kan bisa dirender

13:59di server, dikirim semua sebagai

14:01HTML markup.

14:03Cuma ada bagian-bagian tertentu

14:05yang butuh interaktivity, client-side

14:07interaktivity, misalnya yang paling sering

14:09kayak like button, load comment

14:11buat nge-fetch comment,

14:13atau buat kirim form yang kayak gitu-gitu

14:15tuh, kayak ditandain

14:17secara khusus. Nah, dikirim

14:19masih berupa

14:21placeholder sementara yang masih

14:23disabled, baru di-hydrate

14:25istilahnya di-hydrate atau

14:27digontor dengan JavaScript client-side

14:29pas udah di-browser.

14:31Jadi apa, itu

14:33bisa meng-improve performance kan

14:35karena ga semua

14:37diproses di-browser

14:39dan lebih

14:41apa, lebih ideal buat

14:43SEO, user experience. Masalah utama

14:45masalah utama SPA

14:47kan hydration.

14:49Iya, betul.

14:51Nah, itu

14:53kan satu ya, salah

14:55satu apa namanya

14:57keunikan dari

14:59framework Nostro

15:01keunikan berikutnya adalah

15:03zero-login, artinya

15:05temen-temen bisa menggunakan

15:07front-end framework yang temen-temen

15:09favoritkan. Misalnya

15:11mau pake React, bisa pake

15:13Vue, bisa React

15:15sama-sama React, JSX juga

15:17self-spelt, ada solid juga.

15:19Dia menaungi, menaungi semua agama ya.

15:21Iya.

15:23Agama. Gak semua,

15:25baru ini, baru ini.

15:27Kan 5 besar, 5 besar.

15:29Anggular ga ada, anggular.

15:31Anggular ga ada.

15:33Anggular digucilkan.

15:35Nggak, apa, lagi-lagi ini marketing

15:37ya, pokoknya sebetulnya ga zero

15:39juga sih, kan soal routing,

15:41soal apalah kayak

15:43asyitektur yang globalnya ya,

15:45kalau kita udah terenggur pake Astro

15:47misalnya, kalau mau pindah

15:49ke meta framework lain ya,

15:51ga zero juga kan, tetep harus

15:53ada effortnya, tapi dari segi

15:55UI component, emang yang

15:57fully agnostik.

15:59Dia ga peduli, dia ga peduli componentnya apa

16:01aja kan, template-nya kayak apa

16:03terserah sih, dia bakal hanya

16:05ngerender aja.

16:07Tapi ini kan hanya sebatas

16:09UI component kan,

16:11fitur-fitur lain, enggak kan,

16:13misalkan kayak use state gitu,

16:15ada enggak? Bisa enggak?

16:17Use state kan dari React, asal

16:19dipanggilnya dari dalam React

16:21component, itu jalan.

16:23Jadi ya itu bisa.

16:25Tapi fiturnya juga berarti ya?

16:27Iya. Nah, cuma kalau yang udah

16:29advanced kayak React server

16:31component, itu keliatannya

16:33di support-nya sebagian, enggak

16:35full. Nah, exactly gimana, belum nyoba sih.

16:37Cuma kalau ngomongin

16:39secara umum, kayak React

16:41ya dengan segala macem hooks-nya,

16:43bisa asal didalam React

16:45component. Begitu juga dengan swell.

16:47Swell misalnya ada store ya,

16:49store yang

16:51pakai dollar sign itu,

16:53bisa dipersiskan dollar misalkan.

16:55Atau semacamnya apapun,

16:57fitur swell, apapun,

16:59jalan, asal dipanggil dari

17:01component swell, dan misalnya

17:03di satu astrosite,

17:05entah gimana, kita pakai

17:07lebih dari satu UI framework

17:09nih, dicampur, itu bisa

17:11cuma kalau yang pentingnya,

17:13misalnya, tadi misalnya

17:15React, ada context

17:17atau swell, ada store,

17:19itu ya cuma bisa disaling

17:21baca ya di component

17:23yang seagama,

17:25yang satu jenis,

17:27tapi bisa di kombinasi semua.

17:29Itu contoh, island architecture-nya

17:31tuh yang by button tuh, dikasih client

17:33load tuh, jadi cuma

17:35yang di hydrate itu cuma yang

17:37button,

17:39button itu aja, sisanya

17:41servo side rendering.

17:45Ini contoh syntax-nya ya,

17:47jadi dia menggunakan, apa istilahnya

17:49ini, front matter ya, pakai

17:51tiga dash ya,

17:53tiga tanda minus gitu,

17:55itu artinya apa tuh?

17:57Front matter.

17:59Kalau istilah

18:01itu syntax-nya

18:03Astro.

18:05Kalau dispel kan, biasanya

18:07pakai script kan,

18:09buka script, tutup,

18:11terus disini kan template-nya.

18:13Nah, kalau di Astro itu

18:15ini bagian JavaScript-nya,

18:17ini bagian

18:19JSX-nya, template-nya.

18:21Iya.

18:23Jadi, kalau misalkan ini kan

18:25ada product nih, product-nya disini

18:27kita define, dia bisa dapat disini.

18:29Nah, related

18:33sama component, buka deh

18:35link yang dicat soalnya, apa?

18:37Masih setema

18:39sama ini.

18:43Nah,

18:45jadi ini introduction

18:47soal, mereka

18:49pakai termanya framework

18:51components, UI framework

18:53integration.

18:55Nah, jadi yang disupport secara resmi

18:57itu tuh, yang di screen.

18:59React, swell,

19:01view, solid, alpin,

19:03lid. Nah, cuma mereka

19:05membuka semacam API,

19:07plugin, kalau mau bikin

19:09unofficial integration boleh,

19:11jadi kalau ada yang mau

19:13bikin integrasi angular, mungkin ya

19:15nggak tahu bisa atau nggak.

19:17Ya, itu dibuka untuk

19:19community plugins.

19:21Sama

19:23balik ke framework component tadi deh.

19:25Nah, apa?

19:31Scroll down ke bawah.

19:33Oh, bisa.

19:35Nah, ini, using framework

19:37component. Nah, ini cara import-nya.

19:39Sama,

19:41kalau misalnya kita cuma

19:43masukin, apa,

19:45render component-nya as is,

19:47kayak si My React component tuh yang

19:49di highlight, itu akan

19:51SSG.

19:53Jadi, dirender di server.

19:55SSG?

19:57Static Site United?

19:59SSR.

20:01Jadi, tadi makanya di

20:03marketing, di landing page-nya,

20:05tulisannya server

20:07site by default, ya.

20:09Jadi, ini

20:11by default akan dirender

20:13dari server si My React

20:15component-nya.

20:17Karena emang, apa,

20:19filosofinya gitu. Kadang kan,

20:21kalau orang belum tahu kan, bingung

20:23jadinya.

20:25Jadi, selain UI

20:27framework yang apa,

20:29UI framework yang bisa dipakai itu

20:31bermacam-macam, mulai dari

20:33React file dan lain-lain, Astro juga

20:35sendiri kan, ya.

20:37Kalau temen-temen masih belum punya preferensi,

20:39pakai .Astro.

20:41Itu kita pakai syntax HTML

20:43polosan, bisa vanilla HTML.

20:45Jadi, kita kopas dari HTML

20:47mana pun, atau kita nge-tick HTML

20:49manual, bebas.

20:51Nah, itu stage pertama. Tapi gimana

20:53kalau kita butuh client-side interactivity?

20:55Itu opt-in. Nah, itu di section

20:57dibawahnya tuh.

20:59Oh, client-side.

21:01Nah, itu

21:03misalnya kita butuh. Jadi, apa,

21:05itu kayak filosofinya

21:07Astro sih. Kayak

21:09yang, tau kan, yang HTML purist

21:11gitu loh, yang apa,

21:13yang mindset

21:15web yang

21:17pure, yang HTML, CSS, vanilla

21:19by default. Ya, kalau bisa pakai

21:21HTML, nggak usah HTML dan CSS,

21:23nggak usah JavaScript client-side,

21:25ya udah, pakai aja

21:27HTML, CSS. Makanya dia bisa zero

21:29JavaScript by default, ya. Jadi, bisa aja

21:31kalau web.

21:33Ya, kalau web kita nggak membutuhkan JavaScript

21:35sama sekali, nggak ada interaksi,

21:37nggak ada di, cuman

21:39landing page aja, nggak ada

21:41font bahkan. Ya, dia

21:43hanya HTML, CSS aja berarti.

21:45Nah, jadi opt-in

21:47kalau kita butuh, misalnya button yang

21:49client-side interactivity, like button

21:51atau whatever lah. Nah, itu

21:53itu contohnya kan bisa

21:55import mouse weld lah,

21:57JSX.

21:59Ya.

22:27Pernah-pernah.

22:29Oke,

22:41seperti contohnya, smelt ya.

22:43Media co-edit.

22:57Pertama, dia pakai web API lain lagi

22:59yang namanya request idle

23:01callback. Mungkin kalau yang

23:03kalau kita ngulik

23:05performance tuh mungkin pernah ketemu

23:07API itu deh.

23:09Jadi, itu tuh event yang

23:11ngefire waktu main thread-nya

23:13udah bebas. Main thread kan

23:15memproses macem-macem lah di awal.

23:17Begitu dia bebas,

23:19ngefire

23:21ada punya request idle callback gitu.

23:23Jadi, itu pure web

23:25API. Jadi, Astro ini web

23:27API-minded banget sih sebetulnya.

23:29Web standar ya web standar.

23:31Contoh, contoh

23:33barang yang pernah

23:35saya pakai request idle callback ini untuk

23:37ngerender burger menu.

23:39Burger menu yang

23:41diatas itu kan

23:43ada transition,

23:45ada apa,

23:47di dalam burger menu itu kan ada

23:49komponen yang harus dirender secara

23:51client-side.

23:53Maka, dan itu gak butuh-butuh

23:55amat di page load. Dan gak butuh-butuh

23:57amat saat

23:59kalau pakai intersection on server gak bisa juga

24:01karena dia muncul di atas.

24:03Awal. Jadi, gak bisa.

24:05Jadi, paling cocok adalah

24:07request idle callback. Jadi,

24:09nunggu aja sampe semuanya kelar.

24:11Begitu ada tenaga dan waktu

24:13luang ya sempatnya.

24:15Sesempatnya.

24:17Kan jarang juga ya user

24:19begitu page load

24:21langsung berubur-ubur pencet burger menu.

24:23Ya, saatnya dia

24:25pencet ya dia

24:27yaudahlah, nunggu aja sabar kenapa sih.

24:29Kali ini cuma

24:311-2 user yang langsung pencet.

24:33Nah, benar.

24:35Maksudnya, ini kan

24:37ini keliatannya sih selama ini

24:39orang awam bahkan developer

24:41awam yang gak terlalu ngulik

24:43web API atau performance kan

24:45relatif jarang yang keliatannya.

24:47Nah, senang sih

24:49liat Astro mempopulerkan

24:51web API yang begini-gini maksudnya

24:53jadi kepake. Cuma

24:55di sisi lain jadi malah mungkin

24:57belum tentu semuanya mempelajarin

24:59juga sih apa yang ada dibalik

25:01fiturnya Astro. Cuma maksudnya

25:03senang aja. Jadi, salah satu faktor

25:05yang bikin tambah senang sama

25:07Astro karena mereka emang

25:09mendalami fitur-fitur web API banget

25:11dan diadopsi untuk

25:13memperkayasi meta framework

25:15mereka. Jadi, fitur itu tetap

25:17kepake.

25:19Ya, web API yang

25:21juga dipopulerkan baru-baru

25:23ini ya itu ya apa?

25:25Transition.

25:27View Transition mereka yang pertama

25:29mereka yang pertama

25:31integrate fitur

25:33View Transition.

25:35Bukan Next ya?

25:39Bukan Next malah

25:41kayaknya sampai sekarang belum ada

25:43official support deh. Cuma ya

25:45sudah. Eh, SpellKit ya.

25:47SpellKit sudah.

25:49Tapi yang paling pertama itu Astro.

25:51Astro. Ya, ini kan

25:53View Transition. Katanya Next itu kan

25:55Bleeding Age.

25:57The Next Thing. Kok nggak?

25:59Nggak duluan sih.

26:01Next Thing of React.

26:03Oh, Next Thing of React.

26:05Kalau Astro,

26:07Next Thing-nya Web API.

26:09Dan, ya

26:13selebihnya sih hampir-hampir sama ya.

26:15Kayaknya, beberapa framework

26:17juga sudah menyediakan. Udah ada DevTool

26:19baru juga yang cukup membantu.

26:21Jadi, bisa diklik untuk

26:25ini ya.

26:27Apa? Untuk

26:29audit, untuk setting, untuk

26:31apa lagi?

26:33Isinya apa aja sih?

26:37Ada opsinya

26:39Accessibility lah. Cuma

26:41Next.JS itu

26:43ada plugin-nya juga.

26:45Atau nggak, nggak tahu. Intinya sih buat

26:47kayak Inspek, routing-nya,

26:49path-nya, parameter-parameternya.

26:51Next.JS itu malah nggak ada ya.

26:53DevToolbar yang sedetail itu.

26:55Next.JS nggak ada.

26:57Tapi Nux kayaknya ada.

26:59Nux lebih lengkap kayaknya.

27:01Kalau lihat

27:03toolbar-nya Astro, malah jadi

27:05ingat punya-nya Laravel.

27:07Yang debug mode-nya

27:09itu kan di bawahnya ada

27:11semacam kayak gitu sih.

27:13Nah, terus ngomong-ngomong early adopter, ini

27:17menariknya Astro sejarahnya tuh

27:19salah satu creator-nya

27:21itu dia yang bikin

27:23snowpack atau gimana?

27:25Itu snowpack bukan dia?

27:27Itu yang?

27:29Yang awal.

27:31Paling kiri,

27:33paling kiri.

27:35Yang kecamata dekat

27:37Astro docks, terus kemudian

27:39ada kacamata.

27:41Itu bukan surma ya?

27:43Kira surma.

28:07Dia membekukan project snowpack.

28:09Terus dia ngadopsi.

28:11Dia salah satu early adopter hit juga

28:13untuk meta framework.

28:15Salah kasih nama sih kayaknya.

28:17Gara-gara kasih nama snow

28:19jadi beku.

28:21Beku, dibekukan.

28:23Tapi maksudnya dia dengan sukarela

28:25membekukan projectnya sendiri gitu loh.

28:27Karena dia lihat, oh, bit ini

28:29release width baru ini pokoknya

28:31udah memenuhi dan kelihatan ya

28:33udah to the future, ke depannya

28:35ngikutin ini aja.

28:37Dia merasa inferior

28:39kali ngeliat,

28:41wah udah capek-capek bikin gini doang.

28:43Ternyata fit lebih hebat, lebih bagus gitu.

28:45Jauh. Ya udah deh,

28:47pake aja deh.

28:49Nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nuh, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih

28:51Buka blog postnya yang mengingat bahwa

28:53mereka apa?

29:05Mereka ngerjain, misalnya ngerjain bikin snowpack,

29:07bagi kita itu bagus.

29:09Terus kita bikin metaframe work yang

29:11pake snowpack.

29:13Terus ya kan mungkin orang lain bakal

29:15punya ego atau apalah,

29:17berat buat pindah.

29:19Kalau ini idealisme ya, idealisme.

29:21Ini praktikal banget

29:23bahwa setelah dilihat-lihat,

29:25we ran some early experiments,

29:27blah-blah-blah,

29:29apa, pokoknya, wah ini bagus ya,

29:31udah, pindah aja.

29:35Enggak.

29:37Enggak.

29:39Memang ingin

29:41merging ini aja.

29:43Dari pada dia setengah mati bikin snowpack juga,

29:45orang fit juga,

29:47setengah mati bikin fit juga,

29:49toh, itunya sama.

29:51Kenapa

29:53orang ladybird bisa bikin

29:55terus ya? Meskipun ada

29:573 browser lain, dia bikin sendiri.

29:59Anyway, udah, out of topic.

30:01Browser baru ya?

30:03Oh iya, itu pasakan browser

30:05feature topic aja.

30:07Nah, cuma, masing-masing guys,

30:09si mas snowpack ini, yang lulus blog post

30:11ini, itu jadi fokus di Astro.

30:13Jadi, maksudnya,

30:15in the end,

30:17bagi developer biasa, kayak kita,

30:19yang ngerti pakai aja, ya,

30:21ini outcome yang bagus banget sih.

30:23Fitnya tetap jalan, dan bagus,

30:25teaming dengan baik, terus kita dapet

30:27meta framework yang bagus.

30:29Astro.

30:33Jadi, dia bisa lebih fokus

30:35ngerjain produk, bukan ngerjain

30:37tools ya?

30:39Ini juga menarik ya,

30:41ternyata dia pakai web assembly

30:43untuk melakukan kompilasi.

30:45Compilernya ditulis di Go.

30:49Dan bisa jalan di browser.

30:53Semua teknologi baru,

30:55terutama yang berurusan sama web,

30:57dia adopsi,

30:59mereka adopsi.

31:01Wow.

31:03Oke.

31:07Itu 2021 ya?

31:09Kalau nggak salah, si

31:11masperate ini, ada di Twitter nggak ya?

31:13Kalau nggak salah, dia

31:15CEO of

31:17HTML, kalau nggak salah, dia

31:19nyebut dirinya itu.

31:21Nah, itu, apa, kayaknya, Astro

31:23emang positioning-nya yang HTML

31:25banget, walaupun tetap bisa bawa

31:27UI framework lain.

31:29Oh,

31:31Astro tuh ada tweet yang lucu,

31:33kok, bentar.

31:35Jadi, mereka sering ditanya

31:37kenapa nggak

31:39bikin blink element.

31:41Terus, ponenya, jawabannya adalah

31:43kan udah ada element

31:45A, A element,

31:47anchor element, nggak butuh.

31:49Nggak perlu blink element lagi.

31:51Tapi kalau emang pengen, kalau emang butuh,

31:53ya bikin aja di UI

31:55framework favorit masing-masing.

31:57Nah ini,

31:59CEO of HTML.

32:01Beneran, emang nggak ada?

32:05Nggak lah.

32:07Terus dia nge-fans banget sama HTML

32:09gitu.

32:11CEO of

32:13HTML.

32:15Oh, ini.

32:19To the haters asking where our blink

32:23component is.

32:25Let no import, lighthouse will approve.

32:27Link. Ini menyerang

32:29Next.js nggak sih?

32:31Nggak sih, cuma

32:33pada minta, kenapa nggak

32:35bikin blink

32:37element. Karena mungkin ekspektasi

32:39developer lain kan kayak Next.js

32:41atau apa, ngasih blink element, link

32:43component, dan disangka itu

32:45keharusan ya. Padahal kan nggak

32:47udah ada anchor element.

32:49Iya.

32:51Tapi ini,

32:53ini juga

32:55jebakan umur juga nggak sih?

32:57Kalau developer yang

32:59Gen Z atau Gen Alpha, tau nggak sih

33:01referensi world art yang modelnya

33:03kayak gini?

33:05Microsoft World

33:091998.

33:11Microsoft World,

33:13world art ya.

33:15Bagi generasi tersebut, lo lihat ini

33:17kan langsung ketahuan, langsung inget

33:19world art aslinya.

33:21Jadi penasaran

33:23yang framework-framework

33:25yang menggunakan konsep seperti

33:27link ini selain Next.js, apalagi?

33:29Apa ya? Kayaknya...

33:31React?

33:33React? Nggak.

33:35Oh,

33:37React Router.

33:39Ada.

33:41Iya, React Router, iya.

33:43Berarti,

33:45berarti kalau React Router,

33:47iya, berarti

33:49remix juga dong?

33:51Iya, mungkin lihat.

33:53Coba aja, remix,

33:55link, component.

33:57Iya, remix ada tuh.

34:03Tapi lebih ke dunia React sebetulnya ya.

34:05Ecosistem React, maksudnya

34:07yang ada ekspektasi,

34:09ada link, component.

34:11Iya.

34:17Justru sebenarnya,

34:19iya.

34:21Gimana lanjut-lanjut?

34:23Astro sebetulnya provide

34:25client-side routing juga sih.

34:27Cuma yang nggak usah pakai link, component, ya dia

34:29hijack aja anchor

34:31element semua A yang

34:33ke Integ Router,

34:35ya dihijack buat client-side routing, udah gitu

34:37doang, selar kan.

34:39Jadi tetap nggak perlu link, component.

34:41Tapi kayaknya yang pertama kali

34:43yang mempopulerkan, ya walaupun

34:45nggak dibikin memes, yang pertama kali

34:47mempopulerkan, nggak usah pakai link

34:49kayak gini, kayaknya Svelte awalnya.

34:51Awalnya ya.

34:53Mungkin sebelum Astro ada.

34:55Karena dia nggak perlu ini juga, kan.

34:57Sempat disebut-sebut juga,

35:01tapi nggak sempat jadi memes.

35:03Iya, karena nggak

35:05jadi memes, jadi nggak.

35:07Kurang keci.

35:13Oke, terus

35:15apa lagi yang menarik?

35:17Dari Astro. Nah, ini ada

35:19update terbaru ya dari Astro

35:21di 17 Agustus

35:232 hari yang lalu.

35:25Iya, udah versi 4 aja.

35:27Terakhir pakai

35:29fasi berapa, Mas?

35:31Terakhir,

35:334.0 kayaknya, 4.0 sekian.

35:35Belum 4.14.

35:37Dia kalau upgrade, upgrade

35:41dependensi, upgrade ini gampang nggak sih?

35:43Atau susah?

35:45Kalau minor gampang.

35:47Kalau major nggak tahu ya.

35:53Cuma major

35:55belum ada code mode-nya.

35:57Belum ada ya.

35:59Oke, yang 4.14

36:03khusus yang update 4.14 itu

36:05dia ada content layer API.

36:07Ada IntelliSense

36:09content files.

36:11Ini apa IntelliSense?

36:13Baru lihat

36:15sekilas di blog post ini tadi

36:17barusan banget. Jadi di markdown

36:19markdown

36:21parameter-nya bisa di

36:23IntelliSense.

36:25Jadi ada

36:27apa? Jadi ada

36:29sintaksan lighting.

36:31Keliatannya cuma

36:33harus bentuk

36:35bentuk datanya kayak gimana.

36:37Ada

36:39oke, ada linternya

36:41gitu ya kira-kira ya.

36:43Nah ini juga menarik nih

36:47secara performance. Maksudnya

36:49dia membandingkan dengan dirinya sendiri

36:51yang sebelumnya, versi sebelumnya, bukan

36:53membandingkan dengan framework lain. Ya, di depan

36:55ada sih, bandingin sama framework lain sih.

36:57Ya ini ya.

36:59Cuma ini menarik ya.

37:01Baru pernah lihat sih yang bandingin sama

37:03diri sendiri.

37:05Jadi dia bandingin sama versi

37:07sebelumnya. Jauh lebih cepat

37:09dengan versi sendiri. Jadi

37:11dia tidak apa ya, nggak

37:13cari musuh lah gitu ya.

37:15Oh, karena

37:17dia ngecompar

37:19untuk satu fitur. Maksudnya cuma

37:21fitur. Fitur khusus

37:23EDIA doang ya.

37:25Iya, iya, iya.

37:27Ini

37:29versi 4.14, update-nya segini.

37:31Oke, ini yang terbaru ya.

37:35Kalau versi

37:37sebelumnya, versi 4.13

37:39ada apa?

37:41Request rewriting, content collection,

37:43JSON schema, logging improvement.

37:45Terus,

37:49apa nih, what new in Astro

37:51in July, server island.

37:53Oh dia, island

37:55accelerator itu berarti di client ya?

37:57Yang selama ini udah aja kan

37:59di client. Terus mereka nyoba

38:01di server.

38:03Belum, nggak tahu, belum nyoba sih.

38:05Ya, kita baca sama-sama, yuk.

38:07Ini?

38:09Emang bisa ya? Gimana caranya?

38:11Configure

38:13on-demand server rendering

38:15output mode

38:17with an adapter.

38:19Belum coba sih,

38:21cuma, nggak bayang

38:23juga. Hybrid or server

38:25adapter node.js

38:27experimental server island.

38:29Adaptor-nya tuh,

38:31maksudnya hosting target sih,

38:33kita bisa pilih node.js,

38:35Excel, Netify,

38:37dan lain-lain. Ya, nggak mungkin kita pilih

38:39Rust atau Go, gitu ya.

38:41Nggak ada ya.

38:43Ini runtime-nya, runtime-nya.

38:45Avatar server

38:49devr.

38:51Outer page tetap berhendar.

38:53Island content omitted.

38:59Terus, cuma script

39:01avatar-nya digatakan script tag.

39:03Setelah

39:05halaman-nya di loading,

39:07script tag-nya bakal bikin

39:09server-side request.

39:11Wow.

39:13Jadi, kayak

39:15ini ya,

39:17model kayak lazy loading,

39:19gitu ya, berarti ya?

39:21Kayak SSR, tapi lazy.

39:23Susulan gitu. SSR-nya,

39:25SSR terpisah, gitu ya.

39:27Ya, kayaknya.

39:29Masih belum ngerti, loh, konsepnya, loh.

39:55Ini jadi minta tanya,

39:57gimana ya?

39:59Server island

40:03fullback content.

40:05Nanti coba aja

40:07cek ada demo-nya atau nggak.

40:09SVG slot fullback.

40:11Oh, pakai slot ya, slot fullback.

40:13Class generic

40:15avatar.

40:17Ada RFC-nya.

40:19Ini masih eksperimental,

40:21berarti ya?

40:25Oke.

40:27Nggak ngerti sih, belum ngerti cara kerjanya

40:43gimana, belum kebayang.

40:45Harus dicobain sih ya.

40:47Ada demo-nya nggak tuh?

40:49Discussion-nya.

40:51Oh, discussion.

40:53Ya, sample.

40:55Coba.

40:57Ah, harus jarang nih.

41:03Ya, belum ada

41:05itunya ya.

41:07Live demo-nya di StackBlitz

41:09atau semacamnya.

41:11Belum.

41:21Oke, menarik-menarik.

41:23Tapi

41:25apa tujuannya?

41:27Mempercepat server side

41:29render gitu?

41:31Udah buka blog post-nya,

41:33belum kelihatannya lebih dijelasin dengan

41:35lebih apa?

41:37Lebih dengan

41:39kata-kata yang lebih keci deh.

41:41Ini kan tadinya

41:43emang di sini kan? Eh, emang

41:45di blog post nih.

41:47Bukan, ada yang blog post

41:49ini, ya.

42:19Personal content, personalized.

42:21Masing-masing user isinya beda.

42:23Currently you must

42:25choose one caching strategy

42:27untuk semua jenis content itu.

42:29Kalau user login

42:33personalized berarti nggak bisa ada caching.

42:35Tapi kalau pakai server island

42:37bisa.

42:39Oh, karena ada cookies

42:41atau semacamnya apa ya?

42:43Server island digunakan untuk

42:47content yang paling dinamis.

42:49Misalnya personalized user,

42:51aka card, shopping card,

42:53product review.

42:55Oh, terus jadi

42:57page shell-nya bisa

42:59pakai caching strategy yang berbeda dengan

43:01si server island itu.

43:03Oh, gitu.

43:05Users, entah login atau

43:09tidak, bisa melihat

43:11bagian-bagian page yang paling

43:13penting bisa langsung karena di

43:15caching.

43:17Pullback content akan muncul

43:19sasaat, tapi dynamic

43:21server side island-nya

43:23di fetching

43:25tersendiri,

43:27independent from the rest.

43:29Menarik.

43:35Jadi bisa,

43:37ini bisa solve masalah

43:39ini banget ini untuk e-commerce.

43:41Iya, kan masih shell-nya

43:43terus menu

43:45navigation,

43:47fitur-fitur standarnya

43:49di caching.

43:51Iya, kan sama buat semua orang.

43:53Ini namanya partial

43:55cache dulu.

43:57Kalau saya ngakalinnya

43:59dulu, dia pakai partial cache.

44:01Jadi yang di cache itu cuma

44:05per template,

44:07template-template.

44:09Shell.

44:11Jadi, ya, shell-nya

44:13waktu dikirim itu,

44:15gimana dulu itu ya?

44:19Susah sih waktu itu.

44:23Jadi,

44:25contohnya,

44:27situsnya membership.

44:31Ya, kan? Situsnya membership untuk

44:33bisa baca content

44:35itu harus login.

44:37Ya, kan? Nah.

44:39Tentunya, kalau

44:41misalnya login itu kan mengakibatkan

44:43itu kan menjadi

44:45kontennya nggak bisa di-cache

44:47by default.

44:49Karena lain-lain, masing-masing user.

44:51Masing-masing user beda.

44:53Shipping card-nya lain.

44:55Jadi, sebenarnya Astro ini

44:57solve masalah itu.

44:59Menarik.

45:01Nanti gue mau baca, ah, tuh, blognya

45:03gimana cara mereka solusi.

45:05Bawahnya dong. Itu kayaknya

45:07menarik deh benchmarking-nya.

45:09Yang bagian

45:11performance.

45:13Mereka bikin server

45:21dash-islands.com buat

45:23ngedemo-in. Terinspirasi

45:25demo partial pre-rendering-nya

45:27Next.js.

45:29Nah, dia bikin benchmark

45:35dan

45:37ini ya Astro ini.

45:47Next.js.

45:49Ini ya.

45:51Yang ini Astro.

45:55Oke.

46:05Mungkin bakal kelihatan

46:07Seatless.

46:09Seperti Safari, nggak bisa.

46:11Ya udah, kapan-kapan coba

46:13nanti abis ini coba

46:15sendiri, masing-masing.

46:17Soalnya tadi

46:19buka pakai Chrome

46:21restart terus, jadi

46:23maksa harus pakai Safari.

46:25Oke. Menarik ya.

46:29Perform Consistently.

46:33FCP-nya lebih cepet ya.

46:35FCP-nya juga lebih cepet. Semua lebih cepet.

46:39Wow.

46:41Yang paling signifikan ini yang bawah ini.

46:47Jauh sekali.

46:49Bukan.

46:55Dia hanya melod.

46:57Iya. Minimal

46:59minimal hydration.

47:03Bukan.

47:05Pre-rendering.

47:33Mungkin, nggak tahu itu

47:35meminimalisir,

47:37mengimprove total blocking time juga

47:39atau nggak ya?

47:41Jadi cocok buat e-commerce

47:49tapi kurang cocok untuk social media.

47:51Iya, karena social media banyak.

47:53Karena social media semua dinamik ya.

47:55Lebih banyak dinamiknya.

47:57Tapi kalau e-commerce

47:59cocok banget.

48:03Memang khusus untuk ini dia kan.

48:05Dia udah bilang untuk konten.

48:07Konten, generate.

48:09Berarti sekarang udah full support ya?

48:15Udah nggak eksperimen lagi ya?

48:17Eh, nggak tahu masih eksperimental

48:19atau nggak tadi tulisannya.

48:21Kayaknya masih eksperimental deh.

48:23Maksudnya biar user kalau mau

48:27ya harus opt-in. Tadi ada flag-nya

48:29kan kayaknya tadi yang didox itu.

48:31Eksperimental kan di 4/12.

48:334/14 belum ya?

48:35Nggak tahu.

48:39Oh iya, masih itu sih.

48:43Tadi didokumentasinya masih iya.

48:45Gimana caranya dia bikin begini

48:47apa teknisnya?

48:49Bisa nggak kita

48:51kita...

48:53Ulit?

48:55Kita porting ke

48:57PHP plus JS.

49:01Tapi harus ada

49:03connector

49:05yang nyambungin

49:07ke server-side?

49:09Anggap aja JS

49:11yang di server-side-nya diganti PHP.

49:13JS yang di lokalnya tetap JS.

49:15Gitu kan.

49:17Gue jadi pengen ngulik.

49:19Karena kalau bisa gue pengen...

49:21Kan open source semua. Cari aja pomodnya.

49:23Pengen nge-solusiin.

49:25Nge-solusiin ini.

49:27Iya.

49:29Nge-solusiin ini ke PHP-base.

49:31Whatever.

49:33Nggak penting mau WordPress atau whatever.

49:35Jadi akustik ya?

49:37Iya.

49:39Nah ngomong-ngomong akustik.

49:41Ini si server island-nya

49:43Astro juga itu kok. Apa?

49:45Nggak

49:47login ke service apapun.

49:49Jadi bisa mau pakai Fersel.

49:51Mau pakai Node.js ya terserah.

49:53Coba ah.

49:55Belanja dah.

49:57Menarik.

49:59Menarik, menarik.

50:01Partial pre-rendering.

50:27Diskusi di RFC-nya.

50:29Mereka punya satu repo khusus.

50:31Isinya diskusi doang.

50:33Dokumentasi dengan baik ya.

50:39Mereka tuh niat banget

50:41ngulis detail-detailnya.

50:43Biasa... Bukan biasanya sih.

50:45Stereotipticly kan.

50:47Kalau programmer, developer, males kan

50:49ngulis bahasa manusia panjang-panjang.

50:51Algo langsung moding aja. Cuma

50:53kalau mereka ini kayak effort banget buat

50:55communicate dengan detail.

50:57Apa lagi yang bisa di-highlight dari

51:11Astro?

51:13Ecosistemnya.

51:15Ecosistemnya ya.

51:17Salah satunya adalah

51:19database ya.

51:21Yang baru juga di launching ya.

51:23Sepertinya mereka itu

51:25mindset.

51:27Bukan mindset sih.

51:29Kestrateginya tuh mendekati

51:31Laravel sih.

51:33Laravel ya.

51:35Banyak produk turunannya

51:37yang optional.

51:39Sebagian besar open source.

51:41Optional juga.

51:43Kalau cuma mau pakai core-nya

51:45juga nggak apa-apa.

51:47Cuma banyak produk-produk tambahan.

51:49Nah, kelihatannya

51:51serahnya agak kesana deh.

51:53Salah satunya yang indikatif

51:55banget ya itu si layanan database-nya.

51:57Tapi kita bisa

51:59lihat, apa namanya, kayak

52:01produk-produknya dia itu dimana.

52:03Soalnya tadi saya kesulitan mencari

52:05AstroDB itu harus googling dulu.

52:07Nggak ada di website sininya

52:09dimana gitu. Bukan nggak ada.

52:11Integration, AstroDB.

52:13Integration kali ya?

52:15Enggak?

52:17Oh bukan kan?

52:19Apakah dia tidak

52:21mencantumkan database-nya?

52:23Apa karena early preview jadi nggak ada?

52:25Atau gimana tuh?

52:27Nggak ketemu? Harus googling

52:29dulu baru dapat nih AstroDB.

52:31Padahal

52:33astro.builds.sdb

52:35Belum, karena

52:37belum ini ya, masih early preview ya.

52:39Mungkin ya.

52:41AstroDB ini

52:43pakai apa dia?

52:45SQLite.

52:47Karena

52:49SQLite sudah itu ya?

52:51Eh, bukan itu redis sih.

52:53Kenapa

52:55diganti dari

52:57SQLite?

52:59Di ganti?

53:01Maksudnya lib SQL ini

53:03sama dengan SQLite nggak sih?

53:05Beda?

53:07Nggak tahu, belum pakai.

53:09Kayaknya iya, sama. Maksudnya

53:11ini

53:13driver-nya.

53:15Driver-nya si SQLite.

53:17Karena ini dipakai juga di Tursow.

53:19Oh.

53:21Oh, atau mungkin berhubungan

53:23sama apasih SQLite itu kan

53:25project open source.

53:27Tapi nggak terima kontribusi kan, kalau nggak salah.

53:29Ya, betul.

53:31Berarti kan nggak bisa difork sesuai kebutuhan

53:33produk-produk

53:35atau library yang pakai kan.

53:37Nah, terus kayaknya ada yang bikin

53:39fork-nya.

53:41Kalau nggak salah, Tursow yang bikin namanya lib SQL.

53:43Mungkin digunakan juga

53:45oleh si Astro.

53:47Oh ya, itu betul lib SQL.

53:49Ada penjelasannya. Benar kan?

53:51Mana dia

53:53ada tulisannya tadi?

53:55Udah lewat ya?

53:57Ini, lib SQL.

53:59Open contribution

54:01fork of SQLite.

54:03Memang itu fork-nya

54:05SQLite yang open untuk

54:07contribution dipakai oleh

54:09Tursow, cuma karena open source ya

54:11boleh-boleh aja dipakai sama

54:13library lain. Malah senang kan

54:15si Tursow-nya karena ada yang

54:17bantu mungkin

54:19bentenance juga.

54:21Oh, ini bayar tapi ya.

54:25Ini service-nya.

54:27Ada free tier-nya.

54:29Ada free tier-nya. Ya, ada berbayarnya.

54:31Jadi emang

54:33service-nya yang

54:35bayar.

54:37Storage-nya 1GB.

54:39Included per month.

54:41Included per month.

54:43Featurnya apa?

54:45Everything you need.

54:47Featurnya.

54:49Ya, semua yang SQLite

54:51bisa.

54:53ORM.

54:55Zero login.

54:57Visual data viewer.

54:59Global distribution.

55:01Pricing-nya.

55:03PSUGO.

55:09Oh, sekarang sih Astro udah punya

55:11comment sendiri untuk

55:13nambahinnya.

55:15Udah lama ini.

55:17Dari Astro 2.

55:19Jadi, kita

55:21nambah kayak integrasi

55:23swell, triac, maksudnya UI framework,

55:25itu juga pakai itu.

55:27Kita mau tahu

55:29plugin-pluginnya dia itu dari mana ya?

55:31Dari NPM aja cari gitu.

55:33Astro something gitu.

55:35Atau apa gitu.

55:37Dari integrasi tadi kan?

55:39Integrasi kan banyak.

55:41Ini ya.

55:43Tadi ada filter-nya tuh di atas tuh.

55:49Coba kategoris.

55:51DB.

55:53Gak ada DB ya.

55:55Webfighters.

55:57Itu kategoris tuh.

55:59Itu button-nya kenapa sih?

56:05Karena

56:07di zoom.

56:09Zoom in.

56:11Harus liat.

56:13Nah, kalau official

56:15integration, ada centangnya ya.

56:17Kalau community.

56:19Oh, gitu.

56:21Starlight ini

56:23buat dokumentasi.

56:25View.

56:27Astro SST.

56:29Auto import.

56:31Seru kayaknya ya.

56:35Fun fact. Kayaknya

56:37pernah cerita sih. Cuma pamar lagi aja

56:39dulu banget. Astro bikin

56:41hepaton. Buat bikin

56:43integrasi. Karena dulu banget itu

56:45pas awal banget masih lagi promote.

56:47Terus gue ikut bikin integrasi

56:49buat

56:51ngerender data dari Notion.

56:53Cuma bisa dikustom

56:55drag and drop gitu.

56:57Astro Notion. Terus

56:59menang setengah hadiah.

57:01Jadi ada

57:03yang bikin plugin juga.

57:05Buat integrasi data dari Notion

57:07juga. Cuma pakai

57:09perspektif yang beda kalau yang satunya

57:11itu. Kayak buat

57:13masukin data dari seluruh

57:15isi Notion site.

57:17Dibuat jadi CMS.

57:19Kalau yang gue bikin kayak

57:21lebih fleksibel sih. Cuma jadi

57:23kepingan aja. Page page-nya dimasukin.

57:25Jadi use case-nya buat kalau misalnya

57:27landing page-nya. Nggak perlu

57:29dari Notion. Cuma misalnya blog post

57:31atau apa. Perlu ngambil data dari

57:33Notion. Karena si juri

57:35para jurinya mutusin

57:37itu dua hal yang

57:39mirip sama, tapi dengan perspektif

57:41yang beda.

57:43Kami berdua menang setengah-

57:45setengah.

57:47Setengah-setengah gimana.

57:49Aduh ya.

57:51Astro zaman

57:53jadi dulu Astro itu

57:55ada aneh.

57:57Kalau misalnya

57:59tadi script import

58:01segala macam di pisahinnya pakai

58:03front matter dash 3 kali.

58:05Kalau misalnya

58:07di dalam bagian script,

58:09walaupun misalnya di komen nih

58:11double slash,

58:13terus ada text

58:15apapun string lainnya, ada

58:17dash 3 dimanapun itu,

58:19itu langsung nge-throw error.

58:21Dulu pokoknya masih ada bok-bok

58:23aneh lah. Kalo sekarang

58:25udah nggak kan? Sekarang udah

58:27bener. As longnya

58:29susah dipakai, konya dulu masih.

58:31Dulu itu pas transisi dari 1

58:33ke 2.

58:35Apa dari 0 ke 1 ya.

58:37Konya pas baru transisi ke

58:39satu major version

58:41terbaru. Masih banyak bok-bok aneh.

58:43Itu seru sih.

58:45Terus, apalagi ya,

58:47mereka tuh di komunitasnya

58:49sekarang gue udah nggak aktif sih.

58:51Nggak banyak liat.

58:53Cuma discordnya

58:55itu banget sih, hidup banget.

58:57Terus kalau misalnya

58:59kan mereka punya

59:01dana dari open, apa itu

59:03yang, open collective.

59:05Nah, open collective

59:07yang apa, project

59:09open source, menerima funding

59:11atau donasi atau sponsorship

59:13dari mana pun. Terus kayak dikelola

59:15on public yang bisa di audit. Nah,

59:17mereka itu punya dana yang

59:19kayak gitu. Itu setiap

59:21bulan random

59:23anggota komunitas yang

59:25dianggap aktif, misalnya sering ngebantuin

59:27atau ngejawab pertanyaan

59:29di discord dengan apa, dengan

59:31konstruktif, membantu,

59:33itu bisa tiba-tiba dapet duit,

59:35dapet uang. Cuma ya random

59:37gue pernah dapet sekali.

59:39Ya, mereka maintain

59:41banget sama komunitasnya.

59:43Iya, dulu Gatsby

59:47juga begitu.

59:49Cuma Gatsby

59:51nasibnya

59:53begitu juga.

59:55Gatsby kayaknya teknologinya

59:59ditinggalkan ya

1:00:01karena inisiatif

1:00:03teknologi lain mengalahkan

1:00:05yang dulu

1:00:09yang si Gatsby

1:00:11gemborkan itu udah ditinggalkan

1:00:13gitu ya.

1:00:15Karena

1:00:21Gatsby itu bergantung ke SSG

1:00:23banget, tapi sebetulnya kan

1:00:25ada kebutuhan yang valid akan SSR.

1:00:27Akhirnya Gatsby super SSR,

1:00:29tapi telat, udah pada pindah

1:00:31sebagian pindah ke Next.js.

1:00:33Terus dulu kan kaku banget data

1:00:35engine-nya tuh kayak harus dari

1:00:37grab Qtl-nya, bawaannya dia.

1:00:39Padahal cuma pengen fetch

1:00:41API aja, udah itu kan

1:00:43use case yang simple banget ya.

1:00:45Akhirnya support juga, tapi telat.

1:00:47Liat ya, gitu sih.

1:00:49Ya monetize-nya di Gatsby Cloud juga

1:00:51sebetulnya, cuma kalau gak ada yang

1:00:53pake Gatsby-nya, Gatsby Cloud-nya

1:00:55gak lari.

1:00:57Nggak lari, sulit ya.

1:00:59Semoga Astro,

1:01:01Astro mungkin ya, internally

1:01:03mereka pasti ngerti kan, maksudnya

1:01:05Gatsby nasibnya gimana, mungkin ya mereka

1:01:07berusaha

1:01:09punya produk database

1:01:11gini.

1:01:13- Mereka jualan Cloud juga gak sih? - Nggak.

1:01:15- Posting? - Nggak.

1:01:17Astro.

1:01:19Itu tadi Db?

1:01:21Posting-nya enggak ya.

1:01:23Dia terbuka untuk

1:01:25Cloudflare, tadi kelihatan untuk Cloudflare

1:01:27ada, Vercel ada.

1:01:29Siapapun, Cloudflare, Vercel,

1:01:31Netlify, Node.js, Polosan, maksudnya

1:01:33kita punya on-prem server gitu

1:01:35atau digital ocean.

1:01:37Ya, pakai VM gitu ya.

1:01:39Deploy.

1:01:41Standard.

1:01:43Ya.

1:01:45Oke, ada lagi?

1:01:47Yang mau dibahas?

1:01:49Apa ya, dokumentasinya bagus sih.

1:01:53Maksudnya setara lah sama

1:01:55Next.js kalau

1:01:57bisa disandingkan ya

1:01:59dengan

1:02:01Next.js.

1:02:03Dan ini juga penulisan

1:02:05dokumentasinya.

1:02:07Jadi bukan cuma kodingnya,

1:02:09sisi teknisnya, tapi

1:02:11dokumentasinya tuh kayak diperhatiin

1:02:13banget di discord-nya. Jadi kayak

1:02:15ada

1:02:17guide-nya, kayak how-to.

1:02:19Jadi maksudnya kalau yang pengen jadi

1:02:21kontributor, nah ada yang kayak gitu-gitunya tuh

1:02:23itu dibiskaskan.

1:02:25Jadi misalnya kita belum terlalu jago

1:02:27banget buat kontribusi, atau

1:02:29nggak terlalu tertarik buat kontribusi

1:02:31ke Astro dalam bentuk plugin, atau

1:02:33dalam bentuk pull request kode,

1:02:35itu emang di-encourage banget.

1:02:37Coba kamu pakai Astro,

1:02:39terus sesuai use casemu, terus

1:02:41apa mungkin ada nggak di docs yang

1:02:43bisa di-improve? Kayak orang yang

1:02:45belum biasa nulis docs pun

1:02:47kayak di guide buat

1:02:49kontribusi ke docs, termasuk

1:02:51kayak ada guideline cara nulisnya gimana,

1:02:53terus kalimatnya gimana.

1:02:55Sama ini

1:02:57bikin komponen-komponen

1:02:59yang kayak gini, ini dibiskaskan semua

1:03:01di discord-nya. Seru sih.

1:03:03Kayaknya dulu yang mempopulerkan

1:03:05tracker-tracker model kayak gini tuh dari

1:03:07Next.js awalnya ya. Iya, tutorialnya Next.js ya.

1:03:11Menarik, menarik. Ada nggak sih

1:03:13open source-nya kayak gini bikin itu?

1:03:15Tutorial tracker itu?

1:03:17Kalau trackernya nggak tahu,

1:03:19tapi si Astro itu

1:03:21sangking docsite-nya

1:03:23bagus, enak

1:03:25dipakai, kan dia bikin starlight itu

1:03:27akhirnya di open source-in.

1:03:29Cuma nggak tahu ada trackernya built-in

1:03:31atau nggak.

1:03:33Seru ya.

1:03:37Jadi ada checklist-nya.

1:03:41Ini kalau kita

1:03:43mengikuti tutorial-nya,

1:03:45kita akan bikin block

1:03:47kumpulan artikel gitu ya

1:03:51dengan menggunakan Astro

1:03:53di guide step-by-step-nya.

1:03:55Jadi,

1:03:59kalau mau tutorial-nya, silahkan ke

1:04:01dokumentasinya, di situ ada block-nya.

1:04:03Ini bukan ya, starlight.astro.build.

1:04:09Saya bisa bikin saingannya

1:04:11Hartifit dong yang dipakai.

1:04:13Tutorial-tutorial sudah ada.

1:04:15Bisa bikin

1:04:19saingannya Hartifit nih.

1:04:21Dengan tutorial-tutorial sudah ada.

1:04:23Kalau Hartifit, selling point-nya kan

1:04:25bukan tutorial-nya

1:04:27aja.

1:04:29Nah, itu starlight ini

1:04:31head-to-head-nya, docusaurus

1:04:33dan teman-teman. Docusaurus, ya.

1:04:35Kalau docusaurus kan react ya.

1:04:37Kalau ini

1:04:39part-way-astro.

1:04:41Itu kan text format-nya

1:04:49MDX, kalau ini

1:04:51Komponen, dia pakai apa?

1:04:53Komponen, dia pakai apa?

1:04:55MDX.

1:04:57Komponen, dia pakai apa?

1:04:59MDX.

1:05:01Ini.

1:05:03Ini.

1:05:05"Bring your own UI components.

1:05:07Starlight, framework,

1:05:09agnostic, complete dots.

1:05:11Extend with react, view,

1:05:13swell, solid, and more."

1:05:15Iya, sama dia yang ikutin juga.

1:05:17Ini kan cuma kayak template-nya

1:05:19aja kan.

1:05:21Astrocyte ya, intinya.

1:05:23Sebenarnya astro kan, template-nya starlight.

1:05:33Nice.

1:05:35Jadi kalau mau bikin dokumentasi, bisa

1:05:37pakai starlight.

1:05:39Oke.

1:05:41Wah, kayaknya patut

1:05:43dicoba ini ya.

1:05:45Di-explore ya.

1:05:47Buat alternatif.

1:05:49Apa kita bikin?

1:05:51Kita punya ini ya.

1:05:53Kita punya dokumentasi yang

1:05:55tak jadi-jadi.

1:05:57Iya, kita mau bikin website-nya

1:06:01ngobrol-ngobrol, nggak jadi-jadi.

1:06:03Jangan-jangan kita bikin pakai astro aja.

1:06:05Kebanyakan opsi framework

1:06:07setiap kita mulai.

1:06:09Menarik, menarik.

1:06:11Kita mau framework lain,

1:06:13kayaknya lucu pakai ini.

1:06:15Benar.

1:06:17Oke, kalau gitu.

1:06:19Untuk diskusi

1:06:21malam ini tentang astro, mungkin sekian

1:06:23kalau temen-temen punya

1:06:25pengalaman.

1:06:27Iya, punya pengalaman menggunakan astro,

1:06:29pengalaman menarik atau pengalaman

1:06:31buruk mungkin, boleh

1:06:33komen-komen aja.

1:06:35Kita pengen coba, tapi

1:06:37pengen tahu juga pendapat temen-temen

1:06:39gimana dalam menggunakan

1:06:41astro. Sejauh ini sih

1:06:43saya coba-coba lumayan sih.

1:06:45Developer experience-nya berasa beda ya.

1:06:47Load-nya cepat,

1:06:49kemudian straightforward,

1:06:51terus dokumentasinya juga

1:06:53bagus.

1:06:55Integrasinya banyak, kayak UI framework-nya

1:06:57bebas, sesuai selera,

1:06:59KSS mau vanilla, mau tailwind,

1:07:01mau apa, bebas,

1:07:03performance bagus, yay, hidup astro.

1:07:05Cuman untuk

1:07:07dibandingkan dengan metaframe

1:07:09of client yang lebih matang, mungkin

1:07:11ekosistemnya belum terlalu terbentuk ya.

1:07:13Dia baru punya beberapa

1:07:15beberapa, apa namanya,

1:07:17beberapa fitur tambahan seperti

1:07:19baru database itu juga baru early

1:07:21preview, kemudian

1:07:23apa,

1:07:25alternative hosting, kayaknya

1:07:27udah banyak sih ya kalau alternative hosting.

1:07:29Terus integrasinya juga mungkin

1:07:31kalau misalkan contohnya, kemarin kan

1:07:33kita ketemu sama Mas Adam

1:07:35kan, pengen pakai open props.

1:07:37Nah, ini belum ada integrasinya ya.

1:07:39Ecosistemnya belum,

1:07:41karena memang tergolong baru,

1:07:43ekosistemnya belum ada, tapi itu adalah peluang.

1:07:45Kalau temen-temen pakai open props, terus pakai astro,

1:07:47bikin aja integrasinya.

1:07:49Cuma kalau misalnya, jadi

1:07:51behavior astro, salah satu yang utama

1:07:53dia bisa pakai

1:07:55nge-load script tag di head,

1:07:57script atau style tag di head.

1:07:59Jadi kalau ada dari CDN, misalnya kan

1:08:01kalau open props kan saking kecilnya,

1:08:03apa, saking kecil base CSS-nya,

1:08:05loading dari

1:08:07CDN pun, apa,

1:08:09cepet ya, karena dia pakai

1:08:11primitive yang, apa,

1:08:13variable-nya, CSS variable-nya, nggak

1:08:15sampai, font-nya nggak sampai berkera 3 MB.

1:08:17Jadi ya, kalau

1:08:19apa, kukurannya kecil bisa drag,

1:08:21bisa langsung di-drop.

1:08:23Plug-in-nya udah banyak, jadi ya itu betul sih,

1:08:25kalau belum di-support, tinggal bikin aja.

1:08:27Cuma kalau, mungkin kalau

1:08:29untuk di tempat kerja yang

1:08:31ya, profesional gitu, yang corporate

1:08:33atau organisasi besar,

1:08:35masih ragu-ragu untuk adopsi

1:08:37astro sih, karena, apa ya, namanya

1:08:39belum se

1:08:41trustworthy JS nggak sih,

1:08:43kayak, ini kan,

1:08:45ini kan niche banget ya,

1:08:47maksudnya yang, yang

1:08:49pakai dan senang

1:08:51menggunakan astro tuh masih

1:08:53kayak front-end dev,

1:08:55front-end web dev banget.

1:08:57Kalau umurnya juga relatif muda,

1:08:59kalau buat production site

1:09:01di organisasi

1:09:03atau corporate yang bukan

1:09:05agency ya, bukan apa,

1:09:07bukan creative agency,

1:09:09mungkin perlu effort dikit

1:09:11buat convince bahwa ini produk

1:09:13yang bakal tetap ada sekian

1:09:15tahun ke depan, nggak tiba-tiba

1:09:17itu sih.

1:09:19Tapi ada kelebihannya dia

1:09:21dibandingkan framework yang lain,

1:09:23maksudnya, dia bisa

1:09:25mengakomodir

1:09:27kode, misalkan kita udah punya nih

1:09:29komponen React, ya kan

1:09:31kita bisa pakai React komponen di sini.

1:09:33Migrate puan-puan, jadi kayak

1:09:35lebih straightforward, kan,

1:09:37dibandingkan dari React ke

1:09:39Spell gitu.

1:09:41Mungkin itu kali ini

1:09:43targetnya dia, dibangun middleware

1:09:45nya, untuk

1:09:47bisa orang

1:09:49pelan-pelan migrate-nya ke Astro

1:09:51semua nanti.

1:09:53Ujung-ujungnya nanti pakai komponen Astro

1:09:55sih, gitu ya. Tapi awalnya

1:09:57buat kemudahan

1:09:59adaptasi supaya orang mau mengadopsi

1:10:01dulu, ya mereka buka

1:10:03buat semua UI framework

1:10:05ya.

1:10:07Cuma nggak sih kayak Astro itu buat

1:10:09yang emang pures banget, jadi

1:10:11buat Astro itu

1:10:13agak ribet buat

1:10:15client-side interactivity, ya bisa

1:10:17pakai JavaScript mentahan

1:10:19Vanilla, ya buat orang yang gitu.

1:10:21Tapi, maksudnya, kita ke depannya tetap pakai

1:10:23React pun, ya emang itu open banget.

1:10:25Itu dimaintain secara aktif, integrasi

1:10:27React, Sweat, dan lain-lainnya.

1:10:29Jadi, ke depan kita tetap

1:10:31untuk interaktif komponennya, terutama

1:10:33tetap pakai

1:10:35React atau Sweat atau apapun itu encourage.

1:10:37Nah, cuma shell luarnya kan

1:10:39pakai dotastore.

1:10:41Oh, iya, iya, ngerti, ngerti. Jadi, ini

1:10:43positioning, dia memposisikan

1:10:47dirinya di antara, jadi

1:10:49ada yang tipikal orang yang

1:10:51semuanya Vanilla, JavaScript, HTML

1:10:53sesuai Vanilla. Nah, di atasnya

1:10:55sedikit itu Astro. Di atasnya

1:10:57sedikit lagi baru

1:10:59SpellKit atau Next atau Nux

1:11:01dan lain-lain kali ya. Ya, dia di tengah-tengah.

1:11:03Jadi, aman buat semua.

1:11:05Oke, oke.

1:11:07Ya. Jadi, mungkin

1:11:09untuk malam ini sekian dulu

1:11:11ngobrol-ngobrol tentang

1:11:13Astro-nya.

1:11:15Dari tadi dia pahit, kagak kelar-kelar.

1:11:17Terlalu suka ngobrolin Astro.

1:11:19Jangan lupa ditunggu juga

1:11:21apa,

1:11:23komen-komennya.

1:11:25Ya, kalau teman-teman punya

1:11:27pengalaman, silahkan.

1:11:29Kalau ada yang mau sumbang topik, boleh juga

1:11:31kesana.in/ngobrolinweb.

1:11:33Kita pamit dulu.

1:11:35Ketemu lagi

1:11:37di hari dan jam yang sama.

1:11:39Selamat malam.

1:11:43Selamat istirahat. Sampai jumpa. Bye-bye.