Svelte Nedir ve Neden Kullanmalıyız?
Öncelikle, Svelte hakkında kısa bir bilgi verelim. Svelte, geleneksel JavaScript framework’lerinden farklı olarak, uygulamanızın “derleme” zamanında çalışan bir framework’tür. Yani, uygulamanız çalışmaya başlamadan önce, tüm JavaScript, HTML ve CSS dosyaları derlenir ve optimize edilir. Bu, uygulamanızın daha hızlı yüklenmesini sağlar.
Svelte’in avantajlarını kısaca sıralayacak olursak:
- Minimal JavaScript: Svelte, tarayıcıda çalıştırılacak minimal JavaScript kodu üretir, böylece uygulamanız daha hızlı olur.
- Kolay Öğrenme Eğrisi: React veya Vue gibi framework’lere göre çok daha basit bir yapıya sahiptir.
- Zamanında Derleme: Uygulamanızın daha hızlı yüklenmesini sağlayacak optimize edilmiş kodlar sunar.
Şimdi gelin, Svelte’i nasıl kuracağımızı ve ilk uygulamamızı nasıl yazacağımızı öğrenelim!
Svelte Kurulumu: Adım Adım
İlk adım, Svelte kurulumuna başlamak için bilgisayarınızda Node.js'in kurulu olması gerekiyor. Eğer Node.js yüklü değilse, [resmi sitesinden](https://nodejs.org/) indirip kurabilirsiniz. Node.js, Svelte uygulamalarınızın çalışabilmesi için gereklidir.
1. Yeni bir proje oluşturun:
Terminal veya komut istemcisini açın ve aşağıdaki komutu çalıştırarak yeni bir Svelte projesi başlatın:
npx degit sveltejs/template svelte-app
Bu komut, Svelte’in resmi başlangıç şablonunu kullanarak yeni bir proje oluşturur. "svelte-app" adını istediğiniz gibi değiştirebilirsiniz.
2. Gerekli paketleri yükleyin:
Şimdi, proje dizinine gidip gerekli paketleri yüklemek için şu komutu çalıştırın:
cd svelte-app
npm install
Bu komut, Svelte projesi için gerekli olan tüm bağımlılıkları yükleyecektir.
3. Projenizi başlatın:
Paketler yüklendikten sonra, geliştirme sunucusunu başlatmak için şu komutu yazın:
npm run dev
Bu komut, tarayıcınızda "http://localhost:5000" adresinde çalışacak olan Svelte uygulamanızı başlatır.
Artık her şey kuruldu ve hazır! Svelte’in temellerine göz attık, gelin şimdi ilk uygulamamızı yazalım!
İlk Svelte Uygulamanızı Yazalım
Svelte ile çalışmaya başlamak çok kolay! Şimdi, basit bir "Merhaba Dünya" uygulaması yazalım.
1. App.svelte Dosyasını Düzenleyin:
Proje dizininizdeki `src/App.svelte` dosyasını açın. İlk başta şu şekilde görünecektir:
```svelte
Hello {name}!
```
2. Kendi Uygulamanızı Yazın:
Şimdi, biraz daha etkileşimli bir şeyler yapalım! Kullanıcıdan bir isim alalım ve bu ismi ekrana yazdıralım. Bunun için `input` ve `button` etiketlerini kullanacağız. İşte yazmamız gereken kod:
Bu kod parçası, bir kullanıcı adı girildiğinde o ismi ekranda gösterecek. Giriş alanı üzerinde yazı yazıldıkça, ekrandaki metin anında güncelleniyor.
3. Uygulamayı Çalıştırın:
Kodunuzu kaydedin ve tarayıcınızda sayfayı yenileyin. Artık "Merhaba, Dünya!" yazısını görmeli ve ismi değiştirebileceğiniz bir alanı bulmalısınız.
İşte bu kadar basit! Svelte ile çok hızlı bir şekilde dinamik bir uygulama yazabilirsiniz. Artık temel kurulum ve ilk uygulamanızı yazma konusunda tamamen hazırsınız!Sonuç ve İpuçları
Svelte, front-end geliştirme dünyasında oldukça hızlı bir şekilde popülerlik kazanıyor ve bunun haklı sebepleri var. Basitliği, hızlı yükleme süreleri ve kullanıcı dostu yapısı sayesinde birçok geliştirici tarafından tercih ediliyor.
İlk uygulamanızı yazdıktan sonra, daha karmaşık projelere adım atmak için Svelte’in dökümantasyonuna göz atabilirsiniz. Her yeni projede Svelte’in sunduğu basitlik ve hızdan daha fazla yararlanacağınızı göreceksiniz.
İpucu: Svelte’in sunduğu reaktif yapıyı keşfedin! Uygulamalarınızda daha az boilerplate (gereksiz kod) kullanarak daha verimli kodlar yazabilirsiniz.
Hadi şimdi kendi Svelte projelerinizi yaratmaya başlayın ve web geliştirme dünyasında hızla ilerleyin! Unutmayın, her yeni proje, yeni bir şeyler öğrenmek için harika bir fırsat!
