Ever wondered what drives a team to completely reimagine how their frontend works? If you've been following Sylius's journey, you might have noticed they've been cooking up something different - something they call FrontWing - a React.js - driven front-end boilerplate.
This isn't just another tech experiment or a case of "shiny object syndrome." It's the result of real challenges, honest conversations, and hours spent wrestling with the limitations they encountered. The Sylius team didn't wake up one morning and decide to build a React frontend for Sylius on a whim. This decision came from somewhere deeper - from listening to their community, and from recognizing that sometimes you need to take a step back to move forward.
So, how did they end up here? How did an eCommerce platform team find itself with a functional React frontend?
As BitBag, Sylius's Global Solution Partner, we're pulling back the curtain on their process, sharing the why behind their choices, and showing you exactly how they arrived at this.
Let's start from the beginning...
The beginning of the FrontWing story
Let's rewind a bit. Sylius switched from Semantic UI to Bootstrap for v2. From their users' perspective, this fresh, optimized approach was a hit, even running on Twig. The feedback was genuinely positive, and it validated their direction.
But here's where things get interesting. While Sylius's native frontend renders server-side, a React frontend renders on the client side. This shift opens up possibilities - better performance, more interactive interfaces, and improved search engine rankings. It's not just a technical preference; it's about creating better experiences. Furthermore, with the native server-rendered frontend, it was quite challenging to achieve compatibility with widely evolving SPA/PWA (Single Page / Progressive Web App standards).
Over the years, the industry has moved toward a headless-first approach. Data becomes device-agnostic, and the only thing that matters is having a solid data source. At Sylius, they've been playing both sides of this game - serving server-rendered code to end devices while simultaneously building out their API on API Platform, leaving the data layer open for easy integration.
The reality check came when the Sylius team looked at the numbers. Most devices connecting to eCommerce platforms end up in browsers. When they examined their user base, the biggest companies using Sylius for headless implementations were choosing React. The pattern was undeniable.
Seeing this trend, the Sylius team figured it was time to help their community out. Why not build a Sylius frontend that's flexible, fast, and well-crafted, while speeding up development workflows? It might not deliver every tool out of the box, but it could be an excellent foundation for developers to build upon.
There was another motivation brewing. The team wanted to help people currently using their Twig frontend make the transition to React, and they wanted that transition to feel familiar and seamless. But how do you bridge that gap effectively?
That's when they thought: why not let AI lend a hand? Sylius’ Team used artificial intelligence to help "translate" their frontend from one technology stack to another. The goal was to create a React frontend that maintained the essence of what developers already knew and loved about the Twig version.
(There's also a bigger dream lurking in the background: making this React frontend platform-agnostic for eCommerce. While it's still aspirational, the more work Sylius invests in the project, the more achievable it becomes.)
From concept to reality
Initially, Sylius treated this as a proof of concept. They allocated roughly 400 hours between two developers and let them loose with AI assistance. The results surprised them. In that first iteration, they managed to create a basic functional eCommerce setup that mirrored their native frontend and communicated seamlessly with the Sylius backend. Nothing fancy - just the core shopping flow without error handling, translations, or user panels, but it worked.
This gave the team momentum and proved the concept was viable. As a bonus, working closely with the Sylius API helped them spot and fix some inconsistencies they'd missed before.
When the Sylius team shared their progress on Slack, something magical happened. The response was overwhelmingly positive. Their community embraced the initiative with genuine enthusiasm, and that energy became fuel for pushing forward.
Where they stand today
Today's frontend technology landscape considers React the standard. Frontend developers simply work better with React - it's the ecosystem they know, the tools they're comfortable with, and the community they're part of. This is an idea Sylius is hoping to extend to their entire community.
Sylius doesn't have to be just a PHP Symfony tool anymore. It can be equally at home with React and JavaScript, opening doors for a whole new generation of developers and use cases.
The team is at version 0.2, which they're releasing any moment now. This version brings significantly improved APIs, complete feature coverage matching their Twig frontend, an open-source solution for the community, a dedicated Slack channel, and a clear roadmap for what's next.
Version 0.2 also introduces their first SSR support, making FrontWing SEO-friendly from the get-go (search engine bots struggle with JavaScript-heavy frontends. Server-Side Rendering (SSR) allows for pre-rendering content for bots while keeping the interactive experience for users). They're including initial image optimization too, which connects to another AI-powered initiative they're working on - but that's a story for another time.
Documentation will naturally evolve alongside their development progress. The Sylius team is committed to making sure developers have the resources they need to succeed with FrontWing.
By creating this dedicated React frontend repository, shops and developers no longer need to build everything from scratch for Sylius-based stores. Instead, they can leverage the ready-made React + Sylius connector called FrontWing. This pushes the starting line much further ahead, letting teams focus on the unique aspects of their business rather than foundational architecture.
"To put our progress in perspective: If reaching the 40th floor of a building is our goal, we're currently around the 25th floor. Not quite there yet, but we're steadily climbing higher with each iteration," says Mikołaj Król, Sylius CEO.
Who benefits from this approach?
While Twig remains a solid technology that many eCommerce sites should continue using, there are large companies and international B2C shops that would gladly embrace solutions giving them an edge in user experience and even minimal performance advantages.
FrontWing could be the perfect fit for established brands that want modern frontend capabilities without necessarily needing a dedicated mobile app. It's about giving them options and the flexibility to grow their digital presence in whatever direction makes sense for their business.
The React.js impact
Beyond improved performance and SEO, Sylius's application becomes significantly more interactive. But the benefits go deeper than what users see on the surface.
When part of a store’s team works on the frontend while others focus on the backend, these components can have separate lifecycles and develop independently. This separation creates additional flexibility in how shops evolve. Development can branch in different directions, and responsibility gets better distributed since teams can have dedicated leaders for both frontend and backend efforts.
This technological approach makes it easier to develop frontend interactivity and introduce new features like one-page checkout or infinite scrolling. React also opens the door to creating Progressive Web Apps (PWAs), enabling offline browsing options.
However, there's a flip side to consider. Application complexity increases, and decisions need to be made thoughtfully. In other words, teams shouldn't venture into unfamiliar waters without proper preparation and understanding of what they're getting into.
Wrapping up
Creating open-source software brings the Sylius team genuine joy and teaches them constantly. The team gets to tackle problems they've never encountered before, pushing their skills in directions they didn't expect. It's this kind of challenge that keeps development exciting.
"Community support and feedback fuel their work in ways that are hard to describe. There's something deeply satisfying about contributing to the open-source ecosystem while seeing real demand for solutions like FrontWing," states Mikołaj Król.
Naturally, the Sylius team will face plenty of challenges ahead, but they see each one as a growth opportunity rather than an obstacle. Every hurdle teaches them something new and makes the final product stronger.
The Sylius team would love for you to be part of this journey. If you spot issues, have ideas for improvements, or want to contribute code, don't hesitate to open issues or submit pull requests. This is community-driven development at its finest, and your input makes all the difference.
<divclass="rtb-text-box is-blue-50">Check out the project on GitHub, and don’t forget to give it a star! If you are curious to hear more updates, or ask questions to the authors directly, join the #front-wing channel on Sylius’ public Slack workspace.</div>
