18 farklı bileşen: Şarkılar, albümler, sanatçılar için hazır kartlar.
Lego parçaları gibi düşünün! Her içerik türü için hazır tasarım kalıpları var. Şarkı kartı, albüm kartı, sanatçı kartı... Hepsi aynı dilde konuşuyor, tutarlı görünüyor. Geliştirici yeni bir sayfa yaparken bu parçaları birleştiriyor, sıfırdan tasarım yapmıyor.
Kapak, ad, sanatçı, süre, çal butonu
Kapak, albüm adı, sanatçı, yıl, şarkı sayısı
Yuvarlak fotoğraf, isim, takipçi sayısı
Kapak mozaiği, ad, oluşturan, şarkı sayısı
Logo, kanal adı, canlı göstergesi
Gradient arka plan, tür adı, ikon
Kartlar geniş alanlarda (ana sayfa), satırlar dar alanlarda (listeler, kuyruk) kullanılır.
Bileşen kütüphanesi kullanıldığında ve componentler render edilirken arka planda şu işlemler gerçekleşir:
@component('muzibu::song-card', $song) çağrıldığında Laravel ilgili Blade dosyasını bulur. Props validate edilir, slot'lar işlenir ve HTML çıktısı oluşturulur.
resources/views/components/muzibu/song-card.blade.php
Livewire componentleri ilk render'da PHP state'i JSON olarak sayfaya gömülür. JavaScript tarafı bu state'i okur ve reactivity kurar. Wire directives ile event binding yapılır.
wire:model, wire:click, wire:loading - AJAX reaktivite
x-data ile component state tanımlanır. x-show, x-if ile conditional rendering, x-transition ile animasyonlar, @click ile event handling yapılır. Sayfa yüklenince tüm direktifler parse edilir.
x-data="{ open: false }" @click="open = !open" x-show="open"
Şarkı kapakları loading="lazy" ile yüklenir. Viewport'a girince tarayıcı indirmeye başlar. Placeholder gradient gösterilir, görsel yüklenince fade-in ile görünür.
@img loading="lazy" @load="loaded = true" x-show="loaded"
Sık kullanılan componentler @once ile bir kez render edilir. CSS/JS inline edilmişse tekrar eklenmez. View cache ile derlenmiş PHP dosyaları saklanır.
@once @push('styles') ... @endpush @endonce