vue-storefront - come on in and build open-source, PWA eCommerce with us! MM17NYC presentation

We're looking for contributors to help us continue the works on this open source project (MIT)! Please visit our website and Github and start commiting today!

• Official website: https://vuestorefront.io
• Github: https://github.com/DivanteLtd/vue-storefront
• Contributors mail list: [email protected] (just drop us an e-mail to get into the loop)
• Slack: https://join.slack.com/t/vuestorefront/shared_invite/enQtMzA4MTM2NTE5NjM2LTI1M2RmOWIyOTk0MzFlMDU3YzJlYzcyYzNiNjUyZWJiMTZjZjc3MjRlYmE5ZWQ1YWRhNTQyM2ZjN2ZkMzZlNTg

Vue Storefront is a Mobile First, Offline second e-Commerce frontend. It's platform agnostic - that's said - can be integrated with virtually any eCommerce CMS. It's also a Progressive web app.

I'll tell you a little about PWA's, then we dig into architecture, framework and code structure and some key PWA concept's we've applied.

Vue storefront is and always will be an MIT based open source so at the end I'll invite you to become a contributor!

Business perspective

Let's begin with some business motivation. eCommerce web right now - in general - isn't based on edge technologies. It's still not suited for mobile. I don't mean RWD but rather overall User Experience, handling poor connections and other mobile-specifics. Legacy technologies in exchange for stability? Well. Scalability problems still quite often are seriously damaging to the business, never mind the effort needed to make the site even up and running.

Mobile is the future of eCommerce

All the signs show us that in foreseeable future the eCommerce is about mobile. It's funny but when you take a look at the data it seems like Mobile Websites are roughly 3 times more popular than Mobile Apps. The distribution model - without all these app stores and installations: it's much more natural. In contrast - Mobile apps experience is much better than current Mobile websites; users spend more time and money in apps.

It would be great to get benefits of both platforms and Progressive Web Apps idea is all about that.

Progressive Web Apps

PWA is a Web application which behaves the same way like the native:

• can be used without the internet connection,
• like an app - is blazingly fast,
• can be added to Home screen but without installation process,
• in contrast to Apps is linkable - easy to share,
• offers the same UX and UI like native apps, with push notifications etc.

Right now we do have all needed technologies to create such apps: ES2016, IndexedDb, Service Workers, techniques like PRPL, SSR which I'm going to cover on next slides.

First cases of PWAs are very exciting!

Our goals

So, our goal was to create Mobile-first, Offline-first eCommerce app which will be:

• Fault tolerant - because it can work even without Internet access, it can run without any central servers - there is no such traffic peak that will kill the service,
• We're to use all the PWA benefits - app manifest to install it on the home screen, use Service Workers to cache data etc. More on that later!
• Would be great if we can achieve the response times within few dozen milliseconds per interaction,
• The storefront is also designed to be platform agnostic - so to be able to integrate the same way with Magento, Pimcore, Shopify Plus or other platforms.

In the end, we just wanted to play with the newest technologies and have fun in the process - so it's the reason we based on Node, ES2016, Vue.js and Elastic.

Oh, I forgot. It's and always be an Open Source - MIT based project. Three projects to be exact: Frontend, API, and platform-adapter.

UI Design

It's hard to design the app with the Offline-first approach:

