vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation

vue-storefront
Progressive, mobile first, offline second eCommerce web app
Piotr Karwatka, CTO of Divante

Lorem ipsum
dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Integer non erat dui. Nam faucibus efficitur
euismod. Cras ornare mi nibh, id commodo lorem
maximus vitae. Vivamus ac ligula non turpis ultrices
ornare at eget ipsum.
eBusiness Software House
operating since 2008
150 people at our office in Wroclaw,
Poland
Clients from Europe, Asia, Africa and
the US
Within your reach: 1.5h flight from
London, Berlin, Oslo, Amsterdam,
Paris
SCRUM methodology ensuring high
quality and flexible approach to the
business requirements
Case studies: divante.co/case-studies
2

3
The Agenda
1. eCommerce - what’s wrong with you?
2. Progressive Web Apps - what’s all about?
3. Project Goals
4. Design Challenges
5. Architecture
6. Framework
7. Key Concepts in practice
a. PRPL & SSR
b. Service Workers
c. Platform agnostic / NoSQL backend
d. Microservices
8. Tooling
9. Join us as Contributor!
vue-storefront is an open source (MIT) project
powered by cool, open source technologies:

1eCommerce - what’s wrong with you?

not suited for mobile
not stable during peaks
not effecitve with poor internet
connection
long time2market
eCommerces right now

7
Progressive Web Apps
Best features of Mobile App (UX) and Web (Distribution) combined
• Offline readiness - app can be used without internet access,
• Mobile-first / Responsive - speed, ui, animations, push notifications,
Fit any form factor: desktop, mobile, tablet. Can be added to Home
screen with zero install and no app store submission,
• Linkable - Easily shared via a URL and do not require complex
installation
• Re-engageable - Make re-engagement easy through features like
push notifications.
Key building blocks
- ES2015/2016, IndexedDb,
- Service Workers (check https://serviceworke.rs/ for recipes),
- Techniques: PRPL, SSR,
- Reactive frameworks (React, Vue, Polymer …)
- Tooling: Webpack, Lighthouse,
Supported by: Chrome, Samsung, Microsoft, Apple, Opera
(https://jakearchibald.github.io/isserviceworkerready/)
● Lancôme rebuilds their mobile website as a PWA, increases conversions 17%;
● Jumia sees 33% increase in conversion rate, 12X more users on PWA;
● Alibaba.com increases conversions on the mobile web by 76% with PWA;
● Housing.com increases lowers bounce rate by 40% with new PWA;
● Forbes, OLX, Twitter cases.
Source:
https://www.quora.com/What-are-the-advantages-and-disadvantages-of-Progressi
ve-Web-Apps-over-Native-Apps

8
Progressive Web Apps
Best features of Mobile App (UX) and Web (Distribution) combined
• Offline readiness - app can be used without internet access,
• Mobile-first / Responsive - speed, ui, animations, push
notifications, Fit any form factor: desktop, mobile, tablet. Can be
added to Home screen with zero install and no app store submission,
• Linkable - Easily shared via a URL and do not require complex
installation
• Re-engageable - Make re-engagement easy through features like
push notifications.
Key building blocks
- ES2015/2016, IndexedDb,
- Service Workers (check https://serviceworke.rs/ for recipes),
- Techniques: PRPL, SSR,
- Reactive frameworks (React, Vue, Polymer …)
- Tooling: Webpack, Lighthouse,
Supported by: Chrome, Samsung, Microsoft, Apple, Opera
(https://jakearchibald.github.io/isserviceworkerready/)
● Lancôme rebuilds their mobile website as a PWA, increases conversions 17%;
● Jumia sees 33% increase in conversion rate, 12X more users on PWA;
● Alibaba.com increases conversions on the mobile web by 76% with PWA;
● Housing.com increases lowers bounce rate by 40% with new PWA;
● Forbes, OLX, Twitter cases.
Source: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

10
Project Goals
To create fault-tolerant, bleeding edge, progressive eCommerce app.
And have fun. Lot of fun in the process :)
• Fault-tolerant, 100% offline, Black-Friday ready :)
Because this storefront can be run without alive web-server (offline mode)
there is no such traffic peak that can stop users from making orders.
• Progressive
We aimed at giving user full benefits of Progressive Web App - with all this
push notifications, service workers, native experience etc.
• Blazing fast
It should render at no time. Always.
• Platform agnostic
You should be able to work with Magento2, Shopify Plus, Pimcore, <You
name it> platform of choice as CMS.
• Always Open Source (MIT)
The project is broad. We believe in Open Source and that success is
possible only when more than one company will contribute.
• Bleeding edge, scalable technology
ES2016, Node.js, Vue.js, Elastic
More on our motivation:
https://www.linkedin.com/pulse/magento2-nosql-database-pwa-support-piotr-ka
rwatka/
https://github.com/DivanteLtd/vue-storefront

12
Design Challenges
For the prototype we decided to design PWA for a fashion brand
• Figma
We used Figma for its collaboration features to design the mockups
(designs will be also MIT licensed), with grid, mobile interactions
• UX Challenges
○ Payments while offline?
○ Stock quantities while offline?
○ Seamless experience on many devices,
○ Cart/dynamic promo rules,
○ ...
• Here you have some free tips:
○ Ensure that the keyboard won’t cover the view of key elements of the app;
○ Use 2x size for the png images and SVG files to keep the design looking clear on
all types of screens;
○ Make touchable components like the buttons or links big enough;
○ Useless text links because they are harder to use on small screens;
○ Verify how does the application behave while changing the size with the rotation of
the device.
Read more:
https://www.linkedin.com/pulse/designing-pwa-ecommerce-karl-bzik/

14
Architecture
Loose Coupling, Microservices, Horizontally scalable
• vue-storefront is Vue.js eCommerce frontend
It doesn’t require any database support (server side), it’s Webpack app
which can be statically rendered (SSR) and served even from CDN,
• vue-storefront-api is Express.js backend
It uses Elastic as data store (NoSQL) and serves all the products,
categories, order history, accounts (oauth2) for the frontend, then it sends
orders and other data back to eCommerce CMS of choice,
• mage2nosql is a tool :-)
… for synchronizing Magento (and any given platform via switchable
adapters) to Elastic OR MongoDB database. Supports products, categories,
product-to-category links so far.

15
Architecture
Loose Coupling, Microservices, Horizontally scalable
• vue-storefront is Vue.js eCommerce frontend
It doesn’t require any database support (server side), it’s Webpack app
which can be statically rendered (SSR) and served even from CDN,
• vue-storefront-api is Express.js backend
It uses Elastic as data store (NoSQL) and serves all the products,
categories, order history, accounts (oauth2) for the frontend, then it sends
orders and other data back to eCommerce CMS of choice,
• mage2nosql is a tool :-)
… for synchronizing Magento (and any given platform via switchable
adapters) to Elastic OR MongoDB database. Supports products, categories,
product-to-category links so far.
Key technologies:
- Redis for kue queues (order sync 2 eCommerce) and for cache, every
batch operation base on queues and can be run in parallel,
- Service Workers with AppCache for caching data (offline support) and for
queueing orders to backend (while offline),
- Elastic as a master data store for data that can be synchronized,
- Node.js multi process workers to sync data,
- REST/API interactions with 3rd party systems (like Magento).

