Frontend Genel Bakış (Frontend Overview)
Modern web uygulamaları için frontend teknolojileri, framework karşılaştırmaları ve öğrenme yol haritası. Bu kategori JavaScript, TypeScript, React, Next.js, Vue.js, CSS/Tailwind, performans optimizasyonu ve 3D grafik konularını kapsar.
Framework Karşılaştırma Tablosu (Framework Comparison)
| Özellik | React | Vue.js | Next.js | Angular |
|---|---|---|---|---|
| Geliştirici | Meta (Facebook) | Evan You (Topluluk) | Vercel | |
| Tür | UI Kütüphanesi | Progressive Framework | Full-stack Framework | Full Framework |
| Öğrenme Eğrisi | Orta | Düşük-Orta | Orta-Yüksek | Yüksek |
| Ekosistem | Çok geniş, üçüncü parti ağırlıklı | Dengeli, resmi kütüphaneler | React ekosistemi + yerleşik özellikler | Tam donanımlı, hepsi dahil |
| SSR Desteği | Harici (Next.js, Remix) | Nuxt.js ile | Yerleşik (varsayılan) | Angular Universal |
| State Management | Redux, Zustand, Jotai | Pinia (resmi), Vuex | React state + Server Components | RxJS, NgRx, Signals |
| TypeScript | Destekler (opsiyonel) | Destekler (opsiyonel) | Tam destek (varsayılan) | Varsayılan (zorunlu) |
| İdeal Proje | SPA, Dashboard, Mobil (RN) | Hızlı MVP, Laravel entegrasyonu | SEO odaklı siteler, e-ticaret | Kurumsal uygulamalar, ERP |
| Performans | Virtual DOM, iyi | Virtual DOM, hafif bundle | Otomatik optimizasyon, ISR | Ahead-of-Time derleme |
| Minimum Bundle | ~42 KB (gzip) | ~33 KB (gzip) | ~70 KB (gzip, framework dahil) | ~130 KB (gzip) |
| Routing | React Router (harici) | Vue Router (resmi) | Dosya tabanlı (yerleşik) | Angular Router (yerleşik) |
| CLI Aracı | create-react-app / Vite | create-vue / Vite | create-next-app | Angular CLI |
Ne Zaman Hangisi? Karar Ağacı (Decision Tree)
Proje gereksinimlerine göre doğru framework seçimi için aşağıdaki yol haritasını kullanın:
SPA / Dashboard Projesi --> React
- Tek sayfa uygulamaları ve admin panelleri için en geniş ekosistem
- React Native ile mobil uygulamaya geçiş imkanı
- Büyük topluluk, bol kaynak ve iş ilanı
- Redux/Zustand ile karmaşık state yönetimi kolaylığı
Hızlı MVP + Laravel Entegrasyonu --> Vue.js
- Laravel Blade ile kolay entegrasyon (Inertia.js)
- Düşük öğrenme eğrisi, hızlı prototipleme
- Composition API ile temiz ve okunabilir kod
- Küçük-orta ölçekli projeler için ideal
SEO + SSR Gerektiren Proje --> Next.js
- Server-Side Rendering varsayılan olarak aktif
- Static Site Generation (SSG) ve Incremental Static Regeneration (ISR)
- App Router ile Server Components desteği
- E-ticaret, blog, pazarlama siteleri için en uygun
Kurumsal / Büyük Ölçekli Proje --> Angular
- TypeScript zorunlu, sıkı mimari kuralları
- Dependency Injection, modüler yapı
- Büyük ekiplerde kod tutarlılığı
- Uzun ömürlü, karmaşık iş uygulamaları için ideal
Öğrenme Sırası Önerisi (Learning Path)
Adım adım frontend yol haritası:
1. HTML / CSS
Temel web yapisi ve stillendirme
|
v
2. JavaScript (ES6+)
Degiskenler, fonksiyonlar, async/await, DOM manipulasyonu
|
v
3. TypeScript
Tip sistemi, interface, generic, derleme zamani hata yakalama
|
v
4. React veya Vue.js
Komponent mimarisi, state yonetimi, lifecycle
|
v
5. Next.js veya Nuxt.js
SSR, SSG, API Routes, dosya tabanli routing
|
v
6. Tailwind CSS
Utility-first CSS, responsive tasarim, hizli stillendirmeEk Öneriler (Additional Recommendations)
| Seviye | Konu | Açıklama |
|---|---|---|
| Başlangıç | Git ve GitHub | Versiyon kontrolü, dallanma stratejileri |
| Başlangıç | npm / yarn / pnpm | Paket yönetimi, dependency kavramları |
| Orta | REST API tüketimi | fetch, axios, SWR, React Query |
| Orta | State Management | Redux Toolkit, Zustand, Pinia |
| İleri | Testing | Jest, Vitest, React Testing Library, Cypress |
| İleri | CI/CD | GitHub Actions, Vercel, Netlify deploy |
| Uzman | Web Performance | Core Web Vitals, lazy loading, bundle analizi |
| Uzman | Three.js / WebGL | 3D grafik, interaktif deneyimler |
Rehber Haritası (Guide Map)
Bu kategorideki rehberlerin her birinin kapsadığı konular:
| Rehber | Kapsam | Seviye | Temel Konular |
|---|---|---|---|
| JavaScript & TypeScript | Temel dil | Başlangıç-Orta | ES6+ syntax, async/await, DOM, modüller, hata yönetimi |
| TypeScript | Tip sistemi | Orta | Interface, generic, utility types, derleme ayarları |
| React | SPA framework | Orta | JSX, hooks, state, props, React Router, context API |
| Next.js | SSR / SSG | Orta-İleri | App Router, Server Components, API Routes, ISR, deploy |
| Vue.js | Alternatif framework | Orta | Composition API, reactivity, Vue Router, Pinia |
| CSS & Tailwind | Stil | Başlangıç-Orta | Flexbox, Grid, responsive tasarım, utility classes, tema |
| Web Performance | Optimizasyon | İleri | Core Web Vitals, lazy loading, code splitting, caching |
| Three.js | 3D grafik | İleri | Scene, camera, mesh, animasyon, React Three Fiber |
Rehber İçerik Detayları (Guide Content Details)
JavaScript & TypeScript -- Temel dil rehberi. ES6+ özellikleri (arrow functions, destructuring, spread operator), Promise ve async/await, DOM API, event handling, modül sistemi (import/export) ve hata yönetimi konularını kapsar. Hem tarayıcı hem Node.js ortamı için geçerlidir.
TypeScript -- JavaScript üzerine tip güvenliği katan TypeScript'in detaylı rehberi. Interface ve type tanımları, generic tipler, utility types (Partial, Pick, Omit), enum, tsconfig ayarları ve projede TypeScript kurulumunu içerir.
React -- Komponent tabanlı UI geliştirme rehberi. Fonksiyonel komponentler, useState, useEffect, useContext, custom hooks, React Router ile sayfa yönetimi, form işlemleri ve performans optimizasyonları (memo, useMemo, useCallback) anlatılır.
Next.js -- React üzerine kurulu full-stack framework rehberi. App Router, Server ve Client Components farkı, data fetching (SSR, SSG, ISR), API Routes, middleware, image/font optimizasyonu ve Vercel deploy sürecini kapsar.
Vue.js -- Progressive JavaScript framework rehberi. Composition API (ref, reactive, computed, watch), Vue Router, Pinia ile state yönetimi, component iletişimi (props, emit, provide/inject) ve Vite ile proje kurulumunu içerir.
CSS & Tailwind -- Modern CSS ve Tailwind CSS rehberi. Flexbox, CSS Grid, responsive breakpoints, CSS değişkenleri, Tailwind utility sınıflarını, tema özelleştirme, dark mode ve komponent stillendirme yaklaşımlarını kapsar.
Web Performance -- Frontend performans optimizasyon rehberi. Core Web Vitals (LCP, FID, CLS), Lighthouse kullanımı, lazy loading, code splitting, image optimizasyonu, bundle analizi, caching stratejileri ve CDN yapılandırmasını içerir.
Three.js -- WebGL tabanlı 3D grafik rehberi. Scene graph, kamera türleri, geometri ve material, ışıklandırma, animasyon döngüsü, texture yükleme, glTF model import ve React Three Fiber entegrasyonunu kapsar.
Popüler Araç ve Kütüphane Ekosistemi (Popular Tools & Libraries)
| Kategori | Araçlar | Açıklama |
|---|---|---|
| Build Tool | Vite, Webpack, Turbopack | Proje derleme ve geliştirme sunucusu |
| Paket Yönetimi | npm, yarn, pnpm | Bağımlılıkların yönetimi |
| Linting | ESLint, Biome | Kod kalitesi ve stil kontrolü |
| Formatting | Prettier, Biome | Otomatik kod formatlama |
| Testing | Jest, Vitest, Cypress, Playwright | Birim, entegrasyon ve E2E test |
| State | Redux Toolkit, Zustand, Pinia, Jotai | Global state yönetimi |
| Data Fetching | TanStack Query, SWR, Axios | API iletişimi ve cache |
| UI Kit | shadcn/ui, Radix, Headless UI | Hazır komponent kütüphaneleri |
| Animasyon | Framer Motion, GSAP, Lottie | UI animasyonları |
| Form | React Hook Form, Formik, VeeValidate | Form yönetimi ve validasyon |
| CSS-in-JS | Styled Components, Emotion, Vanilla Extract | Programatik stil tanımlama |
| Monorepo | Turborepo, Nx, Lerna | Çoklu paket yönetimi |
Yararlı Kaynaklar (Useful Resources)
| Kaynak | Adres | Açıklama |
|---|---|---|
| MDN Web Docs | developer.mozilla.org | HTML, CSS, JS resmi referans |
| React Docs | react.dev | React resmi dokümantasyonu |
| Next.js Docs | nextjs.org/docs | Next.js resmi dokümantasyonu |
| Vue.js Docs | vuejs.org/guide | Vue.js resmi rehberi |
| TypeScript Handbook | typescriptlang.org/docs | TypeScript resmi el kitabı |
| Tailwind CSS Docs | tailwindcss.com/docs | Tailwind CSS referansı |
| Can I Use | caniuse.com | Tarayıcı uyumluluk tablosu |
| web.dev | web.dev | Google performans rehberleri |
Not: Bu rehber pratik kullanım için hazırlanmıştır. Her teknolojinin resmi dokümantasyonunu da incelemeniz tavsiye edilir. Framework seçimi proje gereksinimlerine, ekip deneyimine ve uzun vadeli bakım planına göre yapılmalıdır.
Terim Sözlüğü (Glossary)
Temel Kavramlar (Core Concepts)
| Terim | Açıklama | Örnek |
|---|---|---|
| SPA | Single Page Application — sayfa yenilenmeden çalışan uygulama | React, Vue.js uygulamaları |
| SSR | Server-Side Rendering — HTML sunucuda oluşturulur, SEO dostu | Next.js, Nuxt |
| SSG | Static Site Generation — build sırasında HTML oluşturulur | Blog, dokümantasyon siteleri |
| ISR | Incremental Static Regeneration — SSG + periyodik güncelleme | Next.js revalidate |
| CSR | Client-Side Rendering — HTML tarayıcıda oluşturulur | Klasik React SPA |
| Hydration | SSR ile gelen HTML'e JavaScript etkileşimi ekleme | Next.js, Nuxt sayfa yüklenmesi |
| DOM | Document Object Model — HTML'in JavaScript ile erişilebilir ağaç yapısı | document.querySelector() |
| Virtual DOM | Gerçek DOM'un bellekteki kopyası — performans için diff hesabı | React, Vue.js |
Bileşen & State (Component & State)
| Terim | Açıklama | Örnek |
|---|---|---|
| Component | Yeniden kullanılabilir UI parçası | <Button>, <Card>, <Navbar> |
| Props | Üst bileşenden alt bileşene veri aktarımı (read-only) | <Card title="Merhaba" /> |
| State | Bileşenin kendi iç durumu — değişince yeniden render | useState, ref() |
| Hook | React'te state ve yaşam döngüsüne erişen fonksiyon | useState, useEffect, useRef |
| Composable | Vue.js'te yeniden kullanılabilir mantık fonksiyonu (Hook benzeri) | useFetch(), useAuth() |
| Context / Provide-Inject | Props drilling olmadan derinlere veri aktarımı | React Context, Vue provide/inject |
| Store | Global state yönetimi — tüm bileşenlerden erişilebilir | Redux, Zustand, Pinia |
| Reactivity | Veri değişince UI'ın otomatik güncellenmesi | Vue ref(), React setState |
Routing & Navigasyon
| Terim | Açıklama | Örnek |
|---|---|---|
| File-based Routing | Dosya/klasör yapısına göre otomatik route oluşturma | Next.js app/about/page.tsx → /about |
| Dynamic Route | URL parametreli route | /users/[id] → /users/42 |
| Lazy Loading | Bileşeni ihtiyaç duyulduğunda yükleme — ilk yükleme hızı | React.lazy(), defineAsyncComponent() |
| Code Splitting | JavaScript'i parçalara bölerek sadece gerekeni yükleme | import() dynamic import |
| Navigation Guard | Route değişiminde yetki kontrolü | Auth check, redirect to login |
Stil & Performans (Styling & Performance)
| Terim | Açıklama | Örnek |
|---|---|---|
| CSS Modules | Scoped CSS — sınıf isimleri otomatik benzersiz yapılır | styles.card → .card_a1b2c3 |
| Utility-First CSS | Hazır utility sınıfları ile stil verme | Tailwind: class="flex p-4 bg-blue-500" |
| CSS-in-JS | JavaScript içinde CSS yazmak | styled-components, Emotion |
| Tree Shaking | Kullanılmayan kodu build'den çıkarma | Vite, Webpack otomatik yapar |
| Bundle | Tüm JS/CSS dosyalarını tek/birkaç dosyaya birleştirme | dist/assets/index-abc123.js |
| HMR | Hot Module Replacement — kod değişince sayfa yenilenmeden güncelleme | Vite, Webpack Dev Server |
| Core Web Vitals | Google'ın sayfa performans metrikleri | LCP, FID/INP, CLS |
Test & Güvenlik
| Terim | Açıklama | Örnek |
|---|---|---|
| Unit Test | Tek bir bileşen/fonksiyonu izole test etme | expect(add(2,3)).toBe(5) |
| E2E Test | Kullanıcı gibi uçtan uca tarayıcı testi | Cypress, Playwright |
| Snapshot Test | Bileşen çıktısını kaydet, sonraki testlerde karşılaştır | Jest/Vitest snapshot |
| XSS | Cross-Site Scripting — zararlı script enjeksiyonu | innerHTML yerine textContent kullan |
| CSP | Content Security Policy — hangi kaynakların yükleneceğini belirleyen header | Inline script engelleme |
İlgili Rehberler (Related Guides)
Frontend
- JavaScript & TypeScript
- TypeScript Rehberi
- React Rehberi
- Next.js Rehberi
- Vue.js Rehberi
- CSS & Tailwind
- Web Performance
- Three.js Rehberi