What is Vue Storefront and Why is it the Future?

Vue Storefornt: Currently, Vue Storefront is the most mature e-commerce PWA solution. It has proven its value in over 40 live implementations! Let’s go through each and every part of Vue Storefront to answer why it is the future!

Introduction of the Vue Storefront Next architecture!

Vue Storefront Next is a common name for the research and development efforts to improve the quality, architecture, and experience of the Vue Storefront developers. The goal of these efforts is to make it easy to use, by building independent tools, modular, flexible, and easy to update. Improvements will be incrementally made for sure.

The community knows how great it is after more than 2 years of constant improvements but they also know very well about all its weaknesses. The developers want to move forward, experiment with new ideas, and use state-of-the-art technology to be the best in the category. They know how "perfect Vue Storefront" should look like after all this time. But they are getting to the point where current architecture is a limitation. But it's a great piece of software. It is probably the best on the market and can serve well in almost any case of use.

Developers along with the community are discussing the solution for it. It will be a solution to all its current weaknesses (especially updates). It will also be a natural evolution of the concepts embracing all the modern best practices and trends in the creation of Progressive Web Apps. The hardest part was to make it a natural evolution from which all can profit. Whether you already have a shop on Vue Storefront, or just plan to do it in the future, you should be able to take advantage of its new architecture.

What is it all about?

Every single project is different. The developers wish to provide our users with the best in class tools to build amazing e-commerce shops and let them decide about their scope of use. Sometimes the only thing you need is an agnostic API layer from Vue Storefront, sometimes it is just a UI library. The decision to remain up to the user.

Modularity is the New Architecture keyword. Instead of providing Vue Storefront as a single piece of software, it is divided into smaller, independent pieces that are not dependent on each other — they can be used either individually or in combination with each other.

The modularization of the View Storefront is a process. As part of a new architecture, other layers are slowly detached from the main product, then tested, improved, and then released. It is not going to happen all at once. But an easy way to one by one take on new features is provided.

There are currently two products ready for use which are part of Vue Storefront Next architecture

• Storefront UI

  a highly customizable, well-performing UI library that helps developers deliver the best user experience in class mobile-first e-commerce with minimal effort.

• Storefront API

  which was released recently is an agnostic e-commerce API based on GraphQL, which is essentially just a natural evolution of view-storefront-API.

Developers are already developing a Storefront UI based theme for Vue Storefront and it should be ready in Q1 2020. Also on the roadmap is the replacement of view-storefront-API with Storefront API but without a specific deadline as it is a new product that still needs some tests.

Other products in progress - Vue Storefornt

There are products and concepts which are still under development and which are not yet suitable for use in production. They are most likely to be completed and adopted by 2020. Whether they will be included in the described form in Vue Storefront is not certain but the developers certainly want to explore these ideas as they see them as major improvements over current solutions. They learned that publishing early is a good decision in some situations, and sometimes not. These products are meant to be the new public API and they want to be absolutely sure they provide both users and developers with the best possible experience.

• CLI Vue Storefront

  Even today this product can be used as a @vue-storefron/CLI package but its capabilities are now limited to the creation of new GitHub repo Vue Storefront projects. In the future, they want to make it a go-to scaffolding tool for new Vue Storefront projects allowing users to decide which e-commerce platform, CMS, and specific features they want to use (such as URL dispatching). Similar to what currently Vue CLI offers.

• Vue.js 3 Composition API-based Integrations

  Composition API is one of Vue.js 3's greatest features which truly distinguishes this framework from others. It's a whole new approach to reuse code and something that allows library authors like us to deliver much simpler and powerful APIs. This approach shows much potential as a major simplification of core interactions (as compared to mixtures) and a way to deliver great developer experience. The developers are expecting integrations in e-commerce and CMS to be just a set of Vue 3 composables that are not coupled with any other part of Vue Storefront architecture. It will improve the modularity of the entire ecosystem and enable the integration of Vue Storefront in other Vue.js projects to be utilized.

• Nuxt.js themes

  The development team has been using their own server-side rendering since the beginning, which has led to many maintenance issues or lack of certain features. Using Nuxt.js will not only improve the quality of our SSR but also the overall Vue Storefront developer experience. In addition to the purely technical advantages of using Nuxt, Vue Storefront developers will have access to hundreds of Nuxt modules that will greatly accelerate common tasks such as authentication or internationalization.

New integrations on Next architecture

The developers are eager to provide a lot of updates and features and they want to do it as fast as possible. They want to spend more time testing and discussing new tools to make sure they are stable enough on publishing day not to change drastically in the future. They want to give you an instrument that will not require major efforts to stay up-to-date once adopted.

To test it, they have decided to test the new architecture with two new e-commerce platforms

• Shopware 6

  Vue Storefront has become Shopware's exclusive partner for its headless storefronts. Together with their team, they are building Native Integration based on Next Architecture for recently announced Shopware 6.

• Commercetools

  Integrating with this platform seems like a natural choice for the developers. They are focused on delivering great APIs and Vue Storefront developers are focused on delivering great frontend.

At the same time, building two integrations will help them make sure their new API is not platform-specific and can handle all of the different scenarios. In addition, they will be able to test how all the new tools work together. Once they are satisfied with the outcome of native integrations, they will implement these ideas for our main, "agnostic" integration based on these.

Adoption strategy

Every new tool will be adopted into the main Vue Storefront project once it is ready. Immediately after they are released in both new and existing Vue Storefront shops, you will be able to use new functions. Just keep in mind that they are not compulsory to use. That is up to you to decide which ones to use. Many of the upcoming changes are focusing heavily on letting developers build shops on the Vue Storefront faster. Because of that, you might decide to omit some of them for already existing projects. Because all of the upcoming projects are independent tools that only touch a certain layer of the application, you don't have to make a choice between using all or none of the new tools.

If your shop works and performs well already, you can freely use only the tools that make sense to you and keep the rest of the application untouched.