Frontend ve Backend Arasındaki Fark: İstekten Veriye Uygulama Akışı

Bir tıklama uygulamada nasıl ilerler?

Frontend ile backend arasındaki farkı anlamanın en pratik yolu, tek bir kullanıcı işlemini başlangıçtan sonuca kadar izlemektir. Kullanıcı bir formu doldurduğunda veya bir butona bastığında ilk temas frontend'de gerçekleşir. Arayüz, girilen bilgileri alır, gerekli etkileşimleri yönetir ve backend'e gönderilmek üzere bir istek oluşturabilir.

Backend bu isteği sunucu tarafında karşılar. İsteğin ne anlama geldiğini değerlendirir, uygulama mantığını çalıştırır, gerekiyorsa veritabanından bilgi okur veya veritabanına kayıt yapar. İşlemin sonucunda backend, frontend'in kullanabileceği bir yanıt döndürür. Frontend de bu yanıtı kullanıcıya bir mesaj, güncellenmiş liste veya hata bildirimi olarak gösterir.

Bu akış şu şekilde özetlenebilir:

1. Kullanıcı frontend üzerindeki bir kontrolle etkileşir.
2. Frontend, kullanıcı girdisini alır ve backend'e istek gönderir.
3. Backend isteği işler; gerekirse veritabanı veya başka sunucu hizmetleriyle çalışır.
4. Backend işlem sonucunu frontend'e iletir.
5. Frontend sonucu ekrana yansıtır.

Buradaki sınır, her uygulamada aynı ölçüde görünmeyebilir. Basit ve statik bir tanıtım sayfasında içerik doğrudan sayfa dosyaları içinde bulunabilir ve ayrı bir backend gerekmeyebilir. Kullanıcı girişi, veri kaydı, arama, stok kontrolü veya sipariş geçmişi gibi işlemler başladığında ise sunucu tarafı mantığına duyulan ihtiyaç artar.

Frontend yalnızca tasarım değildir

Frontend, uygulamanın kullanıcı tarafından görülen ve kullanılan bölümüdür. Sayfa düzeni, renkler, yazı tipleri, menüler, düğmeler, formlar, ürün görselleri ve animasyonlar bu katmana dahildir. Bunun yanında kullanıcı etkileşiminin anlık olarak yönetilmesi de frontend'in görevidir.

Bir düğmeye basıldığında düğmenin durumunun değişmesi, form alanının boş bırakıldığında uyarı göstermesi veya arama kutusuna yazılan metne göre ekrandaki görünümün güncellenmesi frontend davranışlarına örnektir. Bu işlemler kullanıcının uygulamayı nasıl algıladığını doğrudan etkiler. Bu yüzden frontend yalnızca estetik görünümle değil, arayüzün anlaşılır ve etkileşimli olmasıyla da ilgilidir.

Frontend geliştirmede temel teknolojiler arasında HTML, CSS ve JavaScript bulunur. HTML içerik ve yapı için, CSS görsel düzen için, JavaScript ise etkileşim ve davranış için kullanılabilir. React, Angular ve Vue.js gibi teknolojiler de frontend geliştirmede kullanılan örneklerdir. Kaynak metindeki teknoloji listesi bir zorunluluk sıralaması değildir; bir frontend projesinde bu araçların tamamının aynı anda kullanılması gerektiği sonucu çıkarılmamalıdır.

Frontend'in gösterdiği verinin kaynağı da önemlidir. Bir ürün adı sayfaya önceden yazılmış sabit bir içerik olabilir veya backend'den gelen yanıtla oluşturulabilir. Ekranda görünmesi, verinin frontend tarafından üretildiği anlamına gelmez. Frontend çoğu zaman veriyi sunar, kullanıcı girdisini toplar ve kullanıcıya sonuç hakkında bilgi verir; kalıcı merkezi veri saklama ve güvenlik açısından kritik iş kuralları genellikle backend'de yürütülür; istemci tarafında da yerel saklama ve kullanıcı deneyimi için iş mantığı bulunabilir.

