COMPOSABLE COMMERCE MÜHENDİSLİĞİ
Headless Commerce
Hydrogen, Remix, Next.js + composable MACH mimarisi ile maksimum performans, esneklik ve ownership — frontend ile backend'i ayrıştıran modern commerce işletim sistemi.
Headless artık 'frontend'i ayırmak' değildir; MACH (Microservices + API-first + Cloud-native + Headless) prensiplerinde frontend + commerce engine + CMS + search + payment + identity'nin best-in-class seçildiği ve edge'de compose edildiği composable operasyondur.
2026 e-ticareti üç baskı altında: monolitik tema sistemleri hız + esneklik sınırına dayandı, edge runtime (Cloudflare Workers, Vercel Edge, Shopify Oxygen) ana dağıtım katmanı haline geldi, React Server Components + streaming SSR TTFB'yi saniyeler mertebesinden yüz milisaniyelere indirdi. Çoğu marka hâlâ 'hydrogen = sadece Shopify' sanıyor; commercetools / BigCommerce / Saleor gibi composable engine + Next.js + Sanity / Contentful + Algolia stack'ini değerlendirmiyor. Roibase headless operasyonu altı prensip üzerinden kurulur.
METODOLOJI
6 katmanlı composable commerce operasyonu
Assess → Architect → Compose → Migrate → Launch → Observe. Her katman deliverable + ADR + SLA ile teslim edilir.
01
ASSESS
Mevcut stack (monolit/temalar, app, CDN), performance baseline, SEO risk, operasyon maliyeti, ekip kapasite değerlendirmesi.
02
ARCHITECT
MACH mimarisi, vendor shortlist (engine/CMS/search/payment/identity), edge stratejisi, ADR dokümanları, RFP + POC.
03
COMPOSE
Framework (Hydrogen / Next.js), composable backend entegrasyonu, GraphQL gateway, event bus (webhook + queue), feature flag.
04
MIGRATE
Data ETL (catalog/customer/order/content), 301 mapping + hreflang + sitemap, staging parity, feature-complete smoke test.
05
LAUNCH
Canary rollout, feature flag'li launch, RUM + Sentry, BFCM-ready stress test, weekend on-call + war room.
06
OBSERVE
SLO/SLI takibi, aylık performance QBR, SEO rank monitoring, cost review, ADR güncelleme, runbook + eğitim + handoff.
— KARŞILAŞTIRMA
Monolitik tema vs template-only headless vs Roibase composable commerce
Üç yaklaşımın performans, esneklik, vendor lock-in, SEO + TCO farkı.
| Boyut | Monolitik tema | Template-only headless | Roibase composable commerce |
|---|---|---|---|
| Mimari | Tek monolit | Şablon + tek backend | MACH + composable + edge |
| Vendor esnekliği | Platform lock-in | Engine lock-in | Best-of-breed seçim (her katman) |
| Edge runtime | Yok | Kısmen | CF Workers / Vercel Edge / Oxygen |
| Performance (LCP) | 2.5-4.5s | 2.0-2.8s | < 1.5s baseline + RUM |
| Content + CMS | Platform CMS (kısıtlı) | Tek CMS | Sanity/Contentful/Storyblok best-fit |
| Search | Native search | Elasticsearch/Algolia başlangıç | Algolia/Typesense/Coveo + AI relevance |
| SEO | Tema bağımlı | SPA riskli | SSR + schema + 301 + hreflang mühendisliği |
| TCO 24. ay | Düşük ama teknik borç | Orta + tek vendor risk | Orta + ownership + esneklik + hız |
KANIT
Rakamlarla sonuç
75p mobile; headless migration + edge runtime sonrası.
Performance + streaming SSR + edge cache sonrası 6 ay ortalama.
SEO preservation + schema + hreflang + Core Web Vitals yeşil alan sonrası 12. ay.
Cloudflare Workers / Vercel Edge / Shopify Oxygen global CDN.
ISR + partial prerendering + edge cache stratejisi sonrası.
Engine + CMS + search + identity — her biri ayrı iter edilebilir.
NELER YAPIYORUZ
Çalışma kapsamı
Her hizmet başlığı, çıktı bazlı ölçülebilir bir iş paketidir. Roibase, strateji ve uygulamayı tek ekip içinde birleştirir.
Shopify Hydrogen + Oxygen
React Server Components + Remix + streaming SSR + edge deploy (Oxygen); Storefront API + Customer Account API + Shopify CDN.
Next.js + App Router + RSC
Server components + streaming + partial prerendering (Next 15) + Turbopack; Vercel Edge deployment + ISR + SWR.
Composable commerce engine
commercetools / Saleor / BigCommerce / Shopify Storefront API; best-fit engine seçimi + GraphQL + webhook + event-driven akış.
Headless CMS entegrasyonu
Sanity, Contentful, Storyblok, Hygraph, Strapi; content model, preview mode, editorial workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo / Meilisearch; instant search, federated search, AI relevance tuning, merchandising rules.
Edge caching + ISR + SWR
Cloudflare Workers + KV/R2 / Vercel Edge / Oxygen; stale-while-revalidate, incremental static regeneration, edge middleware.
Core Web Vitals mühendisliği
LCP < 1.5s / INP < 200ms / CLS < 0.05 bütçe; font preload + image optimization + critical CSS + bundle splitting + RUM.
Identity + payment + subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen + Recharge / Bold; passkey + SCA + 3DS2 + Apple/Google Pay.
Migration playbook
Magento / WooCommerce / legacy Shopify / BigCommerce headless'e; 301 mapping, feature parity, staging/canary, go-live weekend.
A/B + feature flags + observability
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry; canary rollout + rollback + SLO/SLI metrik tree.
— GETİRİLER
Commerce altyapınızın somut değişimi
Edge runtime + composable + performance + SEO preservation + observability entegre olduğunda ROI tek metriğe bağlı kalmaz.
Hız dramatik artar
Streaming SSR + edge runtime + RSC ile LCP yarıdan fazla düşer; mobil dönüşüm ve Core Web Vitals'ı yeşile çeker.
Conversion büyür
Hız + kişiselleştirme + daha esnek UX ile funnel drop düşer, sepet terk oranı azalır.
SEO rank korunur ve büyür
SSR + schema.org + 301 + hreflang + sitemap mühendisliği sayesinde migration dip'i 2-3 haftalık, ardından rank artışı.
Vendor esnekliği açılır
Engine / CMS / search / identity her katmanda değiştirilebilir; vendor lock-in + yıllık fiyat baskısı azalır.
Ürün hızı büyür
Feature flag + canary + ISR ile yeni feature'lar günlük değil saatlik yayına alınabilir; deneme hızı artar.
Operasyon maliyeti düşer
Monolit üzerine yamanan app'lerin yerini composable servisler alır; edge cache ile origin yükü azalır, infra maliyeti optimize olur.
TESLİMATLAR
Her headless engagement'ında aldıklarınız
Kurulum + 6 aylık operasyon paketinde sabit teslimat listesi; ek ücret sürprizi yok.
Headless feasibility + ROI raporu
Mevcut stack audit, TCO modeli, performance baseline, SEO risk, ekip kapasite değerlendirmesi; 50-80 sayfa.
MACH mimari + ADR dokümanları
Engine + CMS + search + payment + identity + edge + CI/CD vendor kararları, her biri gerekçeli ADR'lar.
Framework seçimi + POC
Hydrogen / Next.js / Remix / Nuxt karar matrisi + 2-3 hafta POC + performance benchmark raporu.
Composable backend kurulum
commercetools / Saleor / BC / Shopify Storefront API entegrasyonu + GraphQL gateway + webhook + event bus.
Headless CMS şeması
Sanity / Contentful / Storyblok content model, preview mode, editorial workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo kurulum + index şeması + AI relevance tuning + merchandising rules.
Edge runtime + cache stratejisi
Cloudflare Workers / Vercel Edge / Oxygen deploy + KV/R2 + ISR + SWR + edge middleware.
Identity + payment + subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen entegrasyonu + passkey + SCA + 3DS2 uyumlu flow.
SEO preservation paketi
301 mapping, canonical, schema.org, hreflang, sitemap, robots, ITA (International Targeting); rank monitoring dashboard.
Feature flag + A/B altyapısı
GrowthBook / Statsig / LaunchDarkly + canary + kill switch + experiment metric tree.
Observability + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty; incident runbook.
Runbook + eğitim + 3 aylık destek
Architecture + deploy + rollback + monitoring runbook, ekip eğitim oturumları, 90 gün destek + on-call.
— KAPSAM
Neleri yapıyor, neleri yapmıyoruz
Composable commerce scope'u yazılı; sürprizleri ve sonradan ek faturayı önler.
Yapıyoruz
- MACH + composable commerce mimarisi + ADR
- Shopify Hydrogen + Oxygen (RSC + Remix)
- Next.js + App Router + RSC + Vercel Edge
- commercetools / Saleor / BC / Shopify Storefront API
- Sanity / Contentful / Storyblok headless CMS
- Algolia / Typesense / Coveo search + merchandising
- Edge runtime (Cloudflare Workers / Vercel Edge / Oxygen)
- SEO preservation (301 / schema / hreflang / sitemap)
- Feature flag + canary + rollback + observability
- Identity + payment + subscription entegrasyonu
- Core Web Vitals mühendisliği + RUM
- Runbook + eğitim + 90 gün destek + on-call
Yapmıyoruz
- Monolitik Magento / WooCommerce tema geliştirme (sadece migration)
- ERP / OMS / WMS çekirdek geliştirme (entegre ederiz)
- Reklam bütçesi işletme (Acquisition birimi ayrı engagement)
- Fiziksel lojistik / depo / customs operasyonu
- Kredi kartı işleme / PCI scope sahipliği (payment vendor üzerinde kalır)
- Banking / KYC / AML regülasyon süreçleri (partner firmalarla)
- Müşteri hizmetleri outsource (araç kurar, işletme müşteride)
- Fake review / bot trafik / suni hız manipülasyonu
NASIL ÇALIŞIYORUZ
12-16 haftalık kurulum + migration, ardından aylık operasyon
Hafta 1-2: assess + feasibility
Mevcut stack audit, performance baseline, SEO risk, TCO modeli, ekip kapasite + ADR taslak.
Hafta 3-4: architect + vendor RFP/POC
MACH mimarisi, engine/CMS/search/payment/identity shortlist + RFP + 2-3 hafta POC.
Hafta 5-6: compose + framework setup
Hydrogen / Next.js setup, Storefront API / commerce engine entegrasyonu, GraphQL gateway, edge runtime deploy.
Hafta 7: CMS + search + merchandising
Sanity / Contentful content model, Algolia / Typesense index + relevance tuning, merchandising rules.
Hafta 8: identity + payment + subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + passkey + accelerated checkout.
Hafta 9-10: data ETL + 301 mapping
Catalog / customer / order / content ETL, URL mapping, 301 plan, hreflang + sitemap + schema.
Hafta 11-12: staging + canary + BFCM stress
Staging parity, smoke test, canary rollout, feature flag'li launch, BFCM stress test + war room planı.
Hafta 13+: go-live + observe + QBR + destek
Go-live weekend playbook, RUM + Sentry + SLO/SLI, monthly QBR, runbook + eğitim + 3 ay destek.
— ARAÇ SETİ
Kullandığımız araçlar — vendor-agnostik ama kararlı seçim
Her müşteri için uygun olanı seçeriz; bağımsızlığımızı komisyon almayarak koruruz.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONALIZATION
EDGE & OBSERVABILITY
SIK SORULAR
Sık sorulan sorular
— SÖZLÜK
Composable commerce temel kavramları
Mühendislik, ürün, operasyon ve pazarlama ekiplerinizin ortak dili.
- MACH
- Microservices + API-first + Cloud-native + Headless prensiplerinin kısaltması; composable commerce mimarisinin çerçevesi, MACH Alliance tarafından tanımlandı.
- Composable Commerce
- Tek bir monolitik platform yerine, her işlev için best-of-breed vendor seçilerek compose edilen commerce mimarisi; engine + CMS + search + payment + identity ayrı servisler.
- Headless
- Frontend (presentation) ile backend (commerce engine / CMS) arasındaki katmanın API üzerinden ayrıştırılması; frontend'in herhangi bir framework + runtime'da çalışmasını sağlar.
- React Server Components (RSC)
- React 18+ ile gelen, sunucuda render edilen, istemciye hiç JS göndermeyen component modeli; Next.js App Router + Shopify Hydrogen native kullanır, bundle + hydration cost'unu düşürür.
- Streaming SSR
- Sayfanın HTML'inin tek seferde değil, hazır olan parçalardan başlayarak akışla sunucudan istemciye gönderildiği render modeli; TTFB ve LCP düşer.
- Edge Runtime
- Kodun, kullanıcıya coğrafi olarak en yakın CDN node'unda çalıştırıldığı runtime; Cloudflare Workers, Vercel Edge, Shopify Oxygen başlıca örnekler. Latency minimize, global tutarlılık.
- ISR (Incremental Static Regeneration)
- Statik olarak build edilen sayfaların arka planda belirli aralıklarla veya trigger'la yeniden oluşturulması; hem statik hızı hem taze veri.
- Stale-While-Revalidate (SWR)
- HTTP cache stratejisi; kullanıcıya stale içerik anında gösterilirken arka planda taze versiyon fetch edilir. Hız + freshness dengesi.
- Storefront API
- Shopify'ın public GraphQL API'si; headless / custom frontend / mobile uygulamaların ürün + koleksiyon + sepet + checkout verisine erişmesini sağlar.
- commercetools
- Composable commerce engine; API-first + MACH uyumlu, enterprise B2B + B2C senaryolarında en çok kullanılan engine'lerden biri. commercetools Frontend + Studio ekosistemi mevcut.
- ADR (Architecture Decision Record)
- Bir yazılım mimarisi kararının bağlamını, seçenekleri, sonucunu ve tradeoff'larını yazılı kayıt altına alan dokümantasyon formatı; composable stack'te vendor kararları için standart.
- Feature Flag
- Kodun deploy'undan bağımsız, runtime'da aç/kapa yapılabilen özellik anahtarı; canary release, A/B test, kill switch senaryolarında kullanılır; GrowthBook/Statsig/LaunchDarkly başlıca araçlar.
- SSR (Server-Side Rendering)
- HTML'in sunucuda render edilip tarayıcıya hazır olarak gönderildiği yaklaşım. SEO ve LCP için CSR'a göre üstün; Nuxt 3, Next.js, Remix gibi framework'lerin temel modu. Ölçeklendirme için edge cache ve hydration stratejisi gerekir.
- CSR (Client-Side Rendering)
- Sunucudan boş HTML iskelet ve JS bundle gönderip tarayıcıda render eden yaklaşım. SPA'lerin tipik modu; ilk paint yavaş, SEO için ek route prerendering ister. Yetersiz ağ veya düşük cihazda LCP ciddi şekilde bozulur.
- Edge Functions
- CDN'in kendisinde çalışan hafif compute katmanı (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Geo-routing, A/B test bucketlama, header manipülasyonu ve auth'u origin'e gitmeden milisaniyelerle yapar; cold-start neredeyse yok.
- CDN (Content Delivery Network)
- Statik (ve giderek dinamik) içeriği coğrafi olarak dağıtılmış edge node'larda cache'leyen ağ. TTFB ve LCP'yi düşürür, origin'i DDoS ve trafik dalgalarına karşı korur. Cloudflare, Fastly, Akamai, AWS CloudFront — modern stack'in olmazsa olmazı.
- Frontend
- Kullanıcının tarayıcıda gördüğü ve etkileşime girdiği katman — HTML, CSS, JS, görsel asset'ler ve runtime davranışlarının toplamı. Backend'den ayrı yaşar; framework'leri Vue/Nuxt, React/Next, Svelte/SvelteKit; performans, erişilebilirlik ve SEO'nun ilk savunma hattı.
- Backend
- Sunucu tarafında çalışan iş mantığı, veritabanı erişimi, kimlik doğrulama, ödeme ve entegrasyon katmanı. Frontend'in tükettiği API'ları yayınlar; Node.js, Python, Go, .NET en yaygın stack'ler; ölçek, güvenlik ve veri tutarlılığının asıl mülkü.
- Component-based Architecture
- UI'ı izole, yeniden kullanılabilir ve bileşen bazında test edilebilir parçalara bölen frontend mimarisi. Vue/React/Svelte'in temel paradigması; design system'in fiziksel karşılığı, refactor maliyetini ve görsel tutarsızlığı düşürür.
- State Management
- Frontend'de paylaşılan veri ve UI durumunun nerede tutulduğunu, nasıl güncellendiğini ve component'lere nasıl yayıldığını yönetme disiplini. Pinia (Vue), Redux/Zustand (React), Svelte stores; karmaşık ürünlerde rendering performansı ve hata izlenebilirliğinin temeli.
- Code Splitting
- Tek büyük JS bundle yerine her route veya feature için ayrı chunk üretip sadece o sayfada yüklenmesini sağlamak. Vite/Webpack/Rollup'ın temel optimizasyonu; LCP ve TTI üzerinde doğrudan etki, lazy import + dynamic route ile birlikte konuşulur.
- Lazy Loading
- İçeriğin (image, component, route, library) yalnızca ihtiyaç olunduğu anda yüklenmesi tekniği. <img loading="lazy"> ile native, framework'lerde dynamic import ile elde edilir; ilk paint hızını ve veri kullanımını ciddi düşürür.
- SPA (Single Page Application)
- İlk sayfa yüklemesinde tüm shell'i çekip sonraki tüm sayfa geçişlerini client-side router üzerinden yapan uygulama tipi. Anlık navigation hissi sağlar; ilk paint ağır, SEO için ek prerendering gerekir, hidden route'lar için hâlâ popüler.
- PWA (Progressive Web App)
- Tarayıcıdan kurulabilen, offline çalışabilen ve push bildirim alabilen web app. Service Worker + Web App Manifest temel teknolojileri; native uygulama gibi davranır ama ASO/store dağıtımına ihtiyaç duymaz.
- SSG (Static Site Generation)
- Build zamanında tüm sayfaları HTML olarak üretip CDN'den servis etme yaklaşımı. Maksimum performans + minimum altyapı maliyeti; içerik nadiren değişen siteler (blog, marketing, dokümantasyon, glossary) için ideal — Nuxt generate, Next.js export, Astro.
- Web Component
- Tarayıcının native olarak desteklediği framework-bağımsız component standardı: Custom Elements + Shadow DOM + HTML Templates. Stencil/Lit ile yazılır, herhangi bir framework içinde kullanılabilir; design system'i React/Vue/Svelte sınırlarını aşan portable parçalara dönüştürür.
- REST API
- HTTP fiilleri (GET/POST/PUT/PATCH/DELETE) ve resource-tabanlı URL'ler üzerinden iletişim kuran mimari stil. Stateless'tir; çoğunlukla JSON taşır, OpenAPI ile dokümante edilir; web ve mobil app'lerin %80'inin hâlâ varsayılan entegrasyon yüzeyi.
- GraphQL
- İstemcinin tek query ile sadece ihtiyaç duyduğu alanları talep ettiği query language ve runtime. REST'in over/under-fetching problemine alternatif; tip sistemi ve schema-first tasarım frontend developer experience'ı belirgin iyileştirir.
- Webhook
- Bir sistemde olay olduğunda (ödeme tamamlandı, sipariş oluştu) önceden bildirilen URL'e HTTP POST ile bildirim gönderme deseni. Polling'in tersi — gerçek zamanlı, kaynak tasarruflu; signature doğrulama ve idempotency tasarımı zorunlu.
- JWT (JSON Web Token)
- Header.Payload.Signature formatında, kendi kendine doğrulanabilen kompakt token standardı. SPA + API arasında stateless authentication için kullanılır; ifade ve süre claim'leri, refresh token rotasyonu ve secret yönetimi kritik.
- OAuth 2.0
- Kullanıcının şifresini paylaşmadan üçüncü-parti uygulamaya sınırlı erişim vermesini sağlayan delegasyon protokolü. Authorization Code + PKCE flow modern web standardı; "Google ile giriş", "Slack uygulamasına bağlan" gibi senaryoların altyapısı.
- Rate Limiting
- Bir API'nin saniyede / dakikada kabul ettiği istek sayısını sınırlayarak kötüye kullanımı, brute-force saldırıyı ve maliyet patlamasını önleme katmanı. Token bucket veya sliding window algoritmaları, response'ta X-RateLimit-* header'ları standardı.
- API Gateway
- Tüm dış API trafiğinin tek noktadan geçtiği reverse-proxy katmanı. Authentication, rate limiting, routing, request/response transformasyonu ve metrik toplama tek yerde; AWS API Gateway, Kong, Apigee, Cloudflare API Gateway popüler seçenekler.
- Design Pattern
- Yazılım mimarisinde tekrar eden problemlerin kanıtlanmış çözüm reçeteleri (Gang of Four). Singleton, Factory, Observer, Strategy, Decorator gibi 23 klasik pattern; refactor sözlüğünün ortak dili, code review'larda hızlı iletişim aracı.
- Monorepo
- Birden fazla projeyi/kütüphaneyi tek bir Git repo'sunda saklama yaklaşımı. Nx, Turborepo, pnpm workspaces; cross-package refactor + atomic commit + shared tooling, ama büyüdükçe build sistemi disiplini şart.
- TDD (Test-Driven Development)
- Önce başarısız test yaz → minimum kodla geçir → refactor et döngüsü (Red-Green-Refactor). Tasarımı testlerin baskısıyla şekillendirir, regression yakalar, dokümante eder; ama her takım/proje için uygun değil — disiplini gerektirir.
- Refactoring
- Dış davranışı değiştirmeden iç yapıyı iyileştirme süreci — okunabilirlik, basitlik, test edilebilirlik için. Test coverage zorunlu (refactor güvencesi), küçük adımlar + commit, IDE refactoring tool'ları (extract method, rename) standart araçlar.
- Semantic Versioning (SemVer)
- MAJOR.MINOR.PATCH formatında versiyon numarası şeması: MAJOR = breaking change, MINOR = backward-compatible feature, PATCH = bug fix. npm/PyPI/Cargo paket ekosistemlerinin ortak dili; "^1.2.3" gibi range operator'lerinin temeli.
- Race Condition
- İki veya daha fazla iş parçacığının/process'in paylaşılan kaynağa öngörülemeyen sırada erişmesinden doğan bug. Mutex, semaphore, atomic operation, immutable state, single-writer pattern'le çözülür; debug etmesi en zor hata sınıflarından.
- Idempotency
- Aynı isteği N kez çağırdığında sistemin sonucunun 1 kez çağırmakla aynı kalması özelliği. PUT, DELETE doğal idempotent; POST için Idempotency-Key header kullanılır (Stripe, ödeme webhook'ları). Distributed retry'ın mecburi koşulu.
- Memory Leak
- Programın artık kullanmadığı belleği serbest bırakamaması — zaman içinde RAM tüketimi büyüyerek sonunda OOM crash'e gider. JS'de detached DOM ref + closure capture, Node'da event listener leak, DI container holding referans yaygın sebepler.
- Garbage Collection (GC)
- Programın artık erişilemeyen bellek bloklarını otomatik tespit edip serbest bırakan runtime mekanizması. JS V8 = generational + incremental, Java/JVM = ZGC/G1, Go = concurrent mark-sweep; manual memory mgmt'in (C/C++) alternatifi.
- Concurrency vs Parallelism
- Concurrency = aynı anda birden fazla görevle ilgilenme (yapı), Parallelism = aynı anda birden fazla görevi gerçekten yürütme (donanım). Tek-core async I/O = concurrent, çok-core thread pool = parallel; ikisi sıkça karıştırılır ama ayrı kavramlar.
- Immutability
- Veri yapısının oluşturulduktan sonra değiştirilememesi prensibi — değişiklik yeni bir kopya üretir. Functional programming'in temeli, React state, Redux, Vue Pinia ve concurrent code'da race condition'a karşı doğal savunma; structural sharing performansı korur.
- Dependency Injection (DI)
- Bir bileşenin ihtiyaç duyduğu bağımlılıkları kendisi instantiate etmek yerine dışarıdan alma deseni. Test edilebilirliği (mock injection), gevşek bağlılığı ve yapılandırma esnekliğini büyük ölçüde artırır; Spring, Angular, NestJS, Vue provide/inject.
- Polyfill
- Eski tarayıcıda bulunmayan modern JS API'sini (fetch, Array.flat, Promise) sahte olarak ekleyen kod. Genelde build sırasında @babel/preset-env veya core-js ile target browser'a göre koşullu eklenir; modern browser'lara gönderilmemeli (bundle bloat).
- Regex (Regular Expression)
- Metin desenlerini tanımlayıp arama, eşleştirme, ayrıştırma ve değiştirme yapan dil. /^\d{3}-\d{4}$/ gibi karakter sınıfı + kuantor + anchor sözdizimi; her dilde (JS, Python, Go) destekli, ama HTML parse için kullanılmamalı.
- SDK (Software Development Kit)
- Bir platforma/servise (Stripe, AWS, Twilio) entegrasyonu kolaylaştırmak için yayınlanan kod kütüphanesi + dokümantasyon paketi. Ham HTTP API çağrısı yerine type-safe metot, otomatik retry, auth ve test araçları sağlar.
- Callback Hell
- Callback fonksiyonların iç içe nesting'inden doğan derin piramit kod yapısı (.then().then().then()...). Promise + async/await ile çözüldü; kalan en sık görüldüğü yer: jQuery legacy ve eski Node.js kütüphaneleri.
- Code Review
- Bir geliştiricinin yazdığı kodu başka geliştiricilerin merge öncesi okuyup eleştirmesi pratiği. Bug yakalama + bilgi yayma + tutarlılık güvencesi; PR-bazlı GitHub/GitLab workflow standart, blok eden review değil "discussion" tonu sağlıklı.
- Pair Programming
- İki geliştiricinin tek bir bilgisayarda birlikte çalışması — driver kod yazar, navigator strateji + hata yakalar. Bilgi transferi, kod kalitesi ve onboarding hızını yükseltir; remote'ta VS Code Live Share, JetBrains Code With Me ile yapılır.
- Technical Debt
- Hızlı çözüm + kestirme tasarım kararlarının zamanla biriktirdiği "geri ödenmesi gereken" karmaşıklık. Refactor maliyeti faiz olarak büyür; yönetilmesi için debt log, görünürlük (tech-debt board) ve sprint kapasitesinde %15-20 geri-ödeme ayrılması gerekir.
- Long Task
- Browser main thread'i 50ms'den fazla bloklayan JS işi. INP ve TBT'nin temel düşmanı; debounce, requestIdleCallback, web worker veya time-slicing (yield) ile bölmek gerekir. Chrome DevTools Performance panel'inde kırmızı çubuklar olarak görünür.
- Speculation Rules API
- Chrome 109+'da gelen, "kullanıcı muhtemelen bu link'e gidecek" diyerek sayfaları arka planda prerender eden yeni API. JSON ile prerender/prefetch listesi tanımlanır; sonraki sayfa anında açılır. SPA performans hilelerinin browser-native versiyonu.
- View Transitions API
- Chrome 111+'ın sayfa veya state değişimleri arasında SPA tarzı yumuşak geçişler sağlayan native browser API'si. document.startViewTransition() ile DOM mutasyonu içine alındığında otomatik fade/slide animasyonu üretilir; SPA framework'lerini de view transition'la birleştirir.
- Container Queries
- @media yerine, bileşenin kendi container'ının boyutuna göre stil uygulamayı sağlayan CSS özelliği. Card component'in 300px container'da kompakt, 600px'de geniş görünmesi gibi. 2023'te tüm modern browser'larda destek; component-driven design'ın eksik halkasıydı.
- CSS Cascade Layers (@layer)
- CSS'te specificity savaşlarını çözen 2022 özelliği. @layer reset, base, components, utilities ile katman önceliği netleştirilir; düşük katmandaki bir !important bile üst katmanın normal stiline yenilir. Tailwind v4, Bootstrap 5+'da temel.
- CSS Houdini
- Tarayıcının CSS rendering pipeline'ını JavaScript'le genişletmeyi sağlayan W3C API'leri ailesi. Paint API (custom backgrounds), Layout API (custom flex/grid), Properties & Values API. Native CSS'te olmayan efektleri JS polyfill yerine GPU-accelerated yazmayı mümkün kılar.
- WebGPU
- WebGL'in halefi modern grafik ve compute API'si. Vulkan/Metal/DirectX 12 üzerinden GPU'ya ham erişim; tarayıcıda yerel kalitede oyun, AI inference, scientific compute mümkün. Chrome 113'te genel kullanıma açıldı; Stable Diffusion, LLM inference web demo'larının arkasında.
- WebAssembly (WASM)
- Tarayıcıda yüksek performansla çalışan, C/C++/Rust/Go gibi dillerden derlenen düşük seviye bytecode. Figma, Photoshop Web, AutoCAD Web, Stockfish chess engine örnekleri; JS'in 5-20x üstünde performans gerektiren senaryolarda ideal.
- Service Worker
- Browser ile network arasında oturan, sayfa kapansa bile çalışmaya devam edebilen JS proxy. Offline-first PWA cache stratejileri, push notification, background sync'in temeli. Workbox kütüphanesi en yaygın kullanım aracı.
- Workbox
- Google'ın service worker yazımını basitleştiren JavaScript kütüphanesi. Cache-first, network-first, stale-while-revalidate gibi hazır cache stratejileri; precaching, runtime caching, background sync API'leri. PWA build pipeline'larında (Workbox-CLI, vite-plugin-pwa) standart.
- Critical CSS
- Sayfanın "above-the-fold" kısmını render etmek için gereken minimum CSS'i HTML'in <head>'ine inline gömme tekniği. Render-blocking dış CSS dosyaları paralel yüklenirken FCP/LCP'yi 200-500ms iyileştirir. critters, beasties, penthouse araçları otomatize eder.
- Resource Hints (preload / prefetch / preconnect / dns-prefetch)
- Browser'a "şu kaynak yakında lazım olacak" diyen <link> tag'leri. preload: kritik current page kaynak (font, hero image), prefetch: gelecek navigasyon, preconnect: TLS handshake önceden, dns-prefetch: sadece DNS lookup. Doğru kullanım LCP'yi -500 ms.
- fetchpriority
- <img>, <link>, fetch() çağrısına "high" / "low" / "auto" öncelik veren HTML attribute / option (Chrome 101+). Browser'ın varsayılan resource priority kararını override eder; LCP image'a fetchpriority="high" vermek dramatik hız kazandırır.
- HTTP/3 (QUIC)
- TCP yerine UDP üzerine kurulu Google QUIC protokolüne dayanan üçüncü nesil HTTP. 0-RTT connection (ilk pakette TLS handshake), head-of-line blocking yok, mobil network değişiminde bağlantı kopmaz. Cloudflare, Akamai, Fastly üzerinde standart.
- Brotli (compression)
- Google'ın 2015'te tanıttığı, gzip'e göre %15-25 daha iyi sıkıştıran HTTP content encoding algoritması. Modern browser'ların %95+'ı destekler; statik asset'lerde brotli-11 (en yüksek seviye) build-time hesaplanır, dinamik HTML'de runtime'da brotli-4-5.
- Edge Compute
- Origin'den uzakta, kullanıcının yakınındaki edge node'larda kod çalıştırma paradigması. Cloudflare Workers, Vercel Edge Functions, Netlify Edge, Fastly Compute@Edge; latency 20-50 ms'ye düşer, A/B test, geo-aware redirect, auth header injection edge'de yapılır.
- Streaming Hydration
- Server'dan HTML chunk-by-chunk gönderilirken, her chunk geldiğinde React/Vue'nun hydration'ı eş zamanlı başlatması tekniği. React 18 Suspense + Server Components, Nuxt 3, Qwik'in resumability'si bu yönde ilerler. TTFB ve TTI'yi paralelleştirerek azaltır.
- Islands Architecture
- Astro'nun popülerleştirdiği "default static + interactive island'lar" mimarisi. Sayfanın çoğu sıfır JS ile prerender; sadece interactive component'ler ("ada") hydrate olur. JS bundle %70-90 düşer, performance puanı yükselir; içerik ağırlıklı sitelerde ideal.
- Partial Hydration
- Sayfanın tamamı yerine sadece görünen veya etkileşim alan component'leri hydrate eden teknik. Vue 3.5'in hydrateOnVisible / hydrateOnIdle / hydrateOnInteraction stratejileri, React Lazy + Suspense örnekleri. Islands architecture'ın temel mekanizması.
- Tree Shaking
- Bundler'ın (Webpack, Rollup, esbuild, Vite) ES modules import/export grafından, hiç kullanılmayan kodu (dead code) production bundle'dan çıkarması optimizasyonu. Side-effect-free package'larda 30-70% bundle küçülür; package.json'da "sideEffects: false" ipucu.
- Web Worker
- Main thread'in dışında, ayrı bir thread'de JavaScript çalıştıran browser API'si. Heavy computation (image processing, encryption, parsing), big array sorting main thread'i bloklamadan worker'da yapılır. Comlink kütüphanesi mesajlaşmayı RPC haline getirir.
- Shared Worker
- Aynı origin'in birden fazla tab'ı / iframe'i tarafından paylaşılan tek bir Web Worker. Tab'lar arası state senkronizasyonu (login durumu, real-time event), tek WebSocket bağlantısı, paylaşılan cache için kullanılır. Service Worker'dan farkı: ham hesaplama amaçlı.
- Cache Storage API
- Service Worker içinde Request/Response objelerini key-value olarak saklayan modern asenkron API. caches.open() ile cache açar, .put / .match ile manipüle edersin. PWA precaching, runtime caching'in temeli; LocalStorage'dan farklı olarak HTTP semantik'ini korur.
- ETag
- HTTP response'unun versiyon parmak izi (hash). Browser yeniden istediğinde If-None-Match header'ıyla gönderir, sunucu değişmemişse 304 Not Modified döner; içerik tekrar transfer edilmez. Static asset cache'leme ve API response validation'ın temel mekanizması.
- Sustainable Web Manifesto
- Web sitesinin çevresel etkisini azaltmaya yönelik 6 prensipli bildirge (clean, efficient, open, honest, regenerative, resilient). Wholegrain Digital + Mightybytes 2019'da yayımladı; web carbon emisyonunun küresel %2-3.7 oluğu fark edilmesinin temel referans dokümanı.
- Website Carbon Footprint Calculator
- Web sitenin sayfa başına karbon emisyonunu hesaplayan açık servis. Wholegrain Digital websitecarbon.com en yaygın; veri transfer × CDN regional carbon intensity × user device formülü. 1g CO2/page-load hedef; ortalama site 2-5g, ağır animasyon + video 8-15g.
— KARAR AĞACI
Composable commerce operasyonu size uygun mu?
4 soruya Evet/Hayır cevap verin; sonuç net olsun.
01 / 04
Yıllık GMV'niz $2M+ veya aktif B2B operasyonunuz var mı?
MACH + composable yatırımının ROI için asgari eşik; daha küçük mağazalarda OS 2.0 daha hızlı ROI verir.
— BAŞLAYALIM
E-ticaretinizin frontend hızını neredeyse haftada bir ne sınırlıyor?
Mevcut sitenizi tarayıp Web Vitals, cache stratejisi, SEO risk haritası ve headless ROI modelini çıkarıyoruz.