Yan yana

FrontendvsBackend

Frontend ile backend arasındaki fark nedir?

Güncellendi 5 Ekim 20262 dk okuma7 fark

Kısaca

Frontend kullanıcının cihazında çalışır ve arayüzü çizer; backend ise sunucularda çalışır ve frontend'in dayandığı verileri ve kuralları tutar.

Web Geliştirmes. 18

Frontend

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 sayfasını oku

Backend ve API'lers. 6

Backend

Backend, bir uygulamanın sunucu tarafıdır: veriyi saklayan, iş kurallarını uygulayan ve frontend'in isteklerine cevap veren kod, veritabanları ve servisler.

Backend sayfasını oku

Frontend ve Backend karşılaştırması

Özellik	Frontend	Backend
Çalıştığı yer	Kullanıcının cihazında, bir tarayıcıda ya da uygulamada	Kullanıcının hiç görmediği sunucularda
Asıl işi	Arayüzü çizmek ve kullanıcıya tepki vermek	Veri saklamak, kuralları uygulamak ve isteklere cevap vermek
Tipik diller	HTML, CSS, JavaScript ve TypeScript	JavaScript, Python, Java, Go, C#, PHP ve diğerleri
Güvenilebilir mi?	Hayır: kullanıcılar kendi cihazlarında çalışan her şeyi değiştirebilir	Evet: kuralların ve izinlerin uygulandığı yer burasıdır
Konuştuğu yerler	API'ler üzerinden backend	Veritabanları, önbellekler, kuyruklar ve diğer servisler
Başlıca kaygılar	Kullanılabilirlik, erişilebilirlik ve sayfa hızı	Doğruluk, güvenlik, ölçekleme ve veri bütünlüğü
Tipik araçlar	React, Vue, Svelte ve CSS framework'leri	Web framework'leri, veritabanları ve mesaj kuyrukları

Fark, açıklamalı

Frontend, kullanıcının gördüğü ve dokunduğu her şeydir: HTML, CSS ve JavaScript ya da bir mobil araç takımıyla yapılan ve kullanıcının kendi cihazında çalışan sayfalar, butonlar, formlar ve animasyonlar. Backend ise kullanıcının hiç görmediği sunucularda çalışır: verileri veritabanlarında saklar, kimin neyi yapabileceğini denetler, iş kurallarını uygular ve diğer servislerle konuşur.

İkisi bir API'de buluşur. Satın Al'a bastığınızda frontend genellikle HTTP üzerinden JSON ile bir istek gönderir; backend de stoğu kontrol eder, ödemeyi alır, siparişi kaydeder ve cevap verir. Frontend'e hiçbir zaman tamamen güvenilemez, çünkü kullanıcılar kendi cihazlarında çalışan her şeyi değiştirebilir; bu yüzden önemli doğrulamalar, fiyatlar ve izinler her zaman backend'de de uygulanmalıdır.

Sınır her zaman keskin değildir. Server-side rendering frontend kodunu bir sunucuda çalıştırır, Next.js gibi framework'ler ikisini tek projede birleştirir, backend for frontend da tek bir arayüz için yapılmış ince bir sunucu katmanıdır. İki tarafta da çalışan geliştiriciye full-stack denir; büyük ekipler ise rolleri genellikle ayırır, çünkü her tarafın kendi derinliği vardır: bir yanda tarayıcılar, erişilebilirlik ve sayfa hızı, diğer yanda veri, ölçekleme ve güvenlik.

Bir restoran iyi bir benzetmedir. Frontend menüsü, masaları ve sipariş alan garsonuyla yemek salonudur; backend ise yemeğin yapıldığı ve stoğun tutulduğu mutfak ve kilerdir. Müşteriler mutfağa hiç girmez, mutfak da masaların nasıl kurulacağına karar vermez.

Hangisini kullanmalısınız?

Frontend şu durumlarda doğru seçim:

İş, insanların ekranda gördükleri, tıkladıkları ve okudukları şeylerle ilgili.
Yerleşimi, erişilebilirliği, animasyonları ya da sayfaların ne kadar hızlı hissettirdiğini iyileştiriyorsunuz.
Görsel işlerden ve sonucu tarayıcıda hemen görmekten hoşlanıyorsunuz.

Backend şu durumlarda doğru seçim:

İş verilerle, iş kurallarıyla, ödemelerle ya da izinlerle ilgili.
Bir web sitesi ve bir mobil uygulama gibi birden çok uygulamanın aynı verilere ve mantığa ihtiyacı var.
Pek çok istemcinin dayandığı sistemleri, veritabanlarını ve API'leri tasarlamaktan hoşlanıyorsunuz.

Tek bir isteğin iki ucu

Frontendjavascript

// Frontend: runs in the browser, asks the backend
const res = await fetch("/api/orders", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ productId: 42, quantity: 1 }),
});
showMessage(res.ok ? "Order placed" : "Something went wrong");

Backendjavascript

// Backend: runs on the server, checks and saves
app.post("/api/orders", async (req, res) => {
  const user = await requireLogin(req);            // never trust the client
  const order = await placeOrder(user, req.body);  // checks stock, takes payment
  res.status(201).json(order);
});

Sık sorulan sorular

Frontend mi daha kolay öğrenilir, backend mi?

Genel olarak ikisi de daha kolay değil. Frontend hızlı görsel geri bildirim verir, bu da pek çok yeni başlayanın hoşuna gider; ama tarayıcıların, yerleşimin ve erişilebilirliğin gerçek bir derinliği vardır. Backend'de görsel cilayla daha az uğraşırsınız ama veri, güvenlik ve sunucu işletme hakkında öğrenecek daha çok şey vardır.

Full-stack geliştirici ne yapar?

Full-stack geliştirici iki tarafta da çalışır: arayüzde ve sunucu kodunda, çoğu zaman veritabanında da. Pratikte çoğu full-stack geliştirici bir tarafta daha güçlü, diğerinde ise yeterince rahattır.

Veritabanı backend'in parçası mı?

Evet. Veritabanı genellikle backend'in parçası sayılır, çünkü onunla yalnızca sunucu kodu konuşur; frontend verilere backend'in API'si üzerinden ulaşır.