The HeadYes Revolution

Choosing the next e-commerce development tool requires an accurate analysis that can be done by evaluating the different options from different points of view: potentiality, learning curve, effort vs. benefits and, last but not least, suitability for customers in terms of cost and opportunities.

In this post, I will share my CTO/developer perspective about the shining new technologies and approaches like headless e-commerce and PWA and the new, exciting, alternative integrated front-end opportunities for Magento.

The Magento Background

Since the first versions released in 2016, the Magento 2 platform has taken a giant step ahead. 

Many new functions and settings have matured in the latest versions, increasing performance, stability and efficiency.

If we want to look for a “but,” we can still find some weak points in the front-end area.

While the front-end technologies on the web keep evolving faster than ever, the Magento frontend stack seems … stuck.

The JavaScript front-end stack in Magento 2 (jquery, knockout.js, require.js) starts looking outdated. With time passing, it is becoming less competitive in performance and results compared to the modern available tools and frameworks. 

On top of that, in the past months, Google released the “Web Vitals” metrics, which demand more in terms of performance to web applications and, for old heavy front-end systems like Magento’s one, this is a death blow.

It looks like we have an Achilles heel.

The Headless Revolution

Two (relatively) new words are conquering the scene during the last months, promising performance and enhanced user experience: headless and PWA. Let’s understand them better.

Headless and PWA can be complementary, but they need to be treated as separate concepts because their meaning and scope are different.

Headless is an architectural approach, rather than a new technology — an exciting alternative to integrated systems. 

What is a headless system, and what are the other different approaches available?

• The traditional coupled approach consists of a back end and front end based on the same monolithic application. Being both tightly coupled, changing an area can interfere with the other.
• The decoupled approach consists of having a decoupled application that is still made by a back end and a front end, but they are two different systems. This offers, for example, the possibility to make changes in one area without interfering with the other one. 
• The headless approach is a subset of decoupled one; the main difference is that while the “decoupled” is made with a predetermined front-end solution, “a headless CMS does not have a defined front-end system or presentation environment.” A headless back end is ready to serve one or more frontend applications, totally independent from the back end’s technology.

The headless approach promises a lot: 

• Independence
• More development freedom with fewer consequences on the front-end area
• No limit in frontend integrations; we can potentially hook as many front-end systems as we need

But it also comes at a price:

• We’re going to increase the development effort.
• We need more skills than a traditional approach and, as a direct consequence:
• We need more people working on it.

Let’s deepen the second magic word: PWA.

A PWA (progressive web application) is a web application that aims to fill the gap between a web-based and a device-installed app.

The word and the idea were born in 2015 among Google’s engineers. This idea is becoming a reality during the last couple of years thanks to browsers’ evolution supporting the required underlying technologies.

To have a PWA, we simply need to enable browser service workers and provide a manifest file, so ideally, every web application can become a PWA.

The promise is ambitious: the PWAs are capable, fast, can work offline and are installable. In one sentence, they are: “websites that took all the right vitamins.”

Wow

OK, so all these brand-new tools seem exciting; they are going to establish new standards in what a web app can do; and we will have the opportunity to build a super new website.

Let’s collect our thoughts:

• We’re facing some problems with the Magento 2 front-end stack performance.
• We need to change something to improve that area.
• We are evaluating new technologies and, until now, we understood that a headless approach can offer new possibilities and making our web app a PWA can unlock new scenarios. 

So, let’s get this straight: “Should we cut our Magento head off?”

• How can this be useful for our e-commerce projects?
• Is our Magento ready to go headless, giving us tangible benefits?
• Which are the PWA-ready options we can use?

Let’s have a look at the shiny “guillotines” we could use to cut this head off then: 

The Agnostic Ones:

