DEV Community

Yayin
Yayin

Posted on

TV Yayın Akışı Sitesi Geliştirirken Öğrendiğim Teknik Dersler

#tv

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.

  1. 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>
Enter fullscreen mode Exit fullscreen mode

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>
`

});
Enter fullscreen mode Exit fullscreen mode

Arayüzü veriden ayırmak bakım sürecini ciddi şekilde kolaylaştırdı.

  1. 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;
}
Enter fullscreen mode Exit fullscreen mode

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.

  1. Lazy Loading 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
loading="lazy"
src="kanal-logo.png"
alt="kanal logosu">

Tarayıcının yerleşik lazy loading desteği ciddi fayda sağladı.

Ekstra JavaScript kullanmadan ilk yükleme süresi azaldı.

  1. 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>
Enter fullscreen mode Exit fullscreen mode

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>
  `;
}
Enter fullscreen mode Exit fullscreen mode

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.

  1. 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.

  1. 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

Top comments (0)