Frontend (Ön Yüz) Nedir?
Kısa tanım
Frontend (ön yüz), bir web sitesinin veya uygulamanın kullanıcının tarayıcıda gördüğü ve etkileşime girdiği katmanıdır. HTML ile sayfanın yapısı, CSS ile görünümü, JavaScript ile davranışı tanımlanır. Frontend geliştirme; tasarımın koda dökülmesini, farklı ekran boyutlarına uyumu, erişilebilirliği, performansı ve backend'den gelen verinin ekranda doğru gösterilmesini kapsar.
Diğer adları: Ön Yüz, Front-end, Front End, İstemci Tarafı, Client-side
Tarayıcının anladığı üç dil
Tarayıcı ne kadar gelişmiş araçlarla üretilmiş olursa olsun sonunda üç şey okur. HTML sayfanın iskeletini ve anlamını kurar: hangi metin başlık, hangisi bir form alanı, hangisi bir bağlantı. CSS bu iskeletin nasıl görüneceğini belirler: yerleşim, renk, tipografi, ekran genişliğine göre değişen düzen. JavaScript ise davranışı ekler: menünün açılması, formun gönderilmeden kontrol edilmesi, verinin sayfa yenilenmeden yüklenmesi.
React, Vue veya Svelte gibi kütüphaneler, TypeScript ve çeşitli derleme araçları bu üç dilin üstüne kurulmuş katmanlardır. Ne yazılırsa yazılsın, kullanıcıya ulaşan çıktı yine HTML, CSS ve JavaScript'tir.
Ön yüz geliştiricinin masasındaki işler
- Tasarımı koda dökmek: Figma gibi araçlarda hazırlanan ekranları, bileşenlere ayrılmış ve tekrar kullanılabilir koda çevirmek.
- Farklı ekranlar: Telefon, tablet ve geniş monitörde aynı içeriğin anlamlı kalması.
- Erişilebilirlik: Klavyeyle gezinme, ekran okuyucular, yeterli renk kontrastı. Web erişilebilirliği sonradan eklenen bir özellik değil, işaretlemenin doğru kurulmasıyla başlar.
- Performans: Görsellerin boyutu, yüklenen JavaScript miktarı ve yazı tiplerinin davranışı doğrudan Core Web Vitals metriklerine yansır.
- Durum yönetimi ve veri: Backend'den gelen verinin yüklenirken, hata verdiğinde ve boş olduğunda ekranda nasıl görüneceği.
Render tarayıcıda mı, sunucuda mı?
“Frontend tarayıcıda çalışır” cümlesi artık tam doğru değil. Sayfanın HTML'inin nerede üretildiği hem hızı hem arama motorlarının sayfayı nasıl gördüğünü etkiler:
| Yaklaşım | HTML nerede üretilir? | Tipik kullanım |
|---|---|---|
| CSR | Tarayıcıda, JavaScript çalıştıktan sonra | Oturum açılarak kullanılan paneller ve uygulamalar |
| SSR | Her istekte sunucuda | Kişiselleştirilmiş veya sık değişen içerik |
| SSG | Derleme sırasında, bir kez | Blog, dokümantasyon, tanıtım sayfaları |
Next.js gibi framework'lerde aynı bileşen ağacının bir kısmı sunucuda, bir kısmı tarayıcıda çalışabilir. Bu nedenle bugün frontend ile backend arasındaki çizgi dosya konumuna göre değil, kodun hangi ortamda çalıştığına göre çizilir.
Frontend tasarım değildir
Frontend geliştirme ile UI tasarımı sıkça karıştırılır. Tasarımcı arayüzün nasıl görüneceğine ve nasıl kullanılacağına karar verir; frontend geliştirici bu kararı her tarayıcıda, her ekran boyutunda ve yavaş bağlantılarda da çalışan koda dönüştürür. İyi ekiplerde iki rol yakın çalışır, çünkü tasarımdaki küçük bir karar (örneğin her kartta farklı yükseklikte görsel) kodda ciddi bir karmaşıklığa ya da düzen kaymasına dönüşebilir.
Küçük bir örnek: veriyi güvenle ekrana basmak
Ön yüzün sık yaptığı işlerden biri, bir API'den gelen veriyi listelemektir. Aynı iş iki farklı biçimde yazılabilir:
const res = await fetch("/api/yorumlar");
const yorumlar = await res.json();
// Riskli: kullanıcı metni HTML olarak yorumlanır
liste.innerHTML = yorumlar.map((y) => "<li>" + y.metin + "</li>").join("");
// Güvenli: metin her zaman düz metin olarak eklenir
for (const y of yorumlar) {
const li = document.createElement("li");
li.textContent = y.metin;
liste.append(li);
}İlk yöntemde bir kullanıcının yorumuna eklediği işaretleme sayfanın parçası olur ve XSS açıklarına kapı aralar. Modern bileşen kütüphaneleri metni varsayılan olarak ikinci yöntemdeki gibi kaçışlar; riskli olan, bu korumayı bilerek devre dışı bırakan özelliklerdir.