• how to deal with payments (we're using e-mail links for payment if you placed the order while offline),
• how to deal with stocks quantities (guaranteed, the logistic minimum can do the work),
• how to deal with dynamic data updates - like cart promo rules?

We've been using Figma for online collaboration on mockups, started with 12 column grid for Mobile and focused on fashion brand at first.

What's crucial when you design for mobile - it's good to design all the interactions and animations along the way. We've also divided the design into components working directly with frontend-devs during design. All the mockups also are open-sourced.

More on that on blog post by Karl from our team - follow the link.

Slide 14

The architecture of vue-storefront is quite simple. It's not a monolith (on the right), it's based on loosely coupled services (on left).

Three main blocks we have here:

- vue-storefront is Vue.js frontend application with SSR support (can be served even from static files / CDN). It's kind of headless - which means all the data came from REST API calls. All the API calls are processed by service workers and cached in the browser cache or IndexedDb using different strategies (fastest, online first etc).

- vue-storefront-api is this Express.js/Node.js backend which exposes all the data - like products, categories, order history, authorization required by the frontend. As a data store, we used Elastic because it's eCommerce and full-text search is crucial; it's also JSON based and very scalable. This backend app can be run in parallel on many app servers, it uses queues to synchronize the data - it's very scalable,

- mage2nosql - is the last block here it's responsible for synchronizing the data between eCommerce CMSes like Magento and Elastic. Works like parallel data pump, supporting webhooks and diff-updates.

We also use Redis for caching purposes, IndexedDB in the browser for storing basic records like categories and orders.

Framework

Although many backend devs tend to treat frontends for eCommerce like simple themes, we've treated vue-storefront very seriously from the engineering point of view. It's a Vue application. We tried to make it a kind of framework:

• you have re-usable Vue components for each section, moreover, you can inherit components one of another without changing the core,
• there is theming support; yes, you can customize the view of your instance without changing the core!
• you can also add your own routes, Vuex stores and other custom features using Extensions (which are registered more or less similarly to Magento modules or WordPress extensions).

We're using Webpack to keep all the things together - as well as for code-splitting, babel compiling, SSR rendering and service-worker generation.

PRPL and SSR

OK, so now let's take a look what makes vue-storefront a Progressive Web App.

The key principle here is PRPL - Push, Render, Pre-cache, Lazy Load. It means you can push (using literally HTTP2 push methods) data out to the user before he asks for it and then does some other crazy stuff to optimize the waiting time to the minimum.

Google has the cool tool called Lighthouse which generates fancy-diagrams (similar to this above this slide) to let you optimize your app. It's a Chrome add-on.

PUSH and RENDER

We're using Server Side Rendering to solve the SEO problems as well as optimize the speed of the first render. Doing so we can push all the initial state to window.__INITIAL_STATE__ so it's not required to do any other AJAX request.

We're using web pack with vue-ssr-webpack-plugin for rendering. Then we've separate entry points for both: server and client which allows us to control the slight differences between these two rendering models.

PRE-CACHE

Service Workers are about caching and we're using so-precache library from google to pre-cache requests in local browser cache. Then we're using <link rel="preload"> hints to allow browser itself to optimize the network load.

LAZY LOAD in our case means we're using Webpack's code-splitting feature to load only these JS modules and files that are required.

Service Worker

Service Worker is the key technology to make apps working offline. It's a caching proxy with support for background job. In other words, you can register your own logic which processes all the HTTP request and responses that your app is sending. Another feature is to do some background operations like push-notifications support, even when your app/page isn't currently displayed in the browser.

Cool, isn't it?

Service Workers are registered and then updated if the code changed. We're using so-toolbox and sw-precache as a boilerplate - libraries from Google Chrome team.

Here you have some configuration logic for webpack - setting up the sw-precache strategy. In the middle, there is service-worker code responsible for sending out queued orders to the vue-storefront-api. Whenever you have some orders placed while offline and the browser just get to the Internet - it's doing it works.

The web-page cannot share any information with service-worker directly (as it's separate thread/process). So we're using postMessage() interface to send fine-grained commands from UI to service-worker. IndexedDb is where we store all the orders and other queued items to be synced.

NoSQL backend

As it was said, the backend is platform agnostic. Which means we do have adapters for different platforms like Magento2, Pimcore to synchronize products, categories, and customer data. Doing so, we can virtually work without eCommerce CMS being online (when the data is synchronized).

So it's slightly different approach to headless - it's headless but it's self-sufficient kind of it.

mage2nosql is our approach to data sync. It's Node.js based, works on process-pools and queues for horizontal scaling. We're supporting incremental updates as well as web-hooks for synchronizing only the changed records.

mage2nosql supports Strategy/Adapter design pattern and can be connected to virtually any platform.

On the other side, we do have workers to synchronize the orders (via API) - right now only for Magento.

Microservices

Even with so cool data pump like mage2nosql - still, you can have online-only kind of operations. For example shopping cart promo rules it's this kind of one. You hardly can synchronize or calculate the promo conditions on your own, it's not safe.

For this kind of data, we're to use microservices approach. With fine-grained service contracts for each operation. The services can be exposed from the platform directly - but then we're to use vue-storefront-api facade-proxy with operations like calculateCart or checkStockItems to adjust the logic and data formats of specific platforms to unified vue-storefront logic.

It makes no difference which technology the services are using as long as vue-storefront-api can connect with them via REST API.

Technology Stack

We're all on JavaScript. Babel is here to let us use ES2016 goodies. All the server stuff bases on Node.js and Express - kind of industry standards. Elastic and Webpack are already there.

If we'll be able to finish the project we'll make eCommerce world a little bit better. PWA is the future of mobile experience. Data Caching, NoSQL and Service Workers are here to help with scalability and poor internet access. Vue.js, Express, and Elastic will shorten the development time significantly!

Become a contributor!

So why not become the contributor? The project is at MIT. We'll be able to finish it only with Your help. It's quite broad, it's fun to work with this technology and ... it's fairly easy to start out!

We do have docs (in progress!), we do have issues with "easy-picks" for newcomers. And last but not least - we're no hardcore-nerds or rock stars, so we're here to help you!

Just grab me your e-mail - [email protected] to get the extended version of this slide deck. If you need more info on a project also I'm here to help and please contact me!