00:00:00Halo semuanya! Selamat datang di sesi komunitas Basel lainnya.
00:00:29Saya Maya Avendano dan saya seorang insinyur DX di sini di Basel.
00:00:32Jika ini pertama kalinya Anda mengikuti sesi kami dan tidak bisa melihat obrolan,
00:00:35silakan bergabung dengan kami di platform komunitas kami di [community.basel.com/live](https://www.google.com/search?q=https://community.basel.com/live).
00:00:41Di sana Anda bisa menggunakan obrolan, Anda bisa bertanya, yang mana sangat dianjurkan.
00:00:45Atau jika Anda menonton di X atau platform lainnya, silakan gunakan itu juga.
00:00:49Nah, untuk sesi hari ini, saya sangat menantikannya, karena fakta menariknya,
00:00:53saya adalah pengembang Svelte selama beberapa tahun dan telah membangun banyak proyek sampingan dengan Svelte.
00:00:58Jadi saya penggemar berat dan saya bahkan punya kausnya.
00:01:01Jadi ya, untuk sesama penggemar Svelte dan orang-orang yang penasaran dengan Svelte,
00:01:06kami kedatangan beberapa tim Svelte di sini hari ini. Jadi, selamat datang.
00:01:12Halo. Hai semuanya! Apakah kalian ingin menceritakan sedikit tentang siapa kalian?
00:01:21Tentu, saya Alsop. Nama saya Rich.
00:01:24Saya telah mengerjakan Svelte selama 10 tahun karena saat itulah saya memulai proyek ini pada tahun 2016.
00:01:32Awalnya, agar saya bisa menggunakannya dalam pekerjaan harian saya sebagai jurnalis, melakukan jurnalisme visual,
00:01:38menggunakan JavaScript untuk membantu menyampaikan berita. Dan kemudian empat tahun lebih yang lalu,
00:01:44saya pindah ke Basel dan itu menjadi pekerjaan penuh waktu saya dan saya telah melakukannya sejak saat itu.
00:01:53Ya, saya rasa tidak ada orang lain yang bisa mengeklaim memiliki pengalaman bertahun-tahun seperti Anda.
00:01:57Saya rasa saya memiliki sekitar lima tahun sebagai pemelihara Svelte.
00:02:02Jadi saya mulai, nama saya Simon. Saya juga bekerja di Basel pada bagian Svelte
00:02:08dan saya mengenal Svelte melalui sebuah hackathon di perusahaan saya sebelumnya.
00:02:13Saya ingin mencoba sesuatu yang lain. Saat itu, saya lebih banyak menggunakan Angular.
00:02:18Mencoba Svelte untuk sebuah hackathon, langsung jatuh cinta, tapi juga menyadari,
00:02:22“Oke, saya tidak bisa menggunakan ini dalam pekerjaan harian saya, jadi bagaimana lagi saya bisa tetap berhubungan dengan Svelte?”
00:02:29Sangat kutu buku, saya tahu. Tapi dengan cara itulah, saya menjadi pemelihara paruh waktu.
00:02:34Dan beberapa tahun kemudian, saya mendapat kesempatan untuk bergabung dengan Basel untuk mengerjakannya secara penuh waktu.
00:02:39Dan ya, bahagia sejak saat itu.
00:02:43Saya Elliot. Seperti yang suka saya ingatkan kepada Rich sesekali,
00:02:46saya sebenarnya lulus SMA pada tahun dia memulai Svelte.
00:02:49Jadi saya belum begitu lama berada di bagian pemeliharaan.
00:02:54Tapi saya mulai, saya tidak ingat apakah itu akhir 2021 atau awal 2022.
00:02:59Kira-kira saat beta SvelteKit itulah saya menemukan dan bergabung dengan komunitas Svelte.
00:03:04Dan kemudian benar-benar mulai bekerja di Vercel tidak lama setelah Rich, sepertinya.
00:03:09Itu seperti musim gugur di tahun yang sama, jika saya tidak salah ingat.
00:03:12Tapi saya mengerjakan banyak hal lain seperti yang berkaitan dengan situs web Vercel.
00:03:16Dan kemudian, yang mengejutkan sekarang, setahun dan beberapa bulan yang lalu, rasanya waktu yang jauh lebih singkat dari itu,
00:03:23saya berkesempatan pindah ke tim Svelte. Jadi saya telah mengerjakannya secara penuh waktu sejak saat itu.
00:03:27Saya rasa akhir-akhir ini, hal keren yang saya lakukan adalah menulis implementasi async SSR untuk Svelte.
00:03:36Jadi hal-hal semacam itu adalah hal-hal pengembangan perangkat lunak yang sangat teknis dan keren yang saya sukai
00:03:43dan selalu saya sukai tentang Svelte.
00:03:48Luar biasa. Senang sekali kalian semua ada di sini.
00:03:51Dan bagi audiens kami yang mungkin belum familier, bisakah Anda menjelaskan secara singkat tentang Svelte dan SvelteKit?
00:04:00Kami tentu bisa mencobanya. Svelte adalah, yah, banyak hal.
00:04:04Ini adalah sebuah komunitas, sebuah gaya hidup, tapi juga merupakan kerangka kerja komponen deklaratif.
00:04:11Jika Anda pernah menggunakan hal-hal seperti React dan Vue dan sebagainya, maka Anda sudah familier dengan konsep dasarnya
00:04:15bahwa alih-alih menulis, Anda tahu, document dot create element dan, Anda tahu, set attribute dan semua hal ini,
00:04:21Anda mendeskripsikan aplikasi Anda dalam bentuk komponen deklaratif.
00:04:25Dan kemudian tugas kerangka kerja adalah mengambil maksud deklaratif itu dan menerjemahkannya ke dalam apa yang sebenarnya terjadi di layar.
00:04:33Svelte sedikit berbeda dari kerangka kerja tersebut karena ia memiliki desain yang mengutamakan kompiler.
00:04:40Pada dasarnya, ini adalah sebuah bahasa yang diubah menjadi JavaScript murni yang berkinerja sangat tinggi.
00:04:48Dalam hal penggunaan, ini cukup mirip dengan banyak kerangka kerja lainnya, tetapi karena desainnya,
00:04:53kami dapat melakukan hal-hal dengan cara yang sedikit lebih bagus, sedikit lebih ringkas daripada beberapa kerangka kerja lainnya.
00:04:58Dan sebagai tambahan untuk Svelte, yang merupakan lapisan fondasinya, boleh dibilang begitu,
00:05:02kami memiliki kerangka kerja yang berada di atas Svelte yang disebut SvelteKit,
00:05:08yang jika Anda familier dengan dunia React, itu seperti Next JS versi kami.
00:05:13Dan itu menambahkan semua hal lainnya, perutean dan render sisi server, pemuatan data dan alat bantu bangun,
00:05:18dan semua hal yang Anda butuhkan jika Anda sedang membangun aplikasi, tetapi tidak benar-benar ingin
00:05:24repot membangunnya sendiri.
00:05:28Luar biasa, terima kasih banyak.
00:05:29Dan kalian juga sibuk mempersiapkan sesuatu di balik layar.
00:05:32Dan saya ingin tahu lebih banyak tentang apa yang telah kalian kerjakan selama beberapa bulan terakhir.
00:05:37Saya dengar kalian juga punya beberapa demo?
00:05:41Kami punya beberapa demo.
00:05:43Maksud saya, haruskah saya memulainya?
00:05:44Karena menurut saya secara urutan, akan lebih masuk akal untuk membicarakan pengembangan Async Svelte,
00:05:51dan kemudian kita bisa beralih ke hal-hal yang kita bangun di atasnya.
00:05:55Kedengarannya bagus.
00:05:55Oke, jadi selama setahun terakhir ini, mungkin, saya sebenarnya tidak terlalu yakin.
00:06:02Kami telah mengerjakan apa yang kami sebut secara santai sebagai asynchronous Svelte, yang mungkin jika saya membagikan layar saya,
00:06:12saya bisa memberikan sedikit demo tentang apa itu, dan kemudian kita bisa beralih ke beberapa penggunaan Async Svelte.
00:06:20Saya hanya harus ingat cara menemukan tombol bagikan layar.
00:06:26Melewati semua dialog perizinan.
00:06:28Mohon bersabar.
00:06:30Bagikan seluruh layar.
00:06:33Boom.
00:06:34Oke, saya rasa saya sedang membagikan layar saya.
00:06:35Apakah saya membagikan layar saya, atau masih di belakang layar?
00:06:38Ya, kami melihatnya.
00:06:40Oke, jadi bagi yang belum tahu, ini adalah Svelte.dev.
00:06:43Ini adalah situs web kami.
00:06:44Ini adalah taman bermain (playground) di mana Anda bisa mencoba Svelte tanpa harus memasang apa pun
00:06:49atau repot dengan baris perintah.
00:06:51Anda bisa langsung menulis kode di sini.
00:06:53Dan ini adalah tampilan playground default yang Anda dapatkan.
00:06:55Mungkin akan saya perbesar sedikit agar semua orang bisa melihat.
00:06:58Jadi di sini kita memiliki beberapa state (keadaan).
00:07:03Hal-hal aneh ini, ini disebut runes.
00:07:05Inilah cara Anda mengatakan bahwa sesuatu di komponen Svelte Anda akan berubah,
00:07:10dan ketika itu berubah, kita perlu melakukan re-render.
00:07:12Jadi kita punya nama, dan kita punya hitungan (count).
00:07:15Lalu kita menampilkan nama itu di atas sini.
00:07:17Dan kemudian kita mengikat nilainya ke isi dari ini.
00:07:21Jadi kita bisa melakukannya.
00:07:24Dan kita bisa mengeklik tombol ini, dan itu akan membuat angkanya naik.
00:07:27Semua hal yang sangat mudah yang bisa dilakukan oleh setiap kerangka kerja
00:07:29dalam beberapa bentuk atau cara.
00:07:35Apa yang ditambahkan oleh Async Svelte adalah kemampuan untuk menggunakan kata kunci Await secara langsung
00:07:41di dalam komponen Anda.
00:07:45Jadi katakanlah-- mari kita hapus nama dan semua hal ini.
00:07:49Dan mari kita ubah ini menjadi ID dan mulai dari satu.
00:07:56Dan yang akan saya lakukan adalah saya akan mengambil beberapa JSON
00:08:01dari sumber eksternal.
00:08:04Saya akan mulai dengan membuat sesuatu yang diturunkan dari ID.
00:08:10Jadi URL ini akan dihitung setiap kali ID tersebut berubah.
00:08:16Dan Anda bisa melihat bahwa jika saya mengetik URL di sini, maka saat ini berubah,
00:08:22URL-nya juga ikut berubah.
00:08:24Lalu saya akan mengambil beberapa data menggunakan URL tersebut,
00:08:28data saya sama dengan derived.
00:08:30Dan di dalam sini, saya bisa melakukan Await fetch URL.
00:08:36Dan kemudian kita ingin mengambil responsnya dan mengubahnya menjadi JSON.
00:08:41Saya yakin semua orang pernah melihat hal semacam ini
00:08:43jika Anda bekerja di bidang pengembangan jutaan kali.
00:08:47Dan kemudian di bawah sini, mari kita buat block quote
00:09:00dan tampilkan data yang kita ambil dari sini.
00:09:03Jadi Anda bisa melihat bahwa jika kita benar-benar melihat ke--
00:09:06itu rusak.
00:09:13Jadi inilah yang akan kita dapatkan, dan kita ingin bisa menampilkannya.
00:09:16Jadi di dalam sini, saya akan mengetik data dot quote seperti itu.
00:09:21Oh, ada yang rusak.
00:09:23Simon, Elliott, jika kalian bisa melihat apa yang saya rusakkan, silakan beri tahu.
00:09:28Oh, tidak, ini hanya jeda (delay).
00:09:30Oke.
00:09:31Dan kemudian di bawah itu, kita akan menambahkan penulis kutipan tersebut.
00:09:40Dan mungkin kita akan menghilangkan jeda itu selagi kita mengerjakannya.
00:09:44Saya tidak tahu.
00:09:46Akan membantu jika saya membungkusnya dengan kurung kurawal.
00:09:50Dan sekarang jika saya mengeklik ini, maka ia akan memproses,
00:09:55dan ia akan mengambil data baru, lalu merendernya.
00:09:58Itu mungkin terdengar sangat mendasar dan sepele,
00:10:01tetapi jika Anda melihat bagaimana Anda harus melakukan ini di hampir setiap kerangka kerja lainnya,
00:10:08itu akan menjadi sangat rumit dengan cepat.
00:10:10Anda harus memiliki beberapa state lokal, dan kemudian Anda
00:10:13harus memiliki efek, yang mungkin itu adalah
00:10:16useEffect atau padanannya di kerangka kerja lain, di mana Anda melakukan pengambilan data (fetch).
00:10:20Dan kemudian ketika fetch selesai, Anda menetapkannya ke state lokal itu,
00:10:25dan Anda harus menangani kesalahan dan semua hal itu.
00:10:27Dan itu menjadi sangat rumit.
00:10:32Tapi dengan ini, semuanya langsung berfungsi.
00:10:36Dan jika ada jeda--
00:10:43maka ia akan terus bekerja.
00:10:45Meskipun Anda mungkin melihat itu dan berpikir, tunggu dulu,
00:10:46jika saya mengeklik tombolnya berkali-kali,
00:10:49saya sebenarnya hanya ingin langsung ke hasil akhirnya.
00:10:51Saya tidak ingin melakukan semua proses di tengah-tengah itu.
00:10:53Jadi kita bisa melakukannya juga.
00:10:54Kita bisa bilang di dalam sini, jika saya mengimpor pembantu (helper) yang disebut
00:10:58get abort signal from self, dan kemudian meneruskan sinyal itu ke fetch,
00:11:11maka kali ini, saat saya mengeklik tombolnya,
00:11:15ia akan benar-benar membuang semua permintaan perantara itu
00:11:19dan langsung menuju yang terakhir,
00:11:21karena permintaan-permintaan awal itu selesai terlambat.
00:11:26Dan pada saat itu, kita sudah mengubah id-nya lagi.
00:11:28Jadi kita membatalkan sinyal-sinyal yang ada.
00:11:33Baiklah, apa lagi yang bisa kita lakukan?
00:11:34Nah, mungkin saya ingin melihat tombol ini segera diperbarui.
00:11:38Jadi kita bisa menggunakan state.eager untuk keluar
00:11:43dari penahanan asinkron.
00:11:47Itu juga cukup berguna.
00:11:49Dan kita bisa menambahkan beberapa gaya (style).
00:11:51Kita bisa bilang data loading sama dengan effect.pending
00:11:58lebih besar dari 0.
00:11:59Dan kemudian jika kita berada dalam status pemuatan,
00:12:04maka kita bisa membuatnya memudar (fade out) saat kita memuat sesuatu.
00:12:11Dan ini, sekali lagi, adalah semua hal yang jika Anda
00:12:13mencoba mengoordinasikannya sendiri
00:12:15akan sangat sulit.
00:12:17Kita bisa melangkah lebih jauh.
00:12:19Katakanlah saya ingin menambahkan foto untuk menyertai kutipan tersebut.
00:12:28Mungkin akan terlihat seperti ini.
00:12:37Jika saya mengubahnya, maka saya akan mendapatkan
00:12:41banyak foto yang berbeda.
00:12:42Tampaknya, semuanya gambar laptop, saya tidak yakin kenapa begitu.
00:12:46Oke, itu gambar yang lebih bagus.
00:12:48Meskipun, Anda akan menyadari bahwa ada
00:12:50sedikit jeda di sana.
00:12:52Kita mendapatkan data untuk kutipannya, lalu gambarnya baru muncul.
00:12:57Karena kita merender gambarnya,
00:12:58dan kemudian kita harus kembali ke jaringan
00:12:59untuk mendapatkan gambarnya, dan itu kurang bagus.
00:13:02Jadi jika kita menggantinya dengan sedikit pembantu preload
00:13:07yang akan saya impor dari modul utilitas saya,
00:13:17maka kali ini, kita akan melihat bahwa gambar dan kutipannya
00:13:24keduanya muncul pada saat yang bersamaan.
00:13:27Saya baru saja menemukan sedikit bug.
00:13:28Kita harus pergi dan memperbaikinya.
00:13:30Tapi Anda mengerti maksudnya.
00:13:31Kita bisa menggunakan await di dalam komputasi kita,
00:13:34dan kita bisa menggunakannya di dalam templat kita.
00:13:36Dan semua hal ini terkoordinasi dengan sempurna
00:13:40dengan cara yang berfungsi dengan banyak komponen,
00:13:44yang semuanya melakukan pekerjaan secara independen sebagai respons terhadap peristiwa yang sama.
00:13:47Ini berfungsi dengan render sisi server (SSR).
00:13:49Ini melakukan semua hal yang jika Anda
00:13:52harus melakukannya tanpa asinkron Svelte
00:13:55akan sangat menyakitkan.
00:13:58Dan dengan fondasi ini, kami dapat membangun
00:14:02beberapa hal yang cukup keren, yang akan saya serahkan
00:14:05kepada dua orang lainnya untuk dibicarakan.
00:14:09Ya.
00:14:10Saya akan mendemonstrasikan fungsi jarak jauh (remote functions) dengan cepat, yang
00:14:17akan dibangun di atas hal ini.
00:14:19Jadi, sekarang setelah ada async di Svelte, ini sangat hebat.
00:14:24Tapi SvelteKit, meta-framework di atasnya,
00:14:27bisa dibilang masih berada di "dunia lama".
00:14:30Kita punya fungsi load ini, yang berada di file berbeda.
00:14:34Dan dengan itu, kita tidak bisa benar-benar memanfaatkan
00:14:38semua hal baru yang keren yang baru saja kita lihat.
00:14:41Jadi, yang sedang kami kerjakan sekarang adalah remote function.
00:14:45Fitur ini sudah tersedia di SvelteKit.
00:14:48Statusnya masih eksperimental, tapi Anda sudah bisa menggunakannya.
00:14:50Dan saya akan menunjukkan cara paling sederhana
00:14:55untuk menggunakan remote function di sini, demi menghemat waktu.
00:14:59Jadi, yang akan saya lakukan adalah
00:15:01membuat penghitung atau counter yang sangat sederhana di mana
00:15:04setiap kali saya mengklik tombol, angkanya akan bertambah,
00:15:08tetapi data hitungannya akan berada di server.
00:15:10Saya akan mengimplementasikannya ke dalam file counter.remote.ts ini.
00:15:16Saya akan mulai dengan sebuah variabel count.
00:15:18Lalu membuat fungsi seperti, get count.
00:15:20Dan kemudian kita akan menggunakan query dari $app/server.
00:15:26Dan ini adalah sebuah remote query.
00:15:29Kita cukup mengembalikan nilai count di sini.
00:15:31Dan di sisi lain, kita bisa memanfaatkannya
00:15:37dan menuliskan, await get count dari file yang baru saja kita impor.
00:15:44Impor ini terlihat seperti impor reguler bagi TypeScript.
00:15:48Hanya saja kita mengimpor sebuah fungsi,
00:15:52lalu memanggilnya, dan fungsi tersebut mengembalikan sebuah promise.
00:15:54Jadi kita menggunakan await.
00:15:56Namun sebenarnya, ini melintasi batas antara klien dan server.
00:16:01Jadi get count ini sebenarnya berada di server.
00:16:05Jadi yang sebenarnya terjadi adalah klien
00:16:08mengirimkan permintaan ke endpoint tersembunyi
00:16:14dan mengembalikan data dari sana.
00:16:17Dan tentu saja, ini juga mendukung server-side rendering.
00:16:19Jadi pada pemuatan awal, ini tidak akan meminta dari backend,
00:16:23tetapi akan melakukannya secara langsung.
00:16:25Sekarang kita punya count ini, tapi kita belum bisa melakukan apa pun
00:16:29dengannya.
00:16:29Kita ingin menambah nilainya.
00:16:31Jadi ini akan menjadi bagian lain untuk remote function.
00:16:34Kami akan mengimplementasikannya dengan cepat-- tanpa copilot.
00:16:38Ini perintah yang salah.
00:16:40Kita ingin menggunakan command dari $app/server.
00:16:45Dan di sini, kita akan memperbarui state di server.
00:16:49Dan itu saja belum cukup membantu,
00:16:52karena kita juga perlu memberi tahu, karena ini adalah sebuah perintah,
00:16:55untuk juga mengirimkan pembaruan bersamanya.
00:16:58Maka kita memanggil get count, remote function kita di sini,
00:17:03dan memanggil refresh padanya.
00:17:05Dengan ini, pada dasarnya kita memberitahunya,
00:17:08lakukan mutasi single-flight.
00:17:10Saat dipanggil, tambah hitungan sebanyak satu,
00:17:14lalu kirimkan kembali ke klien informasi
00:17:19bahwa, setiap kali get count digunakan di halaman ini,
00:17:22nilainya sekarang harus bertambah satu,
00:17:24bahwa ada state baru yang tersedia.
00:17:27Dan jika sekarang saya menambahkan ini di sini,
00:17:29saya akan membuat event on click dan cukup menambah count.
00:17:37Hanya ini yang akan saya lakukan.
00:17:38Ini terlihat seperti pemanggilan fungsi biasa.
00:17:40Tapi sekali lagi, ini sebenarnya memanggil server.
00:17:43Dan sekarang saat saya mengkliknya, saya menambah nilainya.
00:17:49Jadi itu tadi adalah cuplikan yang sangat kasar
00:17:53mengenai remote function.
00:17:55Anda bisa membangun lebih banyak hal dengannya.
00:17:58Ini juga bekerja sangat baik dengan AI.
00:18:01Sebagai contoh, sekitar lima menit sebelum sesi dimulai,
00:18:06saya bertanya kepada code copilot ini, hei, buatkan saya
00:18:12blok dasar bertema portal di mana saya
00:18:18ingin memamerkan beberapa remote function.
00:18:20Dan kamu harus menggunakan Svelte 5 dengan MCP, Svelte MCP.
00:18:25Elliot akan segera menjelaskan sedikit tentang hal itu.
00:18:29Gunakan itu, gunakan remote function, dan gunakan async.
00:18:32Dan dia pada dasarnya berhasil membuatnya dalam sekali coba.
00:18:34Jadi ini sudah di-pre-render.
00:18:35Blok ini sudah di-pre-render.
00:18:37Dan sekarang saya bisa mengetik di sini--
00:18:42simpan di sekitar sini.
00:18:43Dan itu akan memperbaruinya.
00:18:49Dan di balik layar, ini melakukan hal yang sama.
00:18:53Melihat sekilas prosesnya,
00:18:56kita menggunakan await get posts.
00:18:59Get posts adalah fungsi pre-render,
00:19:01yang berarti dieksekusi pada saat build time,
00:19:05bukan pada saat runtime.
00:19:06Kita punya bagian komentar di bawah sini
00:19:12di mana kita memuat komentar dan menggunakan formulir untuk
00:19:15mengirim komentar baru dan seterusnya.
00:19:19Dan ini semua menggunakan remote function, tanpa fungsi load
00:19:23di mana pun.
00:19:24Dan AI berhasil menyelesaikannya dalam satu kali percobaan.
00:19:27Dan Elliot akan menjelaskan hal itu secara lebih mendetail
00:19:32sekarang, sepertinya.
00:19:34Ya, kedengarannya bagus.
00:19:37Saya harus melakukan hal yang sama seperti Rich Harris
00:19:41yang kami lakukan di awal tadi dengan berbagi layar.
00:19:46Oke, itu dia.
00:19:52Jadi saya akan meluangkan waktu sejenak untuk berbicara tentang AI
00:19:57yang sedang kami kembangkan baru-baru ini.
00:19:59Dan yang saya maksud dengan "kami", saya ingin memperjelas bahwa itu bukan saya.
00:20:02Maksud saya terutama orang bernama Paolo dan beberapa
00:20:06kontributor kami lainnya di Svelte.
00:20:09Sebenarnya, sebagian besar hal terkait AI yang kami lakukan baru-baru ini
00:20:13berasal dari mereka.
00:20:14Jadi terima kasih banyak kepada mereka.
00:20:15Mereka telah melakukan pekerjaan yang luar biasa.
00:20:18Dan ya, biarkan saya perbesar layarnya di sini.
00:20:24Nah, itu dia.
00:20:27Saya bisa menghabiskan waktu lama untuk menjelaskan
00:20:28apa yang telah kami bangun agar bisa melakukannya
00:20:31karena kami memiliki server MCP.
00:20:32Server ini memiliki beberapa fungsi yang sangat keren.
00:20:36Kami memiliki beberapa keahlian (skills) yang telah kami publikasikan.
00:20:38Tapi untungnya, Anda sebenarnya tidak
00:20:41perlu tahu secara mendetail bagaimana semua itu bekerja
00:20:43karena kami juga telah mempublikasikan plugin
00:20:47Open Code dan Cloud Code.
00:20:48Jadi saya akan menginstal plugin Open Code di sini, yang
00:20:52pada dasarnya hanya berarti menyalin konfigurasi ini
00:20:55lalu memasukkannya ke dalam file Open Code.json
00:20:58di pustaka atau library Anda.
00:21:00Dan saya akan membiarkan Open Code membuatkan sebuah situs untuk saya.
00:21:06Dan kita lihat bagaimana hasilnya.
00:21:10Jadi saya akan memintanya.
00:21:11Saya telah menyediakan beberapa gambar di bagian aset.
00:21:17Biarkan saya perbesar bagian ini juga untuk Anda.
00:21:28Sayangnya, sepertinya saya tidak bisa memperbesarnya untuk Anda.
00:21:34Nah, itu dia.
00:21:34Oke.
00:22:00[MENGETIK]
00:22:06Dan kita akan lihat apa yang akan terjadi.
00:22:09Jangan ada kesalahan.
00:22:11Ya, tepat sekali.
00:22:12Itu sangat penting.
00:22:13Jika Anda tidak menaruh kalimat itu di akhir prompt Anda,
00:22:15hasilnya tidak akan bekerja sebaik itu.
00:22:18Tetapi sementara ini sedang berjalan, saya bisa memberi tahu Anda
00:22:21sedikit tentang hal-hal yang sedang mereka kerjakan.
00:22:25Jadi jika Anda membuka situs Svelte
00:22:28dan membuka dokumentasi AI kami, Anda akan mendapatkan ringkasan semuanya.
00:22:32Kami telah menerbitkan sebuah MCP, yang memiliki CLI-nya sendiri.
00:22:36Dan ini memiliki sejumlah--
00:22:40oh, hei, dia memperbaikinya dalam lima menit terakhir.
00:22:43Jadi tampilannya sekarang berbeda dari lima menit yang lalu.
00:22:46Tapi kami punya beberapa alat yang bisa diaktifkan di mesin Anda.
00:22:51Sebagian besar berhubungan--
00:22:53atau dua yang pertama berhubungan dengan mendapatkan informasi yang akurat
00:22:58mengenai Svelte.
00:22:58Jadi ini mengajarkan agen Anda cara membaca dokumentasi
00:23:03dan secara spesifik membacanya dengan cara tertentu
00:23:05agar bisa mendapatkan informasi spesifik yang sedang
00:23:08dicarinya tanpa harus memuat seluruh dokumen
00:23:11atau harus menjelajahinya dan membuang-buang
00:23:12waktu, konteks, dan lain sebagainya.
00:23:15Ada Svelte autofixer yang sangat luar biasa
00:23:17yang telah mereka bangun untuk mendeteksi pola-pola
00:23:21yang cenderung digunakan LLM yang kurang baik dan memperbaikinya.
00:23:26Dan itu juga memiliki beberapa integrasi taman bermain (playground)
00:23:33yang bisa Anda gunakan di sini.
00:23:37Dan hal keren lainnya yang kami miliki
00:23:39adalah salah satu keputusan desain inti kami
00:23:44saat melihat semua hal tentang AI ini
00:23:46adalah bagaimana cara membuatnya berguna bagi agen maupun manusia?
00:23:52Kami tidak ingin ini menjadi sesuatu yang tidak jelas
00:23:55di mana agen Anda secara ajaib mengetahui banyak hal,
00:23:59tetapi Anda tidak mengetahuinya.
00:24:00Itu akan sulit dipahami.
00:24:01Jadi pada dasarnya, semua yang kami lakukan,
00:24:04kami coba integrasikan ke dalam dokumentasi juga.
00:24:07Dan keahlian (skills) yang telah kami publikasikan,
00:24:09yang merupakan bagian dari plugin Open Code atau Cloud Code
00:24:12saat Anda menginstalnya, sebenarnya mereka
00:24:15juga memublikasikan semua konten mereka ke dalam dokumentasi.
00:24:18Jadi Anda bisa selalu tahu bahwa jika Anda
00:24:20bertanya-tanya praktik terbaik apa yang kami berikan kepada LLM Anda,
00:24:25Anda bisa membacanya sendiri.
00:24:27Dan itu akan selalu tersedia di situs kami seperti ini.
00:24:31Jadi mari kita kembali dan melihat seberapa banyak pekerjaan
00:24:34yang sudah dilakukan oleh alat ini.
00:24:35Sejauh ini belum banyak.
00:24:39Atau mungkin sebenarnya sudah banyak.
00:24:45Ya, jadi ada banyak proses penataan gaya (styling) yang terjadi.
00:24:56Dan sepertinya saya akan membuka localhost saya saja
00:25:00dan melihat apa yang telah dilakukannya.
00:25:03Tidak ada apa-apa.
00:25:07Oke, saya tidak ingin menahan sesi ini
00:25:10sementara ini masih memproses seluruh tahapannya.
00:25:12Mungkin butuh waktu agak lama.
00:25:13Jadi jika kita punya waktu di akhir, kita bisa kembali lagi
00:25:15dan melihat apa yang dihasilkan LLM untuk bisnis
00:25:19meriam kentang buatan kami.
00:25:20Tapi ya, itulah pengembangan AI yang telah kami lakukan
00:25:25selama beberapa bulan terakhir.
00:25:26Luar biasa.
00:25:32Ya, sangat relevan di era baru ini.
00:25:37Saya sangat ingin tahu apa langkah selanjutnya.
00:25:40Apa yang kalian nantikan?
00:25:46Rilisan berikutnya adalah Svelte Kit 3.
00:25:51Kami sedang aktif mengerjakannya saat ini.
00:25:53Tapi itu bukan sesuatu yang besar
00:25:56dengan banyak fitur baru.
00:25:57Ini pada dasarnya adalah kesempatan untuk menghentikan
00:25:59banyak hal lama, semacam membersihkan tumpukan
00:26:02agar kami bisa membangun semua hal baru yang menarik.
00:26:06Perubahan terbesarnya adalah akan menggunakan API
00:26:09lingkungan sekarang setelah Vite 8 dirilis tepat dua jam yang lalu.
00:26:15Dan itu akan membutuhkan Svelte 5 sebagai versi terbaru.
00:26:21Jadi, Anda masih bisa menggunakan Svelte 4.
00:26:25Dan setelah itu, kami akan fokus
00:26:29untuk menstabilkan async Svelte dan menstabilkan fungsi jarak jauh.
00:26:33Kedengarannya bagus.
00:26:37Dan saya dengar selentingan bahwa saya
00:26:41akan menyerahkan kepada Elliot karena LLM-nya
00:26:44sudah selesai memproses.
00:26:46Ingin menunjukkan kepada kami apa yang Anda punya?
00:26:47Begitulah adanya, ia memutuskan untuk selesai
00:26:49tepat satu milidetik setelah kita beralih ke bagian berikutnya.
00:26:55Jadi mari kita lihat ke sini.
00:26:59Ya, jadi inilah toko meriam kentang buatan tangan kami
00:27:03yang baru saja kami dapatkan dengan sekitar 1 dolar token.
00:27:07Dan sebenarnya, saat melihat sekilas kodenya,
00:27:13ia melakukan pekerjaan yang sangat baik dengan tidak melakukan hal aneh
00:27:17dan menggunakan apa yang saya anggap sebagai praktik terbaik untuk Svelte.
00:27:22Jadi, cobalah.
00:27:25Beri tahu kami pendapat Anda.
00:27:27Saya sangat terkesan dengan pekerjaan
00:27:29yang telah dilakukan Paolo dan yang lainnya pada semua hal AI ini.
00:27:33Dan kami ingin terus melakukan peningkatan.
00:27:35Jadi berikan masukan Anda jika ada.
00:27:38Terima kasih.
00:27:40Suka sekali, dewa demo berpihak pada kita hari ini.
00:27:45Bagaimana kalau kita buka sesi tanya jawab?
00:27:47Saya rasa kita sudah mendapatkan beberapa pertanyaan di obrolan.
00:27:51Saya akan memulainya, ya?
00:27:53Ada satu pertanyaan untuk Remote Functions (Fungsi Jarak Jauh).
00:27:57Apakah kita akan mendapatkan streaming untuk Remote Functions?
00:28:00DX Remote Functions sangat luar biasa.
00:28:03Ingin menggunakannya di mana saja.
00:28:05Ya, saya rasa Richard bisa menjawab ini
00:28:06karena Anda ahli di bidang itu.
00:28:10Ya, lucu sekali Anda menanyakan hal itu.
00:28:12Karena saya sebenarnya sedang membangun aplikasi saat ini
00:28:15yang sangat membutuhkan fitur ini.
00:28:17Dan kami—jadi Simon mengerjakan PR (Pull Request) beberapa waktu lalu,
00:28:22yang mengimplementasikan sebagian darinya.
00:28:23Kami telah memiliki—seperti ide-ide kami tentang desainnya
00:28:28telah sedikit berkembang sejak saat itu.
00:28:31Tapi itu adalah sesuatu yang sangat ingin kami kerjakan kembali.
00:28:35Jadi ya, mungkin jika kita melakukan ini seminggu dari sekarang,
00:28:40kita akan bisa mengatakan, inilah pull request-nya.
00:28:43Kami belum sampai di sana.
00:28:44Tapi yakinlah, ini adalah prioritas yang sangat tinggi.
00:28:47Dan kami sangat bersemangat untuk fitur ini.
00:28:49Bagi yang belum familiar, pada dasarnya yang
00:28:51kami bicarakan adalah memiliki versi waktu nyata (real-time)
00:28:55dari fungsi kueri, di mana saat Anda meminta
00:28:59data dari server, itu akan mengembalikan iterable asinkron,
00:29:04yang setiap kali ada data baru,
00:29:09akan mengirimkan data tersebut kembali ke klien.
00:29:12Jadi Anda bisa mendapatkan data real-time tanpa perlu polling
00:29:15atau semacamnya.
00:29:16Dan segera setelah halaman tidak lagi menampilkan data itu,
00:29:21permintaan akan dihentikan.
00:29:23Dan iterable asinkron akan membersihkan dirinya sendiri.
00:29:26Ini hanyalah cara yang sangat bagus untuk berpikir
00:29:28tentang masalah real-time ini.
00:29:31Ya, sangat bersemangat untuk itu.
00:29:33Dan agar sepenuhnya jelas di sini, saya ingin
00:29:35memberi tahu kalian bahwa maksud Rich dengan kami
00:29:38akan segera mengerjakannya adalah Elliot saat ini menghalangi saya
00:29:40untuk mengerjakan ini.
00:29:41Dan saya sedang menunggunya menyelesaikan sesuatu.
00:29:43Jadi segera setelah saya selesai dengan apa yang saya kerjakan sekarang,
00:29:45kami akan langsung mengerjakannya.
00:29:46Bagus.
00:29:50Kita punya pertanyaan lain.
00:29:52Yaitu, mengapa memilih Svelte dibanding framework lain?
00:29:55Tentu saja, kami menganggap ini framework terbaik dan paling mumpuni.
00:30:07Tapi alasan sebenarnya untuk memilih framework apa pun
00:30:11di zaman sekarang ini adalah karena Anda
00:30:13lebih menikmatinya daripada framework lainnya, jujur saja.
00:30:18Banyak hal yang lebih berkaitan dengan preferensi pribadi
00:30:20daripada hal lainnya.
00:30:22Dan terutama saat ini, ketika
00:30:24sangat mudah untuk berpindah antar framework,
00:30:28Anda punya penyihir ajaib (AI) yang bisa mengajari Anda—
00:30:32Saya terbiasa melakukannya dengan cara ini di Vue.
00:30:35Bagaimana cara melakukannya di Angular atau apa pun itu?
00:30:37Mereka bisa melakukannya.
00:30:38Kurva pembelajaran pada dasarnya telah mendatar
00:30:43di zaman sekarang ini.
00:30:45Jadi Anda harus menggunakan alat yang membuat Anda paling produktif
00:30:49dan yang paling membuat Anda bahagia saat menggunakannya.
00:30:53Dan sebagian dari itu adalah tentang komunitas di sekitar proyek tersebut.
00:30:57Sebagian lagi tentang filosofi keseluruhan dari proyeknya.
00:31:02Tapi yang menurut saya tidak perlu Anda lakukan saat ini
00:31:05adalah membuat keputusan berdasarkan framework mana yang bisa melakukan sesuatu.
00:31:11Karena semuanya bisa melakukan hal yang sama,
00:31:13atau framework mana yang memiliki ekosistem terbesar.
00:31:16Karena itu benar-benar bukan masalah lagi.
00:31:18Jadi pilih saja framework yang paling menyenangkan.
00:31:21Dan kami pikir itu jelas Svelte.
00:31:26Jawaban yang luar biasa.
00:31:27Suka sekali.
00:31:29Selanjutnya, ada yang bertanya, ada hal baru terkait cache?
00:31:35Ya, saya rasa ini tentang remote functions mungkin.
00:31:38Jadi dalam konteks remote functions,
00:31:41kami belum memiliki API cache.
00:31:45Ada proposal internal.
00:31:48Pengerjaannya belum aktif.
00:31:51Itu dikesampingkan di tengah semua pekerjaan lain yang sedang berlangsung.
00:31:55Tapi itu akan segera dilanjutkan lagi.
00:31:58Dan kemudian kita akan memiliki API caching yang sangat bagus yang
00:32:01terintegrasi dengan remote functions.
00:32:05Luar biasa.
00:32:06Kita punya pertanyaan santai.
00:32:08Di mana lokasi impian Anda untuk Svelte Summit?
00:32:10Oh, wow.
00:32:13Apakah Anda ingin menjawab satu per satu secara langsung?
00:32:16Anda sedang di-mute, Elliot.
00:32:22Maksud saya, jika kita bicara tentang puncak (summits),
00:32:24kita punya Everest, K2.
00:32:28Tidak, tapi bagi saya, lokasi tidak terlalu menjadi masalah.
00:32:34Karena saya kebanyakan hanya berkumpul
00:32:36dengan para pengembang Svelte lainnya.
00:32:38Jadi kedengarannya mungkin klise, tapi di mana pun itu luar biasa.
00:32:43Tapi Eropa sangat keren.
00:32:46Jadi hampir semua tempat di sana
00:32:48adalah tempat yang belum pernah saya kunjungi dan ingin saya datangi.
00:32:51Jadi saya selalu senang punya alasan untuk pergi ke luar negeri.
00:32:56Ada kecenderungan di dunia Svelte
00:33:01untuk menggunakan awalan SV pada segalanya.
00:33:04Jadi apa pun kata yang Anda
00:33:06coba bangun pustaka atau konsepnya,
00:33:08Anda tinggal menaruh SV di depannya.
00:33:11Dan saya pikir jika kita benar-benar mendalami itu,
00:33:12maka kita akan mengadakan konferensi di Svalbard.
00:33:15Bagus.
00:33:20Yang mana itu seperti—kepulauan Norwegia.
00:33:23Apakah Anda baru saja mencarinya di Google?
00:33:27Sebenarnya itu baru saja muncul dalam percakapan tempo hari.
00:33:31Ya, secara acak.
00:33:35Ya.
00:33:38Jadi jika saya boleh bermimpi sepenuhnya, saya rasa lokasi impian saya
00:33:41sebenarnya adalah di atas kapal.
00:33:45Berada di laut saja.
00:33:47Cuaca yang bagus.
00:33:49Dan kita habiskan, entahlah, tiga hari di atas kapal.
00:33:52Itu pasti keren.
00:33:55Semua yang di atas terdengar menyenangkan.
00:33:57Dan saya sangat bersemangat kapan pun Svelte Summit berikutnya diadakan.
00:34:00Dan mengenai komunitas dan acara,
00:34:03kita punya pertanyaan, bagaimana orang-orang
00:34:05bisa terlibat dengan Svelte, adakah acara, atau peluang
00:34:07komunitas?
00:34:11Ada acara yang berlangsung sepanjang waktu.
00:34:13Jika Anda pergi ke sveltesociety.dev, maka Anda
00:34:15bisa melihat kalender acaranya.
00:34:16Dan ada juga banyak sumber daya tentang cara terbaik
00:34:19untuk terlibat, terutama jika tidak ada sesuatu
00:34:22di daerah Anda dan Anda tertarik untuk memulai
00:34:25cabang Svelte Society, maka sveltesociety.dev
00:34:28adalah tempat untuk mendapatkan informasi.
00:34:33Ya, dan juga, jika Anda sangat baru, masuklah ke Discord
00:34:36dan sapa saja di salah satu saluran yang ada.
00:34:41Ada juga saluran khusus untuk berbagai cabang
00:34:47atau komunitas lokal.
00:34:49Sebagian besar merujuk ke saluran Discord lain
00:34:55dalam bahasa masing-masing.
00:34:57Sebagai contoh, ada juga saluran Discord Svelte Society Jerman.
00:35:00Jadi ya, masuk saja ke saluran Discord tersebut,
00:35:01dan Anda bisa memulainya dari sana.
00:35:06Dan jika tidak, saluran terkait Svelte
00:35:08juga merupakan tempat yang asyik untuk berkumpul.
00:35:12Ya, orang-orang di komunitas Svelte itu menyenangkan.
00:35:16Jadi ya, coba kunjungi mereka.
00:35:18Kita punya pertanyaan lain terkait AI.
00:35:22Saya tahu, Elliot, Anda sudah membicarakan ini.
00:35:24Seseorang bertanya, senang melihat framework beradaptasi
00:35:26dengan dunia agen/AI.
00:35:29Saya penasaran apakah Anda punya statistik tentang agen yang secara default memilih Svelte.
00:35:31Tidak, tidak juga.
00:35:36Kami mungkin bisa mendapatkan semacam sinyal
00:35:37untuk itu melalui sesuatu seperti v0, di mana
00:35:44kita melihat telemetri seperti itu.
00:35:46Tapi Svelte, secara umum, telah—
00:35:49Bisa saya katakan—orang-orang yang mengerjakan Svelte
00:35:53mengambil pendekatan yang agak negatif
00:35:57terhadap pengumpulan telemetri pada berbagai hal.
00:36:01Jadi bisa dibilang, satu-satunya data yang kami punya
00:36:06adalah hal-hal yang tersedia secara publik.
00:36:08Jadi kita bisa melihat tren unduhan NPM, yang
00:36:10saya rasa sedang melonjak gila-gilaan saat ini karena alasan aneh.
00:36:14Jadi mungkin jangan menganggap itu sebagai kebenaran mutlak.
00:36:18Ya, jangan khawatir.
00:36:20Tapi ya, kami benar-benar tidak mengumpulkan data apa pun
00:36:22dari pengguna kami demi alasan privasi.
00:36:25Kami tidak ingin memantau mesin Anda seperti itu.
00:36:27Jadi data yang kami dapatkan adalah apa pun yang tersedia secara publik
00:36:30dan mungkin beberapa info berguna melalui saluran Vercel.
00:36:35dan mungkin beberapa hal berguna melalui saluran Vercel.
00:36:43Secara anekdot, jika Anda bertanya pada LLM, apa yang harus dipilih,
00:36:46mana yang terbaik, Svelte sering kali disebutkan.
00:36:51Jadi itu bagus, setidaknya.
00:36:53Tapi apakah itu berarti mereka akan memilih Svelte,
00:36:56jika Anda tidak menentukannya dalam perintah Anda, itu pertanyaan lain.
00:37:01Ya, ini sangat menarik.
00:37:03Begitu Anda meminta mereka memikirkan apa alat yang ideal,
00:37:06mereka akan sering menjawab Svelte.
00:37:08Tetapi jika Anda tidak mengatakan, "Saya ingin Anda menggunakan kerangka kerja ini"
00:37:11atau "Saya ingin Anda menggunakan kerangka kerja terbaik,"
00:37:12hanya minta dibuatkan aplikasi, mereka umumnya akan memilih React.
00:37:17Dan tidak banyak yang bisa kami lakukan untuk mengubah hal itu.
00:37:21Jadi kami memfokuskan perhatian kami
00:37:23untuk memastikan bahwa bagi tim yang memilih Svelte,
00:37:27Anda mendapatkan pengalaman terbaik yang memungkinkan.
00:37:29Dan agen AI memiliki kemampuan terbaik
00:37:31untuk menelusuri dokumentasi dan memahami kesalahannya.
00:37:36Ya, dan seperti yang terlihat pada blog bertema Portal dan situs web
00:37:42Potato Cannon, mereka mulai menjadi sangat
00:37:46mahir dalam menangani konteks dan MCP dan sebagainya.
00:37:50Jadi ya, Anda bisa melangkah cukup jauh dengan cepat sekarang.
00:37:56Bagus.
00:37:57Ya, senang melihat semua pekerjaan
00:37:58yang kalian lakukan dan juga mengakomodasi
00:38:01audiens manusia maupun agen AI.
00:38:04Dan kami punya beberapa pertanyaan yang lebih spesifik
00:38:06mengenai fitur-fitur Svelte.
00:38:08Salah satunya adalah, apakah boleh melakukan beberapa panggilan
00:38:11ke fungsi jarak jauh yang sama di dalam markup,
00:38:14atau sebaiknya kita buat satu referensi saja di tag script?
00:38:17Ya, tentu saja.
00:38:20Kau sedang mengerjakan ini sekarang, jadi silakan jawab.
00:38:24Hal yang menghalangi Rich mengerjakan live query
00:38:26saat ini sebenarnya berkaitan dengan pertanyaan ini.
00:38:29Ya, sama sekali tidak masalah memanggil fungsi jarak jauh yang sama
00:38:35berkali-kali dan merujuknya berulang kali
00:38:39di tempat yang berbeda-hui.
00:38:41Saat Anda menggunakan fungsi jarak jauh,
00:38:44model mental Anda untuk kueri seharusnya
00:38:46seperti ketika saya memanggil kueri dengan sebuah argumen,
00:38:50saya mendapatkan referensi ke kueri tersebut,
00:38:54dan kueri itu berbeda dari datanya sendiri.
00:38:57Jadi jika saya memanggil getUser dengan ID satu di mana saja di aplikasi saya,
00:39:04saya sebenarnya akan mendapatkan instansi kueri yang sama
00:39:07di mana pun.
00:39:08Jadi panggilan kueri Anda diduplikasi di seluruh aplikasi Anda
00:39:11sehingga Anda maksimal hanya mendapatkan satu panggilan per set argumen.
00:39:16Jadi argumen yang berbeda menghasilkan hasil yang berbeda.
00:39:19Argumen yang sama menghasilkan kueri yang sama.
00:39:21Semuanya diduplikasi di seluruh aplikasi.
00:39:24Ada beberapa keunikan dalam hal itu saat ini,
00:39:28dan itulah yang sedang saya coba perbaiki dan kodifikasi
00:39:33serta buat menjadi sedikit lebih jelas
00:39:37selama beberapa minggu terakhir ini.
00:39:39Dan mudah-mudahan itu akan segera dirilis.
00:39:41Tapi ya, jawaban singkatnya adalah ya.
00:39:44Panggil saja dan gunakan di mana pun Anda mau.
00:39:47Ya, dan hanya untuk memperluas itu,
00:39:48alasan utama kami melakukan semua pekerjaan ini
00:39:51dengan kata kunci await dan sebagainya adalah
00:39:54karena kami ingin Anda mampu, sejauh mungkin,
00:39:57mengekspresikan semua kebutuhan komponen Anda
00:39:59di dalam komponen tersebut.
00:40:00Jadi masa-masa mengambil data di bagian atas lalu
00:40:04mengoperkannya dengan hati-hati ke semua bagian yang butuh,
00:40:08masa itu akan berakhir.
00:40:10Tetapi sebagai bagian dari itu, jika Anda harus memiliki referensi kueri
00:40:14dan kemudian mengoperkannya ke sana kemari, maka kami
00:40:15belum benar-benar mencapainya.
00:40:17Jadi idenya adalah jika komponen ini butuh data
00:40:20dan komponen ini juga kebetulan butuh data yang sama,
00:40:22mereka tidak perlu berkomunikasi satu sama lain.
00:40:24Mereka bisa langsung meminta data tersebut kepada sistem
00:40:28melalui antarmuka kueri.
00:40:29Dan sistem akan memastikan
00:40:32bahwa hal itu hanya menghasilkan satu permintaan saja
00:40:34dan tidak menyebabkan ketidakkonsistenan di antara kedua
00:40:36komponen tersebut.
00:40:40Luar biasa, terima kasih.
00:40:42Dan yang satu ini tentang API animasi dan transisi.
00:40:47Apakah ada rencana perombakan untuk itu?
00:40:49Mereka bilang, "Saya merasa agak sulit untuk mengoper flip
00:40:54dari/ke berbagai ukuran melalui lampiran."
00:40:57Sangat tidak sabar untuk mulai mengerjakan ini.
00:41:02Sudah menantikannya sejak lama.
00:41:04Banyak sekali hal yang harus dilakukan.
00:41:06Ya, hal-hal lain terus menghalangi.
00:41:09Intinya, saat kami merancang API lampiran,
00:41:12itu dilakukan justru dengan mempertimbangkan hal ini.
00:41:16Transisi dan animasi itu keren.
00:41:19Dan mereka terintegrasi ke dalam kerangka kerja
00:41:21dengan cara yang memudahkan untuk melakukan hal-hal tertentu.
00:41:25Tetapi begitu Anda melewati batas tertentu,
00:41:28mereka tidak bisa lagi membantu Anda.
00:41:29Anda membutuhkan kontrol terprogram yang lebih besar atas mereka.
00:41:33Dan di situlah API terprogram
00:41:36untuk menentukan transisi dan animasi akan sangat berguna.
00:41:42Dan API lampiran adalah—
00:41:46idenya adalah di masa depan, API lampiran,
00:41:49dikombinasikan dengan API yang bisa mengatakan,
00:41:52"Hei, saat saya ditarik keluar dari DOM,"
00:41:54"tunggu sebentar sampai saya bisa melakukan sedikit efek pudar"
00:41:58"atau sedikit goyangan atau apa pun itu."
00:42:00"Setelah itu barulah Anda boleh menghapus saya dari DOM."
00:42:02Itulah yang akan memungkinkan skenario transisi animasi
00:42:06yang lebih canggih.
00:42:09Tapi kita belum sampai di sana.
00:42:11Itu sudah direncanakan.
00:42:12Itu pasti akan terjadi.
00:42:13Tapi saya belum bisa memberikan kerangka waktu.
00:42:16Yang pasti tidak dalam dua atau tiga bulan ke depan.
00:42:22Bagus.
00:42:22Setidaknya itu sudah masuk pantauan.
00:42:24Kami senang mendengarnya.
00:42:25Keren.
00:42:25Saya rasa kita punya waktu untuk satu pertanyaan lagi.
00:42:27Jadi, yang terakhir.
00:42:29Svelte bersifat agnostik, tetapi apa database favorit
00:42:32para anggota tim?
00:42:34Satu putaran lagi.
00:42:37SQLite.
00:42:37Saya pernah menggunakan Neon di masa lalu untuk eksperimen cepat,
00:42:47dan itu sangat menyenangkan.
00:42:50Ya, SQLite itu bagus.
00:42:53Yang sangat saya nantikan adalah agar mesin sinkronisasi ini
00:42:59menjadi sangat bagus dan tersedia luas sehingga kita
00:43:02bisa menerapkan sistem local-first.
00:43:05Dan kemudian—sejujurnya, saya tidak peduli,
00:43:09database apa yang saya gunakan di belakang, itu jawaban singkat saya.
00:43:13Ya, saya rasa—
00:43:15saya tidak tahu apakah saya benar-benar punya favorit karena—
00:43:18ketika Anda bertanya, "apa database favoritmu,"
00:43:22ada begitu banyak jenis karena mereka
00:43:24melakukan hal-hal yang berbeda dengan lebih baik.
00:43:26Jadi Anda harus benar-benar tahu alasan Anda
00:43:28memilih database untuk bisa menentukan mana yang favorit.
00:43:31Saya rasa hal-hal seperti Convex sangat menarik untuk
00:43:36mesin sinkronisasi local-first.
00:43:38Menurut saya mereka sangat keren, dan punya banyak fitur bagus
00:43:41yang diunggulkan.
00:43:42Database serbaguna favorit saya
00:43:45sebenarnya adalah Dynamo.
00:43:47Bisa agak membingungkan untuk membiasakan diri,
00:43:49tetapi kinerjanya sangat, sangat cepat.
00:43:51Dan skalabilitasnya sangat, sangat, sangat baik.
00:43:55Tetapi saya juga sangat menyukai SQL.
00:43:58Jadi jika saya bisa menggunakan database SQL untuk sebuah proyek,
00:44:04saya mungkin akan memilihnya karena karier saya dimulai
00:44:07di bidang analisis data dan sebagainya.
00:44:09Jadi SQL adalah apa yang saya pelajari sejak awal, pada dasarnya.
00:44:14Jadi ya, saya tidak tahu apakah saya punya favorit,
00:44:16tapi begitulah cara saya memikirkannya.
00:44:20Bagus.
00:44:20Dan kami punya satu komentar dari Paolo.
00:44:23Saya tahu kalian sudah menyebutnya tadi.
00:44:24Dia bilang, "Saya melihat terlalu banyak warna."
00:44:27"Apakah kita yakin Rich, Simon, dan Elliot bekerja untuk Vercel?"
00:44:32"Kursi saya hitam."
00:44:35Ya, Paolo mendesak saya memakai hoodie Vercel,
00:44:38tapi di sini terlalu gerah.
00:44:40Baiklah semuanya.
00:44:45Tapi saya punya di lemari, dan saya memakainya
00:44:48saat cuaca sedang lebih dingin.
00:44:51Itu yang ingin kami dengar, memakai merchandise-nya.
00:44:54Luar biasa.
00:44:55Ya, saya sangat bersemangat untuk masa depan Svelte
00:44:58dan sangat menghargai kalian yang telah bergabung
00:45:01atas semua kerja keras kalian di balik layar.
00:45:03Terima kasih banyak juga kepada seluruh tim Svelte
00:45:05lainnya yang tidak ikut siaran langsung, para maintainer Svelte.
00:45:09Dan apresiasi juga untuk komunitas Svelte yang luar biasa.
00:45:11Ya, terima kasih Rich, Simon, Elliot sudah bergabung hari ini.
00:45:16Terima kasih.
00:45:17Dah.
00:45:18Sama-sama.
00:45:20Oke, penonton, jangan ke mana-mana dulu
00:45:23karena sebelum kita tutup, kita punya tamu yang sangat istimewa.
00:45:26Kita kedatangan Eve dari tim edukasi Vercel.
00:45:31Halo.
00:45:32Apa kabar?
00:45:33Halo, Eve.
00:45:33Baik.
00:45:34Apa kabar?
00:45:35Kabar saya baik.
00:45:36Terima kasih.
00:45:36Isinya benar-benar tim terbaik di bidangnya.
00:45:40Ya.
00:45:41Benar-benar istimewa.
00:45:44Baiklah.
00:45:45Apakah Anda ingin memberi tahu kami lebih banyak tentang Academy
00:45:47dan apa yang sedang Anda siapkan?
00:45:49Ya, dengan senang hati.
00:45:50Jadi jika Anda belum dengar, Vercel sekarang memiliki Academy.
00:45:55Kami punya 11 kursus yang sudah tersedia.
00:45:57Yang terbaru baru saja dirilis hari ini,
00:46:03yaitu, ta-da, kursus Svelte di Vercel.
00:46:10Jadi tim ini sangat membantu dalam
00:46:13menyelesaikannya hingga tuntas.
00:46:15Di dalamnya, kita akan membangun aplikasi peringatan ski.
00:46:18Jadi jika Anda seorang pemain ski—
00:46:23oh, ya.
00:46:25Saya sedang berbagi layar, akan saya tampilkan.
00:46:28Keren.
00:46:29Oh, itu dia.
00:46:30Itu dia.
00:46:31Jadi lebih seru melakukannya.
00:46:34Kursus Svelte di Vercel sudah tersedia.
00:46:36Di situ, Anda akan membangun aplikasi peringatan ski.
00:46:40Di dunia modern kita, jika Anda pemain ski tahun ini,
00:46:43Anda tahu bahwa ini musim yang cukup sulit.
00:46:47Salju sangat sedikit.
00:46:48Di mana-mana terasa hangat.
00:46:50Jadi sangat penting bagi Anda untuk diberitahu
00:46:52kapan hari yang baik untuk bermain ski.
00:46:54Dan inilah aplikasi yang kita bangun sepanjang kursus
00:46:58untuk mewujudkan hal tersebut.
00:46:59Jadi kami punya segala macam—Anda bisa menulis berbagai peringatan
00:47:02untuk berbagai kondisi yang Anda cari
00:47:06sehingga saat hari ski tiba, Anda sudah siap di sana,
00:47:10dan tidak melewatkan hari yang berharga.
00:47:13Jadi ya, kursus ini membahas Svelte.
00:47:17Bagaimana cara menyebarkannya di Vercel?
00:47:19Bagaimana cara menggunakan AI SDK?
00:47:21Bagaimana cara menggunakan alur kerja (workflows)?
00:47:23Dan beberapa tips produksi selama prosesnya.
00:47:27Luar biasa.
00:47:28Bagus sekali.
00:47:29Saya sangat percaya pada metode belajar sambil praktik.
00:47:31Jadi ya, ini hebat.
00:47:33Terima kasih banyak.
00:47:34Dan kami akan menambahkan tautan ke kursusnya
00:47:36juga di sumber daya siaran langsung.
00:47:38Jadi ya, terima kasih sudah bergabung hari ini, Eve.
00:47:41Luar biasa.
00:47:41Terima kasih banyak.
00:47:42Baiklah semuanya.
00:47:46Dan itu membawa kita ke akhir sesi siaran langsung kita.
00:47:49Terima kasih banyak kepada komunitas kami
00:47:51karena telah meluangkan waktu bersama kami.
00:47:52Jujur saja, obrolan di chat sangat ramai hari ini.
00:47:54Senang sekali melihatnya.
00:47:56Ya, kami harap Anda menikmatinya.
00:47:58Dan meminjam kata-kata Rich Harris, Svelte adalah jalan hidup.
00:48:02Jadi silakan bereksperimen dengannya.
00:48:03Ayo buat lebih banyak hal dengan Svelte.
00:48:05Jika Anda ingin bergabung di sesi komunitas kami mendatang,
00:48:08Anda bisa menemukan semua detailnya di platform komunitas kami
00:48:11di [community.vercel.com/live](https://community.vercel.com/live).
00:48:13Ya, terima kasih semuanya.
00:48:15Sampai jumpa.
00:48:16Dah.