Web geliştiriciliği dünyasına adım atarken, doğru araçları ve teknolojileri seçmek gerçekten büyük bir fark yaratabilir. Birçok popüler JavaScript framework’ü mevcut, ancak bir süre önce sahneye çıkan Svelte, hızla popülerlik kazanarak kendine sağlam bir yer edinmeye başladı. Peki, Svelte nedir ve web uygulamaları geliştirmek için neden tercih edilmelidir? Bu yazıda, Svelte ile nasıl web uygulaması yapacağınızı adım adım keşfedeceğiz.

Svelte Nedir?

Svelte, bir frontend framework’üdür, ancak diğer popüler framework’lerden (React, Vue gibi) farklı olarak, uygulamanın çalıştırılmadan önce tüm bileşenleri derler ve JavaScript’e dönüştürür. Bu, Svelte’in sayfa yükleme süresini hızlandıran ve tarayıcıda daha az iş yükü oluşturan bir özellik sunar. Bu derleme süreci, daha hızlı ve daha verimli bir uygulama deneyimi sağlar.

Başlamak İçin Gereksinimler

Svelte ile çalışmaya başlamadan önce bilgisayarınızda Node.js ve npm (Node Package Manager) yüklü olmalıdır. Eğer yüklü değilse, şu adımları takip edebilirsiniz:

1. Node.js Yükleme: Node.js'i [resmi sitesinden](https://nodejs.org/) indirip yükleyebilirsiniz. Bu, npm ile projelerinizde bağımlılıkları yönetmenizi sağlar.

2. Bir Proje Oluşturma: Şimdi Svelte ile ilk projenizi başlatabilirsiniz. Bunun için terminali açıp aşağıdaki komutu yazın:

npx degit sveltejs/template my-app

Bu komut, Svelte'in resmi şablonunu indirir ve `my-app` adında yeni bir proje oluşturur. Ardından, proje klasörünüze gidin:

cd my-app

3. Bağımlılıkları Yükleyin: Proje dizinindeyken gerekli bağımlılıkları yüklemek için şu komutu yazın:

npm install

4. Uygulamayı Çalıştırma: Bağımlılıklar yüklendikten sonra uygulamanızı çalıştırmak için şu komutu kullanabilirsiniz:

npm run dev

Artık Svelte ile oluşturduğunuz uygulama yerel sunucuda çalışmaya başlayacak. Tarayıcınızda [http://localhost:5000](http://localhost:5000) adresini açarak uygulamanızı görebilirsiniz.

Basit Bir Bileşen Oluşturma

Svelte, bileşen temelli bir yapıya sahiptir, yani her bir UI öğesi bir bileşen olarak düşünülür ve kodunuzu buna göre yapılandırırsınız. Gelin basit bir bileşen ekleyelim.

Öncelikle, `src/App.svelte` dosyasını açın. Bu dosya ana bileşeninizi temsil eder. İçeriğini aşağıdaki gibi değiştirin:

  
Merhaba {name}!
   name = 'Svelte'}>Svelte ile tanış!

Bu kodda, `name` değişkeni tanımlanır ve bir butona tıklandığında bu değer "Svelte" olarak değiştirilir. Svelte'in reaktif yapısı sayesinde, kullanıcı butona tıkladığında ekranda anında bir değişiklik görünecektir.

Svelte ile Durum Yönetimi

Svelte, geleneksel frontend framework’lerinden farklı olarak, bileşenler arasında veri aktarımını çok daha kolay hale getirir. Durum yönetimi için herhangi bir dış kütüphane veya ek yapılandırmaya ihtiyaç duymazsınız. Tüm veriler ve durumlar, bileşenin içinde tanımlanır ve Svelte otomatik olarak bu verileri takip eder.

Mesela, yukarıdaki örnekteki `name` değişkeni aslında bir “durum”dur ve bu durum, kullanıcının butona tıklaması ile değişir. Svelte, bu durumu ve bileşeni izler ve gerekli yerlerde yeniden render yapar. Basit ama güçlü!

Uygulama Yayınlama

Uygulamanızı geliştirdikten sonra, artık yayına almak isteyebilirsiniz. Svelte, yapıyı önceden derleyerek minimum boyutlarda üretim kodu üretir. Bu sayede uygulamanız hızla yüklenir.

Yayınlamak için şu komutu kullanarak uygulamanızı üretim modunda derleyebilirsiniz:

npm run build

Bu, `public` klasöründe üretim için optimize edilmiş tüm dosyaları oluşturur. Şimdi, bu dosyaları bir sunucuya yükleyebilir ve web üzerinde erişime açabilirsiniz.

Sonuç: Neden Svelte?

Svelte, modern web uygulamaları geliştirmek için harika bir araçtır. Basit, hızlı ve kullanımı kolaydır. Geleneksel framework’lerden farklı olarak, tarayıcıda daha az iş yaparak uygulamalarınızın daha hızlı çalışmasını sağlar. Svelte ile web geliştirmek, hem başlangıç seviyesindeki geliştiriciler hem de tecrübeli profesyoneller için mükemmel bir seçim olabilir.

Siz de Svelte ile projelerinizi geliştirmeye başlamanın tam zamanı! Umarım bu rehber, Svelte ile web uygulaması yapma konusunda size ilham vermiştir. Şimdi kolları sıvayın ve ilk Svelte uygulamanızı oluşturun!