Svelte Nedir?
Birçok kişi, Svelte’i sadece başka bir JavaScript framework'ü gibi düşünebilir. Ama aslında işler biraz daha farklı. Svelte, uygulamanızı çalıştırmadan önce, yazdığınız tüm kodu derleyerek daha hızlı ve verimli hale getiriyor. Yani, normalde tarayıcıda çalışan o karmaşık JavaScript kodları, Svelte sayesinde çok daha optimize oluyor. Bu, uygulamanızın çok daha hızlı yüklenmesi ve çalışması anlamına geliyor.
Svelte’in sunduğu en büyük avantaj, ağır framework’lerden farklı olarak tarayıcıda çalışırken daha az iş yapması. React veya Vue gibi kütüphaneler her kullanıcı etkileşimiyle birlikte ekstra işlem yaparken, Svelte bunu derleme aşamasında hallediyor. Bu sayede uygulamanız hızla açılır ve mükemmel bir kullanıcı deneyimi sunar.
Svelte ile Web Uygulaması Yapmaya Başlamak
Peki, Svelte ile bir uygulama yapmak ne kadar kolay? Bunu keşfetmek için size adım adım rehberlik edeceğim.
İlk adım, bilgisayarınızda Svelte’i kurmak. Bunu yapmak için terminali açın ve şu komutları sırasıyla girin:
npx degit sveltejs/template svelte-app
cd svelte-app
npm install
npm run dev
Bu işlem, Svelte'in hazır şablonunu indirir ve gerekli tüm bağımlılıkları yükler. Ardından, geliştirme sunucunuzu başlatır ve tarayıcınızda uygulamanızın ilk sayfasını açabilirsiniz.
# Adım 2: Uygulama Dosyalarınızı Düzenlemek
Svelte, bileşen tabanlı bir yapıyı tercih eder. Yani her sayfa veya bölüm, kendi bileşeni olarak düzenlenir. Bu, uygulamanızın daha modüler ve bakımı kolay olmasını sağlar. Örneğin, `App.svelte` dosyasında yazdığınız kodu aşağıdaki gibi bir yapıya dönüştürebilirsiniz:
Merhaba {name}!
Bu kod, "Merhaba Dünya!" yazısını gösteren basit bir uygulama oluşturur. Buradaki `{name}` ifadesi, Svelte'in reaktif özelliklerinden biridir. Değişkeni değiştirdiğinizde, tarayıcı otomatik olarak güncellenir.
# Adım 3: Dinamik İçerik ve Etkileşim Eklemek
Web uygulamanızda daha dinamik içerik oluşturmak oldukça basittir. Kullanıcının bir butona tıklaması ile bir şeyler değiştirmek istediğinizde, sadece aşağıdaki gibi bir etkileşim ekleyebilirsiniz:
Sayacınız: {count}
Bu, butona her tıklandığında sayacın bir bir artmasını sağlar. Svelte'in sunduğu bu basit ancak güçlü etkileşim özellikleri, dinamik web uygulamaları yaratmayı kolaylaştırır.
