Choosing a Magento Frontend

Veterans and beginners of eCommerce alike can run up against questions they don’t always have a quick answer for. One of the more common questions that pops up for those with Magento webshops is “Which Magento frontend should I use?” It’s an important choice and affects everything from featureset to loading speed. Thankfully today the Magento user has a broad spectrum of frontend solutions to choose from, but it wasn’t always such a smorgasbord.

​​​​​​​Just a few years ago posing the same question would offer you a far shorter answer – custom or Luma. While both of these options certainly have their uses and advantages it doesn’t exactly spoil you for choice. However thanks to the fast and steady progress of talented developers this has become a more complex question with a myriad of options to choose from, including headless and PWA solutions. We thought we’d review some of the most popular and dependable choices on the market and give you a map to choose the solution that;’s right for you. In this article we are covering Luma, Hyvä, Vue Storefront and Magento PWA Studio.

Magento Luma

Magento Luma was one of the first new themes for the Magento platform and is in web design years getting on in age. Luma became the default theme and was first released in August 2015, more than 7 years ago! It incorporated responsive web design principles and focussed on clean design language and better user experience than the previous Magento default theme ‘Madison Island.’ The Magento Luma theme is a theme made for the standard, built-in frontend of Magento. The platform is structured in a way that many PHP developers find familiar with a PHP application. The application is paired with a frontend theme, and therefore has both a backend and a frontend associated with it. This makes it a monolithic application.

Luma was built during the development of Magento2, between 2012 and 2016. This extended development came with a cost, as when Magento 2 released accompanied with Luma, it was seen by some developers as obsolete. The world of frontend tech development had already accelerated past the Luma platform. This meant that the theme contained outdated Javascript styling, tools, and frameworks considered to be an inefficient approach for perforant frontend implementations. This means developing with Luma comes with certain caveats. Development can be very time consuming, and therefore potentially unpleasant for developers, as well as offering poor out of the box front end performance. Yet even today Luma is still one of the most supported frontends when it comes to third party extensions. It simply comes at a steep performance cost. For most therefore this is not a solution that can be recommended.

Hyvä themes

Hyvä is a theme built in 2019-2020, which aims to deliver a new theme that is easy to develop a Magento frontend with, with a much smaller and simpler stack of technologies and high out of the box frontend performance. In other words Hyvä themes is a complete revamp of the Magento frontend. You’ll find the tools you’d expect such as layout XML, blocks, view models and phtml), but lacking some of the baggage that can come along a Magento frontend (UI-components, Knockout, less CSS and more). The name of the game is reducing complexity with increased speed.

Hyvä offers a great alternative to Single-Page-Applications (SPAs). First and foremost you can expect faster websites with less budget, and a familiar toolset. Like Luma the Hyvä theme is the theme for the built-in Magento frontend. Unlike Luma however, the implementation of the theme is done completely differently.

The result is that Hyvä has exploded in popularity, nearing 1000 live Hyvä storefronts with both developers and merchants on board for the long haul. Hyva.io has also expanded its focus towards other solutions for developers, such as a new Magento checkout (which is more extensible/customizable than the standard Magento checkout) and a Hyvä component library (with which makes it easy for developers to reuse UI components from a UI component library). Hyvä has a lot of momentum and is a breath of fresh air in the Magento ecosystem.

Hypernode hosts the official Hyvä demo shop, if you’d like to know more about Hyvä check out our blog or contact us with any questions you may have!

Hyvä compared to other Magento frontend solutions. More information can be found on their blog.

Vue Storefront

Vue Storefront is a headless Progressive Web Application (PWA) written in the Vue.js frontend framework. Because it is headless, Vue Storefront is platform agnostic and is therefore compatible not only with Magento 2 but Shopify, WooCommerce, and more. It’s an open source project and popular with some developers, as in addition to direct integration with ecommerce platforms it also directly integrates with content management systems.

While there are speed advantages to, for example, navigating a vast product catalog with the Vue Storefront API – it comes with additional complexity compared to more traditional themes. You can expect to need extensive support with a team or teams of developers managing the pipeline between Vue Storefront and Magento or your chosen ecommerce platform. The result is a system that has more points of failure as a consequence of needing more diverse expertees.

PWA Studio

Then you have Magento PWA Studio. This is another PWA with a disconnected frontend that uses modern JavaScript technologies to enable building unique and modern storefront experiences. Unlike Vue Storefront, PWA studio is more focused on Magento 2. It’s a collection of solutions for creating storefronts, specifically focused on Magento 2 which uses the React frontend framework. While it’s not widely used it’s a name often mentioned in the PWA space, and has an active and dedicated community.

As Magento PWA Studio is functionally a completely separate storefront developers working on it do not need Magento experience, which means you can run a bifurcated team of developers. This can come in handy when outsourcing part of your development project but keeping part in house.

A note on PWA’s

The development of Magento storefronts has been an ongoing example of tech development writ large. Most interesting is that in the time between Luma and Hyvä, many Magento developers started looking further into what the right way forward is when creating the best Magento storefronts possible. PWA’s were much hyped and written about during this period, and therefore deserve a mention here.

For a time PWA’s were seen as an inevitability of the future of ecommerce store development. Then Hyvä happened and offered their vision of what they thought the Magento 2 standard theme should be. As a result many ecommerce agencies have gone back to the traditional way of developing Magento storefronts. The reason for this is simple: Many ecommerce developers are happy to keep developing Magento storefronts in a way that is familiar to them, while keeping up with modern technologies and high pagespeed scores.

PageSpeed Booster

Speaking of pagespeed scores, your Magento frontend choice is not the only avenue to optimize your ecommerce store and sort out your frontend performance. Hypernode’s PageSpeedBooster automatically maximizes your PageSpeed ​​scores and improves the performance of your shop. Curious about how we can boost your online success, let us know!