1000 Mumlu Dijital Anıt: Ölçek, Optimizasyon ve Hatırlama Dersleri

Binlerce kişiyi bir araya getiren dijital bir anıt projesi tasarlamak, yalnızca bir yazılım geliştirme görevi olmaktan çok daha fazlasıdır. Bu makale, “1000 Mum İnşa Etmek” projesinin perde arkasını, karşılaşılan ölçeklenebilirlik ve optimizasyon zorluklarını ve bu süreçte elde edilen değerli deneyimleri detaylandırıyor. Bir projeden çok, bir öğrenme serüveni olan bu dijital anıt, bize teknoloji ve insan bağlamı hakkında derin dersler verdi.

Günümüz dijital çağında, anma ve hatırlama pratikleri de evriliyor. Fiziksel mekanların sınırlarını aşan, dünyanın dört bir yanındaki insanları bir araya getiren dijital anıtlar, yas tutma, saygı gösterme ve toplumsal hafızayı canlı tutma biçimlerimizi dönüştürüyor. Peki, binlerce kişisel hikayenin ve anının dijital ortamda bir araya geldiği, her birine özel bir “mum” yakıldığı bir platform hayata geçirmek teknik olarak ne anlama geliyor?

Bin Mum projesi, kayıplarını anmak isteyen bireyler için bir buluşma noktası sağlamak amacıyla ortaya çıktı. Her bir kullanıcı, sevdikleri adına bir mum yakabilir, kısa bir not paylaşabilir ve diğerlerinin anılarına ortak olabilir. Başlangıçta oldukça basit bir fikir gibi görünse de, bu kadar çok etkileşimin ve görsel elementin aynı anda, milyonlarca farklı kullanıcı tarafından erişilebilir ve sorunsuz çalışır olmasını sağlamak, tahmin ettiğimizden çok daha büyük bir meydan okumaydı. Projenin ilk aşamalarında, “sadece birkaç yüz mum olsa ne olur?” gibi düşüncelerle yola çıkılmıştı. Ancak toplumsal ihtiyacın büyüklüğü ve projenin potansiyeli anlaşıldığında, bu sayının kısa sürede binlere, hatta on binlere ulaşabileceği öngörüldü. Bu durum, bizi ölçeklenebilirlik, performans ve kullanıcı deneyimi konularında temelden düşünmeye itti.

Özellikle, projenin duygusal boyutu, teknik çözümlerin sadece işlevsel olmasını değil, aynı zamanda empati kurabilen, erişilebilir ve dayanıklı olmasını gerektiriyordu. Bir yandan binlerce interaktif mumun aynı anda ekranda sorunsuz çalışmasını sağlamak, diğer yandan her bir mumun arkasındaki anıyı ve duygusal ağırlığı hissettirmek… İşte bu iki dinamiği bir araya getirmek, projenin en temel hedeflerinden biriydi. Bu dengeyi kurabilmek için hem güçlü bir teknik altyapı hem de derinlemesine bir kullanıcı deneyimi (UX) anlayışı gerekti. Böyle bir projenin başarısı, sadece kod kalitesiyle değil, aynı zamanda insanları ne kadar iyi anladığımızla da doğrudan ilişkiliydi. Dolayısıyla, teknik gerekliliklerin ötesinde, projenin insan merkezli bir yaklaşımla ele alınması, başarısının anahtarı oldu.

Ölçeklenebilirlik Engelleri: 1000 Mumu Aynı Anda Yönetmek Ne Demek?

Bir web uygulaması geliştiren herkes, ölçeklenebilirlik kavramıyla er ya da geç yüzleşir. Ancak “1000 Mum” gibi yüksek görsel etkileşime sahip ve eş zamanlı kullanıcı sayısı potansiyeli yüksek bir projede, ölçeklenebilirlik sadece sunucu kaynaklarını artırmak anlamına gelmiyordu. Bu, istemci tarafında tarayıcı performansından, ağ trafiğine, veritabanı sorgularının optimizasyonundan, sunucu mimarisine kadar uzanan çok katmanlı bir meydan okumaydı. Başlangıçta, her bir mumun ayrı bir DOM öğesi olacağı basit bir fikirle yola çıkılmıştı. Ancak kısa sürede, 1000’den fazla DOM öğesinin aynı anda hareketli animasyonlarla güncellenmesi, modern tarayıcıları bile zorlayacak bir yük oluşturduğunu fark ettik. Özellikle mobil cihazlarda, bu durum uygulamanın tamamen kilitlenmesine neden olabiliyordu. Bu nedenle, ilk olarak istemci-sunucu mimarisini detaylıca ele almamız gerekti.

