Offermic
Ücretsiz dene

Frontend geliştirici mülakat soruları ve ipuçları

Frontend geliştirici, Teknoloji ve yazılım. 21 soru.

Güncelleme:

Yazan:

Kısa cevap

Frontend geliştirici mülakatları, hızlı, erişilebilir ve bakımı kolay arayüzler kurup kuramayacağını ölçer. Sayfa performansı, Core Web Vitals, erişilebilirlik, state yönetimi, tarayıcı tuhaflıkları ve tasarımcılarla çalışma üzerine sorular bekle. İyi cevaplar kullanıcının hissettiği bir metriği söyler, her teknik seçimin arkasındaki ödünleşimi açıklar ve gerçek cihazlarda test ettiğini gösterir.

Önemli noktalar

  • Teknik cevaplarını kullanıcı etrafında kur: yüklenme süresi, tepki hızı, erişilebilirlik ve görsel kararlılık.
  • Bir çözüm söylemeden önce yavaş bir sayfayı nasıl teşhis edeceğini bil.
  • Erişilebilirlik bir artı değil, temel bir beceridir; somut bir örnek getir.
  • Bir tasarımı (mockup) hayata geçirmek zor ya da maliyetli olduğunda tasarımcılarla nasıl iş birliği yaptığını göster.
  • Tasarım sistemi, tarayıcı desteği ve yayın süreci hakkında sorular hazırla.

Mülakatçılar ne arıyor

  • Kullanıcı odaklı performans düşüncesi: yalnızca bundle boyutu değil, kullanıcının neyi beklediği
  • Anlamsal HTML, klavye erişimi ve ekran okuyucu davranışı konusunda pratik bilgi
  • Framework sadakatiyle değil, gerekçeleriyle yapılmış mantıklı state yönetimi seçimleri
  • Tasarım ekibiyle iyi bir ilişki: reddetmek yerine seçeneklerle itiraz etmek
  • Farklı tarayıcılarda, cihazlarda ve yavaş ağlarda test alışkanlığı
  • Yeniden kullanılabilecek, belgelenmiş ve temaya uyarlanabilir şekilde kurulmuş bileşenler

Uyarı işaretleri

  • Erişilebilirliği daha sonra kalite güvence (QA) ekibinin ya da bir eklentinin halledeceği bir şey olarak görmek
  • Her arayüz sorununu çözmek için hemen yeni bir framework'e ya da kütüphaneye başvurmak
  • Yalnızca hızlı bağlantılı hızlı bir dizüstü bilgisayarda test etmek
  • Tasarım geri bildirimini 'sadece birkaç piksel' diye geçiştirmek
  • Bir URL yazmakla sayfayı görmek arasında ne olduğunu açıklayamamak
  • Arkasında ölçüm olmayan performans iddiaları

Yanında götürmeye değer rakamlar

  • Core Web Vitals: Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift
  • İlk sayfa yüklemesinde gönderilen JavaScript bundle boyutu
  • Düzeltilen Lighthouse ya da axe erişilebilirlik sorunları
  • İstemci tarafı izlemeden gelen frontend hata oranı
  • Yeniden kurduğun bir akışta dönüşüm ya da görev tamamlama oranı
  • Tasarım sistemi bileşenlerinin ekipler arasında benimsenmesi

Sorular

