Belajar Svelte: Kursus Code
Belajar Svelte: Kursus Code — Pelajari Svelte dan SvelteKit dengan editor langsung dan output yang dikompilasi di sebelahnya
Belajar Svelte: Kursus Code adalah aplikasi iOS dan Android gratis untuk mempelajari Svelte dan SvelteKit di ponsel Anda. Tulis komponen di editor langsung dengan pratinjau, lihat JavaScript yang dihasilkan compiler, dan ikuti 41 kursus mulai dari nilai reaktif pertama hingga aplikasi full-stack yang sudah di-deploy, dengan AI Mentor di samping Anda.
- Harga
- Gratis, upgrade Pro
- Platform
- iOS dan Android
- Bahasa
- 22
- Peringkat usia
- 4+
- Memerlukan
- iOS 15.1 atau lebih baru
Tidak ada yang berjalan dengan Svelte di layar itu. Yang berjalan adalah hasil yang ditulis Svelte.
Pelajaran pertama aplikasi ini menampilkan komponen sembilan baris di samping JavaScript yang dihasilkan compiler untuknya. Ketuk +1 dan baris yang dijalankan akan menyala: satu invalidasi, satu nilai yang dihitung ulang, dua node teks berubah, dan tidak ada bagian lain yang tersentuh. Itulah gagasan di balik framework ini, ditampilkan sebelum dijelaskan.
Apa itu
Belajar Svelte: Kursus Code adalah aplikasi iOS dan Android gratis yang mengajarkan Svelte dan SvelteKit melalui 41 kursus dan 163 pelajaran, dengan tingkat kesulitan dari pemula hingga tingkat lanjut. Aplikasi ini dibuka dengan demo yang menampilkan komponen di samping JavaScript hasil kompilasinya, lalu membahas reaktivitas, props, stores, transitions, Svelte 5 runes dan routing SvelteKit, pemuatan data, form actions, serta deployment. Editor langsung dengan pratinjau dan AI Mentor sudah tersedia di dalamnya.
Di dalam aplikasi
Tampilannya
Kursusnya
Materi yang dibahas dalam kursus Svelte
41 kursus dan 163 pelajaran dari daftar kursus bawaan aplikasi, dengan tingkat A1 hingga C1 dan diakhiri proyek SvelteKit full-stack.
Komponen Pertama
Apa itu Svelte dan alasan Svelte menggunakan pendekatan yang berbeda, menyiapkan proyek, serta menulis komponen pertama dengan variabel reaktif.
Props, Template, Event, dan Binding
Meneruskan props, kondisional dan perulangan each dalam markup, event DOM dan event kustom, serta binding dua arah dengan direktif bind:.
Lifecycle, Store, dan Context
onMount dan onDestroy, store writable, readable, derived, dan kustom, slot dan komposisi, serta Context API.
Transition, Animasi, dan Action
Direktif transition, direktif animate, action untuk perilaku DOM yang dapat digunakan kembali, transition kustom, serta store motion spring dan tweened.
Dasar-Dasar SvelteKit
Routing dan halaman berbasis file, fungsi load, layout lanjutan, form action, rute API, server hook, dan halaman error.
Svelte 5 Runes
Pengenalan tentang runes, props dan snippets, runes lanjutan, serta pembahasan lebih mendalam tentang cara kerja reaktivitas Svelte.
SvelteKit dalam Produksi
SSR dan prerendering, streaming, performa, SEO dan meta tag, keamanan, pola auth, adapter, dan deployment.
Testing dan Full-Stack
Unit test dengan Vitest, tes end-to-end dengan Playwright, library pihak ketiga, manajemen state dalam skala besar, dan aplikasi SvelteKit full-stack.
Cara kerjanya
Cara kerja satu sesi
Aplikasi ini disusun mengikuti perjalanan dari satu nilai reaktif hingga aplikasi yang siap di-deploy, dan setiap tahap memadukan bacaan dengan sesuatu yang dapat dijalankan.
Lihat output compiler terlebih dahulu
Demo pembuka menempatkan komponen kecil di samping JavaScript hasil kompilasinya. Bagian yang dikompilasi telah dibuat sebelumnya dan disertakan di dalam aplikasi, sehingga demo dapat berjalan tanpa koneksi.
Edit komponen dan lihat pratinjaunya
Pelajaran dibuka dengan editor yang memiliki tab HTML, CSS, dan JavaScript, serta tombol run yang merender komponen dalam pratinjau. Pratinjau memuat compiler Svelte melalui jaringan, sehingga memerlukan koneksi.
Pastikan Anda memahaminya
Kuis dan coding challenges mengikuti setiap topik, dan AI Mentor dapat menjelaskan konsep, menyarankan roadmap, atau menguji Anda tentang sebuah kursus. Weekly Code Challenge menambahkan putaran kompetitif.
Apa saja isinya
Yang tersedia di dalam aplikasi
41
Kursus, A1 hingga C1
163 pelajaran dalam 41 kursus, mulai dari penyiapan Svelte dan komponen pertama Anda hingga stores, transitions, routing dan hooks SvelteKit, Svelte 5 runes, testing, serta capstone full-stack.
Dikompilasi
Komponen di samping kode hasil kompilasinya
Demo saat pertama kali dijalankan menampilkan source dan JavaScript yang dihasilkan secara bersamaan, serta menghitung node teks yang diperbarui dibandingkan dengan elemen yang dibuat ulang, sehingga biaya sebuah update dapat Anda lihat langsung di layar.
Pratinjau
Editor langsung dengan pratinjau
Tulis markup, styles, dan script di tab terpisah, lalu render komponen di ponsel. Pratinjau menggunakan compiler Svelte 4.2.19, sehingga kode yang ditulis dengan Svelte 5 runes mungkin tidak dapat dipratinjau dan sebaiknya dibaca serta diikuti saja.
AI
AI Mentor
Minta konsep utama dari sebuah kursus, tips untuk belajar lebih cepat, kuis, atau roadmap pribadi melalui tab chat, atau tanyakan tentang error yang tidak dapat Anda pahami.
Mingguan
Weekly Code Challenge
Putaran challenge rutin untuk diikuti sambil mengerjakan pelajaran, dengan streaks, pelacakan progres, dan pengingat agar rutinitas tetap berjalan.
Ujian
Sertifikat kelulusan
Lulus ujian akhir dan sertifikat akan mencantumkan nama Anda sebagai bukti pekerjaan yang telah dilakukan, bukan kualifikasi terakreditasi.
Latar belakang
Apa itu Svelte, dan apa bedanya dengan cara lain untuk membuat antarmuka web?
Svelte adalah framework untuk membuat antarmuka pengguna, yang komponennya dikompilasi terlebih dahulu menjadi JavaScript biasa yang memperbarui halaman secara langsung, alih-alih mengirimkan runtime besar yang menentukan perubahan di browser. Komponen adalah satu file yang berisi markup, styles, dan script, dan assignment seperti count += 1 sudah cukup untuk memperbarui layar. SvelteKit adalah framework aplikasi yang dibangun di atasnya, dengan tambahan routing berbasis file, pemuatan data di sisi server, penanganan form, dan adapter untuk deployment. Dampak praktisnya bagi pembelajar adalah lebih sedikit boilerplate dan jarak yang lebih pendek antara kode dan apa yang muncul di halaman.
Reaktivitas saat kompilasiassignment adalah state
Di Svelte, compiler mengubah assignment biasa menjadi kode yang memperbarui bagian halaman yang terdampak. Statement berlabel yang diawali $: akan menghitung ulang suatu nilai setiap kali nilai yang dibacanya berubah, sehingga data turunan tidak memerlukan helper functions.
Storesstate bersama di antara komponen
Writable store menyimpan nilai yang dapat di-subscribe oleh banyak komponen, dan menambahkan awalan $ pada namanya akan memberikan subscription otomatis. Derived dan custom stores mengembangkan kemampuan ini saat state perlu dihitung atau dibungkus.
Runessintaks Svelte 5
Svelte 5 menggantikan sebagian besar keajaiban compiler sebelumnya dengan functions eksplisit seperti $state, $derived, dan $props, bersama snippets untuk markup yang dapat digunakan kembali. Kedua gaya ini digunakan dalam project nyata, sehingga aplikasi ini mengajarkan model asli dan model runes sebagai kursus terpisah.
SvelteKitrouting, data, dan deployment
File seperti +page.svelte menjadi sebuah route, fungsi load mengambil data sebelum halaman dirender, form actions menangani pengiriman di server, dan adapter mengemas hasilnya untuk static host, server Node, atau platform serverless.
Kesesuaian
Untuk siapa — dan bukan untuk siapa
Cocok untuk Anda jika Anda
- Ingin belajar Svelte atau SvelteKit dalam sesi singkat, bukan kursus video yang panjang
- Sudah mengetahui sedikit HTML dan JavaScript, serta ingin melihat perubahan yang dibawa framework dengan pendekatan compiler-first
- Ingin tahu cara kerja pembaruan reaktif dan lebih suka membaca kode yang dihasilkan daripada langsung memercayainya
- Menginginkan jalur belajar yang mencakup routing, pemuatan data, auth, dan deployment, bukan hanya komponen
- Suka bertanya kepada AI Mentor mengapa sepotong kode berperilaku seperti itu
Bukan alat yang tepat untuk Anda jika Anda
- Ingin menjalankan kode Svelte 5 runes di pratinjau, yang menggunakan compiler Svelte 4.2.19
- Perlu membuat dan men-deploy seluruh proyek SvelteKit dari ponsel, yang saat ini tetap memerlukan laptop
- Mengharapkan semuanya gratis: kursus pertama gratis dan Pro membuka akses ke sisanya
- Belum pernah melihat HTML atau JavaScript dan menginginkan kursus pemrograman umum sebelum mempelajari framework
Pertanyaan
Pertanyaan yang sering diajukan
Bagaimana cara belajar Svelte di ponsel?
Pilih jalur belajar yang memadukan membaca dan menjalankan kode, karena Svelte paling mudah dipahami saat Anda mengubah suatu nilai dan melihat halaman merespons. Belajar Svelte: Kursus Code dimulai dengan demo output hasil kompilasi, lalu menyediakan pelajaran dengan editor HTML, CSS, dan JavaScript, pratinjau, serta AI Mentor. Gratis untuk memulai di iOS dan Android.
Apakah Svelte sulit dipelajari oleh pemula?
Svelte sering dianggap mudah didekati karena komponen terlihat seperti HTML, CSS, dan JavaScript biasa, sementara assignment memperbarui tampilan layar. Bagian yang sulit muncul kemudian, yaitu store, lifecycle, pemisahan server dan klien di SvelteKit, serta peralihan ke Svelte 5 runes. Belajar Svelte: Kursus Code mengelompokkan 41 kursusnya dari A1 hingga C1 agar topik-topik tersebut dipelajari secara berurutan.
Apa itu SvelteKit dan apakah aplikasi ini mengajarkannya?
SvelteKit adalah framework aplikasi untuk Svelte yang menambahkan routing berbasis file, pemuatan data di server, form action, hook, dan adapter deployment. Belajar Svelte: Kursus Code memiliki kursus khusus tentang routing dan halaman SvelteKit, pemuatan data, form action, rute API, hook, penanganan error, SSR dan prerendering, streaming, keamanan, serta adapter.
Apakah aplikasi ini membahas Svelte 5 runes?
Ya. Belajar Svelte: Kursus Code mencakup kursus tentang pengenalan runes, props dan snippets, serta runes lanjutan. Pratinjau editor saat ini melakukan kompilasi dengan Svelte 4.2.19, sehingga kode runes mungkin tidak dapat ditampilkan di pratinjau dan sebaiknya diikuti melalui teks pelajaran.
Bisakah saya menjalankan kode Svelte di ponsel?
Anda dapat menulis komponen di editor dan menampilkannya di pratinjau. Pratinjau Belajar Svelte: Kursus Code memuat compiler Svelte untuk membangun komponen, sehingga memerlukan koneksi. Demo output hasil kompilasi di awal berbeda: kode hasil kompilasinya sudah disertakan di dalam aplikasi dan dapat berjalan tanpa jaringan.
Apakah Belajar Svelte: Kursus Code gratis?
Aplikasi ini gratis untuk diunduh. Kursus pertama gratis, dengan jatah harian AI Mentor, sedangkan Pro membuka semua kursus, menghapus iklan, dan memberikan akses AI Mentor tanpa batas. Anda dapat mengikuti pelajaran nyata sebelum memutuskan untuk melakukan upgrade.
Apakah saya perlu menguasai JavaScript terlebih dahulu?
Sedikit pengetahuan tentang HTML dan JavaScript akan memudahkan kursus-kursus awal, karena komponen Svelte hanyalah kedua bahasa tersebut dalam satu file. Belajar Svelte: Kursus Code dimulai dengan menjelaskan apa itu Svelte dan cara menyiapkannya, serta menerangkan setiap konsep dengan bahasa sederhana, tetapi ini adalah kursus framework, bukan kursus pemrograman dasar.
Platform dan bahasa apa saja yang didukung?
Belajar Svelte: Kursus Code berjalan di iOS melalui App Store dan di Android melalui Google Play, serta antarmukanya tersedia dalam 22 bahasa. Aplikasi ini memiliki rating 4+, sehingga tidak ada materi yang dibatasi berdasarkan usia.
Mulai
Kompilasi komponen pertama Anda hari ini
Gratis untuk memulai di iOS dan Android, dalam 22 bahasa.
Lainnya dari CoddyKit
Tersedia di iOS dan Android.