System Widoków w PHP - Od Twig przez Blade do Inertia.js

Czym są widoki w aplikacjach webowych?

Widoki stanowią warstwę prezentacji w architekturze MVC (Model-View-Controller). Ich głównym zadaniem jest oddzielenie logiki biznesowej od warstwy renderującej HTML. W kursie PHP 8.4 budujesz kompletny, modularny system widoków, który wspiera trzy różne podejścia do renderowania:

• Twig - integracja z popularnym, gotowym silnikiem szablonów
• Blade - implementacja własnego silnika inspirowanego Laravelem
• Inertia.js + Vue 3 - nowoczesne SPA bez pisania dedykowanego API

Dlaczego warto poznać różne podejścia?

Każde z trzech rozwiązań ma swoje unikalne zalety i przypadki użycia. Poznając wszystkie trzy, zrozumiesz:

• Jak integrować zewnętrzne biblioteki (Twig) z własnym frameworkiem
• Jak działają silniki szablonów pod maską (Blade)
• Jak budować nowoczesne SPA bez rozdzielania backendu i frontendu (Inertia.js)

Architektura modularnego systemu widoków

System widoków w kursie wykorzystuje wzorce projektowe, które pozwalają na łatwą wymianę renderera bez modyfikacji kodu kontrolerów. Kluczowe komponenty to:

1. RendererInterface - wspólny interfejs

Wszystkie renderery (Twig, Blade, Inertia) implementują ten sam interfejs, co zapewnia zgodność i wymienność.

<?php
interface RendererInterface
{
    public function render(string $template, array $data = []): string;
    public function clearCache(): void;
}

2. Adaptery - implementacje dla konkretnych silników

Każdy renderer ma swój adapter implementujący wspólny interfejs:

• TwigRendererAdapter - wrapper na Twig\Environment
• BladeAdapter - własna implementacja z TemplateCompiler
• InertiaAdapter - obsługa protokołu Inertia.js zgodna z middleware PSR-15

3. ViewManager - fabryka widoków

ViewManager implementuje wzorzec Factory, tworząc odpowiedni adapter na podstawie konfiguracji.

4. Kontroler - punkt integracji

Bazowa klasa Controller udostępnia wygodne API do renderowania widoków z możliwością zmiany renderera.

Podejście 1: Twig - Gotowy silnik szablonów

Twig to popularny silnik szablonów, który został zaprojektowany z myślą o prostocie i wydajności. Jest to doskonały wybór, gdy potrzebujesz sprawdzonego rozwiązania z bogatym ekosystemem.

Zalety Twig

• Gotowe rozwiązanie z aktywnym wsparciem społeczności
• Bogaty zestaw wbudowanych filtrów i funkcji
• Automatyczne escapowanie zmiennych (bezpieczeństwo)
• Kompilacja do zoptymalizowanego PHP

Podstawowa składnia Twig