• Vue Storefront: It’s an agnostic framework that grabs a lot of interest thanks to its flexibility and stability: code is well documented, and it has reached a high level of maturity. A plus is that you can easily hook it to different platforms like, for example, Magento and Shopware.
• FrontCommerce: Even if there are fewer showcases and examples than Vue Storefront, it has extensive support for Magento, and its final results and performance are quite good.
• Deity Falcon: This is another big player in the field is an agnostic framework supporting different platforms.
• Next.js: Last, but just by order of arrival, it looks like this is the next big thing. The next.js — commerce version — is collecting enthusiastic feedback from the community. At the time of writing, it doesn’t support Magento yet, and maybe we need to wait for more stability, but it’s an excellent candidate to become a significant player.

The Magento-Only Guillotines

• ScandiPwa: It’s a worthwhile product from Scandiweb that is focused on Magento and offers good support and outstanding performance results.
• PWA Studio: It is the official project from Adobe; there are rumors that this will be the only front-end solution for Magento from Adobe. It’s based on a brand-new stack, comes with an advanced architected code and, as a plus, it can count on reassuring Adobe’s support.

Evaluating Pros and Cons

So far, we’ve seen great tools and new exciting possibilities. What about the cons, then?

The stack and the skills needed are almost all new, and they are different from the ones required for Magento development so far: that can be exciting, but: 

• How many people will we need to build our e-commerce project?
• How high will the cost be for our customers?
• Will our customers be willing to invest more in the promises of new technology?
• Which are the real benefits for our merchants?

The Biggest Secret Ever

While I was evaluating all this, I had the opportunity to attend an online event during the latest months of 2020: Reacticon 3.

During the event, I had the chance to understand better the new tech promises for the e-commerce front end, listen to great presentations about it and discover something new, especially in the last talk of the event, a talk called “the biggest secret ever.” It focused on a new solution built, by serendipity, during a side project development. A solution that allows Magento to leave its head where it has to be, still obtaining the best results from a new stack integration.

The name of the developer (and inventor) is Willem Wigman, and his new creation is an innovative, integrated theme based on new front-end tools and technology: Hyvä.

While he was developing a personal side project, he started asking himself some whys, the same that many of us are asking in the last period:

• Why have we to learn a new bunch of languages to make a storefront?
• Why should our customers invest in two products (a PWA and a headless Magento backend) instead of just one?
• Why have we to do all this when the only problem is that the front-end stack is outdated, heavy and slow?
• Why don’t we just try to use Magento with a new stack in an integrated way, focusing on making Magento front end better while keeping the good parts of it?

The answer to all these whys has been thrilling for me.

Instead of standing still on these two options: 

1. Accept what Magento front end offers with its pros and cons.
2. Try to obtain good results with a headless approach and separate PWA, incrementing the developing effort.

Willem took an exciting “third way” (as I like to name it).

He took two of the most promising front-end tools from the Laravel ecosystem (Tailwind CSS and Alpine.js) and integrated them into Magento, overriding the standard theme layouts completely.

The result is a fully functional Magento storefront with all the best from both worlds: 

• The flexibility of the layout system
• The possibility to extend Magento with modules
• The ultralight CSS library from Tailwind
  • One final css file with only the class we’re using in the project
• The ultralight alpine.js library
  • We will have kilobytes of javascript on our page, compared to the Megabytes we’ll have in Javascript-based applications

And, yes, we can make it a PWA, too, enabling service workers and using a manifest file.

Conclusion

When we find the right solution, we usually recognize it because it’s simple, light and because it flows, pulling away doubts and obstacles.

The Hyvä solution looks reasonable and perfectly fits those looking for a fast and high-performance e-commerce storefront. In the end, this is our primary goal.

Is this the last word for a modern Magento front-end solution? Maybe we cannot have a single final word. 

As always, it depends on budget, skills, customers’ needs and project objectives.

I think we could go for a separate javascript-based PWA for those projects that have app-based needings.

But if we have to develop a project for an e-commerce storefront (either PWA compliant or not), my choice would be Hyvä. I had the opportunity and pleasure to look at Hyvä code and develop with it during its closed beta.  I then asked my Magento project to try on this new suit. Well, when it came out of the dressing room, I can say it looked gorgeous. 

So, for me, it’s a Yes. A HeadYes to this revolution.