Frontend ve Backend: Aradaki Fark Nedir?
Frontend, bir uygulamanın kullanıcının tarayıcısında çalışan kısmıdır: kullanıcının gördüğü ve tıkladığı sayfalar, düğmeler, formlar ve animasyonlar. Backend ise kullanıcının hiç görmediği bir sunucuda çalışan kısımdır: verileri saklar ve geri getirir, iş kurallarını uygular, kimin neyi yapabileceğini kontrol eder ve ödeme ile e-posta gibi diğer servislerle konuşur. İkisi bir API üzerinden haberleşir ve veritabanıyla birlikte “full stack” bir uygulamayı oluşturur.
Yapay zekayla uygulama yaparken neden önemli?
Bir yapay zeka uygulama oluşturucuya bir uygulamayı anlattığınızda, farkında olsanız da olmasanız da iki yarıyı birden tarif etmiş olursunuz. “Müşteriler bir saat ayırtabilsin” cümlesi, bir rezervasyon formunu (frontend), hangi saatlerin boş olduğuna dair kuralları (backend) ve rezervasyonların kaydedileceği bir yeri (veritabanı) ifade eder.
Bu ayrımı bilmek üç pratik konuda işe yarar:
- Güvenlik. Frontend'deki her şeyi kullanıcı görebilir ve değiştirebilir. Kurallar ve gizli anahtarlar backend'de tutulmalıdır.
- Hata ayıklama. “Düğme tepki vermiyor” ile “düğme tepki veriyor ama hiçbir şey kaydedilmiyor” farklı yarıları işaret eder. Hangisini gördüğünüzü söylemek, yapay zekânın sorunu daha hızlı bulmasını sağlar.
- Barındırma ve maliyet. Yalnızca frontend olan bir site ucuz ve basit şekilde yayınlanabilir. Backend'in bir yerde çalışması gerekir; bu da ne ödediğinizi ve uygulamanızın boşta kaldığında nasıl davrandığını etkiler.
Günlük hayattan bir benzetme
Bir restoranı düşünün.
Frontend, yemek salonudur: menü, masalar, dekor ve siparişinizi alan garson. Müşteriler için tasarlanmıştır ve hepsini görebilir, dokunabilirler.
Backend, mutfak ve ofistir: aşçıların yemek pişirdiği yer, depo, kasa ve kimin indirim alacağına dair kuralları belirleyen yönetici. Müşteriler oraya girmez ve girmemeleri gerekir.
API, ikisi arasındaki geçiştir: siparişlerin girdiği ve tabakların çıktığı, üzerinde anlaşılmış bir biçimdeki tezgâh. Veritabanı ise depo ve sipariş defteridir.
Bir müşteri sipariş fişini kendi istediği gibi yazabilir (frontend onun kontrolündedir), ama mutfak yine de ne pişireceğine ve neye ücret alacağına karar verir. Bu yüzden önemli kontroller arka tarafa aittir.
Her yarının görevi
| Frontend | Backend | |
|---|---|---|
| Nerede çalışır | Kullanıcının cihazında, tarayıcıda | Sizin (ya da barındırma sağlayıcınızın) kontrol ettiği bir sunucuda |
| Ana görevi | Gösterim yapmak, girdi toplamak, tıklamalara yanıt vermek | Veriyi saklamak, kuralları uygulamak, yetkileri denetlemek, diğer servisleri çağırmak |
| Kullanıcılar kodu görebilir ve değiştirebilir mi? | Evet; tarayıcılarına indirilir | Hayır |
| Gizli API anahtarı tutabilir mi? | Hayır | Evet, ortam değişkenlerinde |
| Yaygın teknolojiler | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Neler ters gider | Mobilde yerleşim bozulur, düğme çalışmaz, sayfa yavaş açılır | Veri kaydedilmez, yanlış veri gösterilir, hatalar, güvenlik açıkları |
Bazı framework'ler bu çizgiyi bulanıklaştırır. Örneğin Next.js, tek bir projenin hem tarayıcı kodunu hem sunucu kodunu içermesine izin verir. Fikir yine aynıdır: soru her zaman bu parça nerede çalışıyor? sorusudur.
Örnek: bir ders rezervasyonu
Bir kişi yoga dersine kaydolduğunda adım adım neler olduğu şöyledir.
| Adım | Nerede | Ne olur |
|---|---|---|
| 1 | Frontend | Ders programı sayfası yüklenir ve bu haftanın derslerini backend'den ister. |
| 2 | Backend | Dersleri ve rezervasyonları veritabanından okur, boş yerleri hesaplar, listeyi JSON olarak döndürür. |
| 3 | Frontend | Her dersi saat, eğitmen ve boş yer sayısıyla gösterir. |
| 4 | Frontend | Kullanıcı bir ders seçer ve adını ile e-postasını girer. Form e-postanın geçerli göründüğünü kontrol eder (bu bir kolaylıktır, garanti değildir). |
| 5 | Frontend → Backend | API üzerinden bir POST /api/bookings isteği gönderilir. |
| 6 | Backend | Girdiyi yeniden doğrular, dersin dolu olmadığını kontrol eder, rezervasyonu kaydeder ve gizli bir anahtar kullanarak e-posta servisinden onay maili göndermesini ister. |
| 7 | Backend → Frontend | “Rezervasyon yapıldı” ya da “üzgünüz, ders dolu” yanıtı döner. |
| 8 | Frontend | Onay ekranını gösterir. |
- ve 6. adımlara dikkat edin: girdi iki kez kontrol edilir. Frontend kontrolü anında geri bildirim verir; asıl sayan kontrol backend'dekidir, çünkü kararlı bir kullanıcı frontend'i tamamen atlayabilir.
Sık kullanılan terimler
| Terim | Anlamı |
|---|---|
| Client / server (istemci / sunucu) | İstemci, istekte bulunan tarayıcıdır (ya da uygulamadır); sunucu bu isteklere yanıt verir. |
| UI | Kullanıcı arayüzü: ekranlar ve kontroller. |
| API | Frontend'in backend'den veri ya da işlem istemesi için üzerinde anlaşılmış yol. |
| Endpoint | API üzerindeki tek bir URL, örneğin /api/bookings. |
| Full stack | Frontend + backend + veritabanı birlikte. Bkz. full stack uygulama nedir. |
| Static site | Kendi backend'i olmayan frontend; herkese aynı dosyalar sunulur. |
| SPA | Tek sayfalık uygulama: yeni sayfalar yüklemek yerine sayfayı tarayıcıda güncelleyen frontend. |
| Server-side rendering (SSR) | Sunucunun sayfanın HTML'ini göndermeden önce oluşturması; hız ve SEO'ya yardımcı olabilir. |
| Ortam değişkenleri | Çalışma anında backend'e verilen ve koddan ayrı tutulan ayarlar ve gizli bilgiler. |
Uygulamanızın backend'e ihtiyacı var mı?
| Uygulamanız… | Backend gerekir mi? |
|---|---|
| Herkes için aynı olan bilgileri gösteriyorsa | Hayır |
| Yalnızca size e-posta gönderen bir iletişim formu varsa | Genellikle küçük bir backend ya da bir form servisi |
| Başkalarının göreceği veriyi kaydediyorsa | Evet |
| Girişler ve özel veriler içeriyorsa | Evet |
| Ödeme alıyorsa | Evet; en azından ödeme oturumlarını oluşturmak ve ödeme webhook'larını almak için |
| Gizli anahtarlı ücretli bir yapay zeka ya da başka bir API kullanıyorsa | Evet; anahtarı tarayıcıdan uzak tutmak için |
Sık yapılan hatalar ve yanlış anlamalar
- Gizli anahtarları frontend'e koymak. Tarayıcının geliştirici araçlarını açan herkes bunları görebilir. Yapay zekayla yapılan uygulamalarda en yaygın ciddi hata budur.
- Kuralları yalnızca frontend'de uygulamak. Yönetici olmayanlar için “sil” düğmesini gizlemek koruma değildir; backend isteği reddetmelidir.
- Backend'in “sadece veritabanı” olduğunu sanmak. Veritabanı veriyi saklar. Backend ise kimin neyi okuyup değiştirebileceğine ve bunun nasıl olacağına karar verir.
- JavaScript'in frontend anlamına geldiğini düşünmek. JavaScript ve TypeScript, Node.js ile sunucularda da çalışır.
- Yanlış yarıyı suçlamak. Sayfa doğru görünüyor ama veri yanlışsa, sorun genellikle tasarımda değil backend'de ya da veritabanındadır.
- Gereğinden fazla inşa etmek. Bir portfolyonun özel bir backend'e ihtiyacı yoktur. Eklemek maliyet ve hareketli parça ekler.
Yapay zeka uygulama oluşturucunuzdan ne istemeli
- “Bu uygulamanın hangi kısımları tarayıcıda, hangileri sunucuda çalışıyor?”
- “Tüm API anahtarlarını backend'e taşı ve ortam değişkenlerinden oku.”
- “Her formu hem tarayıcıda hem sunucuda doğrula.”
- “Yalnızca yöneticilerin rezervasyon silebilmesini backend'de zorunlu kıl.”
- “Sayfa doğru görünüyor ama veriler kaydedilmiyor; isteğin backend loglarını kontrol et.”
- “Bu basit bir tanıtım sitesi; gerekmedikçe yalnızca frontend olarak kalsın.”
Mythex'te frontend ve backend
Yeni bir Mythex projesi Vite, React, TypeScript ve Tailwind ile hazırlanmış bir frontend ile başlar; uygulamanızın ihtiyacı olduğunda ajan bir backend ekler. Ya da aynı projede frontend'in yanında çalışan, Node, Python (FastAPI), C# veya Java ile yazılmış ayrı bir API isteyebilirsiniz. Önizlemede web sitesi ile API sunucusu arasında geçiş yapabilirsiniz; yayınlama ikisini birden dağıtır ve gerektiğinde veritabanı ile dosya depolama eklenir. Çok servisli uygulamalar dokümanlarda anlatılıyor; web barındırma rehberi ise yayına alındıktan sonra iki yarının nerede çalıştığını açıklıyor. Uygulama şablonları ise full stack örneklerini hızlıca görmenin kolay bir yolu.
Sorular
Frontend ile backend arasındaki fark nedir?
Frontend, bir uygulamanın kullanıcının tarayıcısında çalışan kısmıdır: kullanıcının gördüğü sayfalar, düğmeler ve formlar. Backend ise kullanıcının hiç görmediği bir sunucuda çalışır; veriyi saklar, iş kurallarını uygular, kimin neye yetkisi olduğunu kontrol eder ve ödeme veya e-posta gibi başka servislerle konuşur.
Her uygulamanın backend'e ihtiyacı var mı?
Hayır. Bir tanıtım sitesi, portfolyo ya da basit bir açılış sayfası yalnızca frontend olabilir. Bir uygulama ortak verileri kaydetmesi, kullanıcıların giriş yapması, ödeme alması ya da gizli API anahtarlarını kullanması gerektiğinde ise bir tür backend'e ihtiyaç duyar.
HTML frontend mi backend mi?
Tarayıcıda çalışan HTML, CSS ve JavaScript frontend'dir. JavaScript, Node.js kullanılarak sunucuda da çalışabilir; bu durumda backend kodu olur. Belirleyici olan dil değil, kodun nerede çalıştığıdır.
Full stack ne anlama gelir?
Full stack, hem frontend'i hem backend'i (genellikle veritabanıyla birlikte) kapsamak demektir. Full stack bir uygulama bu üç parçanın hepsine sahiptir; full stack geliştirici ise hepsi üzerinde çalışır.