Mobile first, open source, progressive web app (PWA) for eCommerce

1. Vue Storefront - PWA for Magento
as a Game Changer for eCommerce
Piotr Karwatka
Vue Storefront / Divante

2. Hey eCommerce,
what’s wrong with you?

3. The average load time for mobile sites is
19 seconds over 3G connections.
On a 4G network the average time
isn’t much better: 14 seconds

4. 53% of mobile site visits are abandoned if pages
take longer than 3 seconds to load.
75% of mobile sites take longer than
10 seconds to load.

5. We aren’t ready for mobile.
Fine?!
But we feel strong on desktop!

6. Yes, we have some legacy code and
outdated framework, we do serious IT!
It’s safe and stable, we don’t need these
hipster-js-things in the project!

7. 40% of major eCommerce companies experience
periods of website downtime during seasonal
traffic peaks.
56% noted that their website experienced longer
loading times during seasonal peaks

8. eCommerce demand has
outgrown current
tech-stacks

9. eCommerce demand has
outgrown current
tech-stacks

10. We need new tools!
eCommerce demand has
outgrown current
tech-stacks

11. HEADLESS
front-end is stand-alone
software, which
communicates with a
back-end via an API
bit.ly/headless-ebook

12. HEADLESS
front-end is stand-alone
software, which
communicates with a
back-end via an API
DESIGN
SYSTEMS
a collection of reusable
components, guided by
clear standards, that can
be put together

13. PROGRESSIVEHEADLESS
front-end is stand-alone
software, which
communicates with a
back-end via an API
DESIGN
SYSTEMS
a collection of reusable
components, guided by
clear standards, that can
be put together
WEB APPS
web applications that can
appear to the user like
traditional applications or
native mobile
applications

14. Mobile apps
provide the finest
user experience,
but have some
limitations
USER ACQUISITION
need to be downloaded
COSTS
expensive to
build & maintain
BUSINESS MODEL
high commision
lack of control over publishing
USER EXPERIENCE
different on every device

15. The new mobile standard
Progressive Web Apps
one app for all channels
Multi
platform
Lighting
fast
Off-line
ready
Black
Friday ready
Google Microsoft Apple

16. Vue Storefront
Mobile-first ecommerce frontend that allows
you to build super fast eCommerce websites
and apps, without changing the backend
platform.
Open Source
Head-less approach
Design Systems
Time2Market < 60 days.
www.vuestorefront.io

17. Provide native app features
Vue Storefront feels just like an app - it even has app-style interactions and navigation.
Full screen
Hiding the browser top
URL bar and the
bottom navigation
menu
Home screen
Instant access from the
home screen without
opening the browser and
typing a URL
Push Notifications
Push notifications with a
one click opt-in directly
from the PWA site.
Offline mode
Browsing with a weak
or even lack of a
network connection.

18. Anytime. On any device.
Vue Storefront behaves the same on each
device.
Vue Storefront behaves the same on each device.
It delivers a 100% responsive and smooth
shopping experience, so it’s not necessary to
develop apps for different web browsers and
platforms.
Vue Storefront works on:
Android phones
Desktop browsers
(Edge, Chrome,
Safari, Opera etc.)
iOS phones and MacBooks
Windows

19. Accelerate with PWA advantages
By combining the best of the web and native apps, Vue Storefront gives significant business capabilities.
Install directly
Vue Storefront is much
smaller than native apps,
so it loads faster, works
better over low-
bandwidth networks
and takes up less space
on a user’s device.
Up to date
PWAs synchronize data
in the background even
when a user is not
active.
The app is always up-
to-date with the latest
version and content
served instantly.
Discoverable
Vue Storefront is
fully searchable and
indexable, contrary
to native apps.
You can easily
bookmark and share
every page.
Analytics
You can track website
users the mobile app
way, for example:
number of installs,
active & offline users
or even notification
performance.
Trusted by the World’s Top Brands

20. With eCommerce
features
Shopping - adding products to cart, stock synchronization,
Cart Expiration, Multi-store, Products bundle and many more
Ordering - Offline ordering (via in-browser queue), High
speed with local caching, SSL for all online orders, Crossell,
Upsell and more
Checkout - built-in checkouts, external checkouts, creating
an Account during the Checkout Process, checkout fallback
option and more
Payments - synchronization with major payment service
providers like Google, PayPal and a few others
Shipping - online Tax and Shipping Calculation, Multiple
shipping addresses, free shipping functionality and more
Open Source CMS and PIM
Open Source Loyalty

