Differences compared to traditional Sylius

This section explains how FrontWing (React + Remix) differs from the traditional Sylius Twig frontend.

Rendering & Architecture

Feature	Traditional Sylius	FrontWing
Rendering	Twig templates rendered by Symfony (PHP)	React + Remix SSR with hydration
SSR	Twig	Remix loaders + Vite SSR
Templating	Defined in Symfony/Twig	React components (e.g. Default.tsx)
Layouts	Webpack Encore	Vite
Page Routing	Symfony routes + Twig views	File-based routing (routes/) in Remix

API Usage

Feature	Traditional Sylius	FrontWing
Data access	Server-side PHP services	REST API calls (fetch)
Cart management	Symfony session / PHP state	Frontend state (React context + API)
Authentication	Symfony session-based	Token-based (via Sylius API)
Communication	Direct PHP service calls	/api/v2/shop/... endpoints

Styling & Layout

Feature	Traditional Sylius	FrontWing
Base styling	Bootstrap + Sylius UI overrides	Bootstrap + custom SCSS
Template customization	Twig blocks & macros	Component overrides
Responsive behavior	HTML/CSS templates	React components + layout grid
Theme customization	Via themes/ folder	Editable components + SCSS files

Order Token & State

• In FrontWing, cart state is managed fully on the frontend using:

  • OrderContext (React context)

  • Cookies (with the orderToken)

  • Token is auto-created and reused

• In traditional Sylius, the cart is stored in Symfony session and handled server-side.

Summary

FrontWing gives you full frontend freedom using a modern stack – React + SSR + API-driven state – while still using Sylius as the backend engine.

If you’re comfortable with React and want a headless approach, FrontWing is the modern alternative to the traditional Twig theme.