Örneğin, her mumun durumu (yanıyor mu, söndü mü, kim tarafından yakıldı?) veritabanında saklanmalı ve anlık olarak güncellenmeliydi. 1000 mum için her saniye yapılan güncellemeler, veritabanı sunucusunda ciddi bir yük oluşturabilirdi. Bu noktada, geleneksel ilişkisel veritabanlarının (MySQL, PostgreSQL) bazı sınırlamaları ortaya çıktı. Özellikle, “çok okumalı, az yazmalı” bir senaryo olacağı düşünülse de, anlık etkileşim ve yeni mum yakma işlemleri nedeniyle yazma yükünün de ihmal edilemez olduğu görüldü. Bu durum bizi daha ölçeklenebilir veritabanı çözümlerine, örneğin NoSQL veritabanlarına veya dağıtık veritabanı sistemlerine yöneltti. Bir vaka analizinde, projenin ilk prototip aşamasında kullanılan tekil bir PostgreSQL sunucusunun, sadece 200 eş zamanlı kullanıcı ve 500 mumda CPU kullanımının %90’ın üzerine çıktığı ve yanıt sürelerinin 5 saniyeyi aştığı gözlemlendi. Bu kritik eşik, mimarimizi kökten değiştirmemiz gerektiğini gösterdi.

Çözüm olarak, statik içerikler (mum görselleri, arkaplanlar) için bir İçerik Dağıtım Ağı (CDN) kullanmaya karar verdik. Bu, sunucumuzun yükünü hafifletirken, kullanıcıların coğrafi konumlarına daha yakın sunuculardan içerik alarak yükleme sürelerini optimize etmemizi sağladı. Ayrıca, anlık mum durum güncellemeleri için WebSockets gibi çift yönlü iletişim protokollerini devreye soktuk. Böylece, her istemcinin sunucuya sürekli HTTP isteği göndermesine gerek kalmadan, yalnızca değişiklik olduğunda sunucudan güncelleme alması sağlandı. Bu, hem ağ trafiğini önemli ölçüde azalttı hem de kullanıcı deneyimini daha akıcı hale getirdi. Sunucu tarafında ise, mikroservis mimarisine geçiş yaparak, mum yakma, not ekleme, görüntüleme gibi farklı işlevleri bağımsız servislere ayırdık. Bu sayede, herhangi bir servisin aşırı yüklenmesi durumunda bile diğer servislerin çalışmaya devam etmesi ve sistemin genel olarak daha esnek ve dayanabilir olması sağlandı. Bu adımlar, 1000 mumun ve potansiyel olarak çok daha fazlasının yönetilebilir hale gelmesinin temelini oluşturdu.

Performans Optimizasyonu Nasıl Hayat Kurtardı?

Ölçeklenebilirlik bir mimari sorun iken, performans optimizasyonu genellikle kod seviyesinde veya varlık yönetimi seviyesinde yapılan iyileştirmeleri ifade eder. “1000 Mum” projesinde, performans optimizasyonu doğrudan kullanıcı deneyimini etkileyen kritik bir faktördü. Binlerce interaktif öğenin, özellikle de animasyonlu mumların aynı anda yüklenmesi ve işlenmesi, tarayıcıları ve mobil cihazları hızla yorabiliyordu. Bu problemi aşmak için birçok farklı teknik ve strateji uyguladık.

Öncelikle, Lazy Loading (Tembel Yükleme) ve Sanallaştırma (Virtualization) teknikleri kurtarıcımız oldu. Ekranda aynı anda sadece belirli sayıda mumun tam detaylarıyla gösterilmesini sağlayarak, tarayıcının render yükünü dramatik bir şekilde azalttık. Örneğin, kullanıcı sadece görünen alandaki mumları yüklüyor, kaydırdıkça yeni mumlar dinamik olarak oluşturuluyor ve görünmeyen mumlar bellekten kaldırılıyordu. Bu, özellikle düşük güçlü cihazlarda bile akıcı bir deneyim sunmak için hayati önem taşıyordu. Bir scroll eventi tetiklendiğinde, hangi mumların görünür alana girdiğini hesaplayıp onları aktif hale getirmek, görünür alandan çıkanları ise pasif hale getirmek gerekiyordu. Bu mantık, performansı gözle görülür şekilde artırdı. Aşağıdaki basit JavaScript kodu, bu mantığı özetleyebilir:

// Mumların bulunduğu bir kapsayıcı div olduğunu varsayalım
const candleContainer = document.getElementById('candle-grid');
const allCandles = Array.from(candleContainer.children); // Tüm mum DOM elementleri