Backend hangi işlemleri görünmeden yürütür?

Backend, kullanıcının doğrudan görmediği sunucu tarafı bölümüdür. Sunucu mantığı, veritabanı yönetimi, API üzerinden veri alışverişi, kullanıcı kimlik doğrulaması ve güvenlikle ilgili işlemler bu katmanda yer alabilir. Backend'in temel görevi, frontend'den gelen istekleri yalnızca iletmek değil, bu isteklerin uygulama kurallarına göre işlenmesini sağlamaktır.

Örneğin bir kullanıcı giriş formuna bilgilerini yazdığında frontend bu bilgileri backend'e gönderebilir. Backend gelen isteği değerlendirir ve uygun bir sonuç üretir. E-ticaret örneğinde ise backend ürünün stok durumunu kontrol edebilir, sepet kaydını güncelleyebilir, sipariş geçmişini yönetebilir ve ödeme işlemleriyle ilgili sunucu tarafı süreçleri yürütebilir.

Veritabanı backend'in önemli parçalarından biridir; ancak backend ile veritabanı aynı kavram değildir. Veritabanı, bilgilerin saklandığı ve sorgulandığı sistemdir. Backend ise uygulama mantığını çalıştıran, gerektiğinde veritabanına erişen ve sonucu frontend'e ileten katmandır. Bu nedenle "backend veritabanıdır" demek eksik olur.

Backend dilleri arasında Python, Java, PHP, Ruby, Go ve JavaScript sayılabilir; Node.js ise JavaScript için kullanılan bir sunucu tarafı çalışma ortamıdır. MySQL, PostgreSQL ve MongoDB gibi veritabanları da backend uygulamalarında kullanılabilir. Bu liste, bir dilin tek başına frontend veya backend'in bütün sorumluluklarını otomatik olarak üstlendiği anlamına gelmez. Kullanılan teknoloji, projenin yapısına ve geliştiricinin tercih ettiği mimariye göre değişebilir.

API, yazılım bileşenleri arasındaki iletişim arayüzüdür

API, yazılım bileşenlerinin birbirleriyle iletişim kurmasını sağlayan arayüz ve kurallar bütünüdür; frontend'in backend veya başka servislerle iletişiminde kullanılabilir. Frontend ile backend'in birlikte çalışmasını sağlayan iletişim katmanı çoğunlukla API'lar üzerinden açıklanır. Kullanıcı API'yi doğrudan görmez; fakat arayüzde yaptığı birçok işlem bu iletişime dayanabilir.

Bir ürün sayfası açıldığında frontend ekranda ürün bilgilerini göstermek için backend'den veri isteyebilir. Backend de ürün bilgilerini veritabanından alıp frontend'in kullanabileceği biçimde döndürebilir. Frontend bu yanıtı ürün adı, fiyat, açıklama ve stok bilgisi gibi alanlara dönüştürerek ekranda gösterir.

API'nin varlığı, iş mantığının frontend'e taşındığı anlamına gelmez. Örneğin frontend bir "Sepete Ekle" düğmesi gösterebilir; fakat ürünün gerçekten sepete eklenip eklenemeyeceğine ilişkin stok kontrolü backend tarafında yapılmalıdır. Frontend'de bir ürünün stokta göründüğü bilgisi bulunabilir, ancak işlem sırasında güncel durumun backend tarafından kontrol edilmesi gerekir. Aksi durumda arayüzde görünen bilgi ile sunucudaki gerçek kayıt birbirinden farklı olabilir.

Kimlik doğrulama ve veri güvenliği de bu ayrımda dikkat edilmesi gereken konulardır. Kullanıcıdan alınan verinin ekranda gösterilmesi, o verinin güvenli biçimde doğrulandığı veya saklandığı anlamına gelmez. Bu tür kritik işlemler backend tarafındaki uygulama mantığı ve güvenlik katmanlarıyla ilişkilidir.

