Merhaba! Web geliştirme dünyasına yeni bir adım atmak isteyenler için harika bir haberim var: Svelte! Evet, Svelte'i duydunuz mu? Son yıllarda frontend dünyasında oldukça popülerleşen bu framework, diğer alternatiflerine kıyasla çok daha hafif, hızlı ve kullanımı kolay. Svelte, geleneksel JavaScript framework'lerinden (React, Vue, Angular) farklı olarak, derleme aşamasında çalışır ve minimum boyutta bir çıktı sunar. Yani, sizin yazdığınız uygulama sonrasında tarayıcıya ulaşan dosya boyutu neredeyse sıfır. Bu da demek oluyor ki, daha hızlı yükleme süreleri ve daha verimli uygulamalar!
Evet, Svelte'in ne kadar harika olduğunu biliyoruz ama şimdi asıl soruya gelelim: Svelte nasıl kurulur ve ilk uygulama nasıl yazılır?
Svelte Kurulumu: Adım Adım Başlıyoruz!
İlk adım her zaman biraz heyecan verici, ama merak etmeyin, adımlar oldukça basit. Svelte ile ilk uygulamanızı oluşturmak için bilgisayarınızda Node.js yüklü olmalı. Yüklü değilse, [Node.js'in resmi sitesinden](https://nodejs.org/) indirip kurabilirsiniz.
Şimdi, Svelte uygulamamızı kurmaya başlayalım:
1. Yeni Bir Proje Oluşturun
Terminalinizi açın ve şu komutları sırasıyla yazın:
npx degit sveltejs/template svelte-uygulamam
Bu komut, Svelte'in resmi şablonunu kullanarak yeni bir proje başlatacaktır. "svelte-uygulamam" kısmı ise projenizin adıdır. Kendi projenize uygun bir isim verebilirsiniz.
2. Projeye Gidin ve Bağımlılıkları Yükleyin
Şimdi yeni oluşturduğumuz klasöre giriyoruz ve gerekli bağımlılıkları yüklüyoruz:
cd svelte-uygulamam
npm install
Bu komutlar, proje içinde gerekli olan tüm paketleri yükleyecektir.
3. Uygulamayı Çalıştırın
Artık her şey hazır! Uygulamayı çalıştırmak için terminalde şu komutu kullanabilirsiniz:
npm run dev
Bu komut, projeyi geliştirme modunda çalıştıracak ve tarayıcıda `localhost:5000` adresinde görüntülenmesini sağlayacaktır. Eğer her şey doğru şekilde kurulduysa, tarayıcınızda "Welcome to Svelte" yazan bir karşılama sayfasını görmelisiniz.
İlk Svelte Uygulamanızı Yazalım!
Kurulum işlemini başarıyla tamamladınız, şimdi basit bir uygulama yazma zamanı. Svelte ile çalışırken en güzel şeylerden biri, bileşenler aracılığıyla hızlıca uygulama oluşturabilmenizdir. Hadi, bir "Merhaba Dünya" uygulaması yapalım!
1. App.svelte Dosyasını Açın
Projeyi oluşturduktan sonra, `src/App.svelte` dosyasını açın. Bu dosya, uygulamanın ana bileşeni olacak.
2. Basit Bir Merhaba Dünya Uygulaması Yazın
Şimdi, `App.svelte` dosyasına aşağıdaki kodu yazabilirsiniz:
{message}
Bu kodda, bir `message` değişkeni tanımladık ve bunu `
` etiketi içinde görüntüledik. `Merhaba Dünya!` yazısı, tarayıcıda kırmızı renkte ve büyük bir fontla görünecek.
3. Uygulamayı Görüntüleyin
Değişiklikleri kaydettikten sonra, tarayıcınızda sayfayı yenileyin ve uygulamanızı görün! Bu kadar basit!
Svelte'in Gücü!
İşte, Svelte ile ilk uygulamanızı yazdınız! Görüntüleme çok hızlı ve uygulama oldukça hafif. Ayrıca, Svelte'in sağladığı reactivity özelliği ile bileşenlerinize veri eklediğinizde, yalnızca ilgili bileşen yeniden render ediliyor, bu da performans açısından oldukça verimli.
Svelte'in sunduğu temel özellikler:
- Bileşen Bazlı Yapı: Tüm uygulamanızı küçük ve yeniden kullanılabilir bileşenlere ayırabilirsiniz.
- Hızlı Performans: Svelte'in derleyici tarafından uygulama sonrasında küçültülen dosyalar, daha hızlı yükleme süreleri sağlar.
- Basit API: JavaScript, HTML ve CSS’i tek bir dosya içinde yazabileceğiniz bir yapıyı kullanarak uygulama geliştirebilirsiniz.
Sonuç olarak!
Svelte, öğrenmesi son derece kolay ve kullanması eğlenceli bir framework. Web uygulamaları geliştirmeye başladığınızda, hız ve verimlilik konusunda büyük bir fark yaratacak. İlk uygulamanızı yazmak sadece birkaç dakika alacak, değil mi? İlerleyen zamanlarda daha karmaşık projelere geçebilir ve Svelte’in sunduğu gelişmiş özellikleri keşfedebilirsiniz.
Umarım bu yazı, Svelte ile web geliştirmeye başlamak için gerekli adımları atmanıza yardımcı olmuştur. Hadi, şimdi Svelte ile kendi projelerinizi yaratmaya başlayın ve frontend dünyasında yerinizi alın! 💻🚀