Svelte üzerine kurulu tam yığın çerçeve olan SvelteKit'e kapsamlı bir rehber; özelliklerini, faydalarını, kurulumunu, yönlendirmesini, veri yüklemesini, dağıtımını ve ekosistemini kapsar.
SvelteKit: Tam Yığın Svelte Uygulama Çerçevesi
SvelteKit, Svelte üzerine inşa edilmiş, güçlü ve popülerliği giderek artan bir tam yığın (full-stack) web uygulama çerçevesidir. Geliştiricilerin keyifli bir geliştirme deneyimiyle performanslı, SEO dostu ve ölçeklenebilir web uygulamaları oluşturmasına olanak tanır. Bu rehber, SvelteKit'in temel özelliklerini, faydalarını, kurulumunu, yönlendirmesini, veri yüklemesini, dağıtımını ve çevresindeki ekosistemi kapsayan kapsamlı bir genel bakış sunmaktadır.
SvelteKit Nedir?
SvelteKit bir çerçeveden daha fazlasıdır; modern web uygulamaları oluşturmak için eksiksiz bir sistemdir. Yönlendirme ve sunucu taraflı oluşturmadan (SSR) veri yükleme ve API uç noktalarına kadar her şeyi yönetir. Svelte'in, React için Next.js veya Vue.js için Nuxt.js gibi çerçevelere cevabı olarak düşünebilirsiniz, ancak Svelte'in sunduğu performans avantajları ve geliştirici basitliği ile birlikte. Hızlı ve hafif bir derleme aracı olan Vite üzerine inşa edilmiştir, bu da hızlı geliştirme döngülerine katkıda bulunur.
Neden SvelteKit'i Seçmelisiniz?
SvelteKit, diğer popüler JavaScript çerçevelerine karşı birçok önemli avantaj sunan çekici bir alternatiftir:
- Performans: Svelte, derleme zamanı yaklaşımı sayesinde olağanüstü performansıyla bilinir. SvelteKit, uygulamayı ilk yükleme süresi ve sonraki etkileşimler için optimize ederek bundan yararlanır. Ayrıca performansı daha da artırmak için kod bölme ve ön yükleme gibi özellikler sunar.
- Geliştirici Deneyimi: SvelteKit, web geliştirmeyi basitleştirmeyi amaçlar. Sezgisel yönlendirme sistemi, anlaşılır veri yüklemesi ve yerleşik TypeScript desteği, karmaşık uygulamalar oluşturmayı kolaylaştırır. Çerçevenin kuralları ve net dokümantasyonu, geliştiricilerin üretken kalmasına yardımcı olur.
- Esneklik: SvelteKit, sunucusuz fonksiyonlar, geleneksel sunucular ve statik site barındırma dahil olmak üzere çeşitli dağıtım hedeflerini destekler. Bu, geliştiricilerin ihtiyaçları için en iyi barındırma çözümünü seçmelerine olanak tanır.
- SEO Dostu: SvelteKit'in sunucu taraflı oluşturma (SSR) yetenekleri, arama motorlarının web sitenizi taramasını ve dizine eklemesini kolaylaştırarak arama sonuçlarındaki görünürlüğünü artırır. Daha da hızlı performans ve daha iyi SEO için statik siteler de oluşturabilirsiniz.
- Aşamalı Geliştirme: SvelteKit, uygulamanızın sınırlı JavaScript desteği olan kullanıcılar için erişilebilir olmasını sağlayarak aşamalı geliştirmeyi teşvik eder.
SvelteKit'in Temel Özellikleri
SvelteKit, web uygulaması geliştirmeyi kolaylaştırmak için tasarlanmış özelliklerle doludur:
Yönlendirme
SvelteKit, dosya tabanlı bir yönlendirme sistemi kullanır. routes dizinindeki her dosya, uygulamanızdaki bir rotayı temsil eder. Örneğin, src/routes/about.svelte adındaki bir dosya /about adresinde erişilebilir olacaktır. Bu sezgisel yaklaşım, gezinmeyi basitleştirir ve uygulamanızın yapısını düzenlemeyi kolaylaştırır.
Örnek:
// src/routes/blog/[slug].svelte
<script>
export let data;
</script>
<h1>{data.post.title}</h1>
<p>{data.post.content}</p>
Bu kod parçacığı, slug parametresine göre bir blog gönderisini görüntüleyen dinamik bir rotayı göstermektedir. data prop'u, bir +page.server.js dosyasından (aşağıda açıklanmıştır) yüklenen verilerle doldurulur.
Veri Yükleme
SvelteKit, güçlü ve esnek bir veri yükleme mekanizması sunar. İhtiyaçlarınıza bağlı olarak verileri sunucuda veya istemcide yükleyebilirsiniz. Veri yükleme genellikle routes dizininizdeki +page.server.js veya +page.js dosyalarında gerçekleştirilir.
- +page.server.js: Bu dosya, sunucu taraflı veri yükleme için kullanılır. Burada yüklenen veriler yalnızca sunucuda mevcuttur ve istemci tarafı JavaScript'e sunulmaz. Bu, kimlik doğrulama gerektiren veritabanlarından veya harici API'lerden veri almak için idealdir.
- +page.js: Bu dosya, istemci taraflı veri yükleme için kullanılır. Burada yüklenen veriler hem sunucu hem de istemci tarafından kullanılabilir. Bu, herkese açık API'lerden veri almak veya sayfayı sunucudan gelen verilerle doldurmak (hydrate) için uygundur.
Örnek (+page.server.js):
// src/routes/blog/[slug]/+page.server.js
import { getPostBySlug } from '$lib/server/database';
export async function load({ params }) {
const post = await getPostBySlug(params.slug);
return { post };
}
Bu kod parçacığı, load fonksiyonunu kullanarak sunucuda nasıl veri yükleneceğini gösterir. params nesnesi, bu örnekteki slug gibi rota parametrelerini içerir. getPostBySlug fonksiyonu, blog gönderisini bir veritabanından çeker. Yüklenen veriler daha sonra bir nesne olarak döndürülür ve bu nesneye ilgili Svelte bileşeninden erişilebilir.
API Uç Noktaları
SvelteKit, doğrudan uygulamanız içinde API uç noktaları oluşturmayı kolaylaştırır. routes dizininde +server.js gibi bir ada sahip bir dosya oluşturmanız yeterlidir. Bu dosya, ilgili rotaya yapılan istekleri işleyecektir.
Örnek:
// src/routes/api/todos/+server.js
import { json } from '@sveltejs/kit';
let todos = [];
export async function GET() {
return json(todos);
}
export async function POST({ request }) {
const todo = await request.json();
todos.push(todo);
return json(todo, { status: 201 });
}
Bu kod parçacığı, yapılacaklar listesini yönetmek için basit bir API uç noktasının nasıl oluşturulacağını gösterir. GET fonksiyonu mevcut yapılacaklar listesini döndürür ve POST fonksiyonu listeye yeni bir yapılacak ekler. json fonksiyonu, veriyi JSON olarak serileştirmek için kullanılır.
Form Yönetimi
SvelteKit, form gönderimlerini yönetmek için kullanışlı bir yol sağlar. Formlarınızı JavaScript ile geliştirmek için use:enhance eylemini kullanarak daha akıcı bir kullanıcı deneyimi sunabilirsiniz. Bu, tam sayfa yeniden yüklemesi olmadan form gönderimlerini yönetmenize olanak tanır.
Sunucu Taraflı Oluşturma (SSR) ve Statik Site Oluşturma (SSG)
SvelteKit hem sunucu taraflı oluşturmayı (SSR) hem de statik site oluşturmayı (SSG) destekler. SSR, uygulamanızı sunucuda oluşturmanıza olanak tanır, bu da SEO'yu ve ilk yükleme süresini iyileştirebilir. SSG, derleme zamanında statik HTML dosyaları oluşturmanıza olanak tanır, bu da performansı daha da artırabilir ve sunucu maliyetlerini azaltabilir. İhtiyaçlarınıza bağlı olarak uygulamanızı SSR, SSG veya her ikisinin bir kombinasyonunu kullanacak şekilde yapılandırabilirsiniz.
TypeScript Desteği
SvelteKit'in mükemmel TypeScript desteği vardır. Bileşenlerinizi, API uç noktalarınızı ve veri yükleme mantığınızı yazmak için TypeScript kullanabilirsiniz. Bu, hataları erken yakalamanıza ve kodunuzun bakım kolaylığını artırmanıza yardımcı olabilir.
SvelteKit'e Başlarken
SvelteKit'e başlamak için sisteminizde Node.js ve npm veya yarn'ın kurulu olması gerekir.
- Yeni bir SvelteKit projesi oluşturun:
npm create svelte@latest my-app
cd my-app
npm install
Bu, my-app adında bir dizinde yeni bir SvelteKit projesi oluşturacak, bağımlılıkları yükleyecek ve sizi proje dizinine yönlendirecektir.
- Geliştirme sunucusunu başlatın:
npm run dev
Bu, geliştirme sunucusunu başlatacaktır; bu sunucu, kodda değişiklik yaptığınızda uygulamanızı otomatik olarak yeniden yükleyecektir. Tarayıcınızda uygulamanıza http://localhost:5173 adresinden (veya terminalinizde belirtilen porttan) erişebilirsiniz.
SvelteKit Proje Yapısı
Tipik bir SvelteKit projesi aşağıdaki yapıya sahiptir:
my-app/
├── src/
│ ├── app.html
│ ├── lib/
│ │ └── # Özel modülleriniz
│ ├── routes/
│ │ ├── +layout.svelte
│ │ ├── +page.svelte
│ │ └── about/
│ │ └── +page.svelte
│ └── hooks.server.js # veya amaca göre hooks.client.js, hooks.js
├── static/
│ └── # Resimler, fontlar gibi statik varlıklar
├── svelte.config.js
├── vite.config.js
├── package.json
└── ...
- src/routes: Bu dizin, uygulamanız için rota tanımlarını içerir.
- src/lib: Bu dizin, yeniden kullanılabilir bileşenleri ve modülleri saklamak için kullanılır.
- static: Bu dizin, resimler ve fontlar gibi statik varlıkları saklamak için kullanılır.
- svelte.config.js: Bu dosya, Svelte yapılandırma seçeneklerini içerir.
- vite.config.js: Bu dosya, Vite yapılandırma seçeneklerini içerir.
- package.json: Bu dosya, projenin bağımlılıklarını ve betiklerini içerir.
- src/app.html: Bu, SvelteKit uygulamanız için kök HTML belgesidir.
- src/hooks.server.js (veya hooks.client.js veya hooks.js): Bu dosya, sunucudaki istekleri ve yanıtları yakalayıp değiştirmenize olanak tanır. Sunucu hook'ları yalnızca sunucuda, istemci hook'ları yalnızca istemcide çalışırken, genel hook'lar hem istemci hem de sunucuda çalışır.
Dağıtım
SvelteKit çeşitli dağıtım hedeflerini destekler. İşte birkaç popüler seçenek:
- Vercel: Vercel, SvelteKit uygulamalarını dağıtmak için popüler bir platformdur. SvelteKit ile sorunsuz entegrasyon sağlar ve otomatik dağıtımlar ve küresel CDN gibi özellikler sunar.
- Netlify: Netlify, SvelteKit uygulamalarını dağıtmak için bir başka popüler platformdur. Aynı zamanda SvelteKit ile sorunsuz entegrasyon sağlar ve sürekli dağıtım ve sunucusuz fonksiyonlar gibi özellikler sunar.
- Node.js Sunucusu: SvelteKit uygulamanızı geleneksel bir Node.js sunucusuna dağıtabilirsiniz. Bu size dağıtım ortamı üzerinde daha fazla kontrol sağlar.
- Statik Site Barındırma: SvelteKit uygulamanızdan statik bir site oluşturabilir ve bunu Netlify veya Vercel gibi bir statik site barındırma sağlayıcısına dağıtabilirsiniz.
- Cloudflare Pages: Cloudflare Pages, Cloudflare'in küresel ağından yararlanarak SvelteKit uygulamalarını dağıtmak için performanslı ve uygun maliyetli bir yol sunar.
Dağıtım süreci genellikle uygulamanızı derlemeyi ve ardından oluşturulan dosyaları seçtiğiniz barındırma sağlayıcısına dağıtmayı içerir.
Örnek (Vercel):
- Vercel CLI'ı yükleyin:
npm install -g vercel
- SvelteKit uygulamanızı derleyin:
npm run build
- Uygulamanızı Vercel'e dağıtın:
vercel
Vercel CLI, sizden Vercel hesap bilgilerinizi isteyecek ve ardından uygulamanızı Vercel'e dağıtacaktır.
SvelteKit Ekosistemi
SvelteKit'in, daha da güçlü web uygulamaları oluşturmanıza yardımcı olabilecek büyüyen bir kütüphane ve araç ekosistemi vardır.
- Svelte Material UI: Google'ın Materyal Tasarımına dayalı bir kullanıcı arayüzü bileşen kütüphanesi.
- carbon-components-svelte: IBM'in Karbon Tasarım Sistemine dayalı bir kullanıcı arayüzü bileşen kütüphanesi.
- svelte-i18n: Svelte uygulamalarını uluslararasılaştırmak için bir kütüphane.
- svelte-forms-lib: Svelte uygulamalarında formları yönetmek için bir kütüphane.
- SvelteStrap: Svelte için Bootstrap 5 bileşenleri.
İleri Düzey SvelteKit Kavramları
SvelteKit, temellerin ötesinde, karmaşık uygulamalar oluşturmak için birkaç gelişmiş özellik sunar:
Layout'lar (Düzenler)
Layout'lar, uygulamanızdaki birden çok sayfa için ortak bir yapı tanımlamanıza olanak tanır. routes dizini içindeki bir dizinde +layout.svelte dosyası oluşturarak bir layout oluşturabilirsiniz. Bu layout, o dizin ve alt dizinlerindeki tüm sayfalara uygulanacaktır.
Hook'lar (Kancalar)
SvelteKit, istekleri ve yanıtları yakalamanıza ve değiştirmenize olanak tanıyan hook'lar sağlar. Kimlik doğrulama, yetkilendirme ve veri doğrulama gibi görevleri gerçekleştirmek için hook'ları kullanabilirsiniz. Hook'lar src/hooks.server.js (sunucu), src/hooks.client.js (istemci) ve src/hooks.js (her ikisi) dosyalarında tanımlanır.
Store'lar (Mağazalar)
Svelte store'ları, uygulama durumunu yönetmenin güçlü bir yoludur. Bileşenler arasında veri paylaşmanıza ve veri değiştiğinde kullanıcı arayüzünü otomatik olarak güncellemenize olanak tanır. SvelteKit, Svelte store'ları ile sorunsuz bir şekilde entegre olur.
Middleware (Ara Yazılım)
SvelteKit'in geleneksel anlamda özel bir "middleware"i olmasa da, istekleri uygulama mantığınıza ulaşmadan önce yakalamak ve değiştirmek için hook'ları ve sunucu rotalarını kullanarak benzer işlevselliği elde edebilirsiniz. Bu, kimlik doğrulama, günlük kaydı ve diğer çapraz kesen konuları uygulamanıza olanak tanır.
SvelteKit ve Diğer Çerçeveler
SvelteKit genellikle Next.js (React) ve Nuxt.js (Vue.js) gibi diğer tam yığın JavaScript çerçeveleriyle karşılaştırılır. İşte kısa bir karşılaştırma:
- SvelteKit vs. Next.js: SvelteKit, Svelte'in derleme zamanı yaklaşımı sayesinde genellikle Next.js'ten daha iyi performans sunar. SvelteKit ayrıca daha basit bir API'ye ve daha küçük bir paket boyutuna sahiptir. Ancak Next.js'in daha büyük bir ekosistemi ve daha olgun bir topluluğu vardır.
- SvelteKit vs. Nuxt.js: SvelteKit ve Nuxt.js, özellikler ve işlevsellik açısından benzerdir. SvelteKit daha basit bir API'ye ve daha iyi performansa sahipken, Nuxt.js'in daha büyük bir ekosistemi ve daha olgun bir topluluğu vardır.
Çerçeve seçimi, özel ihtiyaçlarınıza ve tercihlerinize bağlıdır. Performans ve geliştirici basitliği bir öncelikse, SvelteKit mükemmel bir seçimdir. Geniş bir ekosisteme ve olgun bir topluluğa ihtiyacınız varsa, Next.js veya Nuxt.js daha uygun olabilir.
Gerçek Dünya Örnekleri ve Kullanım Alanları
SvelteKit, aşağıdakiler de dahil olmak üzere çok çeşitli web uygulaması projeleri için çok uygundur:
- E-ticaret siteleri: SvelteKit'in performansı ve SEO dostu özellikleri, onu e-ticaret siteleri oluşturmak için harika bir seçenek haline getirir.
- Bloglar ve içerik yönetim sistemleri (CMS): SvelteKit'in statik site oluşturma yetenekleri, hızlı ve SEO için optimize edilmiş bloglar ve CMS'ler oluşturmak için idealdir.
- Tek sayfa uygulamaları (SPA'lar): SvelteKit'in yönlendirme ve veri yükleme mekanizmaları, karmaşık SPA'lar oluşturmayı kolaylaştırır.
- Gösterge panelleri ve yönetici panelleri: SvelteKit'in TypeScript desteği ve bileşen tabanlı mimarisi, bakımı kolay gösterge panelleri ve yönetici panelleri oluşturmayı kolaylaştırır.
- Aşamalı Web Uygulamaları (PWA'lar): SvelteKit, çevrimdışı yeteneklere ve kurulabilir deneyimlere sahip PWA'lar oluşturmak için kullanılabilir.
Örnekler:
- Şirket Web Sitesi (Küresel Teknoloji Firması): Küresel bir teknoloji firması, ürünlerini ve hizmetlerini sergilemek için hızlı, SEO dostu bir web sitesi oluşturmak amacıyla SvelteKit'i kullanabilir. Site, daha iyi SEO için sunucu taraflı oluşturmadan ve daha hızlı yükleme süreleri için kod bölmeden yararlanabilir. Bir CMS ile entegrasyon, farklı saat dilimlerindeki dağıtılmış bir pazarlama ekibi tarafından kolay içerik güncellemelerine olanak tanır.
- E-ticaret Platformu (Uluslararası Perakendeci): Uluslararası bir perakendeci, performanslı bir e-ticaret platformu oluşturmak için SvelteKit'i kullanabilir. SvelteKit'in SSR yetenekleri, ürün sayfalarının arama motorları tarafından kolayca dizine eklenmesini sağlar. Platform ayrıca, dünyanın dört bir yanındaki müşterilere sorunsuz bir alışveriş deneyimi sunmak için bir ödeme ağ geçidi ve bir kargo sağlayıcısı ile entegre olabilir. Para birimi ve dil yerelleştirme özellikleri çok önemli olacaktır.
- Etkileşimli Veri Görselleştirme Paneli (Küresel Araştırma Enstitüsü): Bir araştırma enstitüsü, karmaşık veri setlerini görselleştirmek için etkileşimli bir gösterge paneli oluşturmak amacıyla SvelteKit'i kullanabilir. SvelteKit'in reaktivitesi ve bileşen tabanlı mimarisi, dinamik ve ilgi çekici görselleştirmeler oluşturmayı kolaylaştırır. Gösterge paneli, ölçeklenebilirlik ve maliyet etkinliği için sunucusuz bir ortama dağıtılabilir. Dil desteği, uluslararası araştırma ekipleriyle işbirliği yapmak için önemli olabilir.
SvelteKit Geliştirme için En İyi Uygulamalar
Yüksek kaliteli SvelteKit uygulamaları oluşturduğunuzdan emin olmak için şu en iyi uygulamaları izleyin:
- TypeScript kullanın: TypeScript, hataları erken yakalamanıza ve kodunuzun bakım kolaylığını artırmanıza yardımcı olabilir.
- Birim testleri yazın: Birim testleri, kodunuzun doğru çalıştığından emin olmanıza yardımcı olabilir.
- Bir linter ve formatlayıcı kullanın: Bir linter ve formatlayıcı, tutarlı bir kod stili sürdürmenize yardımcı olabilir.
- Resimlerinizi optimize edin: Optimize edilmiş resimler, uygulamanızın performansını artırabilir.
- Bir CDN kullanın: Bir CDN, statik varlıklarınızı daha hızlı sunmanıza yardımcı olabilir.
- Uygulamanızı izleyin: Uygulamanızı izlemek, performans sorunlarını belirlemenize ve düzeltmenize yardımcı olabilir.
- SEO ve ilk yükleme performansı için sunucu taraflı oluşturmayı (SSR) kullanın: SEO'nun önemli olduğu rotalar için ve uygulamanızın algılanan performansını iyileştirmek için SSR'ı etkinleştirin.
- İçerik ağırlıklı siteler için statik site oluşturmayı (SSG) düşünün: Sitenizde çok fazla statik içerik varsa, SSG performansı önemli ölçüde artırabilir ve sunucu maliyetlerini azaltabilir.
- Kullanıcı arayüzünüzü yeniden kullanılabilir bileşenlere ayırın: Bu, kodun yeniden kullanılabilirliğini ve bakım kolaylığını teşvik eder.
- Bileşenlerinizi odaklanmış ve küçük tutun: Daha küçük bileşenlerin anlaşılması, test edilmesi ve bakımı daha kolaydır.
- Uygulama durumunu etkili bir şekilde yönetmek için store'ları kullanın: Store'lar, durumu yönetmek için merkezi bir yol sağlar ve durum değiştiğinde bileşenlerin güncellenmesini sağlar.
Sonuç
SvelteKit, geliştiricilere keyifli bir geliştirme deneyimiyle performanslı, SEO dostu ve ölçeklenebilir web uygulamaları oluşturma gücü veren güçlü ve çok yönlü bir tam yığın çerçevesidir. Sezgisel yönlendirme sistemi, anlaşılır veri yüklemesi ve yerleşik TypeScript desteği, karmaşık uygulamalar oluşturmayı kolaylaştırır. Büyüyen ekosistemi ve aktif topluluğu ile SvelteKit, modern web geliştirme için lider bir çerçeve olmaya adaydır. İster küçük bir kişisel web sitesi ister büyük bir kurumsal uygulama oluşturuyor olun, SvelteKit dikkate alınmaya değer bir çerçevedir.