Statik sayfa ile dinamik uygulama arasındaki sınır

Her web sayfasının aynı ölçüde backend'e ihtiyacı yoktur. Yalnızca metin, görsel ve bağlantılardan oluşan bir tanıtım veya bilgi sayfası statik içerikle hazırlanabilir. Böyle bir sayfada kullanıcıdan veri alınmıyor, veri kaydedilmiyor ve sunucuda özel bir işlem yürütülmüyorsa backend ihtiyacı daha sınırlı olabilir veya ayrı bir backend bulunmayabilir.

Buna karşılık uygulama kullanıcıya özel sonuç üretiyorsa, veri kaydediyorsa ya da farklı kullanıcıların bilgilerini yönetiyorsa backend rolü belirginleşir. Kullanıcı hesabı oluşturma, giriş yapma, arama sonuçlarını veri kaynağından getirme, sipariş oluşturma ve bildirim gönderme gibi işlevler dinamik uygulama davranışlarıdır.

Bu ayrım "statik sayfada hiç JavaScript bulunmaz" şeklinde yorumlanmamalıdır. JavaScript, frontend'de sayfa etkileşimlerini sağlamak için kullanılabilir. Benzer şekilde backend kullanılması da frontend'in ortadan kalktığı anlamına gelmez. Dinamik bir uygulamada kullanıcıyla iletişim kuran ekran yine frontend'dir; backend ise bu ekranın ihtiyaç duyduğu işlemleri ve verileri yönetir.

Web uygulamalarında bu iki katman birlikte bulunabilir. Mobil uygulamalarda da benzer bir iş bölümü vardır: telefondaki ekranlar ve formlar frontend'e, hesap bilgileri veya transfer işlemleri gibi sunucu tarafında yürütülen süreçler backend'e karşılık gelir. Ancak kullanılan araçlar ve uygulama mimarisi web ile mobil projelerde farklılaşabilir.

Çözümlü örnek: sepete ürün ekleme isteği

Verilenler: Bir kullanıcı e-ticaret uygulamasında bir ürün sayfasını açıyor ve "Sepete Ekle" düğmesine basıyor. Uygulamada ürün görselleri, fiyat, ürün açıklaması ve sepet ekranı bulunuyor. Backend tarafı stok bilgisi ve sepet kayıtlarıyla ilgileniyor.

Çözüm adımları:

1. Ürün sayfasındaki görsel, fiyat, açıklama ve "Sepete Ekle" düğmesi frontend bileşenleridir. Kullanıcı bu öğeleri doğrudan ekranda görür.
2. Kullanıcının düğmeye basması frontend tarafından algılanır. Frontend, hangi ürünün seçildiğini belirten bir isteği backend'e gönderir.
3. Backend gelen isteği işler ve ürünün stokta olup olmadığını kontrol eder. Bu kontrol sunucu tarafında yapılır; çünkü stok bilgisi uygulamanın merkezi verileriyle ilişkilidir.
4. Ürün uygun durumdaysa backend kullanıcının sepet kaydını günceller ve işlem sonucunu frontend'e iletir.
5. Frontend backend yanıtını kullanıcıya gösterir. Örneğin sepet görünümü güncellenebilir veya "Ürün sepete eklendi" mesajı gösterilebilir.
6. Ürün stokta değilse backend işlemi uygun bir sonuçla sonlandırır. Frontend de kullanıcıya ürünün eklenemediğini bildirir.

Sonuç: Düğmenin görünmesi ve tıklamanın algılanması frontend'e; stok kontrolü, sepet kaydının güncellenmesi ve işlemin sonucunun üretilmesi backend'e aittir. Kullanıcı yalnızca ekranı görse de tek işlem iki katmanın iletişimini gerektirebilir.

Çözümlü örnek: mobil bankacılıkta para transferi