Teknik

  1. 1

    Bir ürün sayfası mobilde yavaş yükleniyor. Nedenini nasıl bulacağınızı adım adım anlatır mısınız?

    İpucu: Gerçek kullanıcı verileriyle ve bir profiler kaydıyla başla, sonra ağ, render ve script maliyetlerini birbirinden ayır.

  2. 2

    Bir frontend uygulamasında state'in nerede tutulacağına nasıl karar verirsiniz?

    İpucu: Yerel, paylaşılan ve sunucu state'ini karşılaştır ve neden her şeyi global yapmayacağını açıkla.

  3. 3

    Özel bir açılır menüyü (dropdown) nasıl erişilebilir hale getirirdiniz?

    İpucu: Klavyeyle gezinmeyi, odak yönetimini, ARIA rollerini ve ekran okuyucuyla test etmeyi anlat.

  4. 4

    Bir URL girmekle sayfanın görüntülenmesi arasında tarayıcıda neler olur?

    İpucu: Genel hatlarıyla DNS'e, isteğe, HTML ayrıştırmaya, CSS ve JavaScript yüklemeye, layout'a ve paint'e değin.

  5. 5

    Sunucu tarafı render'ı istemci tarafı render'a ne zaman tercih edersiniz?

    İpucu: Yalnızca kişisel tercihten değil, ilk boyamadan, SEO'dan, etkileşim maliyetinden ve barındırma karmaşıklığından bahset.

  6. 6

    Reklamlar, görseller ve web fontları olan bir sayfada layout kaymasını nasıl önlersiniz?

    İpucu: Önceden ayrılmış boyutlardan, font yükleme stratejisinden ve geç gelen içerik için yer tutuculardan bahset.

  7. 7

    Frontend kodunu nasıl test edersiniz ve neyi test etmemeyi seçersiniz?

    İpucu: Birim, entegrasyon ve uçtan uca testler arasında bir denge göster ve kırılgan snapshot testlerini neden atladığını açıkla.

  8. 8

    Büyük bir uygulamada CSS'in bakımı kolay kalsın diye onu nasıl yapılandırırdınız?

    İpucu: Tasarım token'larından, kapsamlandırmadan, isimlendirme kurallarından ve specificity savaşlarından kaçınmaktan bahset.

  9. 9

    Bir frontend performans ödünleşimini teknik olmayan bir paydaşa nasıl açıklardınız?

    İpucu: Bunu saniyelerce bekleme ya da kaybedilen kayıtlar gibi kullanıcı üzerindeki etkiye çevir.

Davranışsal

  1. 10

    Bir web sayfasını ölçülebilir şekilde hızlandırdığınız bir anı anlatır mısınız?

    İpucu: Başlangıç metriğini, yaptığın değişikliği (code splitting, görsel boyutlandırma, önbellekleme) ve sonraki rakamı söyle.

  2. 11

    Yayına çıkmış bir erişilebilirlik sorununu düzelttiğiniz bir durumu anlatın.

    İpucu: Sorunun nasıl bulunduğunu, kimi etkilediğini ve daha erken yakalamak için süreçte neyi değiştirdiğini söyle.

  3. 12

    Kurduğunuz ve başka ekiplerin de kullandığı bir bileşeni anlatır mısınız?

    İpucu: API tasarımını, belgelemeyi ve tek seferlik varyasyon taleplerini nasıl ele aldığını açıkla.

  4. 13

    Arayüz konusunda bir tasarımcıyla ya da ürün yöneticisiyle yaşadığınız bir anlaşmazlığı anlatır mısınız?

    İpucu: Görüş yerine bir kullanılabilirlik testi ya da analitik veriler gibi kanıtlar getirdiğini göster.

  5. 14

    Yayına aldığınız bir şeyin canlı ortamda bozulduğu bir anı anlatır mısınız? Sonra ne oldu?

    İpucu: Tespiti, geri almayı, kullanıcılar üzerindeki etkiyi ve sonrasında eklediğin testi ya da kontrolü anlat.

Durumsal

  1. 15

    Bir tasarımcı size performansı düşürecek bir animasyon içeren bir tasarım veriyor. Ne yaparsınız?

    İpucu: Daha hafif bir alternatifin prototipini çıkar, maliyeti rakamlarla göster ve bir versiyon üzerinde birlikte anlaş.

  2. 16

    Bir hata yalnızca tek bir tarayıcıda görülüyor ve kendi makinenizde tekrar üretemiyorsunuz. Nasıl ilerlersiniz?

    İpucu: Bir cihaz laboratuvarı ya da uzak tarayıcı kullan, user agent verilerini topla ve minimal bir test senaryosuyla sorunu izole et.

  3. 17

    Ekibiniz projenin ortasında yeni bir framework'e geçmek istiyor. Bunu nasıl değerlendirirsiniz?

    İpucu: Geçiş maliyetini, ekibin becerilerini, ekosistemi ve kademeli bir geçiş yolu olup olmadığını tart.

  4. 18

    Pazarlama ekibi her sayfaya üçüncü taraf bir script eklenmesini istiyor. Hangi endişeleri dile getirirdiniz?

    İpucu: Performanstan, gizlilikten, güvenlikten ve script'i asenkron ya da yalnızca gereken yerde yüklemekten bahset.

