Choosing the technology stack for open source project. PWA eCommerce frontend - Vue Storefront.

Many of us been there.

An amazing idea comes to your head. Something that will change our lives! Something big and innovative! You know that the world can't exist any longer without your brilliant concept so you starting coding ASAP. You're focused so much on the idea itself that choosing the tech stack looks like a woman choosing clothes - you're picking what you like, not what you need.

After a couple of weeks of hardcore development, you’ve ended up with messy code and architecture that was created as-is without any discussions or consultations with colleagues - sometimes without even giving yourself time to think about how it will affect future development. In most cases, the situation is so bad that refactoring the code can't help you and you need to start from scratch again.

Of course, you can avoid it. All you need to do is slow down, and give yourself more time at the outset. You need to think about your idea in many different ways, including the problems that it solves, development, marketing, financial aspects, etc. To get a wider perspective on all these areas, you need to talk with many people who most likely will share their concerns about the product and help you avoid many undesirable situations.

In this article I will share with you how we chose a tech stack for our new open source project without letting our excitement do it for us, and what you need to consider when doing it yourself. I'll also show you how taking our time at the beginning allowed us to be very productive when coding (MVP in one month).

The "unicorn" we're creating.

With Piotr Karwatka, Karol Bzik and I are building a super-fast, 100% offline-ready PWA eCommerce frontend that works with any backend (like Magento ot Shopify). We believe that it will change the way we buy things and finally make mobile shopping as easy and enjoyable as it is on laptops and desktops. The project is open source and everyone willing to improve the future of online shopping is welcome! You can read more on the Vue Storefront GitHub page. It works with the Vue Storefront API that provides an abstraction layer between eCommerce, our NoSQL database and Mage2NoSsql which is an adapter between Magento 2 and our NoSQL database.

The tech stack - what we choose and why.

Choosing an open source technology stack is a hard thing. The technologies need to meet two requirements:

1. They must be well-suited to the tasks they were chosen for and meet a lot of smaller tech requirements.
2. They must be popular and interesting for potential contributors.

Sometimes these two requirements are opposed to each other. In this kind of situation we always choose the tool that does the job best - even if it’s not very popular or enjoyable to work with. The open source world is chock-full of marketing, but at the end of the day, what makes a solution really stand out from the crowd is the architectural ideas behind it, and its simplicity. The code must be clean, and easy to understand, and the tools you chose should allow contributors to finish their tasks as quickly as possible. To be sure of this, you need to minimalize the areas where something could go wrong. You can't do this with tools that aren't well suited for your business requirements.

Now that you know how we made our decisions, it's time to share our technology stack!

Frontend framework

Choosing a frontend framework was the most important decision to make, and we discussed it a lot. It's the backbone of the app and something that cannot be changed in the later stages of development without rewriting whole frontend, so we needed to be 100% sure that we had chosen the best possible tool.

Before choosing a framework, it’s crucial to know exactly what you're looking for. It's a good idea to write down what you need, in order to be satisfied with a tool you choose.

The main requirements for our frontend framework were:

• Component-based architecture
• Easy learning curve
• Good documentation
• Active and growing community
• Quick development
• Easy PWA features integration
• A little bit of hype ;)

In the frontend world, there are three popular frameworks which meet these requirements: React, Angular and Vue. Since Angular is focused mostly on big, enterprise-level projects and development in React is rather slow we chose Vue.js as our frontend framework. It has all the features required for rapid product development (two-way data binding, setup CLI, single file components and much more) and right now, if you need a good balance between stability and quick development, Vue.js is the best tool out there.

We also wanted to create a simple theming mechanism for our frontend, and here, Vue “mixins” combined with single file components appeared to be very helpful.

Backend

The list of things our backend had to deal with was really short:

• providing a simple API
• some data processing (retrieving data from the eCommerce API and changing its structure to suit NoSQL database principles)

Any modern backend technology can handle these tasks easily so we focused on technology consistency and speed of development. Because the whole frontend was written in JavaScript, we didn't want to expand our stack with a new language without any reason so we chose NodeJS and it's serving us very well. It’s absolutely awesome for working with API's.

Database

As I mentioned earlier, we wanted our product to be "super-fast". We wanted a simple, quick and stable NoSQL database that we can easily combine with browser caching.

We considered many NoSQL data sources and right now our adapter (Mage2NoSQL) is supporting two of them - Mongodb and Elastic. The “fulltextsearch” is the key feature which convinced us to go with Elastic - we needed it anyway. It also provides a native API out of the box.

For storing data in a browser we chose Local Forage. Its simple API and wide browser support convinced us to use it instead of built-in browser features without any level of abstraction.

Now that we have the "big three" (Frontend/Backend/Database), it's time to talk about other technologies we used to provide super-fast mobile experience and 100% offline support:

• Service Workers - one of the hottest things in the frontend world right now. As the official documentation says: A service worker is a programmable network proxy, allowing you to control how network requests from your page are handled. It allows web apps to behave more like native mobile apps thanks to features like background-sync, offline caching (the successor of AppCache) or push notifications. We also used service workers to queue offline orders.
• Web Manifest - allows users to pin WebApps to their phone's homescreen and use them like native mobile apps with many offline features (for details please check whatwebcando.today)

We also needed some tools to improve our workflow:

• Vue-cli - It's an amazing setup for Vue.js projects. Basically everything you need is included here. Out of the box you have single file components, full webpack config, routing, even PWA support!
• Webpack - when you work with a big project a good build tool is essential. Personally I'm a big fan of Brunch but webpack was packed with vue-cli.

Summary

Choosing a technology stack for an open source project is a big challenge. You need to find a good balance between choosing the best possible tool to do the job and finding "sweet", new technologies to interest potential contributors. Don't forget that choosing a technology stack is just the beginning. If you want to succeed in the open source world, you need to take care of contributors. Write good docs, explain business challenges in your readme’s and add some easy "first pick" issues. With these fundamentals, a solid technology stack, good marketing and a bit of luck, I’m sure that the open source community will hear about you ;)

If you're curious how we handled the UI and UX Design in PWA eCommerce, you can read Karl Bzik's article and if you're interested in our product itself, please take a look at our GitHub repo and Piotr Karwatka’s article.

If you liked this article and found it useful in any way, please share it ;)