Model Online/Fiziksel
Süre
Modüller 4 modül

Eğitim Hakkında

Zengin etkileşimli yönetim panelleri, SaaS platformları ve kurumsal iç uygulamalar için SPA (Single Page Application) mimarisi en güçlü seçeneklerden biri olmaya devam etmektedir. Ancak başarılı bir SPA geliştirmek, sadece bir UI kütüphanesi seçmekten ibaret değildir; doğru rotalama (routing), sunucu önbelleği, form yönetimi ve paketleme (bundling) araçlarının uyumlu bir ekosistem olarak kurgulanmasını gerektirir.

Bu eğitim; Vite, modern istemci yönlendiricileri (React Router / TanStack Router), TanStack Query ile asenkron veri yönetimi ve Code Splitting teknikleriyle ölçeklenebilir bir SPA mimarisinin nasıl kurulacağını uygulamalı olarak aktarır.

Kimler Katılmalı ve Ön Koşullar

  • Kurumsal dashboard, B2B portal ve zengin istemci uygulamaları geliştiren frontend mühendisleri
  • Mevcut SPA projelerinde paket boyutu, veri senkronizasyonu ve performans sorunları yaşayan geliştiriciler
  • JavaScript/TypeScript ve herhangi bir modern bileşen kütüphanesi (React veya Vue) bilgisi gereklidir

Kazanımlar

  • Ekosistem ve Mimari Seçimi: React, Vue ve modern SPA kütüphanelerini teknik kriterlere göre karşılaştırma ve modüler klasör yapısı kurma
  • İleri İstemci Rotalama: İç içe rotalar (Nested Routes), yetkilendirme korumaları (Route Guards) ve URL tabanlı durum yönetimi
  • TanStack Query ile Sunucu Durumu: Otomatik önbellekleme, arka plan yenileme, optimistic updates ve sonsuz kaydırma (Infinite Scroll)
  • Vite ve Performans Optimizasyonu: Lazy Loading, Tree Shaking, sanallaştırılmış listeler (Virtualization) ve bellek sızıntısı önleme

Konular

Modern SPA Mimarisi, Yaşam Döngüsü ve Vite Yapılandırması
  • SPA vs MPA vs SSR mimari karşılaştırması ve kurumsal projelerde doğru mimariyi seçme kriterleri
  • Modern UI kütüphanelerinin (React, Vue, Solid) Virtual DOM ve ince taneli reaktivite (Signals) yaklaşımları
  • Vite ile hızlı geliştirme ortamı, ortam değişkenleri, proxy ayarları ve Feature-Sliced / Modüler proje mimarisi
İstemci Tarafı Rotalama (Client-Side Routing) ve Güvenlik
  • History API, React Router ve TanStack Router ile tip güvenli yönlendirme ve Nested Layouts
  • Route Loaders ile veri ön yükleme (Prefetching) ve Render-as-You-Fetch kalıbı ile istek şelalelerini (Waterfalls) önleme
  • Korumalı rotalar (Protected Routes), RBAC yetki kontrolleri ve URL Search Params ile filtre/sayfalama durumu yönetimi
TanStack Query ile Asenkron Veri ve İstemci Durum Yönetimi
  • İstemci durumu (UI State) ile sunucu durumu (Server State) ayrımı; hafif istemci state araçları (Zustand)
  • TanStack Query: staleTime, gcTime, sorgu anahtarları (Query Keys), otomatik yeniden deneme ve önbellek geçersizleştirme
  • Mutasyonlar, Optimistic Updates, sayfalama (Pagination) ve yüksek performanslı form yönetimi (React Hook Form)
Paket Optimizasyonu, Sanallaştırma ve Üretim Kalitesi
  • Rota ve bileşen bazlı Code Splitting (React.lazy / Dynamic Imports), Tree Shaking ve Bundle Analyzer kullanımı
  • Büyük veri listelerinde DOM darboğazlarını TanStack Virtual (Windowing) ile çözme
  • Global Error Boundaries, Sentry ile hata izleme, bellek sızıntısı (Memory Leak) analizi ve PWA/Offline yetenekleri

Bu Kategorideki Diğer Eğitimler

  • Angular ile Kurumsal Frontend Geliştirme

    Standalone Components, Angular Signals, RxJS, Reactive Forms, modüler mimari ve değişim algılama optimizasyonlarıyla kurumsal Angular uygulamaları geliştirin.

    Web Development - FrontEnd Kurumsal
    Canlı Kurs
    4 modül
    İncele
  • Micro Frontend ve Monorepo Mimarisi

    Module Federation, Nx ve Turborepo ile monorepo yönetimi, paylaşımlı tasarım sistemleri ve bağımsız dağıtım boru hatlarıyla frontend projelerini ölçeklendirin.

    Web Development - FrontEnd Kurumsal
    Canlı Kurs
    4 modül
    İncele
  • Redux ile Durum Yönetimi

    Redux Toolkit (RTK), RTK Query, normalize edilmiş state mimarisi, memoized selector'lar ve modern React durum yönetimi kalıplarıyla karmaşık uygulamaları yönetin.

    Web Development - FrontEnd Kurumsal
    Canlı Kurs
    4 modül
    İncele
  • TypeScript

    Strict tip sistemi, generics, utility types, discriminated unions ve tip güvenli API katmanlarıyla ölçeklenebilir ve hatasız TypeScript projeleri geliştirin.

    Web Development - FrontEnd Kurumsal
    Canlı Kurs
    4 modül
    İncele
  • React ve Next.js

    React 19, Server ve Client Components, Next.js App Router, SSR/SSG/ISR stratejileri, Server Actions ve önbellekleme mimarisiyle hızlı web uygulamaları geliştirin.

    Web Development - FrontEnd Kurumsal
    Canlı Kurs
    4 modül
    İncele

Bizimle iletişime geçin