17
Framework
Theming, extensions, re-usable components
• vue-storefront is meant to be a Framework
It’s divided to re-usable Vue components and Vuex data stores. It’s designed
to be updateable without modifying the Core.
• Theming
You can put your theme under /themes - which inherits (using Vue Mixins) all
the default components and pages
• Extensions
Extensions are registered in app.js - you can add your own features:
○ additional Vuex stores,
○ routes,
○ pages and components
• SSR & client side hydration
For better SEO results we’re using Server Side Rendering
(https://ssr.vuejs.org/en/) - basically it’s not a typical SPA application
• Webpack
We’re using it extensively: for Babel compiling (we’re ES2016 compliant),
sw-precache, code chunking, optimization, dev server ...

18
Framework
• Theming
• Extensions
○ routes,
• Webpack

19
Framework
• Theming
• Extensions
○ routes,
• Webpack

21
PRPL & SSR
Push Render Pre-cache Lazy Load & Server Side Rendering
• (PUSH) We’re using window.__INITIAL_STATE__
to populate Vuex data stores without hiting Service Worker nor Server. Not
using HTTP/2 at this point.
• (RENDER) We’re using Vue SSR
It’s quite useful - you have two entry points: client-entry.jsfor standard
SPA and server-entry.jsfor SSR (with client side hydration - still you’re
able to use full featureset of Vue). We’re using Webpack’s
vue-ssr-webpack-plugin
• (PRE-CACHE) We’re using <link rel="preload"> and Service Workers
(sw-precache) for caching the content - statics, routes and REST API calls
• (LAZY LOAD) We’re using Webpack’s Code splitting
Additional steps:
- Static files (product images) are optimized server side (resize/crop) to the
device,
- CDN support for static files,
- CDN support for routes (as the Server Side Rendering results can be hosted
from App server, Varnish, Cloudflare/other CDN)

22
Service Workers
Caching/proxy layer + background jobs
• It’s kind of proxy combined with background job :)
Service worker can proxy all the requests within your page scope (limited to
https), work in background, show push notifications
(https://developers.google.com/web/fundamentals/codelabs/push-notification
s/)
• sw-toolbox + sw-precache
We’re using tools from Google Chrome team as a boiler-plate and then
extend the generated service-workers it with our own logic
https://github.com/GoogleChromeLabs/sw-toolbox
• Loose coupled
The only way to communicate between page and worker is postMessage()
messaging interface which actually is cool. You can find many cool patterns
for designing SW here: https://serviceworke.rs/
• We use IndexedDb to queue orders and newsletter subscriptions
… and of course for caching all the statics and API calls
Service workers are quite well supported by Chrome, Samsung, Opera and in
progress for: IE, Safari.
Source: Mozilla MDN

