Frontend Nedir? HTML, CSS ve JavaScript ile Kullanıcı Arayüzü

Frontend'in sınırı: Ekrandaki hangi parçalar ön yüze aittir?

Frontend, tarayıcıda veya istemci ortamında çalışan kullanıcı arayüzünü ve bu arayüzün istemci tarafındaki davranışlarını sağlayan katmandır. Bunun önemli bir bölümü kullanıcıya doğrudan görünmese de arayüzün çalışmasını etkiler. Bir web sayfasındaki metinler, başlıklar, görseller, videolar, bağlantılar, butonlar, menüler, tablolar ve bu öğelerin renk, yazı tipi, boyut, hizalama ve sayfa içindeki konumu frontend kapsamındadır.

Burada önemli ayrım, yalnızca görsel görünüm ile etkileşimli davranışın birlikte değerlendirilmesidir. Örneğin bir butonun mavi görünmesi ve sayfadaki konumu arayüzün görsel tarafıdır; butona tıklanınca bir menünün açılması veya form alanındaki hatanın kullanıcıya bildirilmesi ise davranışsal taraftır. Kullanıcının ekranda görüp deneyimlediği bu iki taraf birlikte frontend'i oluşturur.

Frontend'in sınırı, kullanıcının arayüzle doğrudan temas ettiği noktada çizilir. Kullanıcı bir ürün listesini görür, arama alanına yazı girer ve sepete ekleme düğmesine basar. Ancak ürünlerin kalıcı olarak saklanması, sunucuda işlenmesi veya veritabanından getirilmesi frontend'in tek başına üstlendiği görevler değildir. Bu işlemler genellikle backend ve veritabanı gibi arka plandaki bileşenlerle ilişkilidir. Bu nedenle bir arayüzün ekranda görünmesi ile arayüzün kullandığı verinin nerede üretildiği aynı soru değildir.

Frontend geliştirici, tasarımcı tarafından hazırlanmış bir görsel tasarımı HTML, CSS ve JavaScript kullanarak çalışan bir arayüze dönüştürebilir. Bu rolün tasarım süreçleriyle ilişkisi olabilir; ancak tasarım dosyası hazırlamak ile bu tasarımı tarayıcıda çalışan bir ürüne dönüştürmek aynı görev değildir.

HTML, CSS ve JavaScript: Aynı arayüzde üç farklı görev

Frontend'in temelinde üç teknoloji farklı sorulara cevap verir:

• HTML: Sayfada hangi içeriklerin bulunduğunu ve bunların nasıl yapılandırıldığını belirtir. Başlıklar, paragraflar, görseller, bağlantılar ve formlar HTML ile sayfanın iskeletine yerleştirilir. HTML, içeriğin türünü ve belge içindeki yapısını kurar.
• CSS: HTML ile oluşturulan yapının nasıl görüneceğini tanımlar. Renk, yazı tipi, boyut, boşluk, hizalama ve sayfa düzeni gibi özellikler CSS ile belirlenir. Aynı HTML içeriği farklı CSS kurallarıyla farklı görsel düzenlerde sunulabilir.
• JavaScript: Sayfaya etkileşim ve dinamizm kazandırır. Buton tıklamalarına tepki verme, form doğrulama, animasyon oluşturma ve sayfadaki içeriği güncelleme gibi davranışlar JavaScript ile gerçekleştirilebilir.

Bu görev paylaşımını bir karar kuralı gibi kullanabilirsiniz: 'Bu öğe sayfada var mı?' sorusu HTML'e; 'Nasıl görünüyor?' sorusu CSS'e; 'Kullanıcı bir işlem yaptığında ne oluyor?' sorusu çoğunlukla JavaScript'e işaret eder. Gerçek bir arayüzde bu katmanlar birbirinden tamamen kopuk değildir. JavaScript, bir HTML öğesinin durumunu değiştirebilir; CSS de bu yeni durumu farklı bir görünümle gösterebilir.

Örneğin bir giriş formunda alanın kendisi HTML ile oluşturulur, alanın kenarlığı ve boşlukları CSS ile biçimlendirilir, kullanıcının eksik bilgi girdiğini kontrol edip uyarı göstermesi JavaScript ile yapılabilir. Bu üç teknoloji birlikte kullanıldığında kullanıcı yalnızca sabit bir belge değil, tepki veren bir arayüz deneyimler.

Tarayıcı kodu ekrana nasıl taşır? DOM'un aradaki rolü

Frontend kodu yazıldıktan sonra kullanıcının karşısına doğrudan ham HTML, CSS ve JavaScript metni çıkmaz. Tarayıcı bu kodları yorumlar ve kullanıcının etkileşebileceği görsel arayüzü oluşturur. Bu süreçte DOM, yani Document Object Model, sayfanın yapısını temsil eden önemli bir katmandır.

DOM'u, HTML belgesindeki öğelerin tarayıcı tarafından anlaşılabilir bir belge yapısı olarak düşünebilirsiniz. Başlık, paragraf, buton ve form alanı bu yapı içinde ayrı öğeler olarak temsil edilir. JavaScript, bu öğelere erişerek içeriği güncelleyebilir veya kullanıcı etkileşimine göre arayüzün durumunu değiştirebilir. Böylece sayfa yalnızca ilk açıldığı andaki sabit görüntüden ibaret kalmaz.

