Vue Storefront — What’s Next?
After almost 3 years of building Vue Storefront together with our community, we learned a lot. It’s safe to say that after such a long time we have very deep and unique knowledge about the needs, weaknesses, and strengths of headless eCommerce. From the very beginning, we were constantly improving Vue Storefront with every iteration by applying our learnings and responding to community feedback. Now we want to take these improvements to a whole new level!
TL;DR: Vue Storefront Next is a common name for our R&D efforts to improve Vue Storefront quality, architecture and developer experience. The goal of these efforts is to make it easy to use, modular, flexible and easy to upgrade by building independent tools. Improvements will be implemented incrementally.
Introducing Vue Storefront Next architecture!
Vue Storefront is currently the most mature eCommerce PWA solution that has proven its value in more than 40 live implementations! After more than 2 years of constant improvements, we know exactly how great it is but we also know very well about all its weaknesses. We always want to push forward, experiment with new ideas and use cutting-edge tech to be the best in our category. After all this time we know exactly how “perfect Vue Storefront “ should look like but we are slowly getting to the point where current architecture is a limitation. Don’t get me wrong — it’s a great piece of software and we are really proud of it. It’s probably the best one in the market and can serve well in almost every use case. But we are ambitious. “Better” is not something that satisfies us. We want it to be as good as possible and to achieve that we need to make bold moves.
For quite some time we are discussing and maturing a concept of new Vue Storefront architecture that will be a solution to all its current weaknesses (especially updates) but also a natural evolution of our concepts that will embrace all the modern best practices and trends in building Progressive Web Apps.
Surprisingly, the biggest challenge we faced was not about the architecture itself — we are discussing it heavily on a daily basis from the beginning of the project existence so we had a lot of time to develop mature ideas for improvement of almost every aspect of Vue Storefront. The hardest part was to make it a natural evolution that everyone can benefit from. No matter if you already have a shop on Vue Storefront or just plan to make it in the future — you should be able to benefit from its new architecture.
I’m really happy to announce that after countless meetings, discussions with our community and arguments in the core team we have a concept that we are really proud of and is mature enough to be shown to a broader audience! Ladies and gentlemen — introducing Vue Storefront Next — our new R&D pipeline!
What is it all about?
Vue Storefront Next is a common name for our R&D efforts to improve Vue Storefront quality, architecture and developer experience. The goal of these efforts is to make it easy to use, modular, flexible and easy to upgrade.
The next pipeline will go along with the standard cycle of updates and improvements for Vue Storefront and won’t slow it down. We have some exciting stuff for next releases like NPM packaging of VSF Core. You can expect a full article about our plans for other improvements soon.
Every project is different. We want to give our users best in class tools to build stunning eCommerce shops but let them decide on scope of their usage. Sometimes the only thing you need from Vue Storefront is an agnostic API layer, sometimes it’s just a UI library. We want to keep this decision up to you.
Modularity is a keyword of the new architecture. Instead of providing Vue Storefront as a single piece of software we decided to divide it into smaller, independent pieces that are not depending on each other— each of them can be used standalone or in combination with other ones.
Modularizing Vue Storefront is a process. We are slowly detaching another layers from the main product, testing them, improving and releasing as a part of a new architecture. It won’t happen all at once. We will provide an easy way of adopting new features one by one.
Currently, there are two ready to use products that are part of Vue Storefront Next architecture:
- Storefront UI — a highly customizable, well-performing UI library that will help developers deliver the best in class mobile-first eCommerce user experience with minimal effort.
- Storefront API —which was released just a week ago is a GraphQL based agnostic eCommerce API that is essentially just a natural evolution of
vue-storefront-api
We are already developing a theme based on Storefront UI for Vue Storefront and it should be ready in Q1 of 2020. Replacement of vue-storefront-api with Storefront API is also on our roadmap but without a specific deadline as it’s a new product that still needs some tests.
More products in progress
We have products and concepts that are still under development and not suitable for production usage yet. They will most likely be finished and adopted in 2020. It’s not certain if they will be included in Vue Storefront in the described form but we certainly want to explore these ideas as we see them as major improvements over current solutions. We learned that in some situations publishing early is a good decision and in some cases - not. These products are meant to be our new public API and we want to be absolutely sure that they are delivering the best possible experience to both users and developers.
- Vue Storefront CLI
This product can be used even today as@vue-storefron/clipackage but its capabilities are for now limited to creating new Vue Storefront projects from GitHub repo. In the future, we want to make it a go-to scaffolding tool for new Vue Storefront projects letting users decide which eCommerce platform, CMS and specific features (like URL dispatching) they want to use. Similarly to what Vue CLI offers right now. - Integrations based on Composition API from Vue.js 3
Composition API is one of the greatest features of Vue 3 that truly makes this framework stand out from other ones. It’s a completely new approach to code reuse and something letting library authors like us deliver much simpler and powerful APIs. We see a lot of potential in this approach as a major simplification of core interactions (compared to mixins) and a way of delivering great developer experience.
We want eCommerce and CMS integrations to be just a sets of Vue 3 composables that are not coupled with any other part of Vue Storefront architecture. It will improve the modularity of the whole ecosystem and make it possible to use Vue Storefront integrations in other Vue.js projects.
We are currently experimenting with common interfaces that will ensure consistent developer experience across multiple platforms. - Nuxt.js themes
Since the beginning, we were using our own Server Side Rendering which led to many issues related to maintainability or lack of certain features. Using Nuxt will not only improve the quality of our SSR but also the overall developer experience of Vue Storefront development. Apart from purely technical benefits using Nuxt will give Vue Storefront developers access to hundreds of Nuxt modules which will enormously speed up common tasks like setting up authentication or internationalization. After many discussions with Nuxt.js core team, we are sure that it’s is a perfect match for Vue Storefront.
As you have seen we have a lot of exciting plans for the next releases and we can’t wait to hear your feedback about the closest improvements which will be a new theme based on Storefront UI and after that — Storefront API integration.
More details about Vue Storefront Next architecture
You can find a deeper explanation of Vue Storefront Next architecture in this document.
New integrations on Next architecture
We are very excited about Vue Storefront Next but we are also aware that it's our only chance to deliver major improvements for the next few years. We want to spend more time testing and discussing new tools to be sure that on the day of publishing they will be stable enough to not drastically change in the future. We want to give you a tool that, once adopted won’t require major efforts to stay up to date.
At the same time, we want to deliver new exciting features as fast as possible. We were always iterating fast and adopting cutting-edge technologies before others and we want to stay like this.
There is no better way to quickly validate and improve your ideas than making them happen. Because of that, we decided to test new architecture by doing native integrations with two new eCommerce platforms:
Shopware 6 — Vue Storefront is now an exclusive partner of Shopware for their headless storefronts. Together with their team, we are building native integration for recently announced Shopware 6 based on Next architecture. You can expect a longer post about our cooperation and project itself soon.
Commercetools — We are receiving a lot of questions about commercetools integration from our partners and clients. It seems like a natural choice for us to integrate with this platform — they are focused on delivering great API and we are focused on delivering great frontend. This is why we decided to do a native integration with commercetools on Vue Storefront Next architecture.
Building two integrations at the same time will help us make sure that our new API is not platform-specific and can handle all the different scenarios. Additionally, we will be able to test how all the new tools are working together. Once we are satisfied with the result of native integrations, based on them we will implement these ideas for our main, “agnostic” integration.
Adoption strategy
Every new tool once ready will be adopted into the main Vue Storefront project.
You will be able to use new features immediately after they are released in both new and existing Vue Storefront shops. Just keep in mind that using them is not obligatory. The decision about which ones to use is up to you.
Many of the upcoming changes focus heavily on letting developers build Vue Storefront shops faster. Because of that for already existing projects, you might decide to omit some of them. I’m very happy to inform you that because all of the upcoming projects are independent tools touching only a certain layer of the application you don’t need to make a decision between using all the new tools or none of them.
If your shop is already working and performing well you can freely use only the tools that make sense for you and keep the rest of the application untouched.
Video version
You can learn about Vue Storefront Next from this video.
Core team hangouts
We want to be even closer to the community and openly discuss all the exciting stuff around Vue Storefront. Because of that from this Friday we are starting regular monthly (or bi-monthly) core team hangouts where we will be presenting updates about the progress on Next architecture.
Everyone can join, ask questions and propose changes. If you don’t want to participate in the discussion it's still a great way to stay up to date with all the development-related news in Vue Storefront ecosystem. For other news, you can also subscribe to our newsletter to be always up to date with new releases, implementations and educational materials from Vue Storefront community.
See you on Friday!
Learn more about Vue Storefront — a PWA solution for eCommerce.
