Magento 2 integration: the story and its benefits

We are thrilled to announce that the long-awaited integration between Magento 2 and new iteration of Vue Storefront is finally here, and we are incredibly excited to share it with you! 

Magento 2 integration was the one we were always most passionate about and wanted to make right more than anything else. Let’s go back to the end of 2017 to understand why it's so important to us. 

At that time, with Piotr Karwatka, we pushed the first commits to the Vue Storefront 1 repository and started spreading the word about the project among the Magento developers. It was the first time I interacted with the Magento community, and I didn’t know what to expect. I was soon about to learn how great it is!

The response was incredible. Just a few weeks after the announcement, hundreds of developers joined our Slack and wanted to support the project. Many of them did that through contributions, others were spreading the word or answering questions. Everyone wanted to get involved, and everyone wanted us to be successful. Over the next two years, the Magento community kept supporting us. We were invited to almost every Magento event, and every time we made it, we were getting a lot of positive energy and support from everyone we met. 

I have no doubt we wouldn’t be where we are now without the great push we got from the Magento community, and for that, we are forever grateful! This is why we want to give back to the Magento community, and we’re releasing the integration as an Open Source project with an MIT license, which means it can be used for free and without any limitations for any purpose!

Outperforming Vue Storefront 1 in all aspects

We were nearly ready to launch this integration a few times before, but we knew that the Magento community deserved something that would outperform Vue Storefront 1 in all aspects, so we took our time and carefully investigated the needs of Magento frontend developers.

At the end of last year, we hired Marcin Kwiatkowski, one of the best developers I know with a lot of experience in both Magento and Magento frontends, to lead the project and watch over its quality. I am incredibly proud of Marcin and his team's work. I couldn’t ask for more committed and hard-working developers. They are never fully satisfied with the final result and always look for things to improve. When Marcin took over this project, it was almost ready, and I recommended that we not delay the launch anymore. Despite that, Marcin made a tough decision and postponed it for many months. He wanted to rebuild the integration to meet his quality standards (which are very hard to satisfy).

Let this show how much this team cares about the project and what you can expect after the 1.0 release!

Today’s launch is a historical event also because it’s the official end of Vue Storefront 1. We will still provide extended support for clients and apply essential security fixes, but we are more than sure that the current solution is outperforming Vue Storefront 1 in all aspects and that’s the version we’re putting our whole focus on.

Let me highlight some of the key aspects we have improved in this iteration of Vue Storefront:

It’s future-proof and leverages Nuxt.js

We started building Vue Storefront 4 years ago when headless commerce was still unexplored territory for everyone. We were the first ones on the market to experiment around this concept on such a huge scale but we were also the first ones to make mistakes.

In Vue Storefront 2, we applied four years of lessons and tons of feedback we got from our customers, contributors and fellow community members.

We decided to use Nuxt.js instead of building low-level features by ourselves. Nuxt is a popular and extremely powerful meta-framework built on top of Vue.js that contributes to a great developer experience and ensures constant updates and improvements on the micro and macro levels. 

Choosing Nuxt ensures that we will always be following the latest trends in SPA development and be the first to adopt all new Vue.js features. 

It can do more!

One of the main reasons why we decided to migrate Vue Storefront to Nuxt is its ecosystem. More than 200 official (and thousands of unofficial) Nuxt Modules are now available for Vue Storefront users. Every common use case of Single Page Application or integration with a known tool is now achievable in no time through Nuxt Modules.

Also, Nuxt supports multiple deployment options like SSG, SSR, CSR, and Hybrid and each is highly configurable.

Now, you can focus on building the parts that are specific to your project, not on repetitive groundwork.

It’s faster

Vue Storefront 2 integration achieves on average 20-30% better performance on Home, Product and Category pages compared to Vue StorefrontStorefron 1 on Lighthouse 6 metrics.

But we’re still not done! We still see room for improvement and we plan to double that in the upcoming months! At the same time we are looking closely at the amazing work the Nuxt.js team is doing on Nitro engine that should open a lot of new possibilities when it comes to edge computing!

It’s simpler (and easier to deploy)

One of the issues of Vue Storefront 1 was its complexity. Our main goal was to overcome the slowness of Magento but the solution came with a cost. This cost was additional complexity of hosting ElasticSearch, Vue Storefront API and running indexers.