23
Service Workers
Caching/proxy layer + background jobs
• It’s kind of proxy combined with background job :)
Service worker can proxy all the requests within your page scope (limited to
https), work in background, show push notifications
(https://developers.google.com/web/fundamentals/codelabs/push-notification
s/)
• sw-toolbox + sw-precache
We’re using tools from Google Chrome team as a boiler-plate and then
extend the generated service-workers it with our own logic
https://github.com/GoogleChromeLabs/sw-toolbox
• Loose coupled
The only way to communicate between page and worker is postMessage()
messaging interface which actually is cool. You can find many cool patterns
for designing SW here: https://serviceworke.rs/
• We use IndexedDb to queue orders and newsletter subscriptions
… and of course for caching all the statics and API calls
Service workers are quite well supported by Chrome, Samsung, Opera and in
progress for: IE, Safari.

24
Platform agnostic / NoSQL backend
Offline first, but online layer must be scalable too
• Headless, but slightly different way
We’re not using any platform-specific API. vue-storefront-apiproject is
API layer for Elastic database which is middleware between eCommerce
CMS and frontend. With this approach we’re totally hassle free of
eCommerce platform scalability issues. The stack is as simple and scalable
as it can. Our goal is to have API response in milliseconds.
• mage2nosql
We’ve written data pump which works on parallel processes to queue and
transfer all the data changes (products, categories, then users etc) between
Magento2 or any other platform to Elastic. It also supports webhooks for
on-demand updates.
• GraphQL - maybe?
As for now it made no sense to introduce GraphQL but it’s quite easy to
implement. Why not… Just create a pull request and we’ll merge ;)
• Queues
All communication with external systems is async and queued (kue + Redis
as for now); we’re using multi-process deployments of queue-workers (pool
of Node.js processes that can be run on server cluster)

25
Platform agnostic / NoSQL backend
Offline first, but online layer must be scalable too
• Headless, but slightly different way
We’re not using any platform-specific API. vue-storefront-apiproject is
API layer for Elastic database which is middleware between eCommerce
CMS and frontend. With this approach we’re totally hassle free of
eCommerce platform scalability issues. The stack is as simple and scalable
as it can. Our goal is to have API response in milliseconds.
• mage2nosql
We’ve written data pump which works on parallel processes to queue and
transfer all the data changes (products, categories, then users etc) between
Magento2 or any other platform to Elastic. It also supports webhooks for
on-demand updates.
• GraphQL - maybe?
As for now it made no sense to introduce GraphQL but it’s quite easy to
implement. Why not… Just create a pull request and we’ll merge ;)
• Queues
All communication with external systems is async and queued (kue + Redis
as for now); we’re using multi-process deployments of queue-workers (pool
of Node.js processes that can be run on server cluster)

26
Microservices
Not everything is suitable for being synchronized offline
• Not everything can be synchronized
Particularly not dynamic logic - like promo rules, must be executed online/on
demand.
•
• By Microservices I don’t mean vue-storefront-api
It’s rather a typical backend. What do I mean is to have granular
micro-services for:
○ pricing rules (cart rules),
○ stock quantities,
○ user authorization (jwt, oauth2),
○ … ?
• Different technologies
These services probably will be written as extensions to Magento2/other
platform. They can be written as well in golang or any other as long as
exposes REST interface.
• One interface
But finally we’ll use Facade (probably vue-storefront-api) to aggregate
all the requests in one format that can be used by vue-storefront.

27
Tooling
Make the development fun again!
• ES2016
We’re using Babel as Vue component loader and transpiler to have all the
goods of ES2016. eslint is of course enabled as well.
• Webpack
Main rack for our tooling - code splitting, vue-ssr, sw-toolbox are only few
features we’re using
• Elastic, Node, Express
For backend. Elastic is cool because not only of performance but full-text
search which is crucial for eCommerce. Node + Express - kind of JS industry
standard.

not suited for mobile
not stable during peaks
not effecitve with poor internet
connection
long time2market
eCommerces right now
RWD, mobile-first approach, PWA Caching, Vue.js
Data caching, NoSQL database, PWA with Service
Workers
Vue, developer-friendly approach, good
documentation
Local Forage data caching, Vue.js, NoSQL database

31
Divante Sp. z o.o.
Dmowskiego 17 Street
50-203 Wrocław
+48 516 184 153pkarwatka@divante.co www.divante.co
Become a contributor!
contributors@divante.co

vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation

Similar to vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation (20)

More from Divante

More from Divante (20)

Recently uploaded

Recently uploaded (16)

vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation