What's cool about Progressive Web Apps for eCommerce? How does Vue Storefront work and how to setup it with Magento (1.9, 2.x)

1. Mobile first, offline second, PWA for
eCommerce
Andreas Anding
Business Development
Consultant, Divante
Piotr Karwatka,
CTO, Divante

2. eCommerce
Software House
2
10 years on the market 100+ clients globally
150+ team members 300+projects delivered

3. 3
The Agenda
1. eCommerce - what’s wrong with you?
2. Progressive Web Apps - what’s all about?
3. Vue Storefront - first open source PWA for
eCommerce
4. See it in action!
5. Architecture
6. Design Challenges
7. Key Concepts in practice
Vue Storefront is an open source (MIT) project
powered by cool, open source technologies:

4. eCommerce - what’s wrong with you?

5. 5
eCommerce right now

6. not suited for mobile
not stable during peaks
not effecitve with poor internet
connection
long time2market
eCommerce right now
GAP
Technology Creators
(eg. AFGA)
Customers
Companies
(Retailers/Manufacturers)

7. Progressive Web Apps

8. 8
Progressive Web Apps
Best features of Mobile App (UX) and Web (Distribution) combined
• Offline readiness
• Home Screen
• No Submission
• Linkable
• Re-engageable
Alibaba Case Study
• 76% higher conversions across browsers
• 14% more monthly active users on iOS; 30% on Android

9. ES2015/2016, IndexedDb
Service Workers
(check https://serviceworke.rs/ for recipes)
Techniques: PRPL, SSR
Reactive frameworks
(React, Vue, Polymer …)
Progressive Web Apps
Best features of Mobile App (UX) and Web (Distribution) combined
Supported by: Chrome, Samsung, Microsoft, Apple, Opera
(https://jakearchibald.github.io/isserviceworkerready/)

10. Vue Storefront

11. 11
Bleeding edge, scalable technology
Node.js, Vue.js, Elastic
Blazing fast
It render at no time. Always.
100% offline, Black-Friday ready :)

12. Offline-ready, ultrafast PWA
Really fast and enjoyable development with
all standard eCommerce features out of the
box
Can be integrated with any eCommerce!
Key features
Mobile first and works like a native mobile
app
Painlessly upgradable core with new features
every month (as NPM package)
No architectural limitations (normal Vue.js app)

13. You need a Web, Mobile Web, iOS
App, Android App, Windows App, ..
eCommerce Websites are not stable
during peaks
Websites are not effecitve with poor
internet connection
Long time2market to develop Mobile
Apps and Mobile Web
Progressive Web Apps – Website that can
be installed as an App. Best features of
Mobile App (UX) and Web (Distribution)
combined
Storefront can be run without alive web-
server there is no such traffic peak that can
stop users from making orders
Offline readiness - app can be used off-line
Out-of-the Box Product, Based on Vue.js,
developer-friendly approach, good doc
Challenges Solution

14. Project status
All basic promotions, product types, catalog
features supported
18 local partners + 46 active contributors + 10
ongoing projects
Production ready and stable.
Magento 1.9 and Magento 2.x full support

15. … and one more thing
Open source and MIT license!
github.com/DivanteLtd/vue-storefront
@vuestorefront

16. See it in action!

17. See it in action!
github.com/DivanteLtd/vue-storefront@vuestorefront

18. … and one more thing
Let’s go to demo.vuestorefront.io
github.com/DivanteLtd/vue-storefront
@vuestorefront

19. Contribute!
- 1.5k stars on Github (top 10 vue.js
project)
- 300 developers on Slack
- 46 active contributors on Github
- 18 official partners

20. Architecture

21. How it works (simplified)
Vue Storefront API
Same for every platform
thanks to adapter
API Adapter
For each platform
(Magento 2 and Pimcore
integrations are ready)
eCommerce CMS
Magento, Shopify or any
other
Vue Storefront
Single Page App PWA
written in Vue.js
NoSQL DB

22. How it works (simplified)
Vue Storefront API
Same for every platform
thanks to adapter
API Adapter
For each platform
(Magento 2 and Pimcore
integrations are ready)
eCommerce CMS
Magento, Shopify or any
other
Vue Storefront
Single Page App PWA
written in Vue.js
NoSQL DB
Real-time sync based on product
updates

23. Frontend architecture
Vue Storefront Core
Contains all standard
eCommerce features, state
management, offline
capabilities and database
integration.
It’s upgradable as a NPM
package and extendable via
extensions. core
src
themes
extensions
Your playground!
Extensions
(e.g new payment
methods, mailchimp,
integration, Google
Analytics integration)
Theme
This is your shop! Developed
like a separate Vue.js
application that can make use
of VS core and extensions

24. 24
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 ...

25. Design Challenges

26. 26
Design Challenges
For the prototype we decided to design PWA for a fashion brand
• 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.
• Figma
We used Figma for its collaboration features to
create the Vue Storefront Design System
(designs are MIT licensed too), with grid,
mobile interactions
• UX Challenges
○ Payments while offline?
○ Stock quantities while offline?
○ Seamless experience on many devices,
○ Cart/dynamic promo rules,
○ ...
Read more:
https://www.linkedin.com/pulse/designing-pwa-
ecommerce-karl-bzik/

27. Key concepts in practice

28. 28
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.js for
standard SPA and server-entry.js for 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)

29. 29
Service Workers
Service worker is kind of a proxy to bypass the server communication
• 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-notifications/)
• 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

30. 30
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-api project 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)

31. 31
Platform agnostic / NoSQL backend
Offline first, but online layer must be scalable too
• 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.

32. 32
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.

33. 33
Divante Sp. z o.o.
Dmowskiego 17 Street
50-203 Wrocław
+48 516 184 153aanding@divante.de
pkarwatka@divante.co
www.divante.co
Check the demo!
http://vuestorefront.io