Svelte ile Başlangıç: Modern Web Geliştirmede Yeni Bir Yaklaşım

Web geliştirme dünyası sürekli evriliyor ve her geçen gün yeni araçlar, kütüphaneler ve çerçeveler ortaya çıkıyor. Bu dinamik ortamda, geliştiricilere daha iyi performans, daha küçük kod boyutları ve daha keyifli bir geliştirme deneyimi sunmayı hedefleyen Svelte, son yılların en dikkat çekici yeniliklerinden biri haline geldi. Geleneksel çerçevelerin aksine “derleyici” (compiler) yaklaşımını benimseyen Svelte, web uygulamalarını geliştirme ve dağıtma şeklimizi temelden değiştirmeyi vaat ediyor.

Bu kapsamlı makalede, Svelte’in ne olduğunu, neden bu kadar özel olduğunu, bir Svelte projesine nasıl başlayacağınızı ve temel kavramlarını adım adım inceleyeceğiz. Svelte’in benzersiz felsefesinden bileşen yapısına, reaktivite modelinden veri yönetimine kadar birçok konuyu ele alacak, böylece Svelte ile kendi web uygulamalarınızı geliştirmeye başlamak için sağlam bir temel oluşturacaksınız.

Svelte Nedir ve Neden Farklıdır?

Svelte, web uygulamaları oluşturmak için kullanılan ücretsiz ve açık kaynaklı bir JavaScript çerçevesidir (daha doğrusu bir derleyicidir). React, Vue veya Angular gibi popüler çerçevelerin aksine, Svelte çalışma zamanında (runtime) bir çerçeve kodu çalıştırmaz. Bunun yerine, siz uygulamanızı derlediğinizde, Svelte kodunuzu doğrudan DOM’u güncelleyen küçük, hızlı ve optimize edilmiş vanilla JavaScript’e dönüştürür. İşte bu “derleyici” yaklaşımı, Svelte’i rakiplerinden ayıran temel özelliktir.

Svelte’in Temel Felsefesi: Derleyici Yaklaşımı

Çoğu modern JavaScript çerçevesi, uygulamanızı tarayıcıda çalıştıran bir “çalışma zamanı” (runtime) kodu içerir. Bu çalışma zamanı, bileşenleri yönetmek, sanal DOM’u karşılaştırmak (virtual DOM diffing) ve değişiklikleri gerçek DOM’a uygulamak gibi görevleri üstlenir. Bu durum, uygulamanızın tarayıcıda çalışırken belirli bir ek yük ile gelmesine neden olur.

Svelte ise bu paradigmaya meydan okur. Uygulamanızı geliştirirken yazdığınız Svelte kodunu, dağıtıma hazır hale getirirken (build time) saf JavaScript’e derler. Bu derleme işlemi sonucunda ortaya çıkan JavaScript kodu, tarayıcıda çalıştırılmak üzere minimal ve son derece optimize edilmiş bir pakettir. Svelte, bileşenlerinizi oluştururken, bu bileşenlerin durumları değiştiğinde DOM’u doğrudan ve verimli bir şekilde nasıl güncelleyeceklerini bilen kodlar üretir.

Bu yaklaşımın getirdiği başlıca avantajlar şunlardır:

* Daha Küçük Paket Boyutları: Çalışma zamanı çerçeve kodu olmadığı için, Svelte uygulamalarının nihai paket boyutları genellikle React veya Vue uygulamalarından çok daha küçüktür. Bu, daha hızlı yükleme süreleri ve daha iyi kullanıcı deneyimi anlamına gelir.
* Daha Yüksek Performans: Svelte, sanal DOM diffing mekanizmalarına ihtiyaç duymaz. Değişiklikler doğrudan ve cerrahi bir hassasiyetle DOM’a uygulanır. Bu durum, özellikle yoğun etkileşimli uygulamalarda ve düşük güçlü cihazlarda belirgin performans avantajları sağlar.
* Geliştirici Deneyimi: Svelte, reaktiviteyi basit ve sezgisel bir şekilde ele alır. Değişken atamaları doğrudan reaktif hale gelir, bu da daha az karmaşık kod ve daha hızlı geliştirme döngüleri demektir. Svelte bileşenleri, tek bir .svelte dosyasında HTML, CSS ve JavaScript’i bir araya getirerek okunabilirliği ve bakımı kolaylaştırır.
* Gerçek Vanilla JavaScript: Ortaya çıkan kod, Svelte’e özel bir çalışma zamanı bağımlılığı olmadan saf JavaScript’tir. Bu, uygulamanızın gelecekteki JavaScript standartlarına ve tarayıcı teknolojilerine daha dayanıklı olmasını sağlar.