Adım adım düşünürsek süreç şu şekildedir:

1. HTML, sayfanın içerik ve öğe yapısını tanımlar.
2. CSS, bu öğelerin görünümünü ve düzenini belirler.
3. Tarayıcı, belgeyi ve stil kurallarını yorumlayarak görsel arayüzü oluşturur.
4. JavaScript, kullanıcı olaylarını izleyip DOM'daki ilgili öğelerde değişiklik yapabilir.
5. Kullanıcı, bu değişikliği güncellenmiş arayüz olarak görür.

DOM, HTML'in kendisiyle aynı şey değildir. HTML kaynak belgenin yapısını tanımlarken DOM, tarayıcının bu belgeyi çalışma sırasında temsil etme biçimidir. Bu ayrımı bilmek, 'JavaScript sayfanın metnini nasıl değiştirdi?' sorusunu anlamayı kolaylaştırır: JavaScript, tarayıcının temsil ettiği DOM içindeki ilgili öğeyi değiştirerek görünür sonucu etkiler.

Görsel tasarımdan kullanılabilir arayüze: UI ve UX ayrımı

Frontend geliştirme, tasarım dosyasını koda aktarmaktan ibaret değildir; kullanıcı arayüzü (UI) ve kullanıcı deneyimi (UX) ile de ilişkilidir. UI, kullanıcının gördüğü arayüz öğelerinin görsel düzeniyle ilgilidir. Renk paleti, yazı tipi, buton biçimi, ikonlar ve sayfa yerleşimi bu alana örnek verilebilir. UX ise kullanıcının arayüzü kullanırken görevi ne kadar anlaşılır ve sorunsuz tamamlayabildiğiyle ilgilidir.

Bu iki kavramı ayırmak için şu örneği kullanabilirsiniz: Bir buton estetik olarak uyumlu renkte ve düzgün hizalanmış olabilir; fakat kullanıcının ne yapacağını belli etmiyorsa veya işlemden sonra geri bildirim göstermiyorsa yalnızca görsel açıdan başarılı olması yeterli değildir. Frontend uygulaması, tasarımı etkileşimle birleştirerek kullanıcının işlemi anlayabilmesine yardımcı olur.

Erişilebilirlik de bu değerlendirmeye dahildir. Kaynak metindeki çerçeveye göre erişilebilirlik, engelli kullanıcılar da dahil olmak üzere farklı kullanıcıların siteyi veya uygulamayı kullanabilmesini gözetir. Bu nedenle frontend değerlendirilirken yalnızca 'güzel görünüyor mu?' sorusu sorulmaz. 'Kullanıcı öğenin işlevini anlayabiliyor mu, etkileşimden sonra yeterli geri bildirim alıyor mu ve arayüzü kullanabiliyor mu?' soruları da önemlidir.

Frontend ekibi bu süreçte tasarım araçlarından yararlanabilir. Adobe XD, Photoshop ve Sketch gibi araçlar renk, tipografi, yerleşim ve ikon tasarımlarının hazırlanmasında kullanılabilir. Ancak bu araçlarda hazırlanmış görsel şablon, henüz tarayıcıda çalışan frontend değildir; geliştirici bu tasarımı HTML, CSS ve JavaScript ile işlevsel hâle getirir.

Frontend ile backend arasındaki veri ve sorumluluk sınırı

Frontend ile backend arasındaki farkı anlamanın en kolay yolu, kullanıcıya görünen işlem ile arka planda yürüyen işlemi ayırmaktır. Frontend; kullanıcının gördüğü ekranı, tıklama alanlarını, formu ve geri bildirimi sunar. Backend ise bu arayüzün arkasındaki sunucu, uygulama mantığı ve veritabanı gibi bileşenlerle ilişkilidir.

Bir kullanıcı bir giriş formuna e-posta ve parola yazdığında, alanların görünümü ve eksik giriş uyarısı frontend tarafında ele alınabilir. Frontend, veriyi sunucuya gönderir ve yanıtı işler; backend gönderilen veriyi sunucuda doğrular, uygulama mantığını yürütür ve gerekli durumlarda veritabanına kaydeder. Burada 'frontend her şeyi yapar' demek doğru değildir; frontend, arka plandaki sistemlerle kullanıcı arasında etkileşim kurulmasını sağlayan ön katmandır.

Bu ayrım frontend'in önemsiz olduğu anlamına gelmez. Güçlü bir backend altyapısı kullanıcıya anlaşılmaz, karmaşık veya tepkisiz bir ekran sunarsa ürünün kullanımı zorlaşabilir. Tersine, görsel olarak başarılı bir frontend arka planda gerekli veri ve uygulama mantığı olmadan tam işlevli bir ürün sunamayabilir. Web uygulamasında kullanıcı deneyimi, bu iki katmanın birlikte çalışmasına bağlıdır.

Konuya daha geniş açıdan bakmak için Frontend ile Backend Arasındaki Fark, Backend Nedir?, Veritabanı Nedir? ve Web Uygulaması Nedir? yazılarına geçebilirsiniz.

Frontend öğrenme sırası: Bir ekranı parçalara ayırarak ilerleme

Frontend öğrenirken teknolojileri yalnızca isim olarak ezberlemek yerine tek bir ekranı katmanlarına ayırmak daha açıklayıcıdır. Önce ekranda hangi içeriklerin bulunacağını belirleyin: başlık, açıklama, görsel, bağlantı, buton veya form alanı. Bu aşama HTML'in yapılandırma görevini anlamanızı sağlar.

Sonra aynı öğelerin görsel özelliklerini düşünün: Butonun rengi nedir, başlık ile açıklama arasındaki boşluk ne kadardır, öğeler nasıl hizalanır? Bu sorular CSS'in görev alanını gösterir. Son olarak kullanıcı bir butona bastığında, bir alanı doldurduğunda veya bir menüyü açtığında hangi değişikliğin gerçekleşeceğini tanımlayın. Bu davranışlar JavaScript ve DOM etkileşimiyle ilişkilidir.

Bu sıralama, bir tasarımın üç ayrı kontrol listesini çıkarmaya yardım eder:

1. Yapı: İçerik doğru öğelerle temsil edilmiş mi?
2. Görünüm: Öğeler okunabilir ve düzenli bir görsel sunuyor mu?
3. Davranış: Kullanıcı eylemi arayüzde anlaşılır bir tepki oluşturuyor mu?

Bu üç sorudan birine cevap verilemiyorsa frontend çözümünün ilgili katmanı eksik olabilir. Örneğin bir buton ekranda var ama tıklanınca hiçbir tepki vermiyorsa görünüm tamamlanmış, davranış tamamlanmamış demektir. Bir menü açılıyor fakat öğeler düzensiz görünüyorsa davranış eklenmiş, CSS düzeni yetersiz kalmış olabilir. Bu yaklaşım, hatayı rastgele aramak yerine doğru teknoloji katmanında incelemeyi sağlar.

Çözümlü örnekler: Bir arayüz işlemini katmanlarına ayırma

Örnek 1: Sepete ekleme düğmesi

Verilenler: Bir e-ticaret ekranında ürün adı, ürün görseli, fiyat ve 'Sepete Ekle' düğmesi bulunuyor. Kullanıcı düğmeye bastığında düğmenin görünümü değişiyor ve ürünün sepete eklendiğini belirten bir geri bildirim gösteriliyor.

Çözüm adımları:

1. Ürün adı, görsel, fiyat ve düğme gibi içerik öğelerini belirleyin. Bunların sayfada bulunması HTML ile yapılandırılır.
2. Düğmenin rengi, biçimi, boyutu ve ürün bilgilerinin sayfadaki hizası CSS ile belirlenir.
3. Kullanıcının düğmeye tıklaması bir etkileşim olayıdır. Tıklamaya tepki verme JavaScript ile ele alınır.
4. Tıklama sonrasında düğme metninin veya görünümünün değişmesi ve geri bildirim alanının ekranda gösterilmesi DOM üzerindeki ilgili öğelerin güncellenmesiyle ilişkilidir.
5. Ürünün kalıcı olarak sepete kaydedilmesi ya da kullanıcı hesabıyla ilişkilendirilmesi gerekiyorsa bu işlem yalnızca frontend sorusu değildir; backend ve veritabanı katmanı da devreye girebilir.

Sonuç: Ürünün ekranda sunulması HTML, görsel düzen CSS, tıklama sonrası arayüz tepkisi JavaScript ve DOM, kalıcı veri işlemi ise frontend dışındaki arka uç bileşenleriyle açıklanır.

Örnek 2: Eksik bilgi girilen form

Verilenler: Kullanıcı bir formdaki alanlardan birini boş bırakıp gönderme düğmesine basıyor. Arayüz, eksik alanı belirtip kullanıcıya uyarı gösterecek.

Çözüm adımları:

1. Form, giriş alanı, etiket ve gönderme düğmesi HTML ile oluşturulur.
2. Alanların genişliği, aralarındaki boşluk, uyarı metninin rengi ve düğmenin görünümü CSS ile düzenlenir.
3. Gönderme eylemi gerçekleştiğinde alanların dolu olup olmadığını kontrol etmek JavaScript'in davranışsal görevidir.
4. Eksik alanın yanında uyarı metni göstermek veya alanın görünümünü değiştirmek için JavaScript DOM'daki ilgili öğeleri güncelleyebilir.
5. Frontend, geçerli görünen veriyi sunucuya gönderir; backend bu veriyi güvenilmez kabul ederek sunucu tarafında yeniden doğrular ve işler. Form gönderimi için kullanılan istemci tarafı kodu da frontend kapsamındadır.

Sonuç: Formun varlığı HTML, biçimi CSS, istemci tarafındaki kontrol ve anlık uyarı JavaScript ile açıklanır. Form kontrolü yapılmış olması, verinin sunucu tarafından kabul edildiği anlamına gelmez; bu iki kontrol katmanını karıştırmamak gerekir.