Web geliştirme dünyasına adım atarken, kullandığınız teknoloji ne kadar güçlü olursa olsun, onu eğlenceli bir şekilde öğrenmek her zaman daha kolaydır. Eğer JavaScript’e aşina iseniz ve modern, hızlı bir framework arıyorsanız, Svelte tam size göre! Bugün, Svelte ile nasıl web uygulaması yapabileceğinizi keşfedeceğiz.

Svelte, son yıllarda web geliştiricilerinin ilgisini çeken yeni nesil bir JavaScript framework’üdür. Farkı, Svelte’in geleneksel framework’lerden farklı olarak, geliştirme sürecinde çalışma zamanında değil, derleme aşamasında çalışmasıdır. Bu, daha hızlı ve verimli bir kullanıcı deneyimi sunar. Başka bir deyişle, Svelte'in yazdığı kod, tarayıcıya giderken zaten optimize edilmiş olur. Yani daha az JavaScript, daha hızlı uygulamalar!

Svelte, geleneksel JavaScript framework’lerinin sunduğu avantajları size aynı şekilde sunar, ancak ekstra karmaşadan uzak bir kullanım sağlar. Düşünün ki, React veya Vue kullanırken her şeyin “reactive” yani tepki veren bir yapıda olmasını sağlamak için sürekli `state` ve `props` yönetmek zorundasınız. Ancak Svelte, tüm bu karmaşıklığı ortadan kaldırıyor ve daha doğal bir yazılım deneyimi sunuyor.

Örneğin, bir değişkeni değiştiriyorsanız, Svelte bu değişikliği otomatik olarak izler ve bileşenlerinizi yeniden render eder. Bunu yaparken çok daha az kod yazarsınız ve uygulamanız daha hızlı çalışır.

Şimdi işin asıl kısmına geçelim: Svelte ile bir web uygulaması yapmaya başlıyoruz!

İlk olarak, terminal veya komut satırınızı açın ve aşağıdaki komut ile yeni bir Svelte projesi oluşturun:

```bash
npx degit sveltejs/template svelte-web-uygulamasi
cd svelte-web-uygulamasi
npm install
npm run dev
```

Bu komutlar, sizin için temel bir Svelte uygulaması başlatır ve yerel sunucuda çalıştırır. Artık tarayıcınızda `http://localhost:5000` adresine giderek basit bir Svelte uygulaması görebilirsiniz.

Proje dosyalarınızın yapısı şu şekilde olacak:

```bash
src/
├── App.svelte # Ana uygulama bileşeni
└── main.js # Uygulamanın başlangıç dosyası
public/
└── index.html # Ana HTML dosyası
```

Burada `App.svelte` dosyası, uygulamanızın ana bileşenini içerir. İçinde HTML, CSS ve JavaScript’i bir arada bulundurabilirsiniz. Bu özellik, Svelte’in en büyük avantajlarından biridir; her şey tek bir dosyada toplandığı için yönetimi çok daha kolaydır.

Şimdi, bir "Merhaba Dünya" uygulaması yaparak Svelte’in temel özelliklerini gözlemleyelim. `App.svelte` dosyasını açın ve içeriğini aşağıdaki gibi değiştirin:

```html

{message}

```

Burada `

{message}

Mesajı Değiştir
```

Bu örnekte, `changeMessage` fonksiyonu, butona her tıklanıldığında `message` değişkenini değiştirir. `` ifadesi ise Svelte’in olay bağlama özelliği sayesinde, butona tıklanmasıyla fonksiyonun tetiklenmesini sağlar.

Svelte’de Dinamik İçerik ve Liste

Svelte ile sadece statik içerikler değil, dinamik içerikler de oluşturabilirsiniz. Örneğin, bir liste oluşturalım:

```html

{#each items as item}

• {item}

{/each}

```

Bu örnekte, `{#each items as item}` yapısı, `items` dizisindeki her öğe için bir liste öğesi (`

`) oluşturur. Bu da Svelte’in nasıl verileri dinamik olarak işler hale getirdiğini gösteriyor.

Projenizi Yayınlamak

Svelte uygulamanızı geliştirdikten sonra, projeyi yayınlamak oldukça basittir. `npm run build` komutunu kullanarak uygulamanızı üretim için derlersiniz. Sonrasında oluşan `public` klasörünü herhangi bir web sunucusuna yükleyebilirsiniz.

```bash
npm run build
```

Yayımlandıktan sonra, dünya sizi bekliyor! Artık hızlı, etkili ve eğlenceli bir web uygulamanız var.

Sonuç

Svelte ile web geliştirme, size daha az karmaşa, daha fazla hız ve eğlenceli bir deneyim sunar. React, Vue gibi popüler framework’lere göre daha az kod ve daha hızlı sonuç almanızı sağlar. Bu yazıda öğrendiklerinizi kullanarak, sıfırdan kendi projelerinizi yaratabilir, geliştirme sürecinin tadını çıkarabilirsiniz.