Symfony Live Components ve UX 3.0: 2026'da JavaScript Olmadan Reaktif Uygulamalar

Modern web gelistirme dunyasinda reaktif kullanici arayuzleri olusturmak genellikle kapsamli JavaScript bilgisi gerektirir. Symfony Live Components bu paradigmayi kokunden degistirerek, PHP gelisitiricilerinin yalnizca PHP ve Twig kullanarak sofistike, gercek zamanli arayuzler olusturmasini mumkun kiliyor. Nisan 2026'da yayimlanan Symfony UX 3.0, tum 2.x surumundeki kullanim disi birakilan ozellikleri kaldirdi, minimum gereksinimleri PHP 8.4 ve Symfony 7.4'e yukseltti ve dort eski paketi cikararak bugunune kadarki en yalin UX arasetini ortaya koydu.

Bu makale, Live Components'in temel kavramlarini uretim ortamina hazir orneklerle inceliyor, UX 3.0'in getirdigi yenilikleri analiz ediyor ve bu teknolojinin 2026 yilinda PHP tabanli web uygulamalarinin mimarisini nasil donusturdugununu ortaya koyuyor.

Symfony UX 3.0 ve Live Components Kurulumu

Live Components ile calismaya baslamanin ilk adimi, projeye symfony/ux-live-component paketinin yuklenmesidir. UX 3.0 surumu, AssetMapper ile tam uyumluluk sunarak Webpack veya Vite gibi araclar olmadan frontend bagimlilik yonetimini mumkun kiliyor. Bu yaklasim, gelistirme surecini onemli olcude basitlestiriyor.

# terminal
composer require symfony/ux-live-component

# With AssetMapper (recommended for Symfony 7.4+)
php bin/console importmap:require @symfony/ux-live-component

# Verify installation
php bin/console debug:twig --filter=component

Kurulum sonrasinda debug:twig komutu, projede kayitli tum Twig bilesenlerini listeleyecektir. AssetMapper, bundle'in JavaScript bagimliklarini ek konfigurasyona gerek kalmadan otomatik olarak yonetir. Bu durum, karmasik manuel yapilandirma gerektiren onceki surumlere kiyasla buyuk bir iyilestirmedir.

UX 3.0'in PHP 8.4+ ve Symfony 7.4+ gereksinimleri, dilin en son ozelliklerinden yararlanmayi mumkun kilar: readonly ozellikler, gelismis enum'lar ve JIT derleyicisinin bilesen calistirma performansini onemli olcude artiran iyilestirmeleri bunlarin basinda gelir.

LiveProp ile Reaktif Arama Bileseni Olusturma

Live Components'in en yaygin kullanim alanlarindan biri, kullanici yazarken sonuclarin gercek zamanli olarak guncellendigi arama sistemleri olusturmaktir. Asagidaki ornek, dinamik filtreler ve URL senkronizasyonu iceren bir urun arama bilesenini gostermektedir.

<?php
// src/Twig/Components/ProductSearch.php

namespace App\Twig\Components;

use App\Repository\ProductRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class ProductSearch
{
    use DefaultActionTrait;

    #[LiveProp(writable: true, url: true)]
    public string $query = '';

    #[LiveProp(writable: true)]
    public string $category = 'all';

    public function __construct(
        private ProductRepository $productRepository,
    ) {
    }

    public function getProducts(): array
    {
        if (strlen($this->query) < 2) {
            return [];
        }

        return $this->productRepository->search(
            query: $this->query,
            category: $this->category === 'all' ? null : $this->category,
            limit: 20,
        );
    }
}

#[AsLiveComponent] niteligi, PHP sinifini dinamik bir bilesene donusturur. #[LiveProp(writable: true)] ile isaretlenen ozellikler, HTML'deki data-model nitelikleri araciligiyla frontend tarafindan degistirilebilir hale gelir. url: true secenegi ise cift yonlu URL senkronizasyonu saglar; boylece kullanicilar filtrelenme durumunu icerir sekilde boglantilari payslasabilir. Bu ozellik hem SEO hem de kullanici deneyimi acisindan son derece onemlidir.

Ilgili Twig sablonu, veri baglama icin deklaratif data-model sozdizimini kullanir:

