SVELTE JS EĞİTİMİ

Svelte ile reaktif arayüz geliştir

Svelte reaktivitesinden store, geçiş ve SvelteKit ile tam uygulama geliştirmeye kadar

Svelte JS Eğitimi, sanal DOM yerine derleme zamanında verimli JavaScript üreten Svelte çerçevesini öğretir. Program bileşen yapısı ve reaktif bildirimleri, props ve binding ile veri akışını, olay yönetimi ve mantık bloklarını, writable ve derived store ile du…

4 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Derleyici yaklaşımıyla sanal DOM'suz, hızlı ve sade bir ön yüz geliştirme deneyimi

Svelte JS Eğitimi, sanal DOM yerine derleme zamanında verimli JavaScript üreten Svelte çerçevesini öğretir. Katılımcılar bileşen yapısını, reaktif bildirimleri, props ve binding ile veri akışını kavrar. Mantık blokları, olay yönetimi, store ile durum paylaşımı, yaşam döngüsü, geçiş ve animasyonlar, slot ve context konuları işlenir. Program, SvelteKit ile yönlendirme, load fonksiyonları, form action ve sunucu tarafı render içeren tam bir uygulamayla tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; her konu tek bir örnek uygulamaya eklenir ve son gün SvelteKit ile uçtan uca tamamlanır.

Seviye

Orta Seviye — Derleyici tabanlı Svelte ile reaktif arayüzden SvelteKit uygulamasına uzanan program

Öğrenme Metodu

Her Svelte kavramı küçük örnekle gösterilir, ardından büyüyen tek bir uygulamaya eklenerek SvelteKit ile gerçek projeye dönüşür.

Neden Bu Eğitim?

⚡Derleyici hızı

Svelte sanal DOM kullanmadığı için küçük paket boyutu ve yüksek çalışma zamanı başarımıyla hızlı arayüzler kurarsınız.

✍️Sade söz dizimi

Reaktif bildirim, binding ve mantık blokları ile az kod yazarak okunabilir ve bakımı kolay bileşenler geliştirirsiniz.

🚀SvelteKit gücü

Yönlendirme, veri yükleme ve sunucu tarafı render ile SvelteKit üzerinde üretime hazır tam uygulamalar kurarsınız.

Anahtar Konular

svelte eğitimisvelte js kursusveltekit eğitimiön yüz geliştirme eğitimisvelte storereaktif arayüzsvelte componentjavascript çerçeve eğitimiweb geliştirme kursusvelte kursu
“Svelte çerçeveyi çalışma zamanından derleme zamanına taşır; böylece yazdığınız sade kod, kullanıcının cihazında hızlı ve yalın çalışır.”

Ön Koşullar

Eğitime başlamadan önce faydalı olacak bilgi ve ortam gereksinimleri

1
JavaScript bilgisi

Değişken, fonksiyon, dizi, nesne ve ES6 söz dizimine aşinalık reaktif kavramları kolaylaştırır.

2
Web temelleri

HTML ve CSS ile sayfa yapısı ve stil bilgisi, bileşen ve kapsamlı stil konularını hızlandırır.

3
Modül ve araçlar

import/export modül mantığı ve npm paket kullanımına temel aşinalık gerekir.

4
Çalışma ortamı

Node.js, npm ve bir kod düzenleyici kurulu, proje oluşturup çalıştırabilir bir ortam gereklidir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Svelte bileşen anatomisini kavrar, reaktif bildirimlerle veriyi günceller, props ile veri alır ve kapsamlı stil mantığını uygular.
Modül 1
Svelte Projesi ve Bileşen
  • Svelte derleyici yaklaşımı ve sanal DOM farkı
  • Vite ile Svelte projesi oluşturma
  • .svelte dosyasında script, markup ve style
  • İnterpolasyon ile değişkeni şablona basma
  • Bileşen içe aktarma ve kullanma
  • Geliştirme sunucusu ve hot reload akışı
Modül 2
Reaktivite Mekanizması
  • let ile tanımlı değişkenin reaktif olması
  • Atama ile reaktif güncelleme tetikleme
  • $: söz dizimiyle reaktif bildirim yazma
  • Türetilmiş reaktif değerlerin hesaplanması
  • Dizi ve nesne güncellemede atama kuralı
  • Reaktif blok ile yan etki çalıştırma
Modül 3
Props ve Veri Akışı
  • export let ile bileşen prop tanımlama
  • Varsayılan prop değeri belirleme
  • Üst bileşenden alt bileşene veri geçme
  • $$props ve $$restProps kullanımı
  • Prop ile bileşeni dışarıdan yapılandırma
  • Tek yönlü veri akışı ilkesinin önemi
Modül 4
Stil ve Sınıf Yönetimi
  • style bloğunda kapsamlı (scoped) stil
  • class: yönergesiyle koşullu sınıf ekleme
  • Satır içi stil bağlama ve dinamik değer
  • Global stil için :global() kullanımı
  • CSS özel değişkeni ile tema aktarımı
  • Bileşen bazlı stil izolasyonunun avantajı
