Scaling Your eCommerce with Vue Storefront

Building e-commerce applications doesn't have to be as tedious as managing a monolithic architecture where all components are stored in a single codebase. Vue StoreFront is a decoupled headless eCommerce solution you can leverage with benefits including a PWA and 100% offline support. In this talk, I'll cover how Vue StoreFront can help you build more resilient eCommerce applications.

Transcript

1. Scaling your eCommerce
   with Vue Storefront
   HEADLESS COMMERCE SUMMIT 2020
   @lauragift_
   

   View Slide

2. Hi!
   Gift Egwuenu
   Frontend Developer at Passionate
   People
   @lauragift_
   giftegwuenu.com
   2
   @lauragift_
   

   View Slide

3. Scaling your eCommerce
   with Vue Storefront
   3
   @lauragift_
   

   View Slide

4. eCommerce platforms built with Monolithic
   architecture requires high cost of maintenance
   and effort expended in development.
   How can we leverage modern solutions that'll
   yield quicker results and help solve challenging
   eCommerce industry problems.
   What’s the problem?
   4
   @lauragift_
   

   View Slide

5. Vue Storefront
   Vue Storefront is an open-source
   Headless PWA storefront for your
   eCommerce with a possibility to connect
   with any eCommerce backend.
   5
   @lauragift_
   

   View Slide

6. vuestorefront.io 6
   @lauragift_
   

   View Slide

7. Modern Tech Stack
   7
   @lauragift_
   

   View Slide

8. Key Features
   8
   Platform Agnostic
   100% Offline Mode, Mobile Friendly, Native
   app features.
   PWA Support
   Magento, BigCommerce, Shopify, Shopware,
   WooCommerce.
   MIT Licenced and free to use with great
   community support.
   Open Source
   1
   2
   3
   8
   @lauragift_
   

   View Slide

9. Vue Storefront Architecture
   9
   9
   @lauragift_
   

   View Slide

10. Vue Storefront Architecture
    10
    10
    @lauragift_
    Backend Platform
    Elasticsearch Data
    Store
    

    View Slide

11. Core
    This acts as a glue for all the
    features that allow Vue
    Storefront to work. It contains
    all the entry points, SSR
    behavior, build process,
    in-app libs and helpers.
    Modules
    Modules are eCommerce
    features (cart, wishlist,
    catalog) you can use only
    the features you need.
    Themes
    No limitations on theming,
    fully customizable default
    theme. able to extend all the
    logic and add your HTML
    markup and styles.
    11
    Core Concepts
    VSF Core & VSF Module & VSF
    Theme = Fully Configured
    eCommerce Experience
    @lauragift_
    

    View Slide

12. Getting Started
    Vue Storefront CLI
    @lauragift_ 12
    

    View Slide

13. @lauragift_
    13
    

    View Slide

14. Vue Storefront Next
    14
    A new architecture based on Vue
    Composition API from Vue.js 3 and
    Nuxt.js
    Complete rewrite from previous version to
    make integration with 3rd party services
    seamless and improve developer
    experience.
    @lauragift_
    

    View Slide

15. Shopify Shopware
    15
    3rd Party Integrations
    @lauragift_
    Stryker Commercetools
    

    View Slide

16. Ecosystem
    of tools
    @lauragift_
    16
    

    View Slide

17. “Headless Commerce alleviates
    the pain point by allowing for
    faster go to market with a
    significantly lower total cost of
    ownership.”
    17
    — BigCommerce (State of the eCommerce platforms)
    @lauragift_
    

    View Slide

18. 80+ Projects Built with Vue Storefront
    @lauragift_
    18
    vuestorefront.io/live-projects
    

    View Slide

19. Twitter: @lauragift_
    19
    Thank you!
    giftegwuenu.com
    

    View Slide