Svelte Geliştirme Ortamının Kurulumu

Svelte ile bir projeye başlamak oldukça basittir. İşte adım adım kurulum süreci:

Önkoşullar

Svelte projeleri oluşturmak ve çalıştırmak için sisteminizde Node.js ve npm (veya yarn/pnpm) yüklü olması gerekir. Node.js’i resmi web sitesinden indirip kurabilirsiniz. Kurulumdan sonra terminalinizde aşağıdaki komutları çalıştırarak Node.js ve npm’in doğru bir şekilde yüklendiğinden emin olun:

node -v
npm -v

Yeni Bir Svelte Projesi Oluşturma

Svelte, projelerinizi başlatmak için resmi bir CLI aracı sunar. SvelteKit (Svelte için tam teşekküllü bir meta-çerçeve) ile başlamak en yaygın ve önerilen yoldur, çünkü SvelteKit, yönlendirme, sunucu tarafı oluşturma (SSR), statik site oluşturma (SSG) ve API uç noktaları gibi modern web uygulamalarının ihtiyaç duyduğu birçok özelliği kutudan çıkar çıkmaz sunar.

Terminalinizde aşağıdaki komutu çalıştırarak yeni bir SvelteKit projesi oluşturabilirsiniz:

npm create svelte@latest my-svelte-app

Bu komut size birkaç soru soracaktır:

1. Which Svelte app template? (SvelteKit project)
2. Which SvelteKit features do you want to enable? (Genellikle TypeScript, ESLint, Prettier seçmek iyi bir başlangıçtır.)
3. Would you like to add Playwright for browser testing? (İsteğe bağlı)

Seçimlerinizi yaptıktan sonra, komut gerekli dosyaları oluşturacak ve bağımlılıkları yükleyecektir. Proje klasörüne gidin ve geliştirme sunucusunu başlatın:

cd my-svelte-app
npm install # Eğer kurulum sırasında otomatik yapılmadıysa
npm run dev

Tarayıcınızda http://localhost:5173 (veya terminalde belirtilen başka bir port) adresine giderek çalışan Svelte uygulamanızı görebilirsiniz.

Proje Yapısı

Bir SvelteKit projesinin temel yapısı şuna benzer:

my-svelte-app/
├── src/
│   ├── app.html         # Ana HTML şablonu
│   ├── app.css          # Global stiller
│   ├── routes/          # Uygulamanızın sayfaları ve API uç noktaları
│   │   ├── +layout.svelte # Tüm rotalar için ortak düzen
│   │   ├── +page.svelte   # Ana sayfa
│   │   └── about/
│   │       └── +page.svelte # Hakkında sayfası
│   └── lib/             # Yeniden kullanılabilir bileşenler ve yardımcılar
├── static/              # Statik dosyalar (resimler, fontlar vb.)
├── svelte.config.js     # Svelte ve SvelteKit yapılandırması
├── package.json         # Proje bağımlılıkları ve betikleri
├── tsconfig.json        # TypeScript yapılandırması
├── .gitignore
└── ...

* src/routes: Bu dizin, SvelteKit’in dosya tabanlı yönlendirme sisteminin kalbidir. Her klasör bir rotayı, her +page.svelte dosyası bir sayfayı ve her +layout.svelte dosyası ise bir düzeni temsil eder.
* src/lib: Uygulamanızdaki yeniden kullanılabilir Svelte bileşenlerini, JavaScript modüllerini ve diğer yardımcı dosyaları burada saklayabilirsiniz.
* static: Bu dizin, doğrudan sunulacak olan statik varlıkları (resimler, ikonlar vb.) içerir.

