Frontend ve Backend Arasındaki Fark Nedir?

Frontend tanımı ve temel görevleri

Frontend, bir web sitesinin veya web uygulamasının kullanıcıya görünen ve kullanıcının doğrudan etkileşim kurduğu bölümüdür. Sayfadaki metinler, görseller, menüler, düğmeler, formlar ve düzen frontend kapsamında değerlendirilir. Temel amacı bilgiyi anlaşılır biçimde göstermek ve kullanıcının yaptığı işlemlere arayüz üzerinden karşılık vermektir.

Frontend, tarayıcıda çalışır. Kullanıcı bir düğmeye bastığında, bir alana bilgi yazdığında veya bir menüyü açtığında arayüz bu etkileşimi algılar ve ekrandaki görünümü buna göre günceller. Yalnızca görsel değişiklik gerekiyorsa işlem tarayıcıda tamamlanabilir; sunucudan bilgi alınması gerekiyorsa frontend bir istek gönderir ve gelen sonucu kullanıcıya gösterir.

Örneğin bir alışveriş sayfasında “Sepete ekle” düğmesine basılmasıyla düğmenin durumunun değişmesi, sepetteki ürün sayısının ekranda güncellenmesi ve kullanıcıya bir bildirim gösterilmesi frontend’in görevlerindendir. Ürünün gerçekten kaydedilmesi veya hesabın sepet bilgilerinin sunucuda tutulması ise backend ile birlikte yürütülür.

Backend tanımı ve temel görevleri

Backend, uygulamanın kullanıcı tarafından doğrudan görülmeyen ve genellikle sunucuda çalışan bölümüdür. Gelen istekleri işler, iş kurallarını uygular, verilerle çalışır ve frontend’in ihtiyaç duyduğu sonuçları üretir. Kullanıcının giriş yapıp yapamayacağı, bir ürünün stokta bulunup bulunmadığı veya gönderilen bilgilerin geçerli olup olmadığı gibi kararlar backend tarafında ele alınabilir.

Bir kullanıcı işlem yaptığında backend, isteğin ne olduğunu anlamaya çalışır; gerekli kontrolleri yapar, ilgili verileri bulur ya da değiştirir ve frontend’e bir yanıt gönderir. Bu süreçte veritabanı, uygulamanın bilgilerini kalıcı olarak saklayan sistemdir. Backend, veritabanına doğrudan erişimi kullanıcıya bırakmak yerine bu erişimi kendi kuralları üzerinden yönetir.

Örneğin kullanıcı bir oturum açma formu gönderdiğinde backend, gönderilen bilgileri alır, hesabın uygun olup olmadığını kontrol eder ve sonuca göre başarılı ya da başarısız bir yanıt döndürür. Frontend bu yanıtı kullanarak kullanıcıya ana sayfayı veya hata mesajını gösterir. Böylece karar ve veri işlemleri görünmeyen tarafta, sonuçların sunulması ise arayüzde gerçekleşir.

Frontend ve backend arasındaki temel farklar

Frontend ile backend arasındaki ilk temel fark çalışma ortamıdır. Frontend çoğunlukla kullanıcının tarayıcısında çalışır ve ekrandaki görünümü yönetir. Backend ise sunucuda çalışır; istekleri karşılar, verileri işler ve uygulamanın kurallarına göre sonuç üretir. Bu nedenle frontend daha çok kullanıcı deneyimine, backend ise uygulamanın arka plandaki işleyişine odaklanır.

İkinci fark kullanıcıyla kurdukları ilişkidir. Kullanıcı frontend’i doğrudan görür ve onunla etkileşir; backend’i ise yalnızca ürettiği sonuçlar üzerinden dolaylı olarak fark eder. Frontend bir formun nasıl görüneceğini ve kullanıcının yanlış giriş yaptığında hangi uyarıyı göreceğini belirleyebilir. Backend ise gönderilen bilginin kurallara uygun olup olmadığını kontrol eder. Tarayıcıda yapılan basit bir kontrol, backend tarafındaki doğrulamanın yerine geçmez; çünkü uygulamanın güvenilir kararı sunucu tarafında verilmelidir.