21. 21
Check the demo on
Your device!
https://demo.vuestorefront.io

22. 470 developers in the Community
8th most popular eCommerce Platform on GitHub
2nd most popular Magento repo on GitHub
25+ official Partners
join the Community
https://github.com/DivanteLtd/vue-storefront
Projects live: India, Holland, Italy, Russia, Poland, USA
Workshops, Trainings, PoC, Time2Market <60 days

23. Technology & Architecture

24. Architectur
e
eCommerce CMS
Magento, Shopify or
any other CMS
API Adapter
For each platform (Magento and
Pimcore integrations are ready)
NoSQL DB
VUE Storefront API
Same for every platform
thanks to adapter
VUE Storefront
Single Page App PWA
written in Vue.js
Vue Storefront is platform agnostic and can be connected via API to virtually any eCommerce CMS.
It doesn’t require backend changes to your current store which makes it an excellent choice for this scenario.

25. Architectur
e
eCommerce CMS
Magento, Shopify or
any other CMS
API Adapter
For each platform (Magento and
Pimcore integrations are ready)
NoSQL DB
VUE Storefront API
Same for every platform
thanks to adapter
VUE Storefront
Single Page App PWA
written in Vue.js
Vue Storefront is platform agnostic and can be connected via API to virtually any eCommerce CMS.
It doesn’t require backend changes to your current store which makes it an excellent choice for this scenario.
Real-time sync based on
product updates

26. 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.
Theme
For each platform (Magento and
Pimcore integrations are ready)
Extensions
(e.g new payment methods,
mailchimp, integration,
Google Analytics integration)
core
src
themes
extensions
Your playground!

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

28. eCommerce site in 20 working days?
Developers and business loves Vue Storefront
Vue.js
Much easier than React, the same performance + features
Theming
Vue Storefront is built as a Framework - you can change the UI as You
wish without modifying the Core.
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.

29. From developers to developers
Developers and business loves Vue Storefront
The biggest difficulty we have had is finding FE’s willing to work on the platforms, training them up and then trying
to convince them to stick it out — Magento being the one that most of our developers simply refuse to work on.
Now, coming across VS, I may have discovered the light at the end of the tunnel. Front-End devs developing with
what they enjoy….JavaScript.
“Anyone who worked with me on the project told me that Vue Storefront is very easy to learn and super fun ;)”
– Irene Iaccio, BitBull
“We enjoy working with Vue Storefront as it has great simplicity for preparing HTML layouts. What’s more, it helps to
build elastic solutions for PWA and thus dramatically improves frontend speed.”
– Andrey Putin, CEO, KT Team.
If we compare the development cost of a traditional Magento 2 webshop with the PWA demo, it would be 3 times
faster to develop. Also, the page speed is insanely fast and it looks like Google is really liking it. We experienced that
our pages and blogs are indexed really high in the SEO results (top 3) after one week of publishing a page or blog
– Estera Dugulan, Vendic.

30. In La Nature loading time
is not a problem
Developers and business loves Vue Storefront
LaNature.ru
Luxury goods eCommerce
Magento 2.2 with a set of integrations with 1C USP, CRM Bitrix-24, a
loyalty system and wholesale functions for franchisees.
Independently from Magento, the developers chose Vue Storefront
as a front end PWA solution.
Separating backend and frontend allows for short loading and rendering times.
Doing that for La Nature, developers decreased: switching catalog pages time by
up to 0.1 second and catalog first loading time (providing the visible part of the
catalog with images) by up to 1.5 second.
“We enjoy working with Vue Storefront as it has great simplicity for preparing
HTML layouts. What’s more, it helps to build elastic solutions for PWA and thus
dramatically improves frontend speed.” – Andrey Putin, CEO, KT Team.