{# templates/components/ProductSearch.html.twig #}
<div {{ attributes }}>
    <input
        type="search"
        data-model="debounce(300)|query"
        placeholder="Search products..."
        class="form-input w-full"
    />

    <select data-model="category" class="form-select mt-2">
        <option value="all">All categories</option>
        <option value="electronics">Electronics</option>
        <option value="books">Books</option>
    </select>

    <div class="mt-4">
        {% for product in this.products %}
            <div key="{{ product.id }}" class="border-b py-2">
                <h3>{{ product.name }}</h3>
                <span>{{ product.price|format_currency('EUR') }}</span>
            </div>
        {% else %}
            {% if query|length >= 2 %}
                <p>No results for "{{ query }}".</p>
            {% endif %}
        {% endfor %}
    </div>
</div>

debounce(300) degistiricisi, sunucu isteklerini kullanici yazmaya devam ederken sinirlandirir ve son tus vurusundan 300ms sonra gonderilmesini saglar. Bu optimizasyon teknigi, backend uzerindeki gereksiz yuku onlemek icin kritik oneme sahiptir ve performans optimizasyonuyla ilgili Symfony mulakat sorulari arasinda siklikla karsimiza cikar.

Sablondaki this.products ifadesi, PHP bilesenindeki getProducts() metodunu otomatik olarak cagirir. Sunucu mantigi ile gorsel render arasindaki bu seffaf entegrasyon, Live Components'in en guclu yonlerinden biridir.

LiveAction ile Kullanici Eylemlerinin Yonetimi

LiveProp reaktif ozellikleri yonetirken, #[LiveAction] niteligi buton tiklama gibi kullanici eylemlerine yanit veren metotlar tanimlamayi saglar. Asagidaki alisveris sepeti bileseni, birden fazla eylemin koordinasyonunu ve bilesenler arasi iletisimi gostermektedir.

<?php
// src/Twig/Components/ShoppingCart.php

namespace App\Twig\Components;

use App\Entity\CartItem;
use App\Service\CartService;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\Attribute\LiveArg;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\ComponentToolsTrait;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class ShoppingCart
{
    use DefaultActionTrait;
    use ComponentToolsTrait;

    #[LiveProp]
    public array $items = [];

    public function __construct(
        private CartService $cartService,
    ) {
    }

    #[LiveAction]
    public function addItem(#[LiveArg] int $productId, #[LiveArg] int $quantity = 1): void
    {
        $this->cartService->add($productId, $quantity);
        $this->items = $this->cartService->getItems();

        $this->emit('cart:updated', [
            'count' => count($this->items),
        ]);
    }

    #[LiveAction]
    public function removeItem(#[LiveArg] int $itemId): void
    {
        $this->cartService->remove($itemId);
        $this->items = $this->cartService->getItems();
        $this->emit('cart:updated', ['count' => count($this->items)]);
    }

    public function getTotal(): float
    {
        return array_sum(array_map(
            fn(CartItem $item) => $item->getPrice() * $item->getQuantity(),
            $this->items,
        ));
    }
}

ComponentToolsTrait tarafindan saglanan emit() metodu, sayfadaki diger bilesenlerin dinleyebilecegi global olaylar yayar. Bu ayristirilmis mimari, birden fazla bilesenin dogrudan bagimlilik olusturmadan iletisim kurmasini saglar ve surudurlebilir bir yazilim mimarisi icin vazgecilmezdir.

{# templates/components/ShoppingCart.html.twig #}
<div {{ attributes }}>
    <h2>Cart ({{ items|length }})</h2>

    {% for item in items %}
        <div key="{{ item.id }}" class="flex justify-between py-2">
            <span>{{ item.name }} x{{ item.quantity }}</span>
            <span>{{ (item.price * item.quantity)|format_currency('EUR') }}</span>
            <button {{ live_action('removeItem', { itemId: item.id }) }}
                    class="text-red-600">
                Remove
            </button>
        </div>
    {% endfor %}

    <div class="border-t pt-2 font-bold">
        Total: {{ this.total|format_currency('EUR') }}
    </div>
</div>

Twig'deki live_action() fonksiyonu, buton tiklamalarini PHP bilesenindeki #[LiveAction] metotlarina baglamak icin gerekli HTML niteliklerini otomatik olarak olusturur. Bu deklaratif yaklasim, manuel JavaScript olay dinleyicileri yazma gerekliligi tamamen ortadan kaldirir.

JavaScript Olmadan Gercek Zamanli Form Dogrulama

Live Components'in en guclu ozelliklerinden biri, Symfony form sistemi ile yerel entegrasyondur. ComponentWithFormTrait trait'i, sayfayi yeniden yuklemeden gercek zamanli dogrulama yapan formlar olusturmayi saglar ve tum dogrulama mantigi PHP tarafinda merkezlestirilmis olarak kalir.

<?php
// src/Twig/Components/RegistrationForm.php

namespace App\Twig\Components;

use App\Entity\User;
use App\Form\RegistrationType;
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\FormInterface;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\ComponentWithFormTrait;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class RegistrationForm extends AbstractController
{
    use DefaultActionTrait;
    use ComponentWithFormTrait;

    #[LiveProp]
    public ?User $initialFormData = null;

    protected function instantiateForm(): FormInterface
    {
        return $this->createForm(RegistrationType::class, $this->initialFormData ?? new User());
    }

    #[LiveAction]
    public function save(EntityManagerInterface $em): mixed
    {
        $this->submitForm();
        $user = $this->getForm()->getData();

        $em->persist($user);
        $em->flush();

        $this->addFlash('success', 'Account created.');

        return $this->redirectToRoute('app_login');
    }
}

instantiateForm() metodu, standart Symfony FormType'ini olusturur. submitForm() metodu ise Symfony Form constraint'lerinde tanimlandigi sekilde tam dogrulamayi calistirir ve dogrulama basarisiz olursa hata mesajlarini gostererek bileseni yeniden render eder. Bu mekanizma, istemci tarafinda hicbir JavaScript dogrulama kodu yazmadan tum form dogrulamalarinin sunucu tarafinda guvenceli olarak gerceklesmesini saglar.

{# templates/components/RegistrationForm.html.twig #}
<div {{ attributes }}>
    {{ form_start(form, {
        attr: {
            'data-action': 'live#action:prevent',
            'data-live-action-param': 'save'
        }
    }) }}
        {{ form_row(form.email) }}
        {{ form_row(form.plainPassword, { label: 'Password' }) }}
        {{ form_row(form.fullName) }}

        <button type="submit"
                class="btn-primary w-full"
                data-loading="addAttribute(disabled) addClass(opacity-50)">
            <span data-loading="hide">Create Account</span>
            <span data-loading="show" class="animate-spin">Loading...</span>
        </button>
    {{ form_end(form) }}
</div>

data-loading niteligi, AJAX istekleri sirasinda gorsel durumlari kontrol eder ve kullaniciya aninda geri bildirim saglar. Islem devam ederken butonun devre disi birakilmasi ve yukleme gostergesinin goruntulenmesi, ozellikle Symfony 7 ile API Platform entegrasyonlarinda islemlerin birkas saniye surebilecegi durumlarda kullanici deneyimi acisindan kritiktir.

Performans Icin Ertelenmis ve Tembel Yukleme

Agir veritabani sorgulari veya harici API cagrilari gerceklestiren bilesenler, sayfanin ilk yukleme suresini olumsuz etkileyebilir. UX 3.0, algilanan performansi onemli olcude iyilestiren gelismis ertelenmis yukleme stratejileri sunmaktadir.

<?php
// src/Twig/Components/AnalyticsDashboard.php

namespace App\Twig\Components;

use App\Service\AnalyticsService;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class AnalyticsDashboard
{
    use DefaultActionTrait;

    #[LiveProp]
    public string $period = '30d';

    public function __construct(
        private AnalyticsService $analytics,
    ) {
    }

    public function getMetrics(): array
    {
        return $this->analytics->getMetrics($this->period);
    }
}

Ertelenmis yuklemeyi etkinlestirmek icin, bilesen sablona dahil edilirken loading niteligi kullanilir:

{# Parent page: load the dashboard after the page renders #}
<twig:AnalyticsDashboard loading="defer" period="30d" />

{# Or load when scrolled into view #}
<twig:AnalyticsDashboard loading="lazy" period="30d" />

loading="defer" secenegi, baslangicta bos bir yer tutucu render eder ve DOM tamamen yuklendikten sonra gercek bileseni AJAX araciligiyla yukler. loading="lazy" ise Intersection Observer API'sini kullanarak bileseni yalnizca kullanicinin gorunur alanina girdiginde yukler. Her iki strateji de Core Web Vitals metriklerini iyilestirerek SEO performansina dogrudan katki saglar.

Yukleme sirasinda gosterilen yer tutucuyu ozellestirmek icin bilesen sablonunda bir placeholder makrosu tanimlanir:

{# templates/components/AnalyticsDashboard.html.twig #}
<div {{ attributes }}>
    <h2>Analytics — {{ period }}</h2>
    {% for metric in this.metrics %}
        <div class="stat-card">
            <span class="stat-label">{{ metric.label }}</span>
            <span class="stat-value">{{ metric.value|number_format }}</span>
        </div>
    {% endfor %}
</div>

{% macro placeholder(props) %}
    <div class="animate-pulse space-y-4">
        <div class="h-6 bg-gray-200 rounded w-1/3"></div>
        <div class="h-20 bg-gray-200 rounded"></div>
        <div class="h-20 bg-gray-200 rounded"></div>
    </div>
{% endmacro %}

Bu teknik, karmasik panolar veya agir raporlar iceren uygulamalari optimize etmek icin temeldir ve performansla ilgili Symfony mulakat sorulari rehberi kapsaminda sikca ele alinan bir konudur.

Olay Sistemi ile Bilesenler Arasi Iletisim

Live Components'in olay sistemi, bilesenlerin mesajlar araciligiyla iletisim kurdugu ayristirilmis mimariler olusturmayi saglar. #[LiveListener] niteligi, belirli olaylar yayimlandiginda otomatik olarak calistirilan metotlar tanimlar.

<?php
// src/Twig/Components/CartBadge.php

namespace App\Twig\Components;

use App\Service\CartService;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveListener;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class CartBadge
{
    use DefaultActionTrait;

    #[LiveProp]
    public int $count = 0;

    public function __construct(CartService $cartService)
    {
        $this->count = $cartService->getItemCount();
    }

    #[LiveListener('cart:updated')]
    public function onCartUpdated(#[LiveArg] int $count): void
    {
        $this->count = $count;
    }
}

ShoppingCart bileseni urun eklediginde veya cikardiginda cart:updated olayini yayar. Sayfanin herhangi bir yerinde (genellikle header bolgesinde) bulunan CartBadge bileseni bu olayi otomatik olarak dinler ve ek JavaScript kodu gerektirmeden sayacini gunceller. Iki bilesen arasinda dogrudan bir bagimlilik bulunmamasi, bakim kolayligi ve yeniden kullanimlilik acisindan buyuk avantaj saglar.

Bu olay tabanli mimari, karmasik uygulamalarin bakimini kolaylastirarak bilesenlerin bagimsiz olarak gelistirilmesini ve test edilmesini mumkun kilar. Bu tur mimari kararlar, Symfony mulakat sorulari kapsaminda ozellikle senior pozisyonlar icin siklsikla degerlendirilen konular arasindadir.

Symfony UX 3.0'da Neler Degisti

Symfony UX 3.0'in yayimlanmasi, guvenlik, performans ve gelistirici deneyimini iyilestiren onemli yapisal degisiklikler getirdi. Asagidaki tablo, temel degisiklikleri ozetlemektedir:

| Change | Before (2.x) | After (3.0) | |--------|-------------|-------------| | CSRF protection | csrf: true on #[AsLiveComponent] | Same-origin/CORS (automatic) | | Twig CVA function | cva() | html_cva() from twig/html-extra 3.12+ | | Component defaults config | Optional | twig_component.defaults mandatory | | Removed packages | Swup, LazyImage, Typed, TogglePassword | Use native APIs or UX Toolkit | | PHP requirement | 8.1+ | 8.4+ | | Symfony requirement | 6.4+ | 7.4+ |

Acik CSRF korumasinin Same-Origin politikalari lehine kaldirilmasi, bilesen yapilandirmasini onemli olcude basitlestirdi. html_cva() fonksiyonu eski cva() fonksiyonunun yerini aldi ve twig/html-extra 3.12+ paketinin yuklenmesini gerektiriyor.

Daha once UX 2.x'e dahil olan Swup, LazyImage, Typed ve TogglePassword paketleri, modern tarayicilarin yerel API'leri veya UX Toolkit lehine kaldirildi. Bu karar, JavaScript bundle boyutunu azaltti ve AssetMapper gibi modern build araclariyla uyumlulugu artirdi.

Minimum gereksinimlerin PHP 8.4+ ve Symfony 7.4+'ye yukseltilmesi, UX 3.0'in dilin modern ozelliklerinden tam olarak yararlanmasini saglar. Hala eski surumlerde olan projeler icin, kademeli guncelleme surecini detayli olarak aciklayan resmi gec kilavuzuna basvurulmasi onerilir.

Ileri Duzey Desenler ve Mimari Yaklasimlar

Temel orneklerin otesinde, Live Components kurumsal uygulamalardaki yaygin zorluklari cozen gelismis mimari desenleri destekler. Birden fazla #[LiveProp], kosullu dogrulama ve dis servis entegrasyonlarinin kombinasyonu, gereksiz karmasiklik eklemeden zengin arayuzler olusturmayi mumkun kilar.

Yaygin bir desen, kullanici yazarken dis API'leri sorgulayan, gereksiz istekleri azaltmak icin akilli onbellekleme uygulayan ve kullanici gecmisine dayali baglamsal oneriler gosteren otomatik tamamlama bilesenleri olusturmaktir. Bu tur bilesenler, reaktif durumu, asenkron eylemleri ve diger bilesenlerle iletisimi birlestirerek sistemin esnekligini ortaya koyar.

Bir diger ileri duzey kullanim alani, cok adimli formlardir. Her adim, kendi is kurallarini dogrulayan bagimsiz bir Live Component olarak calisir, ancak bir oturum servisi araciligiyla global durumu paylesir. Bu mimari, her bilesenin tek sorumluluk ilkesine sadik kalmasini saglarken akici bir kullanici deneyimini korur.

Tam denetim izlenebilirligi gerektiren kurumsal uygulamalar icin, Live Components Symfony event subscriber'lari ile entegre edilerek tum kullanici eylemlerinin, degisiklik zaman damgalarinin ve ozelliklerin onceki durumlarinin otomatik olarak kaydedilmesi saglanabilir. Bu entegrasyon, UX 3.0'in olgun Symfony ekosistemine uyumsuz soyutlamalar olusturmadan nasil kusursuzca entegre oldugunu gostermektedir.

Sonuc

Symfony Live Components, PHP ile web uygulamasi gelistirmede bir paradigma degisimini temsil ediyor. Yaygin reaktif islevler icin karmasik JavaScript yazma gereksinimini ortadan kaldirarak, PHP gelistiricilerinin Symfony ekosistemindeki tum birikimlerini modern ve duyarli arayuzler olusturmak icin kullanmalarini sagliyor.

UX 3.0'in yayimlanmasi, kutuphaneyi guvenlik, performans ve gelistirici deneyiminde onemli iyilestirmelerle olgun ve uretime hazir bir cozum olarak konumlandirdi. Symfony Forms ile yerel entegrasyon, gelismis ertelenmis yukleme sistemi ve olay tabanli mimari, surdurulebilirlikten odun vermeden karmasik uygulamalar olusturmak icin gerekli araclari sagliyor.

Live Components'in uretim ortamindaki temel avantajlari su sekilde ozetlenebilir:

• Basitlestirilmis bakim: Frontend ve backend mantigi icin tek dil (PHP)
• Kontrol edilebilir performans: Kismi DOM guncellemeleriyle optimize edilmis sunucu tarafi render
• Yerel SEO destegi: Ek yapilandirma gerektirmeden sunucu tarafinda uretilen icerik
• Guclendirilmis guvenlik: Sunucuda korunan dogrulama ve is mantigi
• Dusuk ogrenme egrisi: Mevcut Symfony bilgisinin dogrudan yeniden kullanimi
• Olgun ekosistem: Tum Symfony bilesenleriyle seffaf entegrasyon

Symfony ekosisteminde derinlesmek isteyen gelistiriciler icin Live Components'e hakimiyet, hem pratik projeler hem de teknik mulakatlarda one cikmak acisindan buyuk onem tasiyor. JavaScript framework'lerine bagimli kalmadan reaktif arayuzler olusturabilme becerisi, platformun ileri duzey bilgisini ve modern web gelistirme egilimlerine uyumu gosterir. PHP'de web arayuzlerinin gelecegi, sunucu tarafinda mantigi korurken JavaScript SPA'lariyla kiyaslanabilir kullanici deneyimleri sunan cozumlere dogru ilerliyor ve Live Components bu donusumun onculugunu yapiyor.