JAVASCRIPT SPA: GETTING STARTED EĞİTİMİ

Saf JavaScript ile SPA kurmaya başlayın

Bileşen, yönlendirme, durum yönetimi ve derleme ile sıfırdan tek sayfa uygulaması geliştirin

JavaScript SPA: Getting Started Eğitimi, çerçeve kullanmadan saf JavaScript ile tek sayfa uygulama kurmanın temellerini öğretir. Program bileşen tabanlı yapı ve DOM render ile başlar; History API ile istemci tarafı yönlendirme, fetch ile veri çekme ve merkezi…

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

Eğitim Hakkında

DOM tabanlı bileşenlerden History API yönlendirmesine ve modül paketlemeye kadar SPA geliştirme

JavaScript SPA: Getting Started Eğitimi, çerçeve kullanmadan saf JavaScript ile tek sayfa uygulama (Single Page Application) kurmanın temellerini öğretir. Katılımcılar bileşen tabanlı yapı, DOM ile görünüm üretme, History API ile istemci tarafı yönlendirme ve fetch ile veri çekmeyi uygular. Merkezi durum yönetimi, olay akışı ve modül paketleme ele alınır. Program, yönlendirmeli ve durum yönetimli küçük bir SPA'nın sıfırdan kurulup paketlenmesiyle tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; SPA kavramları bileşen yapısından yönlendirme ve durum yönetimine kadar saf JavaScript ile kodlanarak işlenir.

Seviye

Orta Seviye — Saf JavaScript ile tek sayfa uygulama (SPA) mimarisi, yönlendirme, durum yönetimi ve derleme

Öğrenme Metodu

Her kavram canlı kodlamayla işlenir; üç gün boyunca yönlendirmeli ve durumlu küçük bir SPA sıfırdan adım adım geliştirilir.

Neden Bu Eğitim?

🧩Çerçeve öncesi temel

SPA'ların altında yatan bileşen, yönlendirme ve durum mantığını kavrayarak React ve Vue gibi çerçeveleri çok daha bilinçli kullanırsınız.

⚡Hızlı ve akıcı arayüz

Sayfa yeniden yüklenmeden içerik güncelleyen tek sayfa yaklaşımıyla hızlı ve kesintisiz kullanıcı deneyimleri geliştirirsiniz.

🛠️Sıfırdan kurma

Kendi mini yönlendirici ve durum yöneticinizi kodlayarak modern SPA araçlarının arka planda nasıl çalıştığını içeriden görürsünüz.

Anahtar Konular

javascript spa eğitimitek sayfa uygulama eğitimisingle page application kursuvanilla javascript spaistemci tarafı yönlendirmejavascript router eğitimiön yüz geliştirme eğitimivite build eğitimijavascript durum yönetimispa mimarisi
“Bir çerçeveyi gerçekten anlamanın yolu, onun çözdüğü sorunu kendi ellerinizle bir kez çözmekten geçer. SPA'nın temelini kurmak budur.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve hazırlık

1
JavaScript bilgisi

Fonksiyon, nesne, dizi ve ES6 modül söz dizimi gibi temel JavaScript kavramlarına aşinalık bu eğitim için gereklidir.

2
DOM deneyimi

querySelector, addEventListener ve içerik güncelleme gibi temel DOM işlemlerini daha önce yapmış olmak beklenir.

3
Async JavaScript

promise, async/await ve fetch ile temel asenkron işlemleri tanımak örnekleri takip etmeyi kolaylaştırır.

4
Geliştirme ortamı

VS Code, modern bir tarayıcı ve Node.js kurulu bir geliştirme ortamının hazır olması önerilir.

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ı SPA ile klasik çok sayfalı mimari farkını kavrar, DOM ile görünüm üretir, yeniden kullanılabilir bileşenler kurar ve olay akışını yönetir.
Modül 1
SPA Nedir ve Mimari
  • Tek sayfa ile çok sayfalı uygulama farkı
  • İstemci tarafı render mantığı ve avantajları
  • SPA yaşam döngüsü ve ilk yükleme (bootstrap)
  • SEO, erişilebilirlik ve SPA ödünleşmeleri
  • Uygulama iskeleti (app shell) kavramı
  • Proje klasör yapısı ve dosya organizasyonu
Modül 2
DOM ile Görünüm Üretme
  • createElement ve innerHTML ile render
  • Template literal ile dinamik HTML üretimi
  • Liste ve koşullu içerik render mantığı
  • DOM'u verimli güncelleme stratejileri
  • Render fonksiyonu ile görünümü soyutlama
  • XSS riski ve güvenli içerik ekleme
Modül 3
Bileşen Tabanlı Yapı
  • Fonksiyonel bileşen deseni tasarımı
  • Props ile bileşene veri aktarma
  • Bileşen kompozisyonu ve iç içe kullanım
  • Yaşam döngüsü (mount/unmount) yönetimi
  • Yeniden kullanılabilir UI parçaları kurma
  • Bileşenleri ES modülleriyle ayırma
