Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Bookstore SPA'yı Uçtan Uca Bitirmek: Feature Klasörleri, Authentication, Environment'lar ve Deploy
Bir React SPA'yı production'a hazırlamak, feature sınırlarını lint kuralıyla korumak, VITE_ değişkenlerinin build sırasında bundle'a yazıldığını bilip secret'ı tarayıcıdan uzak tutmak ve oturumu token yerine HttpOnly cookie taşıyan bir BFF'e vermek demek. Bookstore'a ASP.NET Core ve YARP ile küçük bir BFF ekliyor, sign in akışını, SPA fallback'i, cache header'larını, nginx yapılandırmasını ve bundle analizini gerçek çıktılarla gösteriyoruz.
İlk React Projesi: Vite + TypeScript, Proje Yapısı, StrictMode ve React DevTools
Vite'ın react-ts template'i, feature klasörleri ve Vite 8'in resolve.tsconfigPaths ayarıyla tek kaynaktan @/ alias'ı, Oxlint'in hook kuralları ve /api isteklerini Bookstore API'ye aktaran dev proxy ile seriye yetecek bir proje iskeleti kuruyoruz. StrictMode'un geliştirmede render'ı iki kez, effect'i kurulum-temizlik-kurulum sırasıyla çalıştırdığını, production build'de ise her şeyin bir kez çalıştığını ve proxy olmadan tarayıcının CORS yüzünden yanıtı okumadığını gerçek çıktılarla gösteriyoruz.
Angular Geliştiricisi için React: Library mi Framework mü, Zihinsel Model Farkları ve Ekosistem Haritası
React bir framework değil, UI library'si: component, state ve render'ı veriyor; router, veri çekme, form ve global state'i ekip ekosistemden seçiyor. Bookstore'un kitap kartını Angular ve React'te yan yana yazıyor, bir tıklamada React'in component fonksiyonunu yeniden çağırıp DOM'da yalnız iki text node'u değiştirdiğini gerçek çıktıyla gösteriyor, Angular kavramlarının React karşılıklarını tablo hâlinde veriyoruz.
Sass'ı Build'e Bağlamak: Source Map'ler, Angular, Vite ve ASP.NET Core Ayarları, Load Path'ler ve Derleme Performansı
Source map'i geliştirmede aç, production'da hidden yap ve .map dosyasını yayından ayır; Vite'ta sass-embedded kur, additionalData'ya yalnız CSS üretmeyen @use satırı koy. Bookstore'da Debug sonrası Release build'in Sass'ı hiç çalıştırmadığını ve map'i Brotli ve gzip kopyalarıyla yayına gönderdiğini gösteriyor, MSBuild target'ını düzeltiyor, DevTools'un .scss satırını bulduğunu ve pkg: importer'lı kendi build script'imizi deniyoruz.
Rust Dalgası ve 2025–2026 Sürüm Haritası: Rolldown, Oxc, Rspack, Turbopack, Lightning CSS ve Araç Seçimi
2025–2026'da JavaScript ile yazılan build araçlarının yerini Rust ve Go ile yazılanlar aldı: Vite 8 Rolldown ve Oxc'ye, Angular CLI chunk optimization'da Rolldown'a, Next.js 16 Turbopack'e geçti, Rspack 2.0 webpack uyumlu bir yol sundu. Bookstore widget'ını dört araçla ölçünce küçük projede Rspack'in, 2000 module'de Rolldown ve esbuild'in önde olduğunu, webpack'in süresinin çoğunun Terser'dan geldiğini görüyor ve bir karar tablosu çıkarıyoruz.
Source Map'ler: ECMA-426 Formatı, Production'da Hidden Source Map, Error Tracking ve Güvenlik
Source map, minify edilmiş koddaki her konumu kaynak koda eşleyen ve Aralık 2024'ten beri ECMA-426 ile standart olan bir JSON dosyasıdır; hidden source map yalnız sourceMappingURL yorumunu kaldırır, dosya sunucudaysa herkes indirebilir. Bookstore'da mappings alanını Base64 VLQ ile çözüyor, ASP.NET Core'un .map dosyasını sunduğunu görüyor, map'leri deploy'dan ayırıyor ve production hatasını debug ID ile TypeScript satırına eşliyoruz.
Code Splitting, Tree Shaking ve Bundle Analizi: Bundle'ı Neyin Şişirdiğini Bulmak
Bundle'ı neyin şişirdiğini tahmin etme, ölç: ng build --stats-json, source-map-explorer, rollup-plugin-visualizer ve webpack-bundle-analyzer paket bazında dağılımı gösterir; tree shaking ise yalnız ESM ve side effect'siz module'lerde çalışır. Bookstore'un Angular uygulamasında lodash'tan named import'un hiçbir şey kazandırmadığını, barrel dosyasının side effect taşıdığını, moment ve lodash'ı çıkarınca main'in 359 kB'tan 224 kB'a indiğini ve Vite'ta vendor chunk kararını görüyoruz.
Angular CLI'ın Build Sistemi: application Builder, esbuild + Vite, Rolldown'a Geçiş ve webpack'ten Migration
Angular CLI'ın application builder'ı uygulamayı esbuild ile bundle'lar, lazy chunk sayısı eşiği aşınca chunk'ları Rolldown ile yeniden düzenler ve Vite'ı yalnız dev server olarak kullanır. Bookstore'un Angular uygulamasını webpack tabanlı browser builder'dan taşıyıp browser klasörüne kayan çıktıyı, moment'in dil dosyaları yüzünden yarıya inen main bundle'ı, HMR'ın sınırlarını, define/loader option'larını, Baseline tarayıcı hedefini ve TypeScript 6.0 zorunluluğunu görüyoruz.
Vite: Native ESM Dev Server, HMR, Dependency Pre-bundling ve Rolldown ile Production Build
Vite geliştirmede kaynak kodu bundle'lamaz: her dosyayı istendiği anda çevirip native ESM olarak sunar, bağımlılıkları bir kez pre-bundle eder; production'da Vite 8 ile Rolldown, Oxc ve Lightning CSS kullanır. Bookstore widget'ını ASP.NET Core'a bağlayıp /api proxy'sini, HMR'ın ne zaman sayfayı yenilediğini, manifest.json'u okuyan bir Razor tag helper'ı, VITE_ değişkenlerinin bundle'a gömülmesini ve Vite 7'den geçişte sessizce etkisiz kalan ayarları görüyoruz.
esbuild: Go ile Yazılan Hız, API, Plugin'ler ve Sınırları
esbuild hızlıdır çünkü Go ile native koda derlenir, işi çekirdeklere paralel dağıtır ve AST üzerinde yalnız üç geçiş yapar; lodash-es'in tamamını webpack'ten yaklaşık 22 kat hızlı ama %9 daha büyük bundle'ladı. Bookstore widget'ında CLI'ı, JS API'sini, metafile'ı ve onResolve/onEnd plugin'lerini kullanıyor; type check, HMR, HTML ve code splitting'deki sınırlarını ve Angular CLI'daki yerini görüyoruz.
webpack'i Anlamak: Entry, Loader, Plugin, Module Federation ve 2026'da Ne Zaman Hâlâ Gerekli?
webpack her dosyayı bir module sayar; loader'lar dosyayı sağdan sola dönüştürür, plugin'ler derleme hook'larına bağlanır. 5.112 CSS, HTML entry ve TypeScript'i loader'sız destekliyor; yeni projede yerini Vite aldı, ama eski Angular builder'ları, Module Federation ve özel loader'lı büyük projelerde hâlâ gerekli. Bookstore widget'ında loader sırası hatasını, kendi manifest plugin'imizi, splitChunks'ın minSize sınırını ve Module Federation'ın maliyetini ölçüyoruz.
Build Aracı Neden Var? Module Graph, Transpiling, Bundling, Minification ve Dev Server'ın Görevi
Build aracı, tarayıcının tek başına yapamadığı işi yapar: import'ları çözüp module graph'ı kurar, TypeScript'i çevirir, kullanılmayan kodu atar, dosyaları birleştirip küçültür ve içerikten hash'lenmiş adlar verir. Bookstore'un kitap arama widget'ında bundler'sız ESM'in 642 isteğini, Vite 8 ile 3 isteğe inen çıktıyı, Baseline build target'ını ve dev server ile production build farkını gerçek çıktılarla inceliyoruz.