Czy zastanawiałeś się kiedyś, co sprawia, że zespół postanawia kompletnie zmienić sposób działania swojego frontendu? Jeśli śledzisz historię Syliusa, mogłeś zauważyć, że szykują coś nowego. To FrontWing, ich nowe narzędzie do frontend’u oparte na React.js.
To nie jest kolejny eksperyment technologiczny ani „syndrom błyskotki”. To efekt prawdziwych wyzwań, szczerych rozmów i godzin spędzonych na zmaganiu się z ograniczeniami, które napotkali. Zespół Syliusa nie obudził się pewnego ranka z pomysłem "zróbmy frontend w React". Ta decyzja wynikała z czegoś głębszego - ze słuchania swojej społeczności i ze zrozumienia, że czasem trzeba się cofnąć, żeby iść do przodu.
Jak więc tu trafili? W jaki sposób zespół platformy eCommerce stworzył w pełni działający frontend w React?
Jako BitBag, Globalny Partner Syliusa, uchylamy rąbka tajemnicy i pokazujemy cały proces. Wyjaśniamy dlaczego podjęli takie, a nie inne decyzje i dokładnie opisujemy, jak do tego doszło.
Zacznijmy od początku...
Początek historii FrontWing
Cofnijmy się trochę w czasie. Sylius przeszedł z Semantic UI na Bootstrap w wersji v2. Z perspektywy użytkowników to świeże, zoptymalizowane podejście było strzałem w dziesiątkę, nawet działając na Twig. Opinie były naprawdę pozytywne i potwierdzały słuszność obranego kierunku.
Jednak tutaj robi się ciekawie. Natywny frontend Syliusa renderuje się po stronie serwera, podczas gdy frontend w React renderuje się po stronie klienta. Ta zmiana otwiera nowe możliwości: lepsza wydajność, bardziej interaktywne interfejsy i wyższe pozycje w wyszukiwarkach. To nie tylko kwestia technicznej preferencji - chodzi o tworzenie lepszych doświadczeń zakupowych. Co więcej, przy natywnym frontendzie renderowanym po stronie serwera było naprawdę trudno osiągnąć zgodność z szybko rozwijającymi się standardami SPA/PWA (aplikacji jednostronicowych i progresywnych/responsywnych).
Przez lata branża przesunęła się w kierunku podejścia „headless-first". Dane stają się niezależne od urządzenia, a jedyne co się liczy, to stabilne źródło danych. W Syliusie grają na dwa fronty: serwują kod renderowany po stronie serwera do urządzeń końcowych, jednocześnie rozbudowując swoje API bazując na API Platform, pozostawiając warstwę danych otwartą na łatwą integrację.
Moment przełomowy nadszedł, gdy zespół Syliusa przyjrzał się liczbom. Okazało się, że większość urządzeń łączących się z platformami eCommerce korzysta z przeglądarek. Analiza bazy użytkowników wykazała natomiast, że największe firmy wdrażające Syliusa w modelu „headless” najczęściej stawiały na React. Wzorzec był oczywisty.
Dostrzegając ten trend, zespół Syliusa uznał, że nadszedł moment, by wesprzeć swoją społeczność. Pojawiło się pytanie: Dlaczego nie stworzyć frontendu dla Syliusa, który byłby elastyczny, szybki i solidnie zaprojektowany, a przy tym przyspieszałby proces tworzenia? Choć nie musiał od razu oferować pełnego zestawu narzędzi, mógł stanowić świetną podstawę do dalszej rozbudowy przez deweloperów.
Istniała także druga motywacja. Zespół chciał ułatwić osobom korzystającym dotąd z frontendu w Twig przejście na React, dbając o to, by zmiana była jak najbardziej naturalna i płynna. Pozostawało jednak pytanie: jak osiągnąć ten cel w praktyce?
Aby to osiągnąć, zespół Syliusa sięgnął po sztuczną inteligencję, wykorzystując ją do swoistego „przetłumaczenia” frontendu z jednego stosu technologicznego na drugi. Celem było stworzenie rozwiązania w React, które zachowa to, co deweloperzy już znają i cenią w wersji opartej na Twig.
(W tle czai się też większe marzenie: stworzenie frontendu w React niezależnego od platformy eCommerce. Choć to wciąż tylko aspiracje, im więcej pracy Sylius wkłada w projekt, tym bardziej staje się to możliwe).
Gdy teoria spotyka praktykę
Na początku Sylius potraktował cały projekt jako „proof of concept”. Dwóm deweloperom przydzielono około 400 godzin pracy i pozostawiono im dużą swobodę działania z wykorzystaniem AI. Rezultaty przerosły oczekiwania. Już w pierwszej iteracji udało się stworzyć podstawową, działającą konfigurację eCommerce, która odzwierciedlała natywny frontend i płynnie komunikowała się z backendem Syliusa. Obejmowała ona kluczowy proces zakupowy - jeszcze bez obsługi błędów, tłumaczeń czy paneli użytkownika - ale mimo to działała.
To doświadczenie dało zespołowi dodatkowy rozpęd i potwierdziło sens całej inicjatywy. Co więcej, ścisła praca z API Syliusa pozwoliła odkryć i naprawić pewne niespójności, które wcześniej umknęły uwadze.
Gdy zespół podzielił się efektami na Slacku, wydarzyło się coś wyjątkowego. Reakcja społeczności była niezwykle pozytywna - inicjatywa została przyjęta z dużym entuzjazmem, a ta energia stała się paliwem do dalszych działań.
Jak to wygląda teraz?
W dzisiejszym świecie technologii frontendowych React stał się standardem. Deweloperzy czują się w jego ekosystemie swobodnie. Znają narzędzia, korzystają z rozbudowanej dokumentacji i wspierają się aktywną społecznością. Sylius chce, by to doświadczenie stało się naturalną częścią całej jego społeczności.
Sylius nie musi być postrzegany wyłącznie jako narzędzie oparte na PHP i Symfony. Może równie dobrze znaleźć swoje miejsce w środowisku Reacta i JavaScriptu, otwierając się na nowe pokolenie deweloperów i nowe zastosowania.
Obecnie zespół przygotowuje się do wydania wersji 0.2, która przynosi znaczące usprawnienia: ulepszone API, pełne pokrycie funkcjonalności odpowiadające frontendowi Twig, rozwiązanie open-source dla społeczności, dedykowany kanał na Slacku oraz przejrzystą mapę drogową dalszych działań.
W tej wersji pojawia się również pierwsze wsparcie dla SSR, dzięki czemu FrontWing jest przyjazny dla SEO od samego początku. Boty wyszukiwarek często mają problem z frontendami opartymi wyłącznie na JavaScripcie, natomiast Server-Side Rendering umożliwia wstępne renderowanie treści dla robotów, przy jednoczesnym zachowaniu interaktywnego doświadczenia dla użytkowników. Dodano też podstawową optymalizację obrazów, powiązaną z inną inicjatywą opartą na AI, nad którą zespół aktualnie pracuje.
Dokumentacja będzie rozwijała się równolegle z projektem. Sylius chce zapewnić deweloperom wszystkie zasoby potrzebne do skutecznej pracy z FrontWingiem. Dzięki dedykowanemu repozytorium frontendu w React, sklepy i zespoły wdrożeniowe nie muszą już tworzyć wszystkiego od podstaw. Zamiast tego mogą skorzystać z gotowego połączenia React + Sylius, czyli FrontWing, co znacząco skraca czas startu projektu i pozwala skupić się na tym, co naprawdę wyróżnia biznes.
"„Żeby zobrazować nasze postępy: jeśli celem jest dotarcie na 40. piętro budynku, to dziś jesteśmy gdzieś na 25. piętrze. Jeszcze nie osiągnęliśmy celu, ale z każdą iteracją stabilnie wspinamy się wyżej” - Mikołaj Król, CEO Syliusa.
Kto zyskuje na tym podejściu?
Choć Twig wciąż pozostaje solidną technologią, z której wiele sklepów eCommerce powinno korzystać, to duże firmy i międzynarodowe marki B2C coraz częściej poszukują rozwiązań zapewniających przewagę w obszarze doświadczenia użytkownika, a nawet minimalne korzyści wydajnościowe.
FrontWing może być dla nich idealnym wyborem, zwłaszcza dla popularnych marek, które chcą czerpać z nowoczesnych możliwości frontendowych, ale niekoniecznie potrzebują dedykowanej aplikacji mobilnej. Kluczowe jest tu zapewnienie opcji i elastyczności, by mogły rozwijać swoją obecność cyfrową w taki sposób, który najlepiej odpowiada ich modelowi biznesowemu.
{{cta-technology-sylius="/pl/comp/cta"}}
Wpływ React.js
Poza lepszą wydajnością i SEO, aplikacja Syliusa staje się znacznie bardziej interaktywna. Korzyści sięgają jednak głębiej niż to, co widzą użytkownicy.
Dzięki rozdzieleniu warstw, gdy część zespołu pracuje nad frontendem, a inni skupiają się na backendzie, oba komponenty mogą mieć własne cykle życia i rozwijać się niezależnie. Taka separacja zwiększa elastyczność rozwoju, pozwala kierować pracę w różnych kierunkach i lepiej rozkłada odpowiedzialność - możliwe jest bowiem wyznaczenie osobnych liderów dla części frontendowej i backendowej.
To podejście technologiczne ułatwia rozwój interaktywności oraz wdrażanie nowych funkcji, takich jak one-page checkout czy infinite scrolling. React otwiera też drzwi do rozwiązań typu PWA (Progressive Web Application), umożliwiających m.in. przeglądanie offline.
Ma to jednak również swoją cenę. Złożoność aplikacji wzrasta, a podejmowane decyzje wymagają przemyślenia. Innymi słowy, zespoły nie powinny wchodzić na nowe terytorium bez odpowiedniego przygotowania i świadomości konsekwencji.
Podsumowanie
Tworzenie oprogramowania open-source daje zespołowi Syliusa ogromną satysfakcję i nieustannie stawia przed nimi nowe wyzwania. Zmagając się z problemami, z którymi wcześniej nie mieli do czynienia, rozwijają swoje umiejętności w niespodziewanych kierunkach. To właśnie dzięki takim doświadczeniom programowanie pozostaje ekscytujące.
"Wsparcie społeczności i jej opinie napędzają naszą pracę w sposób trudny do opisania. Jest w tym coś głęboko satysfakcjonującego - współtworzyć ekosystem open-source i jednocześnie obserwować realne zapotrzebowanie na rozwiązania takie jak FrontWing” - Mikołaj Król.
Przed zespołem Syliusa wciąż wiele wyzwań, ale każde z nich postrzegają jako szansę na rozwój, a nie przeszkodę. Każda trudność wnosi nową lekcję i przyczynia się do stworzenia jeszcze lepszego produktu.
Zespół Syliusa chce, abyś stał się częścią tej podróży. Jeśli zauważysz problem, masz pomysł na ulepszenie lub chcesz dodać własny kod, nie wahaj się zgłaszać issue czy wysyłać pull requestów. To rozwój napędzany przez społeczność w najlepszym wydaniu - a twój wkład naprawdę robi różnicę
<div class="rtb-text-box is-blue-50">Sprawdź projekt na GitHubie i nie zapomnij dać mu gwiazdkę! Sprawdź również dokumentacje. Jeśli chcesz usłyszeć więcej aktualizacji lub zadać pytania bezpośrednio autorom, dołącz do kanału #front-wing na publicznym kanale na Slack’u Syliusa</div>
Poznaj pozostałe produkty Syliusa
https://bitbag.io/pl/blog/produkty-syliusa-test-application
https://bitbag.io/pl/blog/produkty-syliusa-mcp-commerce
https://bitbag.io/pl/blog/produkty-syliusa-demo-creator
https://bitbag.io/pl/blog/produkt-syliusa-documentation-driven-development
