Web geliştirme dünyasına adım atmaya karar verdiyseniz, karşınıza çıkan birçok araç ve çerçeve sizi şaşırtabilir. Ancak bir şey kesin: Eğer hızlı, verimli ve modern bir çerçeve arıyorsanız, Svelte tam da size göre! Bugün, Svelte ile nasıl harika bir web uygulaması yapabileceğinizi keşfedeceğiz. Hadi başlayalım!

Svelte, frontend geliştirme dünyasında oldukça dikkat çeken bir JavaScript framework’üdür. Diğer çerçevelerden (React, Vue, Angular) farklı olarak, Svelte tarayıcıda çalışırken herhangi bir sanal DOM kullanmaz. Bunun yerine, uygulamanızın HTML, CSS ve JavaScript kodlarını derler ve sıkılaştırarak, uygulamanızın daha hızlı çalışmasını sağlar. Bu, geliştiricilerin daha temiz ve verimli kodlar yazmasını mümkün kılar.

Birçok geliştirici, özellikle SEO dostu ve hızlı uygulamalar geliştirmek isteyenler için Svelte’ı tercih ediyor. Gelin şimdi, bu güçlü aracı kullanarak nasıl bir web uygulaması yapacağınızı adım adım öğrenelim.

İlk adım her zaman olduğu gibi, projemizi başlatmaktır. Svelte ile hızlıca bir proje oluşturmak için, terminal veya komut satırına aşağıdaki komutları yazabilirsiniz:

npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install
npm run dev

Bu komut, Svelte’ın temel şablonunu indirir ve yerel bir geliştirme sunucusu başlatır. Tarayıcınızda localhost:5000 adresine giderek projenizin başarıyla çalıştığını görebilirsiniz.

Şimdi işin eğlenceli kısmına geliyoruz: Svelte ile ilk bileşenimizi (component) oluşturuyoruz. Her Svelte bileşeni `.svelte` uzantısına sahip bir dosya olur ve HTML, CSS, ve JavaScript kodlarını bir arada barındırır. Hadi bir "Merhaba Dünya" bileşeni ekleyelim!

İlk olarak, `src/App.svelte` dosyasını açın ve şu kodu ekleyin:

  
Merhaba, {name}!
   name = "Svelte"}>Svelte ile Tanış!

Bu bileşen, kullanıcı tıkladığında ismi "Svelte" olarak değiştiren basit bir etkileşim içeriyor. Svelte, reaktif bir framework olduğu için, değişkenleri doğrudan HTML içerisinde kullanabiliriz.

Bir web uygulamasının görsel çekiciliği kadar işlevselliği de önemlidir. Svelte, her bileşene özgü stil tanımlamanıza olanak tanır. Yukarıdaki örnekte olduğu gibi, her bileşenin içinde bir `

Burada, her bir liste elemanına fade geçişi ekleyerek, öğe silindiğinde veya eklendiğinde bir animasyon yapıyoruz.

Svelte ile dinamik bir uygulama oluşturmanın bir başka harika yolu da dış bir API kullanmaktır. Örneğin, bir hava durumu uygulaması yapabiliriz. Bu örnekte, basit bir hava durumu verisi çekmek için fetch API’yi kullanacağız.

  
İstanbul Hava Durumu
  {#if loading}
    
Yükleniyor...
  {:else}
    
Hava Durumu: {weatherData.weather[0].description}
    
Sıcaklık: {weatherData.main.temp - 273.15} °C
  {/if}

Bu örnek, hava durumu verisini bir API’den çekiyor ve kullanıcıya gösteriyor. API verisi geldikçe, Svelte bileşenimiz otomatik olarak güncelleniyor.

Web uygulamanız hazır olduğunda, bunu herkesin erişebileceği şekilde yayınlamak istersiniz. Projenizi Vercel veya Netlify gibi platformlarda kolayca dağıtabilirsiniz. Yayınlama için şu adımları izleyebilirsiniz:

- Vercel: Projeyi GitHub’a yükleyin, Vercel hesabınızı bağlayın ve Deploy butonuna tıklayın.
- Netlify: GitHub’dan projeyi seçin ve Deploy butonuna basın.

Yayına alındığında, web uygulamanız tüm dünyaya açık olacak!

Svelte, web uygulamaları geliştirmeyi hızlandıran, verimli ve modern bir araçtır. Öğrenmesi son derece kolaydır ve küçük projelerden büyük projelere kadar her türlü web uygulaması geliştirebilirsiniz. Artık Svelte ile temel bir web uygulaması yapmanın temellerini öğrendiniz. Daha fazla özellik keşfederek uygulamanızı geliştirebilir ve harika projelere imza atabilirsiniz!