Frontend: Kullanıcının Gördüğü ve Dokunduğu Katman

Frontend nedir?

Frontend (ön uç), bir web sitesi ya da uygulamanın kullanıcıya doğrudan görünen ve kullanıcının etkileşime girdiği tarafıdır. Sayfadaki düzen, yazılar, düğmeler, formlar, menüler, animasyonlar ve tarayıcıda çalışan tüm arayüz davranışı frontend'in kapsamındadır.

Frontend kodu kullanıcının cihazında, yani tarayıcıda çalışır. Sunucudan gelen veriyi alır, ekrana çizer, kullanıcı bir şey yaptığında (tıklama, yazma, kaydırma) buna tepki verir ve gerektiğinde sunucuya yeni bir istek gönderir. Bu yüzden frontend'e kısaca "kullanıcı tarafı" (client side) da denir.

Frontend hangi teknolojilerden oluşur?

Her web arayüzünün temelinde başlıca diller vardır:

• HTML: sayfanın yapısını ve anlamını tanımlar. Başlık, paragraf, form alanı, bağlantı gibi öğeleri belirler.
• CSS: görünümü belirler. Renk, boşluk, yazı tipi, ekran boyutuna göre yerleşim burada tanımlanır.
• JavaScript: davranışı yönetir. Bir menünün açılması, formun doğrulanması, listenin yenilenmesi JavaScript ile yapılır.

Bu temelin üzerine ekipler genellikle bir arayüz kütüphanesi ya da çerçevesi ekler. React, Vue ve Angular bu amaçla kullanılan bilinen örneklerdir. Bunlar arayüzü yeniden kullanılabilir bileşenlere bölmeyi, ekranın durumunu (state) düzenli yönetmeyi ve büyük projeleri sürdürülebilir tutmayı kolaylaştırır. Kod yazıldıktan sonra Vite ya da Webpack gibi derleme araçları dosyaları paketler ve tarayıcıya hazır hâle getirir.

Bir sayfa açıldığında frontend nasıl çalışır?

Kullanıcı bir adrese girdiğinde tarayıcı sunucudan HTML, CSS ve JavaScript dosyalarını ister. Tarayıcı HTML'i okuyarak sayfanın ağaç yapısını (DOM) oluşturur, CSS ile bu ağacın görünümünü hesaplar ve ekrana çizer. JavaScript yüklendiğinde sayfa etkileşimli hâle gelir.

Veri gerektiren durumlarda frontend, sunucudaki bir API'ye istek gönderir ve gelen cevabı arayüze yansıtır. Örneğin bir ürün listesi sayfasında frontend, ürün verisini API'den alır, her ürün için bir kart bileşeni üretir, kullanıcı filtre seçtiğinde listeyi yeniden çizer. Sunucu tarafında sayfayı önceden hazırlayan yaklaşımlar (SSR) da vardır; bu durumda ilk görüntü sunucuda üretilir, tarayıcıda yalnızca etkileşim devralınır.

Frontend ile backend arasındaki fark

Backend, kullanıcının görmediği sunucu tarafıdır. İş kuralları, veritabanı işlemleri, kimlik doğrulama ve ödeme gibi güvenlik gerektiren işler burada yürür. Frontend ise bu işlerin sonucunu kullanıcıya anlaşılır ve kullanılabilir biçimde sunar.

Basit bir benzetmeyle: restoranda salon ve masa düzeni, menü ve garsonla yapılan konuşma frontend'dir; mutfak, stok ve tarifler backend'dir. İkisi arasındaki iletişim genellikle API üzerinden kurulur. Güvenlik açısından önemli bir ilke de şudur: frontend kodu kullanıcının cihazına indiği için içine gizli anahtar ya da kritik iş kuralı konmaz; doğrulama ve yetkilendirme her zaman backend'de yapılır.

İki taraf arasındaki sınırı yönetmek için bazı ekipler Backend for Frontend (BFF) deseni kullanır: her arayüz için, onun ihtiyacına göre veriyi şekillendiren ince bir aracı katman kurulur.

İyi bir frontend neye dikkat eder?

Frontend işi yalnızca güzel görünen ekran yapmak değildir. Kalite birkaç başlıkta ölçülür:

• Performans: sayfanın hızlı açılması ve kullanıcı girdisine hızlı cevap vermesi. Büyük görseller, gereksiz JavaScript ve ölçülmemiş üçüncü taraf betikler en sık görülen yavaşlık nedenleridir.
• Erişilebilirlik: klavye ile gezinme, ekran okuyucu uyumu, yeterli renk karşıtlığı.
• Duyarlı tasarım: telefon, tablet ve masaüstünde düzgün çalışma.
• Test ve bakım edilebilirlik: bileşenlerin ayrı ayrı test edilmesi, tutarlı bir yapı.
• Tarayıcı uyumu: farklı tarayıcılarda aynı davranışın korunması.

Sık yapılan hata, performansı en sonda düşünmektir. Bir performans bütçesi belirleyip her değişiklikte ölçmek, sorunları üretim ortamına çıkmadan yakalamayı sağlar.

Frontend ile ilişkili kavramlar ve nerede çalışılır?

Frontend sözlüğünde sık karşılaşılan komşu kavramlar şunlardır: duyarlı web tasarım, tek sayfa uygulama (SPA), sunucu tarafı render (SSR), sanal DOM, bileşen kütüphanesi ve tasarım sistemi. Her biri frontend'in farklı bir sorusuna cevap verir: ekran nasıl uyum sağlar, sayfa nasıl hızlı gelir, arayüz nasıl tutarlı kalır.

Mindset kataloğunda bu alan birkaç programla işlenir. Modern Web Geliştirme, Frontend (React) programının modülleri bileşen mimarisi, React Hooks, global state yönetimi, routing ve performans optimizasyonunu kapsar; web arayüzü geliştirmeye yeni başlayan ya da React ekosistemine geçen geliştiriciler için uygundur. Frontend Build Araçları programı Vite, Webpack ve esbuild üzerinden paketleme kararlarına odaklanır. Frontend Performans Bütçesi ve İzleme ile Backend for Frontend (BFF) Deseni ise arayüz ekiplerinin ölçüm, izleme ve backend ile sınır tasarımı sorumluluklarına yöneliktir.