{{ title }}                    {# wyświetlanie zmiennej #}
{{ name|capitalize }}          {# z filtrem #}

{% if user.isLoggedIn %}       {# instrukcje warunkowe #}
    Zalogowany jako: {{ user.email }}
{% endif %}

{% for post in posts %}        {# pętle #}
    <h2>{{ post.title }}</h2>
{% endfor %}

Kiedy wybrać Twig?

• Projekty wymagające stabilnego, sprawdzonego rozwiązania
• Zespoły z doświadczeniem w Symfony lub innych frameworkach używających Twig
• Aplikacje wymagające strict mode (bez surowego PHP w szablonach)

→ Przeczytaj szczegółowy przewodnik po Twig

Podejście 2: Blade - Własny silnik szablonów

Blade to silnik szablonów inspirowany rozwiązaniem z Laravel. W kursie implementujesz go od podstaw, co pozwala zrozumieć dokładnie jak działają silniki szablonów pod maską.

Zalety własnego Blade

• Pełna kontrola nad każdym aspektem działania
• Możliwość dostosowania do specyficznych potrzeb projektu
• Głębokie zrozumienie mechanizmów kompilacji szablonów
• Brak zewnętrznych zależności

Podstawowa składnia Blade

{{ $title }}                   {{-- wyświetlanie zmiennej (escapowane) --}}
{!! $html !!}                  {{-- surowy HTML (nieescapowane) --}}

@if($user->isAdmin)            {{-- instrukcje warunkowe --}}
    Panel administratora
@endif

@foreach($posts as $post)     {{-- pętle --}}
    <h2>{{ $post->title }}</h2>
@endforeach

Architektura implementacji

Własny Blade składa się z kilku kluczowych komponentów:

• TemplateLoader - ładowanie plików szablonów
• TemplateCompiler - kompilacja składni Blade do PHP
• Directive - system dyrektyw zgodny z SOLID
• ComponentDirective - obsługa komponentów wielokrotnego użytku

Kiedy wybrać własny Blade?

• Projekty edukacyjne - chcesz zrozumieć jak działa pod spodem
• Aplikacje wymagające specyficznych dyrektyw
• Minimalizacja zależności zewnętrznych

→ Przeczytaj o komponentach Blade

Podejście 3: Inertia.js + Vue 3 - Nowoczesne SPA

Inertia.js to protokół pozwalający na budowanie Single Page Applications bez pisania dedykowanego API REST/GraphQL. Backend PHP zwraca dane bezpośrednio do komponentów Vue 3.

Zalety Inertia.js

• Brak potrzeby budowania oddzielnego API
• Routing po stronie serwera (PHP)
• Doświadczenie użytkownika jak w natywnej SPA
• Łatwa integracja z istniejącym backendem

Jak działa protokół Inertia?

Przy pierwszym załadowaniu serwer zwraca pełny HTML z aplikacją Vue. Kolejne nawigacje odbywają się przez AJAX - serwer zwraca JSON z nazwą komponentu i danymi:

{
  "component": "Dashboard/Index",
  "props": {
    "user": {...},
    "stats": {...}
  }
}

Komponenty Vue 3 z Composition API

Inertia wykorzystuje nowoczesny Vue 3 z Composition API i składnią <script setup>:

<script setup>
const props = defineProps({
  user: Object,
  posts: Array,
})
</script>

<template>
  <h1>Witaj, {{ user.name }}!</h1>

  <div v-for="post in posts" :key="post.id">
    <h2>{{ post.title }}</h2>
  </div>
</template>

Kiedy wybrać Inertia.js?

• Nowoczesne aplikacje wymagające interaktywnego UI
• Projekty gdzie nie chcesz budować oddzielnego API
• Aplikacje z intensywną interakcją po stronie klienta

→ Przeczytaj szczegółowy przewodnik po Inertia.js

Porównanie trzech podejść

Wzorce projektowe w systemie widoków

Implementacja systemu widoków wykorzystuje sprawdzone wzorce projektowe:

• Adapter - każdy renderer to adapter na konkretny silnik
• Factory - ViewManager tworzy odpowiednie adaptery
• Strategy - wymienne strategie renderowania
• Template Method - BaseAdapter definiuje wspólny szkielet
• Single Responsibility - każda dyrektywa odpowiada za jedną rzecz
• Open/Closed - łatwe rozszerzanie bez modyfikacji

Jak wybrać odpowiednie podejście?

Wybierz Twig gdy:

• Potrzebujesz sprawdzonego rozwiązania z gotową dokumentacją
• Budujesz tradycyjną aplikację server-side rendered
• Chcesz strict mode bez surowego PHP w szablonach
• Team ma doświadczenie z Twig/Symfony

Wybierz własny Blade gdy:

• Chcesz głęboko zrozumieć mechanizmy kompilacji
• Potrzebujesz specyficznych, niestandardowych dyrektyw
• Minimalizujesz zewnętrzne zależności
• Budujesz własny framework od podstaw

Wybierz Inertia.js + Vue gdy:

• Budujesz nowoczesną aplikację wymagającą interaktywnego UI
• Chcesz SPA bez pisania oddzielnego API
• Team zna Vue.js lub React
• Aplikacja wymaga płynnych przejść między widokami

Integracja wszystkich trzech w jednym projekcie

W kursie PHP 8.4 budujesz system, który wspiera wszystkie trzy podejścia jednocześnie. Dzięki architekturze opartej na wzorcach projektowych możesz:

• Użyć Twig dla publicznych stron marketingowych
• Użyć Blade dla panelu administracyjnego
• Użyć Inertia + Vue dla interaktywnego dashboardu

Co zyskujesz w kursie?

• Integracja z Twig - TwigRendererAdapter, cache, konfiguracja
• Własny Blade - TemplateLoader, TemplateCompiler, system dyrektyw
• Komponenty Blade - Alert, Button, Card, ComponentDirective
• Inertia.js - ResponseFactory, middleware, dyrektywy @inertia i @vite
• Vue 3 - Composition API, script setup, useForm
• Vite - konfiguracja bundlera, HMR, production build

Zobacz szczegółowe artykuły o każdym podejściu

• Widoki w PHP - Kompleksowy Przewodnik po Twig
• Komponenty Blade - Wielokrotnego użytku elementy UI
• Inertia.js - Nowoczesne SPA z Vue 3 i PHP