Vue Storefront lessons learned: project setup

The personas

Starting Vue Storefront again, I would have started with writing down use cases:
- heavy developer using VS just as a set of components,
- using it out of the box — eCommerce in a month solution,
- using it halfway — out of the box solution but very customized.

We started with a mixed approach — and it was not bad. We didn’t know who’d be using Vue Storefront and how. Most of our current users are agencies or retailers’ IT teams aiming at quick results, leveraging our “out of the box” promise. But having these personas in mind starting the project, we could probably have better structured the framework and separate concerns — things that we’re currently doing by refactoring.

Batteries included

Easiness of use — for developers. This is key for making a popular open-source project. We bundled everything together, batteries included. For example, just two shell commands and you have a ready-to-use development environment on your localhost. Many devs don’t want to become a DevOps master. Let them just push the commits :)

Monorepo

Some projects start with really low granularity — having a separate Github repo for each npm module — which is great because of separation of concerns. Others start with a kind of monolithic approach, having one single, huuuge repo — which on the other hand is much easier to understand. We’ve learned that there is a solution that fits all the needs. Lerna.org is cool for managing multiple npm modules from a single git repository. This is important to make the code easy to understand while we structure it. We’re using Lerna, webpack and React are among other significant users.

And you know what?

It’s much easier to collect stars if you’ve got just one repository to promote :)

Holy War is not something you need

Vue, React, Angular. There will always be a “holy war” among developers when it comes to naming the best framework. It’s very hard to build libraries that are framework agnostic without huge time investments. However, I would propose to create a part of the product as Vanilla JS npm modules. For example, the data management library. By doing so, React and Angular users would have the possibility to use at least parts of Vue Storefront and at the same time focus on one single technology they can optimize. Anyway, we’ll separate Vuex data stores (our integration part of Vue Storefront) to a VanillaJS library one day.

Open Source libraries

Creating subparts of the project as open-source projects is generally the way that many other providers go. Twitter open sourced Bootstrap, Airbnb created JavaScript Style Guide (among other libraries). These side projects, published to open source, now live their own lives. Open Source small parts of your project — data sync library? Service Worker framework? Themed Vue.js app boilerplate? These are just a few examples of the projects we might have open sourced along our way :)

OK, so here you have the insights from our project setup lessons we learned in the process of building Vue Storefront. The last part will be about architecture and technical decisions.

‍