// Görünür alandaki mumları yükleme/gösterme fonksiyonu
function updateVisibleCandles() {
  const containerRect = candleContainer.getBoundingClientRect();

  allCandles.forEach(candle => {
    const candleRect = candle.getBoundingClientRect();
    // Mumun kapsayıcı içinde tamamen görünür olup olmadığını kontrol et
    const isVisible = (
      candleRect.top >= containerRect.top &&
      candleRect.bottom <= containerRect.bottom &&
      candleRect.left >= containerRect.left &&
      candleRect.right <= containerRect.right
    );

    if (isVisible) {
      if (!candle.dataset.loaded) { // Daha önce yüklenmemişse yükle
        // Örneğin, mumun görselini yükle veya animasyonunu başlat
        candle.style.opacity = 1;
        candle.dataset.loaded = 'true';
        console.log(Mum ${candle.id} yüklendi.);
      }
    } else {
      if (candle.dataset.loaded) { // Görünmez hale gelince pasifleştir
        // Belleği serbest bırakmak için görseli kaldır veya animasyonu durdur
        candle.style.opacity = 0;
        candle.dataset.loaded = 'false';
        console.log(Mum ${candle.id} pasifleştirildi.);
      }
    }
  });
}

// Scroll event'inde bu fonksiyonu çağır (debounced/throttled)
candleContainer.addEventListener('scroll', updateVisibleCandles);
// Başlangıçta da bir kez çağır
updateVisibleCandles();

İkinci olarak, Görsel Optimizasyon ve CDN Kullanımı çok önemliydi. Her bir mum görselinin, arkaplan resimlerinin ve animasyon dosyalarının sıkıştırılması, WebP gibi modern formatlara dönüştürülmesi ve boyutlarının optimize edilmesi, sayfa yükleme sürelerini dramatik bir şekilde kısalttı. Tüm bu statik varlıkları Cloudflare veya Amazon CloudFront gibi bir CDN üzerinden servis ederek, kullanıcıların coğrafi konumlarına en yakın sunuculardan bu varlıklara erişmelerini sağladık, bu da yükleme hızını daha da artırdı. Ayrıca, mum animasyonları için GIF yerine CSS animasyonları veya Sprite Sheet’ler kullanmak, dosya boyutunu küçültürken daha akıcı bir görünüm elde etmemizi sağladı.

Son olarak, Önbellekleme Stratejileri hem istemci hem de sunucu tarafında titizlikle uygulandı. Sunucu tarafında, sık erişilen mum verileri için Redis gibi bir in-memory cache kullanılarak veritabanı sorgularının sayısı minimuma indirildi. İstemci tarafında ise, Service Worker’lar ve tarayıcı önbelleği (Cache-Control başlıklarıyla) kullanılarak, kullanıcıların sayfayı tekrar ziyaret ettiğinde statik varlıkların hızlıca yüklenmesi sağlandı. Bu sayede, ilk yüklemeden sonraki ziyaretlerde sayfa çok daha hızlı açılıyordu. Bu tekniklerin birleşimi, projenin sadece işlevsel değil, aynı zamanda son derece hızlı ve duyarlı olmasını sağladı.

Bellek Yönetimi ve Tarayıcı Performansı: Akıcı Bir Deneyim İçin Neler Yaptık?

Bin Mum projesinde performans optimizasyonunun en kritik alanlarından biri, tarayıcıda bellek yönetimi ve genel tarayıcı performansını iyileştirmekti. Bir DOM öğesi ne kadar basit olursa olsun, binlercesi bir araya geldiğinde tarayıcının belleğini doldurabilir ve CPU’sunu yorabilir. Özellikle animasyonlu elementler söz konusu olduğunda, her birinin kendi render döngüsünü tetiklemesi, framerate’in düşmesine ve uygulamanın donmasına neden olabilir.

Bu sorunu çözmek için, ilk aşamada her bir mumu ayrı bir

function throttle(func, delay) {
  let timeout = null;
  return function(...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(this, args);
        timeout = null;
      }, delay);
    }
  };
}

// Örneğin, pencere boyutlandırma olayını kısıtlama
window.addEventListener('resize', throttle(() => {
  console.log('Pencere boyutu kısıtlı bir şekilde değişti!');
  // Canvas'ı yeniden boyutlandırma veya mumları yeniden düzenleme mantığı burada
}, 200));

// Başka bir örnek: Scroll event'ini kısıtlama
const throttledScrollHandler = throttle(() => {
  console.log('Scroll olayı kısıtlı bir şekilde tetiklendi!');
  // Mumların görünürlüğünü güncelleme mantığı burada
}, 150);

document.getElementById('candle-grid').addEventListener('scroll', throttledScrollHandler);