The other frontends of Magento

The other guys (and girls)

It is how the market works. The frontends that are used the most are mentioned the most and get even more attention because of this. That's how a hype works, but that's also how popularity works in general. But it doesn't mean that there is no alternatives to these alternatives. For some people, Hyva is too monolithic, PWA Studio too complex and Vue Storefront too Vue. People want even more alternatives.

There are the other guys and they are definitely noteworthy: Daffodil, Alpaca, FrontCommerce, DEITY, Breeze, GraphCommerce and ScandiPWA (not in any order of preference). Some of them were mentioned in past Reacticon events and as an organizer of those events, I feel it is up to me to make sure that they and others are not overlooked.

Let's meet them. Disclaimer: This is not going to be a thorough comparison, which is hard because the frontends have each their own unique approach. Instead, let's just say hi.

GraphCommerce

GraphCommerce includes a NextJS-based React frontend. More importantly, it's backend stack uses GraphQL Mesh to combine not only GraphQL services but also non-GraphQL services. GraphQL as a solution was created by ReachDigital, a Dutch Magento agency. It seems oriented to React developers that favor NextJS already, wanting to build their own Magento headless frontend but don't want to start from scratch.

See graphcommerce.org for more info. I also wrote a blog on GraphCommerce recently: yireo.com/blog/2022-09-08-review-of-graphcommerce

Daffodil

Dafffodil might actually have been one of the first headless frontends out there, even though it was not given the same attention as DEITY and VueStorefront back then (marketing efforts I guess). Daffodil is based on Angular, has a highly modular design (hexagonal architecture) and uses Redux for state management. The codebase is made up of numerous small NPM modules with contants and classes, to allow you to compose your own customized frontend. The solution is flexible to allow for all kinds of backend services to easily be connected, but you will need to know what you're doing. And I guess you need to favor Angular.

See next.daff.io and github.com/graycoreio/daffodil.

Alpaca

Snowdog its Alpaca is not a headless solution, but a Magento theme instead (similar to Hyvä): It throws out the HTML, CSS and JavaScript of the original Luma theme and replaces it with its own CSS (SCSS, Atomic Design) and FractalJS components. Adding third party Magento modules with frontend logic requires you to rewrite Luma-based JS (Knockout and Require) into the Alpaca JS format (again the same as with Hyvä) and some third party modules are simply already supported out of the box. As an adoptor of Alpaca, you will need to be prepared to write custom JS code. And even though there is plenty of code to make use of, the customizations still require you to be strong in JS (Fractal or vanilla) and SCSS (build whatever you want to build).

See github.com/SnowdogApps/magento2-alpaca-theme.

ScandiPWA

A hybrid form between headless and Magento theme is ScandiPWA: It offers a PWA based on React, but is integrated into Magento as a regular theme. This leads to a lot of flexibility (parent/child theming, component extends) but also to a custom form of React components (class-based with custom properties). Just like other frameworks have done, Scandi has taken up the challenge to support as many Magento modules as possible. And with that, they are a fierce competitor of Hyvä (if extension support is one of the most keypoints to base your decision upon). The ScandiPWA solutions shows a lot of creativity, but would still require you to prefer React over other solutions.

See https://scandipwa.com/

DEITY

At the moment when Magento only had Luma to offer, VueStorefront popped up as a solution and so did DEITY, with their Falcon framework, based on React, Node middleware and much more. Even though they moved out of the Magento picture a bit (because of political reasons), they are still offering a lot for Magento agencies. The headless part of their story means that you see the benefits of building your own React app as a frontend (for the look & feel) and then use the Falcon technology to add logic to it. In other words, you need to be (or become) a React developer to start liking the DEITY solution.

See deity.io

Breeze

Most of the alternative frontends moved away from the Luma technology, but Breeze takes a different approach. Instead of ditching KnockoutJS and RequireJS altogehter (and therefore needing to rewrite all of the original Magento JS logic), it prefers to rewrite their usage. This still requires effort, but allows modules to be adapted more quickly. It does solve a lot of the performance problems of the original Luma stack, but it still uses Knockout in a world where there are so many alternatives. For some shops, that don't invest a huge amount of time (and money) into switching to an entirely new frontend, it could offer benefits. If you like Knockout.

See swissuplabs.com/magento-2-breeze-module

Other mentions

There are even more frontends out there, but I haven't had time to study them. For instance, Storefront X is Vue-based and therefore is able to compete with Vue Storefront. GoMage PWA is built on top of Adobe PWA Studio. Other names include FrontCommerce, Tigren, CedCommerce, BSS Commerce, Simicart, MageDelight, Onilab, NexPWA and Storefront Cloud. All of these options might be based on more generic JS frameworks like React and Vue, and some of them are again based on one of the main options. The choice is yours.

Chaos? Too many options?

Luma, Hyvä, Adobe PWA Studio, VueStorefront, Breeze, DEITY, GraphCommerce, Alpaca, ScandiPWA, Daffodil. What else is out there? There might be even more alternative frontends out there. Actually, I do know of more, but those are developed by agencies for their own usage only. The listing is therefore endless. Does that create chaos? Does the fact that there are so many frontend solutions out there harm Magento as a whole? I don't think so.

The fact that there are so much frontends out there, simply shows that Magento is still very much alive - as a backend application. In the world of frontend development, there are 100s of CSS frameworks and JS frameworks out there, so it seems just a normal thing to have those frameworks being adapted to the Magento ecosystem. Any frontend framework seems opinionated, so it is healthy to have such a diversity. As a newcomer, it makes the choice a bit harder. But if you yourself are not opinionated (React, Vue, Angular, Fractal, it is all the same to you), simply go for the most popular solution instead. But just realize to the very least, that the world of Magento frontends is larger than just those main popular solutions.