Modül 4
Olay Yönetimi ve İletişim
  • Olay delegasyonu ile verimli dinleme
  • Bileşenden dışarı olay (callback) iletme
  • CustomEvent ile bileşenler arası iletişim
  • Kullanıcı girdisini işleme ve doğrulama
  • Debounce ve throttle ile olay sınırlama
  • Olaydan render'a tetikleme zinciri
Günün hedefiKatılımcı History API ile istemci tarafı yönlendirme kurar, dinamik rota ve parametreleri işler, fetch ile veri çeker ve yükleme/hata durumlarını yönetir.
Modül 1
İstemci Tarafı Yönlendirme
  • History API: pushState ve popstate
  • Hash tabanlı ve path tabanlı yönlendirme
  • URL'yi rota tanımlarıyla eşleştirme
  • Sayfa yenilemeden görünüm değiştirme
  • Bağlantıları yakalayıp yönlendirme (link intercept)
  • 404 ve bilinmeyen rota yönetimi
Modül 2
Dinamik Rotalar ve Parametre
  • Rota parametrelerini (/user/:id) ayrıştırma
  • Query string okuma ve kullanma
  • İç içe (nested) rota yapısını kurma
  • Rota değişiminde bileşen yükleme
  • Gezinme koruması (navigation guard)
  • Aktif bağlantı ve gezinme durumu
Modül 3
API ile Veri Çekme
  • fetch ile GET ve POST istekleri
  • async/await ile asenkron veri akışı
  • JSON yanıtını ayrıştırma ve kullanma
  • HTTP hatalarını yakalama ve ele alma
  • İstekleri iptal etme (AbortController)
  • API katmanını servis modülüne ayırma
Modül 4
Yükleme ve Hata Durumları
  • Yükleniyor (loading) göstergesi tasarımı
  • Boş veri ve hata durumu render'ı
  • Veriyi önbellekte tutma (cache) stratejisi
  • İskelet ekran (skeleton) ile algı hızı
  • Yeniden deneme (retry) mantığı
  • Asenkron akışta yarış durumlarını önleme
Günün hedefiKatılımcı merkezi bir durum yöneticisi kurar, durumu bileşenlere yansıtır, Vite ile projeyi paketler ve SPA'yı üretim ortamına yayınlar.
Modül 1
Merkezi Durum Yönetimi
  • Tek doğru kaynak (single source of truth)
  • Store deseni ile merkezi durum kurma
  • subscribe/notify ile değişim yayını
  • Action ve reducer benzeri güncelleme akışı
  • Durumu bileşenlere reaktif yansıtma
  • localStorage ile durumu kalıcı tutma
Modül 2
Modül Paketleme ve Build
  • ES modülleri ve bağımlılık grafiği
  • Vite ile geliştirme sunucusu ve HMR
  • Üretim derlemesi (build) ve çıktı yapısı
  • Kod bölme (code splitting) ve lazy load
  • Varlık (asset) yönetimi ve önbellekleme
  • Ortam değişkenleri ile yapılandırma
Modül 3
Performans ve Optimizasyon
  • İlk yükleme süresini (TTI) iyileştirme
  • Gereksiz render'ı önleme stratejileri
  • Bundle boyutunu küçültme teknikleri
  • Görsel ve varlık tembel yükleme
  • Tarayıcı önbelleği ve cache başlıkları
  • Lighthouse ile performans ölçümü
Modül 4
Dağıtım ve Bitirme Projesi
  • Statik barındırma (Netlify/Vercel) yayını
  • SPA için sunucu yönlendirme (fallback)
  • Üretimde ortam yapılandırması ayrımı
  • Projeyi uçtan uca test etme ve sunma
  • Bitirme SPA'sını kurup yayına alma
  • Sürüm ve dağıtım akışını belgeleme

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
SPA mimarisi

Tek sayfa uygulama ile çok sayfalı mimari farkını kavrar, istemci tarafı render ve uygulama iskeleti kurarsınız.

✅
Bileşen tasarımı

Saf JavaScript ile yeniden kullanılabilir, props alan bileşenler kurar ve bunları kompozisyonla birleştirirsiniz.

✅
DOM render

Template literal ve render fonksiyonlarıyla görünüm üretir, DOM'u verimli ve güvenli biçimde güncellersiniz.

✅
İstemci yönlendirme

History API ile sayfa yenilemeden yönlendirme kurar, dinamik rota ve parametreleri işleyerek gezinme yönetirsiniz.

✅
Veri çekme

fetch ve async/await ile API'den veri çeker, yükleme, hata ve boş durumları düzgün biçimde yönetirsiniz.

✅
Durum yönetimi

