It has been almost a year since we started to develop progressive web apps. With a team of a few developers, we focused on creating a headless frontend for eCommerce platforms. That’s how we built Vue Storefront and the engaged community of almost 700 developers across the world. You know what? It’s been a great year!
We create eCommerce solutions for worldwide businesses on a daily basis. These are really big projects which somehow we got used to. So when, almost a year ago, we stepped onto theo PWA path, it felt strangely exciting again. That’s probably thanks to Google’s progressive web apps, which are really hot right now, but also thanks to the modern technology stack and no legacy code that we leveraged.
Technology that motivates
First of all, our architecture is headless. Vue Storefront is a Vue.js-based frontend application that the user accesses on entering the website. All the data – products, categories, CMS information is acquired from the second app, which is the Vue Storefront API. It’s a JavaScript server app that responds using REST or GraphQL data formats.
Secondly, the Vue Storefront API is platform agnostic. That means developers can connect virtually any backend platform to it and still use the same Vue Storefront without any modifications. It works really well with Magento 1, Magento 2 and Pimcore.
The cool part is that we’re not hitting the eCommerce backend – Magento in this case – directly, but we store all the information in a NoSQL database. ElasticSearch provides horizontal scalability and it’s extremely fast. The synchronization process is an ongoing, background process.
We tried to make Vue Storefront kind of a framework which is very easy to customize. You get the core, a default theme and a set of extensions out of the box. What developers love is that they can customize it all and treat Vue Storefront as a developers’ playground.
They can modify the theme; adding, removing pages or components, modifying markup or adding their own modules and extensions. At the same time, it is possible to update the core to the newest version (it’s released each month) applying security patches and adding new features.
Vue Storefront’s code architecture leverages reusable components and mixins model where developers can mix some existing behaviors to create new user controls. It also supports new design patterns – like the PRPL rule and SSR – Server-Side Rendering. SSR is for using the same JavaScript code to render the app in the browser and server side – which makes PWAs SEO friendly.
Expanding the developer’s experience
Constant improvement of the developer’s experience is one of our key goals. For this, we use a pretty modern technology stack – based on Webpack, using Babel and from the last edition also TypeScript. 100% JavaScript, no legacy code.
This approach pays-off. Both developers and business stakeholders love Vue Storefront. Mostly because it’s so easy to start working with it. Developers don’t have to know any Magento or PHP specifics. We’ve heard a lot of cases where a fully-fledged eCommerce site was built within 20 working days using Vue Storefront.
You don’t have to invest a lot of time into training. After 2 weeks training, standard frontend developers can easily work on an eCommerce webpage based on Vue.js. You can also have a short training course on Vue Storefront with its core team. This is pretty amazing, isn’t it?
We’re one year in the business. The feedback we’re hearing from developers is 99% positive. Need proof?
Business cases of Vue Storefront
In the last year, Vue Storefront gained not only a vast developers community, but also trust on the business side. It has been highly rewarding for core developers. I’d like to show you a few case studies of sites made on top of Vue Storefront.
La-nature.ru
La Nature is one of the first Vue Storefront showcases, built by the Russian agency KT-Team. At first, we weren’t aware that they were working on a Vue Storefront implementation. For la-nature.ru, the development team achieved a loading time within 100 milliseconds, integrated CRM and ERP.
“Vue Storefront helped us to build elastic solutions for PWA and thus dramatically improves frontend speed.” – Andrey Putin, CEO, KT Team.
One of the coolest parts of Vue Storefront for KT-Team was the ability to use plain HTML + CSS markup in the templates and the overall simplicity.
Check the full La Nature case study.
Special’s Store
Another case is the online store for Special’s – the Italian shoe retailer. It started as a Proof of Concept, which was made by the Bitbull developers team within 20 working days just to show off how a PWA can work for the brand.
The Bitbull developers appreciated the Lean approach that can be applied with Vue Storefront and the simplicity of the project / theming process.
“I’m sure that even big enterprise projects will truly benefit from this approach and will be able to direct our efforts towards business goals, not the tools to achieve them.” – Gennaro Vietri – CTO of Bitbull
Check the full Special’s case study.
Join the Vue Storefront
We’re happy to see more and more implementations of Vue Storefront and even happier to see new contributions on Vue Storefronts Github. Each of these proves to us that Vue Storefront is a PWA solution that young developers want to work with. It also helps us to improve and expand Vue Storefront with features that are useful for modern online stores.
Although at the beginning of our work, we tried to avoid legacy technology, it now looks that Vue Storefront is great as a microservice for old eCommerce systems. Vue Storefront became useful also for CTOs of big eCommerce platforms. You can check how Vue Storefront can improve your legacy technology during ascoping session.
Developing our solutions for progressive web apps became a great adventure. Feel free to check out the Vue Storefront demo or dive into the code on Github.
Published October 3, 2018