31. The Special’s store
Developers and business loves Vue Storefront
PoC for Special’s
Milano based footwear retail
2 months, 2-3 days per week, 2 developers
Around 20 working days for fully fledge MVP
“Leveraging Vue Storefront for the development of the
project frontend, we’ve seen unprecent development
speed. In Vue Storefront, we have found the missing
piece that let us apply Lean principles on this
eCommerce project. I’m sure that even big enterprise
projects will truly benefit from this approach and will be
able to direct our efforts towards business goals, not the
tools to achieve them.”
– Gennaro Vietri – CTO of Bitbull

32. TheHourGlass.com
Singapore based eCommerce
Three full time engineers
To be released soon :-)
We are working on it now, We are on final stage for
internal release, we will release to production
soon…
You and your team are doing a very very great
project…really appreciate what you have done and
doing
- Bao Nguyen
eCommerce site in 20 working days?
Developers and business loves Vue Storefront

33. Vue Storefront - The future-proof solution
We react quite fast and embrace all opportunities that are open for eCommerce.
Focus on frontend. Bringing frontend innovations at speed.
Google
made page speed
a factor in mobile
search ranking.
January ‘18 February ‘18 March ‘18 April ‘18 July ‘18
Vue
Storefront
is much faster to interact
with, as well as providing
smoother scrolling
and transitioning of
pages.
Microsoft
brought PWA standard
into Microsoft Edge and
Windows 10.
Vue Storefront
is fully compatible with
Progressive Web App
standard, so it’s going to
be available on any
Windows device.
Google
began with
Mobile-first indexing as
a SEO ranking factor.
Vue
Storefront
delivers an exceptional
mobile UX which gives
higher rankings
position- even for
desktop searchers.
Apple
announced PWA
support on iOS and
macOS devices.
Vue Storefront
works not only on Android
phones and desktop
browsers (IE, Chrome, Firefox,
Opera) but on iOS phones
and MacBooks too.
Google
Start marking
non-HTTPS sites as
‘not secure’.
Vue Storefront
is served via HTTPS, ensuring
that data is encrypted, has
better performance & caching
and is promoted as SEO
ranking signal.

34. The platform for future growth
Visual Recognition
Take advantage of the Clarifai.com API
with a PWA to automatically tag,
organize, and search visual content
with its machine learning engine.
Chatbot
Use a PWA as a platform for chatbot
development. It is much more reasonable
to offer a full blown user experience via
PWA than going into native solutions.
Virtual Assistants
Virtual Assistants (Alexa, Siri, Google Now,
Cortana) usage grew 23.1% in 2017. This year,
60.5 million Americans will use them. It’s
nearly 20% of the US population.
One Touch checkout
The expiration of Amazon’s US patent
on one-click ordering (September 2017)
allows companies to use express
checkout functionality on their sites.
You can extend the mobile-first experience by adding more channels.
Voice Commerce
Amazon Alexa and Google Home
used with Vue Storefront
&

35. Try Vue Storefront
for Mobile-First Commerce
Piotr Karwatka
pkarwatka@divante.co

36. Sources
1. ttps://www.forbes.com/sites/michelleevans1/2017/04/12/how-china-won-the-race-to-being-considered-a-mobile-first-commerce-nation/
#2c7e22a91b49
2. Mobile Payments Report 2018, Acapture by payvision
3. https://www.leadpages.net/blog/psychology-of-waiting/
4. https://neilpatel.com/blog/4-easy-ways-to-generate-ecommerce-sales-from-instagram/
5. https://trackmaven.com/blog/marketing-instagram-algorithm/
6. https://sproutsocial.com/insights/instagram-stats/
7. https://sproutsocial.com/insights/hashtags-for-instagram/
8. https://www.clickz.com/how-ecommerce-brands-use-instagram-to-reach-their-goals/95996/
9. https://medium.com/@distillerytech/digital-transformation-why-enterprises-need-progressive-web-apps-b37a9e223157
10. https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
11. http://www.retail-systems.com/rs/Retailer_Websites_Experiening_Downtimes.php
12. https://www.statuscake.com/websites-of-40-of-uk-e-commerce-firms-experience-downtime-during-seasonal-traffic-peaks/
13. https://www.practicalecommerce.com/10-Surprising-Mistakes-on-Large-Ecommerce-Sites
14. https://www.decibelinsight.com/blog/how-load-speed-impacts-user-focus-time-analysis-of-83828-sessions