38 modül, birbirine bağlı akıllı sistem. Player, favoriler, router ve daha fazlası.
Web sitesinin "beyni"! Butona tıkladığınızda şarkının çalması, favorilere ekleme, sayfalar arası geçiş... Tüm bu etkileşimler JavaScript ile çalışır. 38 ayrı dosya var ama hepsi birbirleriyle konuşuyor, orkestra gibi uyum içinde çalışıyor.
Müzik çalmanın kalbi. Çal, duraklat, ileri, geri, ses ayarı. HLS stream desteği.
Favorilere ekle/çıkar. Anında kalp animasyonu. Sunucuyla senkron.
Sayfa yenilemeden gezinme. Müzik kesilmez, hızlı geçişler.
Cihazı tanır: iPhone mu, Android mi? Hızlı mı, yavaş mı? Ona göre davranır.
İnternet hızını ölçer. Yavaşsa düşük kalite, hızlıysa yüksek kalite stream.
Önceden yükleme takibi. Takılma olmadan kesintisiz dinleme garantisi.
Tüm JavaScript modülleri aynı "hafızayı" paylaşır. Şu an çalan şarkı, kullanıcı bilgisi, tema tercihi... Her yerden erişilebilir, değiştiğinde herkes haberdar olur.
Veri değiştiğinde UI otomatik güncellenir. Manuel DOM manipülasyonu yok, hataya yer yok.
JavaScript kodları yüklenip çalışırken arka planda şu işlemler gerçekleşir:
Vite ile derlenen app.js bundle'ı yüklenir. ES6 modülleri tek dosyada birleştirilmiştir. Tree-shaking ile kullanılmayan kodlar çıkarılmıştır. Gzip ile sıkıştırılmış halde gönderilir.
public/build/assets/app-[hash].js - ~150KB gzipped
Player modülleri IIFE (Immediately Invoked Function Expression) pattern ile kapsüllenmiştir. Global scope'u kirletmez. Her modül kendi namespace'inde çalışır.
(function() { window.PlayerCore = { ... }; })();
DOMContentLoaded sonrası Alpine.start() çalışır. Tüm x-data direktifleri parse edilir, reactive proxy'ler oluşturulur. DOM mutasyonları izlenir ve otomatik re-render yapılır.
Alpine.data('player', () => ({ playing: false, ...methods }))
Modüller arası iletişim için CustomEvent sistemi kullanılır. document üzerinde pub/sub pattern uygulanır. Loosely coupled mimari sayesinde modüller birbirinden bağımsız çalışır.
document.addEventListener('player:play', handler)
Livewire JS kütüphanesi wire: direktiflerini bulur ve AJAX event listener'ları bağlar. Form submit, click, input değişiklikleri otomatik olarak sunucuya gönderilir.
wire:click → Livewire.emit('methodName', params)