Vue StorefrontBackend-agnostic PWA frontend for eCommerce
Filip Rakowski
Frontend Tech Leader @ Vue Storefront
Frontend Developer @ Divante
filrakowski
frakowski
What we do at
Divante?
01
02
03
eCommerce
Magento, Pimcore, OroCommerce, Vue Storefront
3
Loyalty programs
Open Loyalty
Open Source
Vue Storefront, Open Loyalty, Magento & Pimcore contributions
Mobile eCommerce today
2014 - 1.6 billion
2017 - 2 billion
...still growing!
Users made some kind of eCommerce transaction
using phone or tablet
5
6
Slow, especially with bad internet connection
Not stable during peaks (e.g. Black Friday)
Not suited for mobile devices (sometimes even without RWD!)
Client perspective
Hard to find developers specialized in eCommerce platforms
Long and complicated development (long time2market)
User problems decrease conversion rate
Business perspective
Vue Storefront
eCommerce of the future!
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)
Key features
Open source and MIT license!
15
How it works (simplified)
eCommerce CMS
Vue Storefront API Vue Storefront
Same for every platform
thanks to adapter
API Adapter
For each platform
(Magento 2 and Pimcore
integrations are ready)
Magento, Shopify or any
other
Single Page App PWA
written in Vue.js
NoSQL DB
How it works (simplified)
16
eCommerce CMS
Vue Storefront API Vue Storefront
API Adapter
NoSQL DB
Real-time sync based on product
updates
It still works when you are offline!
Cache API
caches HTML, CSS and
JS files
Local Forage
caches data from server
in IndexedDB
Service Worker
enables offline orders!
Development
How we made it fast, easy and enjoyable?
What we focused
on?
01
02
03
Easy to learn and work with
No architectural limitations (develop like normal Vue.js App),
upgradable core separated from the rest of app, rich
documentation
Extendebility with no limitations
You can extend and modify the application via extensions.
Fast to implement and easy to maintain
Theming system (with default theme out of the box), Vue.js, all
standard features out of the box in a core. Thanks to API Adapter
you can migrate to other eCommerce platform (e.g. Magento 1 ->
Magento 2) without making changes in frontend.
19
Frontend architecture
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
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!
Modify one of our
themes or create
yours!
Let’s take a look at mobile eCommerce
problems again
Slow, especially with bad internet connection
Not stable during peaks (e.g. Black Friday)
Not suited for mobile devices (sometimes even without RWD!)
Client perspective
Solved
Solved
Solved
Hard to find developers specialized in eCommerce platforms
Long and complicated development (long time2market)
User problems decrease conversion rate
Business perspective
Solved
Solved
Solved
26
Join and contribute!
...or give us a GitHub star! ;)
Great community!
25 commited developers eager to make
this project as good as it is possible
Rich documentation
...and it’s still growing ‘)
Everyday commits
New features/fixes/improvements every
day!
27
Thank you!
Filip Rakowski
filrakowski @ twitter
frakowski @ medium
Piotr Karwatka
piotrkarwatka @ twitter
piotrkarwatka @ medium
Here are some links and people to
follow if you want to learn more about
Vue Storefront:
github.com/DivanteLtd/vue-storefront
VueStorefront.io
@vuestorefront

Vue Storefront Basics

  • 1.
    Vue StorefrontBackend-agnostic PWAfrontend for eCommerce
  • 2.
    Filip Rakowski Frontend TechLeader @ Vue Storefront Frontend Developer @ Divante filrakowski frakowski
  • 3.
    What we doat Divante? 01 02 03 eCommerce Magento, Pimcore, OroCommerce, Vue Storefront 3 Loyalty programs Open Loyalty Open Source Vue Storefront, Open Loyalty, Magento & Pimcore contributions
  • 4.
  • 5.
    2014 - 1.6billion 2017 - 2 billion ...still growing! Users made some kind of eCommerce transaction using phone or tablet 5
  • 6.
  • 8.
    Slow, especially withbad internet connection Not stable during peaks (e.g. Black Friday) Not suited for mobile devices (sometimes even without RWD!) Client perspective
  • 9.
    Hard to finddevelopers specialized in eCommerce platforms Long and complicated development (long time2market) User problems decrease conversion rate Business perspective
  • 11.
  • 13.
    Offline-ready, ultrafast PWA Reallyfast 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)
  • 14.
    Key features Open sourceand MIT license!
  • 15.
    15 How it works(simplified) eCommerce CMS Vue Storefront API Vue Storefront Same for every platform thanks to adapter API Adapter For each platform (Magento 2 and Pimcore integrations are ready) Magento, Shopify or any other Single Page App PWA written in Vue.js NoSQL DB
  • 16.
    How it works(simplified) 16 eCommerce CMS Vue Storefront API Vue Storefront API Adapter NoSQL DB Real-time sync based on product updates
  • 17.
    It still workswhen you are offline! Cache API caches HTML, CSS and JS files Local Forage caches data from server in IndexedDB Service Worker enables offline orders!
  • 18.
    Development How we madeit fast, easy and enjoyable?
  • 19.
    What we focused on? 01 02 03 Easyto learn and work with No architectural limitations (develop like normal Vue.js App), upgradable core separated from the rest of app, rich documentation Extendebility with no limitations You can extend and modify the application via extensions. Fast to implement and easy to maintain Theming system (with default theme out of the box), Vue.js, all standard features out of the box in a core. Thanks to API Adapter you can migrate to other eCommerce platform (e.g. Magento 1 -> Magento 2) without making changes in frontend. 19
  • 20.
    Frontend architecture Extensions (e.g newpayment 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 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!
  • 21.
    Modify one ofour themes or create yours!
  • 22.
    Let’s take alook at mobile eCommerce problems again
  • 23.
    Slow, especially withbad internet connection Not stable during peaks (e.g. Black Friday) Not suited for mobile devices (sometimes even without RWD!) Client perspective Solved Solved Solved
  • 24.
    Hard to finddevelopers specialized in eCommerce platforms Long and complicated development (long time2market) User problems decrease conversion rate Business perspective Solved Solved Solved
  • 26.
    26 Join and contribute! ...orgive us a GitHub star! ;) Great community! 25 commited developers eager to make this project as good as it is possible Rich documentation ...and it’s still growing ‘) Everyday commits New features/fixes/improvements every day!
  • 27.
    27 Thank you! Filip Rakowski filrakowski@ twitter frakowski @ medium Piotr Karwatka piotrkarwatka @ twitter piotrkarwatka @ medium Here are some links and people to follow if you want to learn more about Vue Storefront: github.com/DivanteLtd/vue-storefront VueStorefront.io @vuestorefront