Backend/Frontend Nedir, Farkları Nelerdir?

Yazılım geliştirmenin alt alanlarından biri olan web programlama ilgini çekmeye başladı. Araştırmalara başladın ve karşına backend, frontend, client, server, response, html, css, full stack developer gibi birçok terim çıktı. Okuyacağın yazının amacı bu gibi temel terimleri açıklamak ve web programlamayı genel hatlarıyla tanıtmaktır. 1_HUR-R1iWsWtT8QFK4-8wKw.png Web programlama dediğimiz alan "backend" ve "frontend" olarak isimlendirilen iki alt başlıktan oluşur. Aslında isimlerinden de anlaşıldığı üzere backend bir internet sitesinin "arka" planındaki işleyişleri temsil ederken frontend "ön" yüzde kullanıcının gördüğü ekranla ilgilenir. Örneğin bir alışveriş sitesini arattınız ve siteye tıkladınız. Karşınızda kategorilerin olduğu açılır menüler, ürünlerin görselleri, ürünler hakkında açıklamalar mevcut. Mağazalar arasında gezinip duruyorsunuz, şu ana kadar siteyle aranızda herhangi bir bilgi alışverişi gerçekleşmedi. Daha sonra bir ürünü satın almaya karar verdiniz. Bu aşamadan itibaren önce siteye kaydolmalı daha sonra ürünü sepete eklemeli ve ödeme işlemini gerçekleştirmelisiniz. Kaydol butonuna tıkladınız, kayıt sırasında istenen verileri girdiniz, ürünü satın aldınız ve hatta birkaç tane de ürün favorilediniz. Siteden çıkış yapıp tekrar giriş yaptığınızda sipariş geçmişiniz, sepetinize daha önce eklediğiniz ya da birkaç gün önce favorilediğiniz ürünler hala yerli yerinde duruyor. Peki bu kayıtlara ulaşmanız nasıl mümkün oluyor? Web sitesi sizin hesabınızla ilişkili olan bu verileri nerede depoluyor? İşte tam bu noktada işin içine backend geliştiriciliği dahil oluyor. Eğer yapacağınız site sadece bir tanıtım sitesi değilse ve kullanıcıyla etkileşime girmeyi hedefliyorsa backendin veri depolama, satın alma butonunu çalışır kılma, kayıt olma ve giriş yapma gibi işlemlerini devreye sokmanız gerekmekte. Yok benim işim frontend tarafıyla diyorsanız bu sefer ilgileneceğiniz alan sayfanın tasarımı ve görüntüsüyle ilgili olacak. Hangi bölümün sayfada ne kadar yer kaplayacağı, metinlerin ve görsellerin boyutları, renkleri, gölgelendirmeleri, kenar boşlukları gibi birçok görsel konu bu alanın sorumluluğundadır. Backendi ve frontendi birbirinden ayrı ve bağımsız düşünmek imkansızdır. Biri olmadan diğerinin hiçbir anlamı kalmayacaktır. Backendin yapmış olduğu işlemler olmasa web siteniz dinamiklikten uzak, internette yayımlanan bir tanıtım afişinden farklı olmazdı. Öte yandan son kullanıcı backend tarafında yazmış olduğunuz servislerin kalitesini, kurduğunuz mimari yapıyı, gelen bir isteğe iki saniye daha erken yanıt verebildiğinizi fark etmeyecektir. Kullanıcıyı çeken şey incelediği sitenin düzeni, kullanım kolaylığı, estetiği, farklı cihazlardan giriş yaptığında kaymayan görüntüleri olacaktır. Kısacası backendi veritabanı işlemleri, ekranda gördüğünüz butonların fonksiyonları, ürünleri özelliklerine göre filtreleme ve sıralama algoritmaları, giriş yapma ve üye olma gibi işlemleri ile ilişkilendirebilirsin. Frontend ise sitenin işleyişinde doğrudan göremediğimiz backend işlemlerini kullanıcıya estetik bir şekilde sunmakla görevlidir. Hem backend hem frontendi yapan kişilere ise full stack developer denmektedir. Buraya kadar teknik terimler kullanmaktan mümkün olduğunca kaçınarak açıklamaya çalıştım ancak karşılaştığımız terimleri de açıklamakta fayda var. Bu yüzden işe benim de daha hakim olduğum taraf olan backend kısmı ile başlayalım. Bir backend developerın yaptığı işi anlamak için önce işin temelini anlamak gerektiğini düşünüyorum. Temelden kastım web programlama sürecinden bağımsız olarak internette bir siteye tıkladığımızda neler oluyor bu sorunun cevabına ulaşmak. Bu soruyu yanıtlarken user, client, hosting, server, http, request, response gibi kavramları da açıklamaya çalışacağım. İnternette Gezinirken Arka Planda Neler Olur? İnternetin perde arkasında nasıl çalıştığını basitçe anlatmak için yukarıda saydığım terimleri teker teker açıklamaya başlayalım. User kavramı doğrudan bizleri temsil ediyor. Sitelere giriş yapan, interneti kullanan, tıklayan kısacası siteye "istek atan" kişi user olarak tanımlanır. Client ise userın web sitesine ulaşırken kullandığı teknolojik araçtır. Bu araç telefon, tablet, bilgisayar olabilir. Peki ama 7/24 ulaşabildiğimiz bu web siteleri nerede barınıyor? Bu sorunun cevabı ise hosting firmalarında gizli. Bu firmalar bizlere güçlü bilgisayarlar kiralayarak web sitemizin kodlarını yayına almamızı sağlıyor. Bu yayınlama işlemini kendi bilgisayarınızda da yapabilirsiniz ancak olası bir elektrik kesintisinde, makinenizin kapanıp açılması durumunda userların sitenize ulaşamayacağı riskini göz önünde bulundurmanız gerekiyor. Ki bu da pek göze alınabilecek bir risk değil gibi. Örneğin kredi kartı bilgilerinizi girerek alışveriş yaptığınız bir e-ticaret sitesine bir saat boyunca giriş yapamasanız bu durum sizin açınızdan oldukça kötü bir deneyim olacaktır ancak söz konusu sitenin güvenilirliği düşünüldüğünde çok daha kötü sonuçlar doğuracaktır. Bu yüzden bırakalım uzaklarda bir yerdeki bir server üzerinden web sitemiz yayında kalmaya devam etsin. Bu kısma kadar açıkladığımız yerleri toparlayalım. Userımız client üzerinden bir web sitesi ile etkileşime girdi. Serverda yayında olan siteye tıklayarak bir request yolladı. Ve bu request sonucunda clienta bir response dönülmüş oldu. Örneğin zaman zaman aldığımız "404 Not Found" hatası esasında bir http yanıtından fazlası değildir. 1_Rfdd2pqeDPzGYUmSFggVSw.jpeg Clientın sitelere atmış olduğu isteklerin doğru kaynağa ulaşması ise IP adresleri sayesinde gerçekleşir. Hosting firmalarından bahsetmiştik, bu firmalar web sitelerimize sadece fiziksel bir alan ayırmaz. Onlara aynı zamanda bir kimlik atar ve böylece web sitemiz dünya üzerinde sadece kendisinin sahip olduğu bir IP adresine sahip olmuş olur. Tıpkı T.C. Kimlik Numaralarımız gibi sadece sayısal değerlerden oluşan ve sadece tek bir siteye ait olan bu IP adresleri ise domain sayesinde daha akılda kalıcı olmaktadır. Örneğin google.com bir domain yani alan adı iken bu isme ait olan IP adresi 142.250.179.196'dır. Client tarafından atılan isteğe serverın bir response döndüğünü söylemiştik. Bu iki taraftaki bilgisayarların birbirleriyle aynı dili konuşabilmeleri, ortak bir paydada buluşabilmeleri ise HTTP ile mümkün olmaktadır. Http iki bilgisayar arasında imzalanmış bir protokol şeklinde düşünülebilir. Bu protokolün çeşitli fonksiyonları vardır ancak en çok kullanacaklarımız GET, POST, DELETE, PUT olacaktır. Örneğin siteden çeşitli verilerin listelenmesini talep ediyorsanız çalışacak fonksiyon GET olacaktır. Ve yazacağınız kodlarda bu işleme değinmeniz gerekecektir. 1_YFKuVv7N-dykh3IzDkUWbA.jpeg İnternette gezinirken yaptığımız hareketlerin arka planda karşılığı aşağı yukarı bu şekildedir. Backend tarafını kodlamak istediğinde günün sonunda yaptığın iş bu şekilde bir süreci devreye sokacaktır. Tabi ki işin içinde veritabanı boyutu da olacaktır. Çünkü yaptığın her hareket bir yerlerde depolanmış verileri ilgilendirmektedir. Yazacağın metotları çift taraflı çalışıyor gibi düşünebilirsin. Bir yandan veritabanından kayıtları sorgulayan, yeni kayıtlar ekleyen, kayıt silen diğer taraftan ise bu sorgu sonucu dönen verileri kullanarak usera bilgi veren bir mimariye sahip olacaksın. Backend tarafında kullanacağın teknolojilere gelecek olursak kesinlikle bir progrlamlama dili hakkında bilgi sahibi olman gerekir. Bu dilin hangisi olduğunun bir önemi yoktur. C#, Java, Php gibi birçok farklı dille web programlama yapabilirsin. Ben ilk web projemi ASP.NET Core ile C# kullanarak kodlamıştım. Buradan da anlayacağın üzere ASP.NET bir programlama dili değildir. Web programlaman için Microsoft tarafından geliştirilmiş bir mimaridir. (Bu konu sıkça karıştırılan bir durum olduğu için açıklama gereği duydum.) Frontend için kullanacağın teknolojilere gelecek olursak HTML, CSS kesinlikle biliyor olman gerekir. HTML dediğimiz dil de bir programlama dili değildir ancak frontend için olmazsa olmaz ilk basamağı oluşturur. Tek başına kullanman web siteni estetik açıdan bir facia olarak gösterebilir. Çünkü kendisiyle sadece metinleri yerleştirebilir, başlıkları boyutlandırabilir, görseller ekleyebilirsin ama bu gibi işlemleri en yalın haliyle yapmış olursun. CSS sayesinde ise renklerini, boyutlarını, kenarlıklarını ayarlayabilir kısacası nesnelerine istediğin görselliği katabilirsin. Bunlara ek olarak yine sıkça kullanılan bir programlama dili olan Javascript bildiğinde de web siteni kullanıcı ile etkileşimli, dinamik bir hale getirebilirsin. Örnek vermek gerekirse kullanıcılar için HTML ve CSS kullanarak göze hitap eden bir iletişim formu oluşturdun. Ama kullanıcıya eksik bilgi girildiğinin uyarısını vermek istiyorsan işte bunu Javascript ile yapabilirsin. Web programlamaya dair bahsedilecek daha çok fazla konu var. Ancak yazıyı dağıtmamak adına en yalın haliyle temelden değinmeye çalıştım. Umarım senin için faydalı bir okuma olmuştur.