Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vue Storefront Basics

7,962 views

Published on

Why we created Vue Storefront and how it works?

Published in: Software

Vue Storefront Basics

  1. 1. Vue StorefrontBackend-agnostic PWA frontend for eCommerce
  2. 2. Filip Rakowski Frontend Tech Leader @ Vue Storefront Frontend Developer @ Divante filrakowski frakowski
  3. 3. 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
  4. 4. Mobile eCommerce today
  5. 5. 2014 - 1.6 billion 2017 - 2 billion ...still growing! Users made some kind of eCommerce transaction using phone or tablet 5
  6. 6. 6
  7. 7. 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
  8. 8. Hard to find developers specialized in eCommerce platforms Long and complicated development (long time2market) User problems decrease conversion rate Business perspective
  9. 9. Vue Storefront eCommerce of the future!
  10. 10. 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)
  11. 11. Key features Open source and MIT license!
  12. 12. 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
  13. 13. How it works (simplified) 16 eCommerce CMS Vue Storefront API Vue Storefront API Adapter NoSQL DB Real-time sync based on product updates
  14. 14. 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!
  15. 15. Development How we made it fast, easy and enjoyable?
  16. 16. 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
  17. 17. 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!
  18. 18. Modify one of our themes or create yours!
  19. 19. Let’s take a look at mobile eCommerce problems again
  20. 20. 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
  21. 21. Hard to find developers specialized in eCommerce platforms Long and complicated development (long time2market) User problems decrease conversion rate Business perspective Solved Solved Solved
  22. 22. 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!
  23. 23. 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

×