VS Code Eklentileri

VS Code kullanıyorsanız, Svelte geliştirme deneyiminizi önemli ölçüde iyileştirecek resmi Svelte eklentisini kurmanız şiddetle tavsiye edilir:

* Svelte for VS Code: Sözdizimi vurgulama, IntelliSense, formatlama ve diğer dil özelliklerini sağlar.

Svelte Bileşenlerinin Yapısı

Svelte’de her şey bir bileşendir. Bir Svelte bileşeni, .svelte uzantılı tek bir dosyada HTML, CSS ve JavaScript kodunu bir araya getirir. Bu, bileşenlerinizi daha modüler, okunabilir ve yönetilebilir hale getirir.

Bir örnekle başlayalım:

Bu örnekte, bir Svelte bileşeninin üç ana bölümünü görüyoruz:

Önemli Not: Svelte, atama operatörünü (=) kullanarak reaktiviteyi izler. Bir diziye veya nesneye doğrudan eleman eklemek veya çıkarmak, Svelte'in değişikliği algılamasına neden olmaz. Bu durumlarda, dizinin veya nesnenin kendisini yeniden atamanız gerekir:




  {#each items as item}
    {item}
  {/each}

Props Tanımlama (`export let`)

Bileşenler arası veri aktarımında, üst bileşenden alt bileşene veri göndermek için "props" kullanılır. Svelte'de bir prop tanımlamak için değişkenin başına export anahtar kelimesini eklersiniz:




{greeting}, {name}!

Bu bileşeni başka bir yerde kullanırken:

Reaktif Bildirimler (`$:`)

Bazen bir değişkenin değeri, başka bir değişkenin değerine bağlıdır ve bu bağımlı değişkenin de reaktif olmasını istersiniz. Svelte, bu durumu $: etiketi ile ele alır. Bu etiket, bir değişkenin veya ifadenin bağımlılıkları değiştiğinde yeniden çalışmasını sağlar.





Tam Ad: {fullName}

Yaşam Döngüsü Fonksiyonları

Svelte, bileşenlerin yaşam döngüsünün belirli anlarında kod çalıştırmanıza olanak tanıyan bir dizi fonksiyon sunar. Bunlar svelte modülünden içe aktarılır:

* onMount(callback): Bileşen DOM'a ilk kez bağlandığında çalışır. Genellikle veri çekme (fetch data) işlemleri veya DOM'a doğrudan erişim gerektiren üçüncü taraf kütüphanelerin başlatılması için kullanılır.
* onDestroy(callback): Bileşen DOM'dan kaldırılmadan hemen önce çalışır. Bellek sızıntılarını önlemek için olay dinleyicilerini temizlemek veya zamanlayıcıları durdurmak için idealdir.
* beforeUpdate(callback): Bileşen güncellenmeden hemen önce, ancak DOM henüz yansıtılmadan önce çalışır.
* afterUpdate(callback): Bileşen güncellendikten ve DOM'a yansıtıldıktan sonra çalışır.
* tick(): Bir sözleşme (Promise) döndürür ve bir sonraki DOM güncellemesinden sonra çözülür. Bir DOM güncellemesini beklemek istediğinizde kullanışlıdır.



Sayaç: {count}

HTML Bölümü

Kullanıcı Adı: {user.name}


Yaş: {user.age * 2}
Durum: {isActive ? 'Aktif' : 'Pasif'}

Koşullu Renderlama (`{#if ...}{/if}`)

Belirli koşullara bağlı olarak HTML bloklarını göstermek veya gizlemek için {#if} bloğu kullanılır:



{#if loggedIn}
  Hoş geldiniz, kullanıcı!
  {#if isAdmin}
    Yönetici Paneli
  {/if}
{:else if !loggedIn}
  Lütfen giriş yapın.
{:else}
  Bilinmeyen durum.
{/if}

Listeleri Renderlama (`{#each ... as item, index (key)}{/each}`)

Bir dizi veya iterable üzerinde döngü yaparak elemanları renderlamak için {#each} bloğu kullanılır:




  {#each fruits as fruit, i (fruit)}
    {i + 1}. {fruit}
  {/each}

key (anahtar) değeri sağlamak (örneğin (fruit) veya (item.id)), Svelte'in listelerdeki öğeleri daha verimli bir şekilde izlemesine ve güncellemesine yardımcı olur.

Olay İşleyiciler (`on:event`)

DOM olaylarını dinlemek için on: direktifi kullanılır:

Olay değiştiriciler (event modifiers) de kullanılabilir: on:click|once, on:click|preventDefault, on:keydown|enter.

İki Yönlü Veri Bağlama (`bind:value`)

Form elemanları ile bileşen durumu arasında iki yönlü veri bağlama sağlamak için bind: direktifi kullanılır:




Giriş: {textValue}


Durum: {isChecked ? 'Seçili' : 'Seçili Değil'}


Seçilen: {selectedOption}

bind: sadece form elemanları için değil, bileşen props'ları için de kullanılabilir: bind:propName={variable}.

Slotlar ()

Bileşenlerinize esneklik kazandırmak ve içeriği dışarıdan enjekte etmelerini sağlamak için slotlar kullanılır.



   




  Bu bir kart başlığıdır
  Bu da kartın içeriği.

Adlandırılmış slotlar da mevcuttur:



  


   


  




  
  Uygulama içeriği burada.
  Telif Hakkı © 2023

`await` Blokları (`{#await promise}` `{:then value}` `{:catch error}`)

Asenkron işlemleri (örneğin API çağrıları) UI'da yönetmek için await bloğu kullanılır. Bu blok, promise'in farklı durumlarına (beklemede, başarılı, başarısız) göre farklı içerikler renderlamanıza olanak tanır.



{#await promise}
  Veriler yükleniyor...
{:then todo}
  Yapılacak: {todo.title}
  Tamamlandı mı? {todo.completed ? 'Evet' : 'Hayır'}
{:catch error}
  Hata: {error.message}
{/await}

Stil Bölümü (

Global Stiller (`:global()`)

Bazen bir stilin global olmasını veya bir bileşenin dışındaki DOM elemanlarını etkilemesini isteyebilirsiniz. Bu durumda :global() değiştiricisini kullanabilirsiniz:

Preprocessors (Sass, Less, PostCSS)

Svelte, CSS preprocessor'larını (Sass, Less, Stylus) veya PostCSS gibi araçları kullanmanıza olanak tanır. Bunları kullanmak için ilgili paketi kurmanız ve svelte.config.js dosyasında yapılandırmanız gerekir.

Örneğin, Sass kullanmak için:

npm install -D sass

Ve svelte.config.js dosyanızda:

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/ @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(), // Bu satır Sass desteği sağlar
  kit: {
    adapter: adapter()
  }
};

export default config;

Artık

Geçişler (Transitions) ve Animasyonlar

Svelte, DOM elemanlarının eklenmesi ve kaldırılması sırasında güzel geçişler ve animasyonlar oluşturmak için güçlü yerleşik araçlar sunar.

Geçişler (`transition:`)

Bir elemanın DOM'a girip çıkarken nasıl görüneceğini kontrol eder.





{#if showDetails}
  
    Bu detaylar yavaşça belirir ve kaybolur.
  
  
    Bu detaylar yukarıdan kayarak gelir ve aşağı kayarak gider.
  
{/if}

Svelte, fade, slide, blur, fly, draw, scale gibi birçok hazır geçiş fonksiyonu sağlar. Kendi özel geçişlerinizi de yazabilirsiniz.

Animasyonlar (`animate:`)

Listelerdeki öğelerin sırası değiştiğinde animasyonlar oluşturmak için kullanılır.





{#each items as item (item)}
  {item}
{/each}

SvelteKit'e Kısa Bir Bakış

Makalenin başında bahsettiğimiz gibi, SvelteKit, Svelte üzerine kurulu, modern web uygulamaları geliştirmek için tasarlanmış bir meta-çerçevedir. Next.js (React için) veya Nuxt.js (Vue için) gibi çerçevelere benzer şekilde, SvelteKit birçok özelliği kutudan çıkar çıkmaz sunarak geliştirme sürecini basitleştirir.

SvelteKit Nedir ve Neden Önemlidir?

SvelteKit, Svelte uygulamalarını sunucu tarafında oluşturma (SSR), statik site oluşturma (SSG), API uç noktaları oluşturma ve dosya tabanlı yönlendirme gibi özelliklerle zenginleştirir. Bu, Svelte'in performans ve geliştirici deneyimi avantajlarını korurken, SEO dostu, daha hızlı yüklenen ve daha güçlü uygulamalar oluşturmanıza olanak tanır.

Temel Özellikleri:

* Dosya Tabanlı Yönlendirme: src/routes dizinindeki dosya ve klasör yapınız otomatik olarak uygulamanızın rotalarını belirler.
* Sunucu Tarafı Oluşturma (SSR): Sayfalar, tarayıcıya gönderilmeden önce sunucuda oluşturulur, bu da daha hızlı ilk yükleme süreleri ve daha iyi SEO sağlar.
* Statik Site Oluşturma (SSG): Uygulamanızı derleme zamanında tamamen statik HTML, CSS ve JavaScript dosyalarına dönüştürebilirsiniz.
* API Uç Noktaları: +server.js veya +server.ts dosyaları oluşturarak doğrudan uygulamanız içinde API uç noktaları tanımlayabilirsiniz.
* Veri Yükleme (+page.server.js veya +page.js): Sayfa bileşenleri için veri çekme mantığını ayrı dosyalarda tanımlayarak sunucu veya istemci tarafında veri yüklemeyi kolaylaştırır.
* Adaptörler: Uygulamanızı Vercel, Netlify, Cloudflare Workers gibi çeşitli platformlara dağıtmayı kolaylaştıran adaptörler sunar.

SvelteKit ile Proje Oluşturma ve Temel Yapı

Zaten npm create svelte@latest komutuyla bir SvelteKit projesi oluşturmuştuk. Temel proje yapısı şöyledir:

* src/routes/+page.svelte: Ana sayfa bileşeni.
* src/routes/+layout.svelte: Tüm sayfalarda veya belirli bir rota grubunda paylaşılan düzen bileşeni.
* src/routes/blog/[slug]/+page.svelte: Dinamik bir rota örneği. [slug] kısmı, URL'deki dinamik bir parametreyi yakalar.
* src/routes/api/data/+server.js: /api/data adresinde erişilebilen bir API uç noktası. İçinde GET, POST gibi HTTP metodlarını dışa aktarabilirsiniz.

SvelteKit, Svelte geliştirmenin geleceği olarak kabul edilir ve yeni projeler için varsayılan öneridir.

Svelte ile Performans Optimizasyonu

Svelte, doğası gereği oldukça performanslıdır çünkü derleyici yaklaşımı sayesinde minimal ve optimize edilmiş kod üretir. Ancak, her uygulamada olduğu gibi, Svelte uygulamalarında da dikkate alınması gereken bazı optimizasyon noktaları vardır:

* Gereksiz Hesaplamalardan Kaçınma: Reaktif bildirimleri ($:) kullanırken, bağımlılıkların gerçekten değiştiğinden emin olun. Karmaşık hesaplamaları yalnızca ihtiyaç duyulduğunda çalışacak şekilde optimize edin.
* {#key ...} Bloğu: Listeleri renderlarken {#each ... as item (item.id)} şeklinde benzersiz bir anahtar (key) sağlamak, Svelte'in DOM'daki öğeleri daha verimli bir şekilde izlemesine ve güncellemesine yardımcı olur. Bu, özellikle liste elemanlarının sıralandığı, eklendiği veya çıkarıldığı durumlarda önemlidir.
* Lazy Loading (Tembel Yükleme): SvelteKit, route tabanlı kod bölme (code splitting) özelliğini otomatik olarak sunar. Bu, kullanıcının yalnızca o anda ihtiyaç duyduğu kodun yüklenmesini sağlar. Büyük bileşenleri veya modülleri dinamik olarak içe aktararak (import(...)) manuel olarak da tembel yükleme yapabilirsiniz.
* Görsel Optimizasyonlar: Resimlerinizi ve diğer medya dosyalarınızı optimize edin. Doğru boyutlandırma ve formatları (WebP, AVIF) kullanın.
* Minimal JavaScript: Svelte, zaten minimal JS üretir, ancak üçüncü taraf kütüphaneler kullanırken boyutlarına dikkat edin ve yalnızca ihtiyacınız olan kısımları içe aktarmaya çalışın.

Sonuç ve İleri Adımlar

Svelte, modern web geliştirme dünyasına taze ve yenilikçi bir bakış açısı getiriyor. Derleyici tabanlı yaklaşımı sayesinde, diğer popüler çerçevelerin karşılaştığı bazı performans ve paket boyutu zorluklarını aşarak geliştiricilere daha hızlı, daha küçük ve daha keyifli uygulamalar oluşturma imkanı sunuyor. Reaktivite modelinin basitliği ve tek dosyalı bileşen yapısı, öğrenme eğrisini kısaltırken geliştirici verimliliğini artırıyor.

Eğer daha önce React, Vue veya Angular gibi çerçevelerle çalıştıysanız, Svelte'in farklı felsefesine alışmanız biraz zaman alabilir. Ancak, temel kavramları kavradığınızda, Svelte'in ne kadar güçlü ve eğlenceli olduğunu göreceksiniz. Özellikle SvelteKit ile birleştiğinde, tam teşekküllü, performanslı ve SEO dostu web uygulamaları geliştirmek için eksiksiz bir çözüm sunar.

Svelte ile yolculuğunuza devam etmek için atabileceğiniz bazı ileri adımlar:

* SvelteKit'e Derinlemesine Dalın: SvelteKit'in resmi dokümantasyonu, SSR, SSG, API rotaları, veri yükleme ve dağıtım gibi konuları ayrıntılı olarak ele alır. Gerçek dünya uygulamaları geliştirmek için SvelteKit'i öğrenmek vazgeçilmezdir.
* Resmi Dokümantasyonu İnceleyin: Svelte ve SvelteKit'in resmi dokümantasyonları son derece kapsamlı, güncel ve anlaşılırdır. Herhangi bir sorunuz olduğunda başvuracağınız ilk kaynak burası olmalıdır.
* Topluluğa Katılın: Svelte topluluğu oldukça aktif ve yardımseverdir. Discord sunucularına, forumlara veya Stack Overflow'a katılarak sorularınızı sorabilir, başkalarına yardımcı olabilir ve en son gelişmeleri takip edebilirsiniz.
* Küçük Projeler Geliştirin: Öğrenmenin en iyi yolu, bildiklerinizi uygulamaktır. Basit bir yapılacaklar listesi, bir hava durumu uygulaması veya bir blog gibi küçük projeler geliştirerek Svelte bilginizi pekiştirebilirsiniz.
* Açık Kaynak Projeleri İnceleyin: GitHub'da Svelte ile geliştirilmiş açık kaynak projelere göz atarak, diğer geliştiricilerin Svelte'i nasıl kullandığını ve en iyi uygulamaları nasıl uyguladığını görebilirsiniz.

Svelte, web geliştirme alanında kesinlikle izlenmesi gereken bir teknoloji. Sunduğu benzersiz avantajlar ve hızla büyüyen ekosistemi ile gelecekte daha da popüler hale geleceği tahmin ediliyor. Bu makale, Svelte dünyasına ilk adımınızı atmanız için sağlam bir başlangıç noktası sunmuş olmayı umuyor. Başarılar dileriz!

Svelte ile Başlangıç: Modern Web Geliştirmede Yeni Bir Yaklaşım