Merhaba sevgili okuyucular! Bugün sizi harika bir dünyaya davet ediyorum: Svelte ile web uygulamaları geliştirme dünyasına. Belki de bu ismi daha önce duydunuz ama ne olduğunu merak ediyorsunuz. Hadi o zaman, birlikte keşfe çıkalım ve Svelte ile nasıl etkili ve hızlı bir web uygulaması geliştirebileceğimizi adım adım inceleyelim.

Svelte, geleneksel frontend kütüphanelerinden biraz farklı çalışıyor. React, Vue gibi kütüphaneler, uygulamanız çalıştığı sürece size sürekli olarak bir JavaScript motoru sunar ve bu motor arka planda çalışır. Svelte ise derleme aşamasında çalışır, yani uygulamanızın JavaScript kodu, tamamen derlendikten sonra çalışan ve sadece ihtiyacı olan kodu yükleyen bir yapıya sahiptir. Bu da demek oluyor ki, uygulamanız daha hızlı çalışır!

Peki, neden Svelte? İşte size birkaç neden:

- Hız: Derleme aşamasında çalışan Svelte, son kullanıcıya sadece gerekli olan JavaScript’i gönderir. Bu da hızlı yüklenme süreleri ve düşük performans giderleri anlamına gelir.
- Basitlik: Svelte, uygulama geliştirmeyi kolaylaştırır. JSX veya karmaşık yapılarla uğraşmak yerine, daha basit bir yapıyı tercih eder.
- SEO Dostu: Svelte, sunucu tarafı render’ı destekler. Bu, SEO için çok önemli çünkü arama motorları sayfayı doğrudan HTML olarak alır ve render eder. JavaScript ile render edilmektense, doğrudan HTML görmek daha iyi bir sonuç verir.

Hadi gelin, bir Svelte projesi kurarak adım adım nasıl web uygulaması yapacağımıza bakalım. İlk olarak, Svelte’i kurmamız gerekiyor.

Svelte ile başlamak çok kolay! İhtiyacımız olan tek şey Node.js ve npm. Eğer bunlar bilgisayarınızda yüklü değilse, hemen [Node.js](https://nodejs.org/) web sitesinden indirip yükleyebilirsiniz.

Ardından, terminalinizi açın ve aşağıdaki komutu çalıştırarak yeni bir Svelte projesi başlatın:

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

Bu komutlar, Svelte için temel bir şablon oluşturacak ve gerekli tüm bağımlılıkları yükleyecektir. `npm run dev` komutuyla uygulamanızı yerel sunucuda çalıştırabilirsiniz. Artık, tarayıcınızda `http://localhost:5000` adresine giderek uygulamanızı görüntüleyebilirsiniz.

Svelte projesi oluşturulduğunda, aşağıdaki gibi temel bir dosya yapısı görmelisiniz:

```
/src
/components
- Header.svelte
- Footer.svelte
- App.svelte
- main.js
```

- App.svelte: Uygulamanın ana bileşeni burada yer alır. Burada uygulamanızın temel yapısını oluşturacağız.
- Header.svelte ve Footer.svelte: Genellikle sayfanın başlık ve alt kısımlarını bu bileşenlerde tutarız. Bu, uygulamanızın yeniden kullanılabilir bileşenlerini oluşturmanızı sağlar.
- main.js: Uygulamanızın JavaScript dosyasıdır ve burada Svelte bileşenlerini başlatırız.

Svelte, bileşen tabanlı bir yapıya sahiptir. Şimdi basit bir bileşen oluşturalım. `src/components` klasöründe yeni bir dosya oluşturun ve `Button.svelte` olarak adlandırın.

{text}

Bu bileşeni `App.svelte` dosyasına şu şekilde ekleyebilirsiniz:

  
Welcome to Your Svelte App!
  

Svelte’in sunduğu en büyük avantajlardan biri, sunucu tarafı render desteği sayesinde SEO dostu olmasıdır. Google gibi arama motorları, içerikleri JavaScript ile render edilen sayfalardan çok daha zor bir şekilde veri alabilir. Ancak, Svelte ile geliştirdiğiniz uygulamalar, sunucu tarafında derlendikleri için, doğrudan HTML içerik olarak indexlenebilir.

Bunu sağlamak için, sadece sunucu tarafı render’ı kullanmanız yeterlidir. İşte Svelte ile SEO’yu optimize etmek için birkaç ipucu:

- Meta Tag’leri Kullanma: Uygulamanızda, her sayfa için uygun meta tag’leri (title, description, og:image vb.) eklemeyi unutmayın.
- Daha Az JavaScript: Svelte, yalnızca gerekli olan JavaScript'i yüklendiği için daha az yükleme süresi sunar. Bu da SEO'yu iyileştirir.

Uygulamanızı tamamladıktan sonra, artık yayına alma zamanınız gelmiş demektir. `npm run build` komutuyla projenizi derleyebilirsiniz. Çıktıyı oluşturduktan sonra, her türlü sunucuda bu dosyaları barındırabilirsiniz. GitHub Pages, Netlify, Vercel gibi popüler platformlar, Svelte uygulamalarınızı hızlı bir şekilde yayımlamanızı sağlar.