Günün hedefiKatılımcı iki yönlü binding kurar, olay yönetir ve yayar, if each await mantık bloklarını uygular ve bileşenleri kompoze eder.
Modül 1
Binding (Bağlama) Türleri
  • bind:value ile form girdisi bağlama
  • checkbox ve radio için binding
  • bind:group ile çoklu seçim yönetimi
  • bind:this ile DOM öğesine erişim
  • Bileşen prop'una iki yönlü binding
  • select ve textarea bağlama senaryoları
Modül 2
Olay Yönetimi ve Yayma
  • on:click ile DOM olayı dinleme
  • Olay değiştiricileri: preventDefault, once
  • createEventDispatcher ile özel olay yayma
  • Üst bileşende özel olayı yakalama
  • on:event ile olay yönlendirme (forwarding)
  • Satır içi olay işleyicisi yazma
Modül 3
Mantık Blokları (Logic)
  • {#if}{:else if}{:else} ile koşullu render
  • {#each} bloğu ile liste render etme
  • each bloğunda key ile öğe kimliği
  • {#await} ile Promise durumu yönetimi
  • {#key} ile blok yeniden oluşturma
  • İç içe blok ve koşul kurgusu tasarımı
Modül 4
Bileşen Kompozisyonu
  • Bileşenleri birleştirerek arayüz kurma
  • Varsayılan slot ile içerik yerleştirme
  • Adlandırılmış slot ile çoklu alan
  • Slot prop ile üst bileşene veri verme
  • svelte:self ile özyinelemeli bileşen
  • svelte:component ile dinamik bileşen
Günün hedefiKatılımcı store ile durumu paylaşır, yaşam döngüsü kancalarını kullanır, geçiş ve animasyon uygular ve action ile öğe davranışı ekler.
Modül 1
Store ile Durum Yönetimi
  • writable store ile paylaşılan durum
  • $ ön ekiyle otomatik abonelik kullanımı
  • readable store ile salt okunur veri
  • derived store ile türetilmiş değer
  • subscribe ve set ile manuel kullanım
  • Özel store ile mantığı kapsülleme
Modül 2
Yaşam Döngüsü Kancaları
  • onMount ile bileşen yüklendiğinde iş
  • onDestroy ile kaynak temizliği yapma
  • beforeUpdate ve afterUpdate kancaları
  • tick ile DOM güncellemesini bekleme
  • onMount içinde veri çekme senaryosu
  • Abonelik ve zamanlayıcı temizliği
Modül 3
Geçiş ve Animasyon
  • transition: ile giriş-çıkış geçişi
  • in: ve out: ile ayrı geçiş tanımı
  • fade, fly ve slide hazır geçişleri
  • animate:flip ile liste öğesi animasyonu
  • Geçiş parametreleri ve easing ayarı
  • Özel geçiş (transition) fonksiyonu yazma
Modül 4
Action ve Context
  • use: yönergesiyle action tanımlama
  • Action ile DOM öğesine davranış ekleme
  • Action parametresi ve update mantığı
  • setContext ile ağaçta veri paylaşma
  • getContext ile bağlamdan okuma
  • Context ile store'un birlikte kullanımı
Günün hedefiKatılımcı SvelteKit ile dosya tabanlı yönlendirme kurar, load ile veri çeker, form action ile sunucu işlemi yazar ve uygulamayı derleyip yayınlar.
Modül 1
SvelteKit Yönlendirme
  • routes dizini ile dosya tabanlı yönlendirme
  • +page.svelte ile sayfa tanımlama
  • +layout.svelte ile ortak düzen
  • Dinamik rota için köşeli parantez klasör
  • goto ve a etiketiyle istemci gezinmesi
  • Hata sayfası için +error.svelte dosyası
Modül 2
Veri Yükleme (load)
  • +page.js ile evrensel load fonksiyonu
  • +page.server.js ile sunucu tarafı load
  • fetch ile API'den veri çekme işlemi
  • params ile rota parametresine erişim
  • Yüklenen verinin sayfaya aktarılması
  • Sunucu ve istemci load fonksiyonu ayrımı
Modül 3
Form Action ve Mutasyon
  • +page.server.js içinde form action tanımı
  • use:enhance ile ilerici form geliştirme
  • Form verisinin sunucuda işlenmesi
  • Doğrulama ve hata mesajı döndürme
  • redirect ve fail yardımcı fonksiyonları
  • İstemci-sunucu veri akışının yönetimi
Modül 4
SSR, Derleme ve Dağıtım
  • Sunucu tarafı render ve hidrasyon mantığı
  • Önceden render (prerender) ayarı
  • adapter ile hedef platforma uyarlama
  • Çevre değişkeni ve gizli anahtar yönetimi
  • vite build ile üretim derlemesi
  • Statik veya sunucu dağıtım seçenekleri

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Svelte reaktivitesi

Bileşen yapısını ve reaktif bildirimleri kavrar, atama tabanlı güncellemelerle dinamik arayüzler kurabilirsiniz.

✅
Veri akışı

Props ve binding ile bileşenler arası veri akışını yönetir, iki yönlü bağlamayı doğru kullanabilirsiniz.

✅
Olay ve mantık

Özel olaylar yayar, if each await bloklarıyla koşullu ve listeli arayüzleri sağlam biçimde kurabilirsiniz.

✅
Store yönetimi

writable, derived ve özel store ile uygulama genelinde durumu paylaşıp sade bir mimari kurarsınız.

✅
Yaşam döngüsü

onMount ve onDestroy gibi kancalarla veri çekme ve temizlik işlerini doğru zamanda yönetebilirsiniz.

✅
Geçiş ve animasyon

transition ve animate yönergeleriyle akıcı giriş-çıkış ve liste animasyonları tasarlayabilirsiniz.

✅
SvelteKit yönlendirme

Dosya tabanlı yönlendirme, layout ve dinamik rotalarla çok sayfalı bir uygulama iskeleti kurarsınız.

✅
SSR ve dağıtım

load ve form action ile sunucu tarafı veri akışını yönetir, uygulamayı derleyip yayınlayabilirsiniz.

Kimler İçin Uygundur?

  • JavaScript bilen ve modern
  • sade bir ön yüz çerçevesi öğrenmek isteyen geliştiriciler
  • React veya Vue deneyimi olup Svelte'ye geçiş yapmak isteyen yazılımcılar
  • performanslı arayüz geliştirmeyi hedefleyen öğrenciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
JavaScript bilen ve modern, sade bir ön yüz çerçevesi öğrenmek isteyen geliştiriciler için uygundur. React veya Vue deneyimi olup Svelte'ye geçmek isteyen yazılımcılar ve performanslı arayüz geliştirmek isteyen öğrenciler de hedef kitledir. Temel JavaScript bilgisi beklenir.
React veya Vue bilmek gerekir mi?
Hayır, başka bir çerçeve bilmek gerekmez; eğitim Svelte'yi temelden anlatır. Ancak React veya Vue deneyiminiz varsa reaktivite ve bileşen kavramlarını Svelte'nin daha sade yaklaşımıyla hızlıca karşılaştırarak öğrenirsiniz. Tek gereken sağlam JavaScript bilgisidir.
SvelteKit de işleniyor mu?
Evet, eğitimin son günü tümüyle SvelteKit'e ayrılmıştır. Dosya tabanlı yönlendirme, +page ve +layout dosyaları, load ile veri yükleme, form action ile sunucu işlemleri ve sunucu tarafı render işlenir. Uygulama derlenip yayınlanacak hale getirilir.
Eğitimin süresi ve formatı nedir?
Eğitim dört gün sürer ve her gün dört modülden oluşur. Her konu küçük örneklerle gösterilip büyüyen tek bir uygulamaya eklenir, son gün SvelteKit ile uçtan uca tamamlanır. Yüz yüze veya online yapılabilir ve kurumun ihtiyacına göre uyarlanabilir.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen örnek Svelte uygulamasını belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. Svelte JS Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre4 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

JavaScript ve TypeScriptUnit Testing in JavaScript: Mocha & Unit.js Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Unit Testing in JavaScript: Mocha & Unit.js Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Mocha ile test çalıştırıp Unit.js'in akıcı test.value API'siyle doğrulama yazma; casus, HTTP testi ve given-when-then ile uygulamalı eğitim.

Detayları Gör →
JavaScript ve TypeScriptUnit Testing in JavaScript: Should.js & Must.js Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Unit Testing in JavaScript: Should.js & Must.js Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Node.js'te Should.js ve Must.js ile BDD tarzı unit test: zincirlenebilir assertion, deep equality, hata ve promise doğrulama, custom assertion kurumsal eğitimi.

Detayları Gör →
JavaScript ve TypeScriptUnit Testing in JavaScript: SinonJS Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Unit Testing in JavaScript: SinonJS Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

SinonJS ile JavaScript unit test: spy, stub, mock, fake timer, sahte sunucu ve sandbox kullanarak bağımlılıkları izole eden testler yazan kurumsal eğitim.

Detayları Gör →
JavaScript ve TypeScriptUsing Gulp.js Plugins for JavaScript Analysis Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Using Gulp.js Plugins for JavaScript Analysis Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Gulp.js eklentileriyle JavaScript kod analizi: ESLint, JSHint, JSCS linting, Plato ve complexity ile karmaşıklık, jsinspect ve CI entegrasyonu kurumsal eğitimi.

Detayları Gör →
JavaScript ve TypeScriptWeb Fundamentals: Dynamic Web Pages with JavaScript Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Web Fundamentals: Dynamic Web Pages with JavaScript Eğitimi

3 günTemelOnline / Yüz Yüze / Hibrit

JavaScript ile dinamik web sayfaları: DOM manipülasyonu, olay yönetimi, form doğrulama ve fetch ile API'den veri çekmeyi öğreten temel seviye kurumsal eğitim.

Detayları Gör →
JavaScript ve TypeScriptWorking with ASK API Using Node.js & Java Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Working with ASK API Using Node.js & Java Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Alexa Skills Kit (ASK) API ile Node.js ve Java kullanarak sesli beceri geliştirme: intent, slot, SSML, oturum yönetimi ve Lambda dağıtımı kurumsal eğitimi.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn