Ön Uç Sistem Tasarımı Mülakatları

Kıdemli ön yüz mülakatlarında sizden, baştan sona karmaşık olmayan bir kullanıcı arayüzü özelliği tasarlamanız istenir: haber akışı, otomatik tamamlama, görsel galerisi veya sonsuz kaydırmalı gösterge paneli. Çerçeve ayrıntılarını değil; mimariyi, ödünlerin farkında olmayı, performans sezgilerini ve iletişimi değerlendirirler.

45-60 dakikalık mülakatların çoğu şu akışı izler: 1) Gereksinimleri netleştirme (5 dk). 2) Üst düzey mimariyi taslak olarak çizme (10 dk). 3) Bileşenlere ayırma (10 dk). 4) Veri getirme ve durum (10 dk). 5) Performans ve erişilebilirlik (10 dk). 6) Bir alanı derinlemesine inceleme (mülakatçının seçimi).

Kod yazmaya başlamayın. Şunları sorun: hedef cihazlar neler? giriş yapılmış kullanım mı, anonim kullanım mı? çevrimdışı destek var mı? gerçek zamanlı güncellemeler gerekiyor mu? beklenen ölçek nedir (10 kullanıcı mı, 10 milyon mu)? erişilebilirlik gereksinimleri neler? hangi tarayıcılar desteklenecek? Bunlar tasarımın tamamını etkileyen kararlardır.

Kutuları çizin: istemci (SPA veya SSR?), API ağ geçidi, hizmetler, önbellek ve CDN. Kullanıcı eylemlerini ve veri akışını işaretleyin. Uç durumları erkenden belirtin — gerçek sistemler geliştirdiğinizi gösterirler.

Bir bileşen hiyerarşisinin taslağını çizin. NewsFeed → Header, Story[], Composer. Story → Avatar, Content, Actions, Comments. Hangi bileşenlerin yeniden kullanılabilir, hangilerinin özelliğe özgü olduğunu belirleyin.

Her durum parçası nerede tutulur? Yerel (useState), URL (yönlendirici), sunucu durumu (React Query) veya istemci durumu (Zustand) mu? Veri getirme stratejisini tartışın: ilk SSR, sonsuz kaydırma, gerçek zamanlı WebSocket güncellemeleri ve iyimser kullanıcı arayüzü.

Rota sınırlarında kod bölme. Uzun akışlar için sanallaştırılmış listeler. Görsel optimizasyonu (tembel yükleme + AVIF/WebP). Ana iş parçacığını engellemekten kaçınma. Paket boyutu bütçeleri. Tekrarlanan ziyaretler için önbellek öncelikli SW.

Anlamsal HTML. Klavye ile gezinme. ARIA rolleri ve canlı bölgeler. Renk karşıtlığı. Ekran okuyucuyla sınama. Ek puan için rota değişiminde odak yönetiminden bahsedin.

Şunları tartışın: IntersectionObserver ile sonsuz kaydırma, bellek kullanımı için sanallaştırma, iyimser beğeniler, yeni gönderi için gerçek zamanlı gösterge, bulanık yer tutucuyla görselleri tembel yükleme, SEO için SSR ve güncel zaman akışları için ISR/kenar önbellekleme.

Şunları tartışın: gecikmeli girdi, güncelliğini yitirmiş istekleri iptal etmek için AbortController, istekleri tekilleştirme, yanıt önbellekleme (LRU), klavye ile gezinme (yukarı/aşağı/giriş/kaçış), ARIA birleşik kutu rolleri ve mobil sanal klavye yönetimi.

Şunları tartışın: duvar düzeni ile ızgara düzeni karşılaştırması, retina ekranlar için duyarlı srcset, kesişim tabanlı tembel yükleme, sonraki görseli önceden getirme, odak tuzağı içeren ışık kutusu/modal, mobilde kaydırma hareketleri, klavyeyle ok gezinmesi ve derin bağlantı.

Her seçim için alternatifi ve neden birini tercih ettiğinizi belirtin. “Tembel yükleme için IntersectionObserver kullanırdım; çünkü yerel ve verimlidir. Alternatif olarak, kaydırma olay dinleyicisi geciktirme ile kullanılabilir — daha basittir, ancak yavaş işlemcilerde daha fazla takılmaya neden olur.” Kıdemli mülakatçıların ödüllendirdiği yaklaşım budur.

1) Gereksinimleri netleştirmeden koda dalmak. 2) Erişilebilirliği görmezden gelmek. 3) Hata durumlarını unutmak (ağ hatası, boş sonuçlar). 4) Yükleme durumlarını düşünmemek. 5) Belirsiz yanıtlar vermek (“React kullanırdım” — hangi mimari?).

Bir sistem tasarımı mülakatında sizden otomatik tamamlama özellikli bir arama kutusu tasarlamanız isteniyor. Yapmanız gereken ilk şey nedir?

Önce kapsamı netleştirin. Üst düzey mimariyi belirleyin (istemci, API, önbellek, CDN). Bileşen ağacını oluşturun. Durumun konumunu belirleyin (yerel, URL, sunucu önbelleği, genel). Veri getirme stratejisini seçin. Performansı ele alın (kodu bölme, sanallaştırma, görsel optimizasyonu). Erişilebilirliği sağlayın (klavye, ARIA, karşıtlık). Ödünleri açıklayın. Doğrudan koda geçmekten kaçının. Klasik kalıpları çalışın: akış, otomatik tamamlama, galeri ve gösterge paneli.