Televizyon yayın akışı sitesi geliştirmeye başladığımda bunun basit bir içerik projesi olacağını düşünmüştüm. İlk bakışta mantık oldukça düz görünüyordu:
Kanal listesi
Yayın saatleri
Program başlıkları
Kullanıcıya hızlı erişim
Fakat iş geliştirme tarafına geçince durum farklılaştı.
Özellikle mobil trafik, performans, SEO ve sürekli güncellenen veriler bir araya gelince küçük görünen bir proje zamanla ciddi optimizasyon gerektiren bir sisteme dönüştü.
Bu yazıda TV yayın akışı projesi geliştirirken karşılaştığım teknik sorunları ve uyguladığım çözümleri paylaşacağım.
- Sürekli Değişen Veri Yapısı Beklediğimden Zor Çıktı
Yayın akışları statik içerik değil.
Her gün:
yeni programlar ekleniyor
saatler değişiyor
özel yayınlar geliyor
içerikler güncelleniyor
Başta verileri doğrudan HTML içine yazmayı denedim. Fakat kısa sürede yönetilemez hale geldi.
İlk yaklaşım:
<div class="program">
<span>20:00</span>
<span>Ana Haber</span>
</div>
<div class="program">
<span>22:00</span>
<span>Film Kuşağı</span>
</div>
Bu yöntem küçük ölçek için çalışıyor ancak kanal sayısı arttığında bakım zorlaşıyor.
Daha sürdürülebilir yapı JSON tabanlı veri modeli oldu:
[
{
"time":"20:00",
"title":"Ana Haber"
},
{
"time":"22:00",
"title":"Film Kuşağı"
}
]
Frontend tarafında:
schedule.forEach(item=>{
container.innerHTML += `
<div class="program">
<span>${item.time}</span>
<span>${item.title}</span>
</div>
`
});
Arayüzü veriden ayırmak bakım sürecini ciddi şekilde kolaylaştırdı.
- Mobilde Yatay Kaydırma Beklediğimden Fazla Maliyet Oluşturdu
TV projelerinde genelde çok sayıda kanal logosu bulunuyor.
İlk çözüm klasik yatay kaydırma alanıydı:
.channels{
overflow-x:auto;
white-space:nowrap;
}
Başlangıçta çalışıyordu fakat kanal sayısı büyüdükçe mobil cihazlarda bazı sorunlar ortaya çıktı:
fazla DOM yükü
kaydırma takılmaları
düşük FPS
gereksiz render işlemleri
Sonrasında görünmeyen öğeleri yüklememeye başladım.
Örnek:
const visibleItems = channels.slice(start,end);
Basit görünse de özellikle düşük donanımlı cihazlarda fark hissedildi.
- Lazy Olmadan Sayfa Ağırlığı Hızla Artıyor
Kanal sitelerinde logo sayısı çok yüksek olabiliyor.
İlk sürüm:
<img src="kanal-logo.png">
Yüzlerce logo yüklenmeye başladığında ağ yükü hızla arttı.
Daha sonra:
<img
="lazy"
src="kanal-logo.png"
alt="kanal logosu">
Tarayıcının yerleşik lazy desteği ciddi fayda sağladı.
Ekstra JavaScript kullanmadan ilk yükleme süresi azaldı.
- Tekrarlanan HTML Yerine Bileşen Mantığı Daha Temiz Oldu
İlk sürümlerde her kanal kartı manuel yazılıyordu:
<div class="channel">
<img src="kanald-logo.png">
<h3>Kanal D</h3>
</div>
Bir süre sonra yüzlerce tekrar oluştu.
Daha sonra yapı fonksiyonlaştırıldı:
function channelCard(channel) {
return `
<div class="channel">
<img src="kanald-logo.png">
<h3>Kanal D</h3>
</div>
`;
}
Bu yaklaşım:
kod tekrarını azalttı
bakım sürecini kolaylaştırdı
ölçeklenebilirliği artırdı
Ayrıca Dev.to editöründe bazı template literal örneklerinin sorun çıkarabildiğini fark ettim. Bu yüzden örnek kodlarda sade yapı kullanmak daha güvenli olabiliyor.
- SEO Tarafında En Büyük Sorun Dinamik İçerik Oldu
Yayın akışı siteleri her gün değişiyor.
Burada temel soru şuydu:
Arama motorları sürekli güncellenen içeriği ne kadar sağlıklı algılıyor?
Bazı çözümler:
anlamlı URL yapıları
yapılandırılmış veriler
sitemap güncellemeleri
hızlı sayfa yüklenmesi
gereksiz JavaScript azaltılması
Örnek:
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"TVSeries",
"name":"Örnek Program"
}
</script>
Yapısal veriler küçük görünse de arama motorlarının içeriği anlamasında yardımcı olabiliyor.
- Fazla JavaScript Her Zaman Çözüm Değil
Bir noktada fark ettiğim önemli şeylerden biri:
Sorunların çoğu daha fazla JavaScript eklenerek çözülmüyor.
Bazen:
daha az DOM
daha az istek
daha küçük CSS
daha sade yapı
çok daha iyi sonuç verebiliyor.
Özellikle mobil ağırlıklı projelerde hafiflik önemli hale geliyor.
Sonuç
TV yayın akışı sitesi ilk bakışta basit görünüyor.
Ancak kullanıcı sayısı ve veri miktarı arttığında:
performans
veri yönetimi
SEO
mobil optimizasyon
ölçeklenebilirlik
bir anda projenin merkezine yerleşiyor.
Küçük görünen projeler bazen büyük sistemlerden daha fazla optimizasyon gerektirebiliyor.
Kullanılan Kaynaklar:
• Schema.org — BroadcastService: https://schema.org/BroadcastService
• Schema.org — TelevisionChannel: https://schema.org/TelevisionChannel
• Örnek Çalışma - TV Yayın Akışı
• Google Search Central — Video Structured Data: https://developers.google.com/search/docs/appearance/structured-data/video