Rehber
JavaScript ve TypeScript ile Web Uygulaması: Arayüz Kütüphanesi Ne Zaman Gerekir?
Tarayıcıda çalışan her etkileşimin arkasında JavaScript vardır. TypeScript’in ne kattığını, React ve Vue gibi kütüphanelerin hangi projede gerekli, hangisinde gereksiz bir yük olduğunu anlattık.
· 4 dk okuma · Mood Reklam
Yönetim panelinizde bir siparişin durumunu değiştirdiğinizde bütün sayfa beyaz ekrana dönüp yeniden mi yükleniyor, yoksa yalnızca o satır mı güncelleniyor? Bu küçük fark, personelin gün içinde kaç kez beklediğini belirler ve arkasında çoğunlukla tek bir dil vardır: JavaScript. Bu yazı, bir web uygulaması yaptırırken tarayıcı tarafında hangi kararların sizi doğrudan ilgilendirdiğini anlatıyor.
Tarayıcının ortak dili
Web sayfasının iskeleti HTML, görünüşü CSS ile kurulur; tıklamaya, yazmaya, kaydırmaya tepki veren her şey ise JavaScript’tir. Chrome, Safari ya da Firefox fark etmez; bütün tarayıcılar JavaScript çalıştırır. Bu yüzden tarayıcıda çalışan bir arayüzde JavaScript pratikte bir tercih değil, zorunluluktur. Asıl tercih, onun ne kadar ve nasıl kullanılacağıdır.
Basit bir tanıtım sitesinde birkaç satır JavaScript yeter: menü açılır, galeri kayar, form gönderilmeden önce telefon numarası denetlenir. Personelin gün boyu içinde çalıştığı bir sipariş ya da randevu panelinde ise iş büyür ve düzen ister.
JavaScript’in bir özelliği de tarayıcının dışına taşınmış olmasıdır. Aynı dil Node.js ile sunucuda, React Native ile telefonda da çalışabilir. Bu, küçük bir ekibin web paneli, sunucu ve mobil uygulama arasında daha rahat gidip gelmesini sağlar. Yine de her parçayı aynı dille yazmak kendiliğinden doğru değildir; sunucu tarafında ağır hesap ya da yoğun raporlama varsa başka bir dil daha uygun düşebilir. Bu yazıda yalnızca tarayıcıda, yani kullanıcının gördüğü tarafta kalıyoruz.
TypeScript: aynı dil, daha az sürpriz
TypeScript, JavaScript’in üzerine tür denetimi ekleyen bir katmandır. Yazılımcı bir alanın sayı mı, metin mi, tarih mi olduğunu baştan belirtir; yanlış kullanım daha kod yazılırken uyarı verir. Tarayıcı TypeScript’i doğrudan çalıştırmaz; kod yayından önce JavaScript’e çevrilir.
Sizin açınızdan anlamı şudur: TypeScript ile yazılmış bir projeyi sonradan devralan geliştirici, hangi verinin nereden gelip nereye gittiğini daha kolay okur. Ekranı ve veri alanı çok olan bir panelde bu, bakımı kolaylaştıran sessiz bir önlemdir. Tek sayfalık küçük bir işte ise gereksiz bir tören olabilir.
React, Vue ve benzerleri ne işe yarar?
React ve Vue, arayüzü küçük ve tekrar kullanılabilir parçalara (bileşen) bölen JavaScript kütüphaneleridir. Bir “müşteri kartı” bir kez yazılır; listede, arama sonucunda ve detay ekranında aynı biçimde kullanılır. Veri değiştiğinde ekranın hangi kısmının yenileneceğini kütüphane izler. Angular ve Svelte gibi başka seçenekler de vardır; hangisinin seçildiğinden çok, projede tek bir yolun tutarlı biçimde izlenmesi önemlidir.
Bu kütüphanelerin bir başka artısı, bilginin mobile taşınabilmesidir: React bilen bir ekip, React Native ile mobil uygulama tarafına geçerken sıfırdan başlamaz.
Her siteye arayüz kütüphanesi gerekmez
| Durum | Uygun yaklaşım |
|---|---|
| Hizmetleri, adresi ve iletişimi anlatan kurumsal site | Sunucuda hazırlanan sayfalar ve az miktarda JavaScript. Hızlı açılır, arama motoru içeriği rahat okur. |
| Randevu formu olan klinik ya da kuaför sitesi | Sayfanın geneli sade; yalnızca takvim bölümü etkileşimli. |
| Personelin gün boyu açık tuttuğu sipariş, stok ya da bayi paneli | React ya da Vue gibi bir kütüphane ve TypeScript mantıklı hâle gelir. |
| Birden çok işletmenin abonelikle kullandığı SaaS ürünü | Bileşen tabanlı arayüz ve tür denetimi neredeyse şarttır; ürün büyüdükçe düzen korunur. |
İskenderun’da çarşıdaki bir dükkânın ya da bir lokantanın tanıtım sitesi için React tabanlı ağır bir yapı kurmak hem açılışı yavaşlatır hem bakım yükünü gereksiz yere artırır. Böyle işlerde web tasarım tarafında sade kalmak daha doğrudur.
Kötü kurulmuş JavaScript’in bedeli
- Geç açılan sayfa: Tarayıcı büyük JavaScript dosyalarını indirip çalıştırmadan ekranı gösteremez. Zayıf çeken bir telefonda bu, boş ekranda beklemek demektir.
- Arama motorunun göremediği içerik: Bütün içeriği tarayıcıda sonradan oluşturan siteler, doğru kurulmazsa aramada zayıf kalabilir. İçeriğin sunucuda önceden hazırlanması (server-side rendering) bu sorunu çözer ama baştan planlanmalıdır.
- Bağımlılık yığını: Modern bir JavaScript projesi çok sayıda dış pakete dayanır. Bu paketler güncellenmezse güvenlik açıkları birikir; çok geç kalınırsa güncelleme başlı başına bir proje olur.
- Erişilebilirlik: Özel yapılmış düğme ve menüler klavyeyle ya da ekran okuyucuyla kullanılamayabilir. Bu konuyu erişilebilir web arayüzü yazısında ayrıca ele aldık.
Teklif görüşmesinde sorulacaklar
- Arayüz hangi kütüphaneyle yazılacak ve neden o seçildi?
- TypeScript kullanılacak mı?
- Sayfalar arama motoruna nasıl görünecek; içerik sunucuda mı hazırlanıyor?
- Dış paketlerin güncellenmesi bakım kapsamında mı?
- Panel telefonda, küçük ekranda nasıl çalışacak?
Bu soruların cevabı, yazılımcının işi sizin ihtiyacınıza göre mi yoksa kendi alışkanlığına göre mi kurduğunu gösterir. Tarayıcıda çalışan bir panel ya da SaaS ürünü düşünüyorsanız özel yazılım sayfasındaki seçeneklere göz atın; İskenderun’daysanız iş akışınızı yerinde anlatabilir, arayüz kararını ondan sonra birlikte verebiliriz.