Motivasyon

  1. 19

    Her trendin peşinden koşmadan frontend ekosistemindeki değişiklikleri nasıl takip ediyorsunuz?

    İpucu: Tarayıcı desteği verileri ve gerçekten yaşadığın bir sorunu çözüp çözmediği gibi filtrelerini söyle.

  2. 20

    Neden frontend işini backend ya da full-stack rollere tercih ediyorsunuz?

    İpucu: Bunu kullanıcıların ne gördüğünü ve ne hissettiğini önemsemene bağla; somut bir örnek ver.

  3. 21

    Beğendiğiniz bir ürün arayüzü hangisi ve onda neyi iyileştirirdiniz?

    İpucu: Belirli bir şey seç ve onu hem kullanılabilirlik hem de teknik gerekçelerle eleştir.

Bu pozisyon için bir iş ilanını ücretsiz iş ilanı aracına yapıştır ve işaret ettiği soruları gör

Frontend geliştirici mülakat soruları, hızlı yüklenen, herkes için çalışan ve ürün büyüdükçe bakımı kolay kalan arayüzler kurup kuramayacağını ölçer. Performans, erişilebilirlik, state yönetimi, tarayıcı davranışı ve tasarımla iş birliği üzerine sorular bekle. Bunlara bir framework listesiyle değil, kullanıcının hissettiği sonuçlarla cevap ver.

Frontend mülakatları neye odaklanır?

ABD Çalışma İstatistikleri Bürosu (BLS) bu işi, “web siteleri oluşturan ve bakımını yapan” ve arayüzleri “kullanılabilirlik açısından” test eden web geliştiricileri ve dijital tasarımcılar grubunda topluyor (kaynak İngilizce, çeviri bize ait). Büro, ABD’de bu grupta istihdamın 2025-2035 arasında %5 artmasını bekliyor. Bu rollerde işe alım yöneticileri genellikle üç katmanı yoklar:

  • Tarayıcı. Sayfaların nasıl yüklendiği, render edildiği ve tepki verdiği; bir sayfanın neden yavaş hissettirdiği.
  • Kod. Bileşen yapısı, state, CSS mimarisi ve testler.
  • İnsanlar. Tasarımcılarla, ürün yöneticileriyle ve backend mühendisleriyle nasıl çalıştığın.

Erişilebilirlik, pek çok adayın beklediğinden daha sık gündeme gelir. W3C’nin Web İçeriği Erişilebilirlik Yönergeleri (WCAG), çoğu ekibin referans aldığı standarttır ve güncel sürümü WCAG 2.2’dir. Başarı kriterlerini ezbere saymana gerek yok ama kendi işinde klavye desteğini, odak yönetimini ve renk kontrastını anlatabilmelisin.

Canlı ortam olayları ve tasarım soruları dahil daha geniş mühendislik mülakat turu için yazılım mühendisi mülakat sorularına ve teknoloji sektörü rehberimize bak.

Frontend performans sorusuna nasıl cevap verilir?

Reçete yazmadan önce teşhis koy. “Bu sayfa yavaş” sorusuna iyi bir cevap şu sırayla ilerler:

  1. Kullanıcının hissettiği yerde ölç. Önce gerçek kullanıcı verileri, sonra yavaşlatılmış bir mobil profilde laboratuvar kaydı.
  2. Maliyeti ayır. Sorun ağda mı (büyük görseller, çok fazla istek), render’da mı (layout thrashing) yoksa script’te mi (ana iş parçacığını bloke eden ağır bir bundle)?
  3. Önce en büyük maliyeti düzelt ve yeniden ölç.
  4. Koru. Performans gerilemesi tekrar yaşanmasın diye CI’da bir performans bütçesi ya da bir uyarı kur.

Ölçmeden önce “lazy loading eklerdim” diye başlayan adaylar, lazy loading doğru cevap olsa bile genellikle puan kaybeder.

Örnek STAR cevabı: yavaş bir ödeme sayfasını düzeltmek