Üçüncü fark veri işleme sorumluluğudur. Frontend veriyi ekranda gösterebilir, kullanıcıdan alabilir ve görünümü güncelleyebilir. Backend ise verilerin kaydedilmesi, sorgulanması ve işlemlere göre değiştirilmesiyle ilgilenir. Örneğin bir haber listesini düşünelim: frontend başlıkları sayfada sıralar ve gösterir; backend hangi haberlerin getirileceğine karar verir, kayıtları bulur ve sonucu frontend’e iletir. İki taraf aynı uygulamanın parçaları olsa da görevleri aynı değildir.

Web uygulamasının genel yapısını daha geniş bir çerçevede incelemek için web uygulaması mimarisi ayrı bir konudur. Frontend ve backend teknolojileri de bu iki tarafın hangi araçlarla geliştirildiğini ele alan farklı bir başlıktır. Her iki taraf üzerinde çalışabilen geliştiriciye ise full-stack geliştirici denir; bu ifade frontend ve backend görevlerinin ayrıntılı açıklaması değil, iki alanı birlikte ele alma kapsamını belirtir.

Frontend ile backend'in birlikte çalışma akışı

Bir kullanıcı işlemi genellikle frontend’de başlar, backend’e gönderilen bir istekle devam eder ve backend’in yanıtının tekrar frontend’de gösterilmesiyle tamamlanır. Kullanıcı düğmeye bastığında frontend gerekli bilgileri toplar ve sunucuya iletir. Backend isteği alır, iş kurallarını uygular, gerekiyorsa veritabanıyla çalışır ve sonucu bir yanıt olarak gönderir. Frontend de bu yanıtı kullanarak başarı mesajı, hata uyarısı veya güncellenmiş bir içerik gösterir.

Frontend ile backend arasındaki bu iletişimde API, iki tarafın hangi istek ve yanıt biçimleriyle haberleşeceğini sağlayan arayüzdür. Örneğin frontend bir ürün listesini ister, backend de uygun veriyi döndürür. API kavramının ayrıntıları ayrı bir başlıkta incelenebilir.

Statik sayfa ve dinamik uygulama ayrımı

Statik sayfa, içeriğinin büyük bölümünün önceden hazırlanıp kullanıcıya benzer biçimde sunulduğu sayfadır. Örneğin yalnızca başlık, metin, görsel ve iletişim bilgilerinden oluşan basit bir tanıtım sayfasında frontend, içeriği tarayıcıda göstermek için yeterli olabilir. Kullanıcının gönderdiği bilgiyi kaydetme veya kişiye özel sonuç üretme ihtiyacı yoksa backend kullanılmayabilir.

Dinamik uygulama ise kullanıcıya, zamana veya veriye göre değişen sonuçlar üretir. Oturum açma, ürün arama, yorum gönderme ve sipariş oluşturma gibi işlemlerde frontend kullanıcı etkileşimlerini yönetirken backend verileri işler ve kuralları uygular. Kullanıcı aynı sayfayı görse bile backend’den gelen hesaba, ürüne veya işleme göre farklı içerikler gösterilebilir. Bu nedenle statik sayfalarda frontend’in rolü daha baskın olabilirken dinamik uygulamalarda frontend ve backend sürekli iletişim kurar.

Günlük bir uygulamada görev paylaşımı: sepete ürün ekleme

Bir alışveriş uygulamasında kullanıcı bir ürünün “Sepete ekle” düğmesine bastığında ilk görev frontend’e aittir. Frontend tıklamayı algılar, seçilen ürünün bilgisini hazırlar ve kullanıcıya işlemin başlatıldığını gösterebilir. Ürün sepete gerçekten kaydedilecekse bu bilgi backend’e gönderilir.

Backend, gelen ürün bilgisini ve kullanıcı hesabını kontrol eder. Ürünün bulunup bulunmadığı, sepete ekleme işleminin geçerli olup olmadığı ve sepet kaydının nasıl güncelleneceği gibi kuralları burada uygular. İşlem tamamlanınca backend sonucu frontend’e bildirir. Frontend de sepet sayısını günceller, ürünün sepete eklendiğini gösterir veya bir sorun varsa uygun uyarıyı ekrana getirir.

Bu akışta frontend kullanıcının işlemi başlattığı ve sonucu gördüğü yüzdür; backend ise işlemin kurallara uygun biçimde gerçekleşmesini ve verinin kaydedilmesini sağlayan taraftır. API tasarımı ve kullanımı, bu iletişimin ayrıntılarını ele alan ayrı bir konudur.