Merkezi bir store kurar, abonelik mantığıyla durumu bileşenlere yansıtır ve kalıcı hale getirmeyi uygularsınız.

✅
Build ve paketleme

Vite ile projeyi paketler, kod bölme ve varlık yönetimiyle optimize edilmiş bir üretim derlemesi oluşturursunuz.

✅
Yayın ve performans

SPA'yı statik barındırmaya yayınlar, sunucu fallback'i kurar ve Lighthouse ile performansı ölçüp iyileştirirsiniz.

Kimler İçin Uygundur?

  • JavaScript ve DOM temeli olan
  • React veya Vue gibi çerçevelere geçmeden önce SPA'ların altında yatan mantığı kavramak isteyen ön yüz geliştiricileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim için hangi ön bilgi gerekir?
JavaScript'te fonksiyon, nesne, dizi ve ES6 modül söz dizimine aşinalık ile temel DOM işlemleri beklenir. promise, async/await ve fetch'i tanımak faydalıdır. Eğitim orta seviyedir; sıfırdan başlayanlar yerine JavaScript ve DOM temeli olan geliştiricilere yöneliktir.
Bir çerçeve mi öğretiyorsunuz?
Hayır, eğitim bilinçli olarak çerçeve kullanmaz; her şey saf (vanilla) JavaScript ile kodlanır. Amaç React, Vue ve Angular gibi SPA çerçevelerinin dayandığı bileşen, yönlendirme ve durum mantığını içeriden kavratmaktır. Böylece sonradan herhangi bir çerçeveyi çok daha bilinçli kullanırsınız.
Eğitim sonunda ne üretmiş olacağım?
Üç gün boyunca sıfırdan kuracağınız; bileşen tabanlı, History API ile yönlendirmeli, API'den veri çeken ve merkezi durum yönetimine sahip küçük bir tek sayfa uygulamanız olur. Uygulamayı Vite ile paketleyip statik barındırmaya yayınlayarak uçtan uca bir SPA akışını deneyimlersiniz.
Eğitimin süresi ve formatı nedir?
Eğitim üç gün sürer ve her gün dört modülden oluşur. İlk gün bileşen yapısı, ikinci gün yönlendirme ve veri, üçüncü gün durum yönetimi ve dağıtım işlenir. Yüz yüze veya online yapılabilir; içerik ekibin hedeflediği proje ve araç tercihlerine 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 SPA projesini belgeler; kurumsal gruplar için içerik, ekibin kullandığı araçlara ve hedef mimariye göre özelleştirilebilir.

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. JavaScript SPA: Getting Started Eğitimi Sertifika Kodu DV-2026XX00 Tarih 14.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre3 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 TypeScriptApplication Development with Node.js: Managing Advanced Application Elements Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Managing Advanced Application Elements Eğitimi

5 günİleriOnline / Yüz Yüze / Hibrit

İleri Node.js: stream, cluster, worker threads, önbellek, güvenlik, WebSocket, test ve Docker ile üretim ölçeğinde uygulama yönetimi eğitimi.

Detayları Gör →
JavaScript ve TypeScriptApplication Development with Node.js: Microservices Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Microservices Eğitimi

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

Node.js ile mikroservis mimarisi: servis tasarımı, REST ve gRPC, mesaj kuyruğu, API gateway, dayanıklılık ve Docker ile dağıtım eğitimi.

Detayları Gör →
JavaScript ve TypeScriptApplication Development with Node.js: Microservices Frameworks, & Utilities Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Microservices Frameworks, & Utilities Eğitimi

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

Node.js ile mikroservis mimarisi, NestJS, Moleculer, gRPC, mesaj kuyrukları, API Gateway, dayanıklılık ve Docker dağıtımını öğreten uygulamalı eğitim.

Detayları Gör →
JavaScript ve TypeScriptApplication Development with Node.js: Node Clusters & Memory Optimizations Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Node Clusters & Memory Optimizations Eğitimi

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

Node.js cluster, worker_threads, V8 bellek modeli, çöp toplama, bellek sızıntısı tespiti ve profilleme ile ölçekleme optimizasyonunu öğreten eğitim.

Detayları Gör →
JavaScript ve TypeScriptApplication Development with Node.js: Process Managers Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Process Managers Eğitimi

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

PM2 ile Node.js süreç yönetimi, cluster modu, log, izleme, kesintisiz yeniden yükleme, systemd ve Docker dağıtımını öğreten uygulamalı kurumsal eğitim.

Detayları Gör →
JavaScript ve TypeScriptApplication Development with Node.js: Real-time Applications Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Real-time Applications Eğitimi

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

Node.js ile WebSocket ve Socket.IO kullanarak sohbet, bildirim ve canlı veri akışı yapan ölçeklenebilir gerçek zamanlı uygulamalar geliştirmeyi öğreten eğitim.

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