PWA Studio vs Hyvä vs Luma – rzetelne porównanie TCO i kiedy który

Dwa lata temu pisałem o Hyvä jako alternatywie dla Lumy. Od tamtej pory ekosystem dojrzał, a wybór między PWA Studio (React, headless API), Hyvä (Alpine.js, server-side) i klasyczną Lumą stał się pytaniem które pojawia się przy każdym nowym projekcie Magento. Robię rzetelne porównanie tych trzech ścieżek – z perspektywy kogoś kto wdrażał każdą z nich.

Trzy architektury frontendowe dla Magento 2

Hyvä – zalety i ograniczenia po 2 latach

Po kilku wdrożeniach Hyvä mam klarowny obraz kiedy to właściwy wybór:

Zalety które się potwierdziły:

• PageSpeed 90+ jest realny bez heroicznych optymalizacji – to wynika z architektury
• Developerzy PHP szybko piszą szablony – Alpine.js jest prostszy niż knockout.js
• Mniej JavaScript = mniej podatności i prostsze debugowanie
• Integracja z Magento backend bez API – layout XML działa jak w Lumie

Ograniczenia które boleją:

• Kompatybilność modułów zewnętrznych – każdy moduł z knockout.js wymaga adaptera lub przepisania
• Hyvä Checkout to osobna, dodatkowa płatność – bez niej zostaje Luma checkout (wolny)
• Mniejsza społeczność niż Luma – mniej gotowych rozwiązań na marketplace
• Tailwind purge CSS wymaga buildstepu – dodatkowa złożoność CI/CD

# Build Tailwind CSS w Hyvä - wymagane przy każdej zmianie klas
cd app/design/frontend/Vendor/MyHyvaTheme/web/tailwind
npm ci
npm run build-prod  # generuje purge CSS dla produkcji

# Wersja deweloperska z watch
npm run watch

# Integracja z pipeline Magento:
# bin/magento setup:static-content:deploy uruchamia automatycznie Tailwind build
# jeśli skonfigurujesz to w Gruntfile.js lub webpack

PWA Studio – kiedy ma sens

PWA Studio (Venia UI) to oficjalny Adobe framework oparty na React i GraphQL. Główne zastosowanie: sklepy gdzie doświadczenie mobilne jest priorytetem i masz zasoby frontendowe (React developerzy).

// PWA Studio - komponent produktu (React + GraphQL)
import React, { useState } from 'react';
import { useQuery } from '@apollo/client';
import { gql } from '@apollo/client';

const PRODUCT_QUERY = gql`
    query GetProduct($urlKey: String!) {
        products(filter: { url_key: { eq: $urlKey } }) {
            items {
                id
                name
                sku
                price_range {
                    minimum_price {
                        final_price { value currency }
                    }
                }
                media_gallery { url label }
                description { html }
            }
        }
    }
`;

function ProductPage({ urlKey }) {
    const { loading, error, data } = useQuery(PRODUCT_QUERY, {
        variables: { urlKey },
    });

    if (loading) return <ProductSkeleton />;
    if (error)   return <ErrorPage error={error} />;

    const product = data?.products?.items?.[0];
    if (!product) return <NotFound />;

    return (
        <div className={classes.root}>
            <ProductImages images={product.media_gallery} />
            <ProductDetails product={product} />
            <AddToCartButton productId={product.id} />
        </div>
    );
}

Zalety PWA Studio:

• Oficjalne wsparcie Adobe – długoterminowo utrzymywane
• App-like doświadczenie mobilne – nawigacja bez przeładowania strony
• Łatwe dodawanie PWA features: offline cache, push notifications, instalacja na ekranie głównym
• Dobre narzędzia dla React developerów (hot reload, TypeScript, testowanie)

Wady PWA Studio:

• SEO wymaga SSR (Next.js lub dodatkowej konfiguracji) – SPA domyślnie słaby dla robotów
• Wymaga React developerów – nie PHP developerów
• Wolniejszy Time To First Byte – pobieranie bundle JS przed renderowaniem
• Trudniejsza integracja z modułami Magento które mają tylko PHP/PHTML output

Framework decyzyjny – które podejście wybrać?

<?php

// Pseudokod decyzji :-) - poważnie, to realne pytania przy wyborze

function chooseFramework(Project $project): string
{
    // Budżet poniżej 5k EUR na frontend
    if ($project->budget < 5000) {
        return 'luma'; // minimum investment, proven solution
    }

    // Sklep B2B z dużo customowego kodu Magento
    if ($project->hasHeavyB2BCustomizations()) {
        return 'hyva'; // SSR, dobra integracja z Magento backend
    }

    // Prioritet mobile app experience + PWA features
    if ($project->needsPwaFeatures()) {
        return 'pwa_studio'; // push notifications, offline, install prompt
    }

    // Główny cel: szybkość strony i SEO bez dużych zasobów frontendowych
    if ($project->teamHasPhpDevs() && !$project->teamHasReactDevs()) {
        return 'hyva'; // PHP team może pisać Alpine.js szablony
    }

    // Duży sklep B2C z dedykowanym teamem frontend
    if ($project->hasDedicatedFrontendTeam()) {
        return 'pwa_studio'; // lub Next.js + Magento GraphQL
    }

    return 'hyva'; // safe default dla większości projektów
}

Koszty całkowite (TCO) – realistyczne liczby

Podsumowanie

Nie ma złego wyboru jeśli pasuję do realiów projektu. Luma jest odpowiednia gdy masz istniejący sklep, niski budżet lub dużo zewnętrznych modułów. Hyvä to najlepszy wybór dla nowych projektów gdzie PHP team jest dominujący i SEO/PageSpeed są priorytetem – licencja zwraca się przez wyższe konwersje. PWA Studio ma sens gdy budujesz sklep z doświadczeniem aplikacji mobilnej i masz React developerów. Kluczowe pytanie to nie „który jest lepszy” ale „który pasuje do mojego zespołu, budżetu i wymagań”.