1 puan yazan GN⁺ 2024-09-30 | 1 yorum | WhatsApp'ta paylaş

Sağlam bir frontend nasıl oluşturulur: kademeli geliştirme

  • HTML ile başlayın

    • Kamu hizmetleri yalnızca HTML ile de işlevsel olmalıdır
    • HTML katmanı hata toleranslıdır; bu sayede eski tarayıcılarda da çalışabilir
    • Doğru semantik işaretleme kullanılmalı ve belge yapısı mantıklı biçimde kurgulanmalıdır
  • CSS kullanımı

    • Hizmet, CSS kullanılarak stillendirilebilir
    • CSS katmanı, tek tek bildirimleri yok sayabilen hata toleranslı bir yapıya sahiptir
    • CSS-in-JS gibi tekniklerden kaçınılmalıdır
  • JavaScript kullanımı

    • JavaScript, etkileşimli öğeler eklemek için kullanılır
    • JavaScript katmanı hata toleranslı değildir ve hatalar oluşabilir
    • Tarayıcı API'leri için özellik algılama, polyfill ekleme ve transpile etme gibi yöntemlerle uyumluluk artırılabilir
    • JavaScript, HTML ve CSS'yi tamamlayıcı bir rol üstlenmelidir
  • JavaScript alternatifleri

    • Kullanıcı ihtiyaçlarını JavaScript olmadan da karşılayabilecek basit çözümler değerlendirilmelidir
    • Alternatifler arasında veri tabloları gösterimi, veriyi dışa aktarma ve grafiklerin önceden görüntü olarak render edilmesi yer alır
  • İstemci tarafı JavaScript framework'leri kullanımı

    • Karmaşık bir kullanıcı arayüzü söz konusu değilse framework kullanımından kaçınılmalıdır
    • Framework kullanımı; kod tabanının büyümesi, performans sorunları ve üçüncü taraf koda bağımlılık gibi problemlere yol açabilir
    • Framework kullanıldığında, her kullanıcı arayüzü ayrı bir bileşen olarak tasarlanmalıdır
  • CSS veya JavaScript'in yüklenmemesi ya da çalışmamasının nedenleri

    • Ağ hataları, tarayıcı eklentileri, üçüncü taraf sağlayıcı kesintileri, DNS sorgulama başarısızlıkları ve tarayıcı güncellemelerinin neden olduğu hatalar buna sebep olabilir
    • Bazı kullanıcılar tarayıcı özelliklerini bilinçli olarak devre dışı bırakabilir
  • Tek sayfa uygulamaları (SPA)

    • Hizmetler tek sayfa uygulaması olarak geliştirilmemelidir
    • SPA'ler erişilebilirliği zayıflatabilir; sayfalar arası geçişte odak yönetimi sorunları, geri/ileri düğmelerinin kullanılamaması gibi problemler doğurabilir
  • Hizmet testi

    • JavaScript'e veya JavaScript framework'lerine büyük ölçüde bağımlı bileşenler, farklı tarayıcı ve cihazlarda çalışmalıdır
    • Erişilebilirlik açısından test edilmelidir
  • Vaka çalışmaları ve ilgili kılavuzlar

    • Neden kademeli geliştirme kullanılmalı
    • Farklı cihazlar için tasarım
    • Frontend performansı nasıl test edilir
    • WCAG 2.2'yi anlama

GN⁺ özeti

  • Kademeli geliştirme, web sitesini HTML, CSS ve JavaScript sırasıyla inşa etme yaklaşımıdır
  • Bu yöntem, hizmetin hata toleransını artırır ve farklı tarayıcılar ile cihazlarda çalışmasını sağlar
  • JavaScript tamamlayıcı bir rol oynamalı ve alternatif çözümler değerlendirilmelidir
  • Tek sayfa uygulamalarından, erişilebilirlik sorunları nedeniyle kaçınılmalıdır
  • Hizmet testi, farklı ortamlarda erişilebilirliğin güvence altına alınmasını sağlamalıdır

1 yorum

 
GN⁺ 2024-09-30
Hacker News görüşü
  • JavaScript framework'leri kullanırken, bunun kullanıcıya ne fayda sağladığını kanıtlayabilmek gerekir

    • Uygulama çevrimdışıyken bile masaüstü uygulaması gibi çalışabiliyorsa, bunu single-page application (SPA) olarak yapmak daha uygundur
    • Örnek olarak Photopea, Google Docs/Sheets, tldraw verilebilir
    • İnternet bağlantısı gerektiren ve birden fazla sayfaya ihtiyaç duyan bir uygulamadaysa, gezinmeyi tarayıcının yönetmesine izin vermek daha iyidir
  • SPA'lerin dezavantajları olarak gösterilen noktalar

    • Yardımcı teknolojileri kullanan kullanıcılar, sayfa geçişlerinde bağlam değişimini fark edemez
    • Sayfa geçişlerinde odak yönetimi yapılamaz
    • Tarayıcının geri ve ileri düğmeleri kullanılamaz
    • Ağ bağlantısı kesildiğinde hatadan kurtulunamaz
    • Ancak bu sorunlar SPA'lerde de çözülebilir
  • Keşke tüm internet bu tavsiyeye uysa

  • Basit çözümlere öncelik verilmesi gerekir

  • Linux'un neden listede olmadığını merak ediyorum

  • Görünüşe göre birçok kişi bu yaklaşımı beğeniyor

    • Genel eğilimin neden gereksiz yere JavaScript ve React gibi framework'leri kullanmak olduğu merak konusu
  • HTML ve sunucuda önceden alınmış veriler kullanılıyor, istemcide yapılabilecek işler de istemcide yapılıyor

    • Minimum düzeyde CSS ve vanilla JS kullanılıyor
    • İş arkadaşlarına eski usul görünebilir ama hiçbir şeyden geri kalınmıyor
  • Birçok SPA sorunlu ama tüm SPA'ler sorunlu değil

    • VitePress ve SolidJS gibi örneklere bakıldığında iyi çalışıyorlar
    • JavaScript kullanmayan insan neredeyse yok
    • Düşük özellikli cihazlarda bile JavaScript işlemek sorun yaratmıyor
    • Erişilebilirlik sorunları, SPA kullanılıp kullanılmamasıyla ilgili değil
    • Svelte'te erişilebilirlik uyarı özelliği de yerleşik olarak bulunuyor
  • Sunucu tarafı render da her durumda iyi değildir

    • İstemci tarafı JavaScript framework'leri kullanırken dikkatli olmak gerekir
    • Kod tabanı büyüyebilir ve istemci tarafında işlenmesi gereken iş arttıkça performans sorunları ortaya çıkabilir
    • Üçüncü taraf koda bağımlı hale gelinerek bakım zorlaşabilir
    • JavaScript framework'leri kullanırken, bunun kullanıcıya ne fayda sağladığını kanıtlayabilmek gerekir
    • Olumsuz etkilerin farkında olup bunları azaltabilmek gerekir
    • Framework'ler yalnızca HTML ve CSS ile yapılamayan kısımlarda kullanılmalıdır
    • Her kullanıcı arayüzü parçası ayrı bir bileşen olarak tasarlanmalıdır
    • JavaScript yüklenmese bile sayfanın geri kalanı normal şekilde yüklenir