Building Gloopro Using Vue Storefront

A bit of our business context when we decided to build on Vuestorefront. By the middle of 2018, the core of our E-commerce Business (Gloo.ng) was powered by Magento. We had migrated from Magento 1.x to Magento 2.x in 2016 with all the attendant challenges and bug fixes. The continuous bug-fixing and upgrade cycle was impacting negatively on our throughput and productivity as an engineering team. As a result, we started having discussions about building away from Magento.

On the business end, we had built a thriving B2B Commerce MVP on the Magento platform. This included a punchout integration into SAP Ariba and SAP SRM platforms that enabled our customers to place orders directly from their ERP platforms and have the items they've picked returned back to the ERP platform for their internal approval processes before a purchase order is issued.

At this point, we were looking to build out a full version of this platform and pivot from an E-commerce platform to an E-procurement platform, with the procure-to-pay portion of our E-procurement suite powered by a B2B Commerce platform.

Given the time we had, the size of the team, the budget, and the associated risks involved with moving to completely different platforms, we decided to go with an evolutionary architecture, rather than a revolutionary one. This would enable us still to utilize the parts of our existing e-commerce platform that was still useful while embracing newer and more productive technologies.

Our first step was to do a rough sketch of the system architecture. Before we started building, we looked for open-source components that would enable us to build faster. There were already talks of headless Magento implementations and how Magento was looking at going that route. I was part of discussions on the Magento forum as to how this would eventually play out.

Some of the technologies we had wanted to use include react js. As part of my search, I came across the deity platform and was impressed by the work they had done with the few websites they had launched. I reached out to Jamie on Twitter but it didn't look like they had finalized their plans to open source deity at the time as they were no publicly available repo for deity.

Then I came across Vuestorefront. Opensource, publicly available repositories on GitHub, a demo website, a project started by people with rich Magento experience, MIT license, and I particularly loved the energy within the community. I immediately installed Vuestorefront, tried it out, and then started experimenting with it.

One of the most compelling reasons we went with Vuestorefront was that the architecture looked similar to what we had come up with as the way to go. They were already utilizing a nodejs backend that interacted with Magento, saving us tonnes of development time.

We built our catalog functionality on Vuestorefront. We extended it to provide an interface for several of the features provided by the core/proprietary sails.js backend we built. The features include:

  • Multi-user management
  • Multi-locations management
  • Company Management
  • Permissions Management
  • Order Approval Workflow
  • Audit trail
  • Company-specific catalog with custom pricing
  • Spend analysis
  • ERP Integrations (Punchout)

The service-oriented architecture meant we could build the core of our platform as a separate application and provide an interface on the frontend that exposes the core functionality of our platform, with all interactions taking place through well-defined APIs.

Our customer-facing catalog at Gloopro was one of the first Vuestorefront implementations, and I dare say the first B2B deployment. Vuestorefront played a pivotal role in our ability to launch the Gloopro customer-facing platform.

CTO @ Gloopro.com. A full-stack developer with 9+ years experience architecting, developing and deploying web applications of various sizes and complexity.