Vue Storefront 2, by default runs both Nuxt and the Middleware as a single Node application and can be hosted everywhere where Node.js is supported and can be deployed with a single command.

If you have higher traffic you can always host our API middleware as a separate application that scales independently. And of course, if you want to support us further, we would be more than happy if you explore using our cloud, you can check more here .

It’s easier to learn

Because of the reduced complexity, the learning curve is also much sleeker. One of our goals for the second iteration of Vue Storefront was to accelerate the development in every possible way. How long it takes for a developer to get onboarded into the project and how fast she/he can be productive is one of those aspects.

In Vue Storefront 2 we use common tooling and known patterns so developers need to learn only a few new concepts to become productive.

It’s using GraphQL

All those improvements are just the cherry on top. Vue Storefront 2 integration leverages native Magento 2 GraphQL API to ensure the best developer experience. In addition we introduced optimizations that decrease the impact of the GraphQL layer on the bundle size, especially when there are a lot of queries and mutations.

What are the differences between Vue Storefront and PWA Studio?

If you are in the Magento space you know that it has its own headless frontend solution - PWA Studio. To be more precise - a toolkit to build PWA frontend.

We have been following PWA Studio updates from its early days and we have a bit of a different vue on how to build Magento storefronts.

On a high level you can say that the key difference between PWA Studio and Vue Storefront is very fundamental. While Adobe’s product is a rich (but also complex) toolkit to build Magento Storefronts, Vue Storefront IS the storefront itself.

Our goal is to accelerate the work of development teams by providing the best boilerplate out there. We believe that the best acceleration comes from removing repetitive, generic groundwork and not confusing developers with a lot of initial architectural decisions and discussions that almost always have the same result. We believe that delivering boilerplate with all the groundwork in place, good architecture, infrastructure setup and a wide range of integrations is a better contribution than an additional set of tools that they have to learn and then build their own accelerators with.

We also believe that one of the main benefits of headless is freedom. This is why we want to help our users avoid so-called vendor lock-in. If you want to stay more independent from Adobe or if you plan to migrate to a different eCommerce backend engine (commercetools / BigCommerce / ElasticPath etc) in the future, then Vue Storefront is definitely a better choice for you. With Vue Storefront you can change your eCommerce, CMS, search, payment or any other vendor without rebuilding your storefront from scratch.

As you see, we have a completely different philosophy than Adobe when it comes to building storefronts but the differences are not only on the higher level. Vue Storefront has full Server-Side Rendering support that PWA Studio lacks and provides additional API Middleware that provides more flexibility and better performance on the data layer. 

Did I mention that we also have a better feature coverage ?

You can expect a whole post from Marcin Kwiatkowski about the differences between Vue Storefront and PWA Studio soon!

What are the differences between Vue Storefront and Hyva?

Both Hyva and Vue Storefront are great alternatives for a traditional Magento frontend and both will bring noticeable improvements in both Developer Experience and performance of your Magento store. It’s important to be aware that both tools, even though they solve the same problems, fit into completely different use cases.

Hyva is a Magento theme so your application is still monolithic. Despite the old PWA hype in the Magento community, we believe that there is a place for a monolith in the eCommerce solutions landscape. It’s definitely a better choice if your requirements are straightforward and you want to heavily leverage features of Magento instead of relying on multiple, independent software vendors or building your own microservcies. The initial cost of headless commerce is high and its benefits are highest at larger scales.

Vue Storefront is an independent, frontend application that talks to Magento through an API and comes with all the benefits (and drawbacks) of headless architecture. Just like any headless solution it’s a great choice for larger and more complex shops that need to remain scalable and easy to change despite a huge scale. If you are running a $500k / year business, you probably should not consider headless and choose the option that would allow you to start selling as fast as possible.

So the choice is really not between Vue Storefront and Hyva but Headless and Monolith… and you know what we put our money on!

What’s next?

Do you feel excited? I definitely do and I can’t wait to hear your feedback!

Don’t hesitate to join our Discord channel and let our team know what do you think about the integration. We would love to know what you like and what you think we should improve.

Let’s build a perfect acceleration for Magento storefronts together, just like we used to do before!

Want to try it out? Check out the documentation

Want to see the code or contribute? Check out the repository

Want to support us? Give us a star and spread the word about the new integration on social media!