Örnek cevap: orta kıdemli frontend geliştirici, soru: “Bir web sayfasını ölçülebilir şekilde hızlandırdığınız bir anı anlatır mısınız?”

  1. Durum

    Ödeme sayfamızın ödeme formunu göstermesi, orta segment Android telefonlarda dört saniyeyi aşıyordu ve mobilde ödemeyi tamamlama oranı masaüstünün epey altındaydı.

  2. Görev

    Benden sayfayı yeniden tasarlamadan, tek bir sprint içinde mobil yükleme süresini iyileştirmem istendi.

  3. Eylem

    Sayfanın profilini yavaşlatılmış bir cihazda çıkardım ve formdan önce büyük bir tarih seçici kütüphanesinin ve bir analitik bundle'ının yüklendiğini buldum. Tarih seçiciyi tembel yüklenen (lazy loaded) ayrı bir parçaya böldüm, analitik script'ini erteledim ve ürün görsellerini doğru boyutlandırdım. Ayrıca yeni bağımlılıkların gerekçelendirilmesi gereksin diye CI'a bir bundle boyutu kontrolü ekledim.

  4. Sonuç

    Test cihazımızda ödeme formunun kullanılabilir hale gelme süresi yaklaşık 4,2 saniyeden 1,9 saniyeye düştü ve sonraki ay mobilde ödemeyi tamamlama oranı birkaç puan arttı. CI kontrolü o günden beri iki ağır bağımlılığı engelledi.

Neden işe yarıyor: bir kullanıcı sorunuyla başlıyor, ölçümü gösteriyor, somut değişiklikleri anlatıyor ve önlemle bitiyor.

Hangi davranışsal hikâyeleri hazırlamalısın?

Frontend işi görünür sonuçlar ürettiği için hikâyeleri rakamla anlatmak daha kolaydır. Şunların her biri için bir hikâye hazırla:

  • Öncesi ve sonrası rakamlarıyla bir performans kazanımı.
  • Bir erişilebilirlik düzeltmesi ve ardından çalışma sürecinde neyin değiştiği.
  • Kanıtla çözülmüş, yöneticinle ya da bir tasarımcıyla yaşadığın bir fikir ayrılığı.
  • Yayına aldığın bir hata ve yaptığın hatadan çıkardığın ders.
  • Yeniden kullanılabilir bir bileşen ya da tasarım sistemine bir katkı.

Her birini STAR yöntemiyle kurgula ve Durum kısmını iki cümlede tut.

Mülakatçıya hangi soruları sormalısın?

  • “Ortak bir tasarım sistemi var mı, bakımını kim yapıyor?”
  • “Resmî olarak hangi tarayıcıları ve cihazları destekliyorsunuz?”
  • “Erişilebilirlik sorunları bugün nasıl bulunuyor ve önceliklendiriliyor?”
  • “Frontend değişiklikleri nasıl inceleniyor ve yayına alınıyor?”
  • “Keşif aşamasında geliştiriciler tasarımcılarla ne kadar yakın çalışıyor?”

Daha fazla fikir için mülakatçıya sorulacak sorular rehberimize bak.

Nasıl pratik yapmalısın?

Yukarıdaki teknik sorulardan üçünü, kodu hiç görmemiş bir ekip arkadaşına anlatıyormuş gibi yüksek sesle cevapla. Süre tut: çoğu cevap bir ile iki dakika arasında olmalı. Sonra bir davranışsal hikâye seç ve kullanıcının önemseyeceği en az bir rakam içerip içermediğini kontrol et. İlk turun kayıtlı bir video mülakatıysa video mülakat ipuçları rehberimiz kamerayı, konuşma hızını ve yeniden çekimleri anlatıyor.

Sık sorulan sorular

Frontend mülakatları tek bir framework'e mi odaklanır?

Bazı ilanlar bir framework adı verir ama sözlü soruların çoğu her yerde geçerli olan temelleri ölçer: render, state, erişilebilirlik, performans ve test. Önce kavramları açıkla, framework ayrıntılarını örnek olarak an.

Bir frontend geliştirici davranışsal mülakata ne getirmeli?

Kullanıcının hissettiği bir sonucu olan iki ya da üç hikâye: bir hız iyileştirmesi, bir erişilebilirlik düzeltmesi, yeniden kullanılabilir bir bileşen ya da yeniden kurup dönüşümü değiştirdiğin bir akış.

Kaynaklar

  1. Web Developers and Digital Designers: Occupational Outlook Handbook, U.S. Bureau of Labor Statistics
  2. WCAG 2 Overview, W3C Web Accessibility Initiative

Yazan:, Kurucu ve geliştirici

Ken Garry bu uygulamanın kurucusu ve geliştiricisi. Yapay zekâ ile mülakat provası ürününü geliştiriyor ve mülakat hazırlığı rehberlerini yazıyor.

Nasıl yazıyoruz