Frontend
- Türkçe karşılığı
- ön yüz
- Okunuşu
- frant end
Günlük kullanımda çoğunlukla İngilizcesi tercih edilir.
Kısaca
Frontend, bir uygulamanın kullanıcının önünde, çoğunlukla tarayıcıda çalışan; arayüzü çizen ve tıklamalara, yazılanlara karşılık veren kısmıdır.
Frontend nedir?
Frontend, kullanıcının gördüğü ve dokunduğu her şeydir: bir web sitesinin ya da uygulamanın düzeni, metinleri, düğmeleri, formları ve animasyonları, bir de bunları tepki verir hâle getiren kod. Web'de yapı için HTML, görünüm için CSS ve davranış için JavaScript ile kurulur ve kullanıcının kendi cihazında, tarayıcının içinde çalışır.
Frontend önemli verileri çoğu zaman kendisi tutmaz. Sipariş listesi ya da bir arama sonucu gibi bir şeye ihtiyaç duyduğunda bunu genellikle HTTP üzerinden bir API ile backend'den ister ve gelen cevabı gösterir. İkisini ayrı tutmak her birinin kendi başına değişebilmesini sağlar: bir yeniden tasarım sunucuya dokunmayı gerektirmez ve aynı backend hem bir web sitesine hem de bir mobil uygulamaya hizmet verebilir.
İyi bir frontend görünümden ibaret değildir. Arayüzün klavyeyle ve ekran okuyucularla çalışması için erişilebilirliği, sayfaların yavaş telefonlarda da hızlı açılması için performansı ve ekrandakinin veriyle uyumlu kalması için durum yönetimini de kapsar. React, Vue, Angular ve Svelte gibi framework'ler büyük arayüzleri yeniden kullanılabilir bileşenlere ayırmaya yardım eder.
Önemli noktalar
- Frontend, bir uygulamanın kullanıcıya dönük, çoğunlukla tarayıcıda çalışan kısmıdır.
- Web'de HTML, CSS ve JavaScript ile kurulur.
- Veriyi, API'ler aracılığıyla backend'i çağırarak alır ve değiştirir.
- İyi bir frontend işi yalnızca görünümü değil, erişilebilirliği ve performansı da kapsar.
Örnek
// Runs in the browser: ask the backend for data, then show it
const response = await fetch("/api/orders");
const orders = await response.json();
const list = document.querySelector("#orders");
for (const order of orders) {
const item = document.createElement("li");
item.textContent = `Order ${order.id}: ${order.total}`;
list.append(item);
}Sık sorulan sorular
Frontend ile backend arasındaki fark nedir?
Frontend, kullanıcıların etkileşime girdiği ve onların cihazında çalışan kısımdır; backend ise sunucularda çalışır, veriyi, iş kurallarını ve güvenliği yönetir. Frontend sorar, backend cevap verir; bu genellikle bir API üzerinden olur.
Frontend yalnızca tasarımla mı ilgilidir?
Hayır. Tasarımcılar bir arayüzün nasıl görünmesi ve davranması gerektiğine karar verir; frontend geliştiriciler ise onu kodla kurar. Bu, arayüzü hızlı, her cihazda erişilebilir ve veri değiştiğinde doğru hâle getirmeyi de içerir.
Mobil uygulamaların da frontend'i var mıdır?
Evet. Bir iOS ya da Android uygulamasının ekranları onun frontend'idir; SwiftUI, Jetpack Compose, React Native ya da Flutter gibi araçlarla yapılır ve bir backend'le tıpkı bir web sitesi gibi konuşur.
Sık karşılaştırılanlar
İlgili sayfalar
- BackendBackend ve API'ler, s. 6Backend, bir uygulamanın sunucu tarafıdır: veriyi saklayan, iş kurallarını uygulayan ve frontend'in isteklerine cevap veren kod, veritabanları ve servisler.
- HTMLWeb Geliştirme, s. 19HTML, başlık, paragraf, bağlantı, görsel ve form gibi öğelerle web sayfalarının yapısını ve içeriğini tanımlayan işaretleme dilidir.
- CSSWeb Geliştirme, s. 11CSS, HTML içeriğinin ekranda renk, yazı tipi, boşluk, yerleşim ve animasyon gibi yönlerden nasıl görüneceğini belirleyen stil sayfası dilidir.
- JavaScriptWeb Geliştirme, s. 25JavaScript, web tarayıcılarında sayfaları etkileşimli hale getiren ve Node.js gibi çalışma ortamlarıyla sunucularda da çalışan programlama dilidir.
- Web TarayıcısıWeb Geliştirme, s. 57Web tarayıcısı, sunuculardan web sayfalarını alıp HTML, CSS ve JavaScript'i ekranda gördüğünüz etkileşimli sayfalara dönüştüren uygulamadır.
- APIBackend ve API'ler, s. 2API, bir yazılımın başka bir yazılımdan veri ya da işlem talep etmesini sağlayan, belgelenmiş ve öngörülebilir kurallar bütünüdür.
- ReactWeb Geliştirme, s. 37React, veri değişince otomatik güncellenen, yeniden kullanılabilir bileşenlerle kullanıcı arayüzü kurmaya yarayan açık kaynaklı JavaScript kütüphanesidir.
- SPAWeb Geliştirme, s. 42SPA, tek bir HTML sayfası yükleyip içeriği JavaScript ile güncelleyen ve görünümler arası geçişte sayfayı yeniden yüklemeyen web uygulamasıdır.
- UI BileşeniWeb Geliştirme, s. 52UI bileşeni, buton, form ya da kart gibi arayüzün yeniden kullanılabilen bir parçasıdır; işaretlemesini, stilini ve davranışını bir arada taşır.
Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin