Frontend Rehberleri

Frontend, bir web sitesinin ya da uygulamanın kullanıcının doğrudan gördüğü ve etkileşime girdiği arayüz katmanıdır. Sayfa düzeni, renkler, menüler, butonlar ve formlar frontend'in parçasıdır. Temelinde HTML (yapı), CSS (görünüm) ve JavaScript (etkileşim) bulunur; büyük projelerde React, Vue veya Angular gibi kütüphane ve çatılar kullanılır.

Frontend kullanıcının tarayıcıda gördüğü arayüzdür, backend ise arka planda çalışan ve veriyi işleyen sunucu tarafıdır. Bir e-ticaret sitesinde ürün listesinin ekranda gösterilmesi frontend'in, ürün bilgilerinin veritabanından çekilip siparişin kaydedilmesi backend'in işidir. İki katman genellikle API'ler üzerinden haberleşir; her ikisini de geliştiren yazılımcılara full stack geliştirici denir.

React, Meta tarafından geliştirilen ve kullanıcı arayüzleri oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Arayüzü yeniden kullanılabilir bileşenlere böler ve veri değiştiğinde ekranın yalnızca etkilenen kısmını günceller. Web arayüzlerinde en yaygın kullanılan araçlardan biridir; React Native ile aynı yaklaşım mobil uygulamalara da taşınabilir.

Next.js, Vercel tarafından geliştirilen ve React üzerine kurulu açık kaynaklı bir web çatısıdır. Sayfaların sunucuda ya da derleme sırasında hazırlanmasını, dosya tabanlı yönlendirmeyi, görsel optimizasyonunu ve API uçlarını tek projede sunar. Hızlı açılan ve arama motorlarının kolayca okuyabildiği siteler için sık tercih edilir.

Server side rendering (sunucu taraflı render), bir sayfanın HTML'inin kullanıcının tarayıcısında değil sunucuda hazırlanıp hazır olarak gönderilmesidir. Böylece içerik sayfa açılır açılmaz görünür ve arama motorları sayfayı JavaScript çalıştırmadan okuyabilir. Karşıtı olan client side rendering'de sayfa tarayıcıda JavaScript ile oluşturulur; bu yöntem etkileşimli uygulamalarda esneklik sağlar ama ilk açılışı yavaşlatabilir.

Web erişilebilirliği, bir sitenin görme, işitme, hareket veya bilişsel engeli olanlar dahil herkes tarafından kullanılabilmesidir. Ekran okuyucuyla anlaşılabilen içerik, klavyeyle kullanılabilen menü ve formlar, yeterli renk kontrastı ve görseller için alternatif metin temel gerekliliklerdir. Uluslararası ölçüt W3C'nin yayımladığı WCAG yönergeleridir; anlamlı başlıklar ve alternatif metinler gibi düzenlemeler arama motorlarına da yardımcı olur.