Verilenler: Kullanıcı mobil bankacılık uygulamasında alıcı bilgilerini ve transfer tutarını bir forma giriyor. Uygulamada hesap bakiyesi, transfer formu ve onay düğmesi bulunuyor. İşlem sonunda kayıt tutulması gerekiyor.

Çözüm adımları:

1. Hesap bakiyesinin ekranda gösterilmesi, transfer formunun hazırlanması ve kullanıcının bilgileri girmesi frontend sorumluluğundadır.
2. Kullanıcı onay düğmesine bastığında frontend girilen bilgileri backend'e iletir.
3. Backend, isteği uygulamanın işlem kurallarına göre değerlendirir. Kaynak metindeki örneğe göre backend bankanın sunucularıyla iletişim kurarak işlemi doğrular.
4. Uygun görülen işlemde hesaplardan para düşülür, alıcıya gönderim yapılır ve işlem veritabanına kaydedilir. Bu kritik finansal süreçler kullanıcı arayüzünün görünür bölümünde değil, backend tarafındaki sunucu süreçlerinde gerçekleşir.
5. İşlem sonucu frontend'e döner. Frontend kullanıcıya transferin sonucu hakkında bilgi verir ve ekranı günceller.

Sonuç: Bakiyenin ve formun ekranda bulunması işlemin frontend kısmıdır; transferin doğrulanması, hesap kayıtlarının değiştirilmesi ve işlemin saklanması backend kısmıdır. Bu örnekte arayüzün başarılı görünmesi, transferin backend tarafından tamamlandığı anlamına gelmez; son karar sunucu tarafındaki işlem sonucuna bağlıdır.

Sık yapılan hatalar ve karıştırılan kavramlar

1. Frontend'i yalnızca görsel tasarım sanmak: Frontend, renk ve düzenin yanında kullanıcı etkileşimlerini, formları, düğme davranışlarını ve ekranda veri gösterimini de kapsar.

2. Backend'i yalnızca veritabanı olarak tanımlamak: Veritabanı veri saklama ve sorgulama işini üstlenir. Backend ise sunucu mantığı, API iletişimi, kimlik doğrulama ve veritabanı işlemlerini yöneten daha geniş bir katmandır.

3. API'yi veritabanı zannetmek: API, yazılım bileşenlerinin birbirleriyle iletişim kurmasını sağlayan arayüz ve kurallar bütünüdür; frontend'in backend veya başka servislerle iletişiminde kullanılabilir. Veritabanının kendisi değildir.

4. Frontend'de görünen bilginin kesin olarak güncel olduğunu varsaymak: Ekrandaki stok veya bakiye bilgisi backend'den alınmış olsa bile işlem anındaki güncel kontrol backend tarafında yapılmalıdır.

5. Her sayfanın backend'e ihtiyacı olduğunu düşünmek: Statik bir tanıtım veya bilgi sayfasında ayrı bir backend bulunmayabilir. Kullanıcı girişi, veri kaydı ve dinamik içerik gibi ihtiyaçlar backend gereksinimini artırır.

6. Bir programlama dilini doğrudan tek bir katmana eşitlemek: Backend dilleri arasında Python, Java, PHP, Ruby, Go ve JavaScript sayılabilir; Node.js ise JavaScript için kullanılan bir sunucu tarafı çalışma ortamıdır. HTML, CSS ve JavaScript frontend geliştirmede de kullanılabilir. Ancak teknoloji seçimi projenin mimarisine göre değişebilir; dil adı tek başına bütün sorumluluğu açıklamaz.

7. Fullstack'i yalnızca iki alanı yüzeysel bilmek sanmak: Fullstack geliştirici frontend ve backend alanlarında çalışabilen, uygulamanın görünen yüzü ile sunucu tarafı işlevlerini birlikte ele alabilen kişidir. Bu ifade belirli bir teknoloji listesini zorunlu kılmaz.