The Vue Storefront Essentials Course is now available! Learn More
Key Concepts

Key Concepts

Storefront Starter is a comprehensive eCommerce accelerator designed for efficiency and adaptability. It provides a robust solution that covers all standard eCommerce functionalities and can be extended with Modules for more sophisticated use-cases. This document aims to offer a detailed and accessible overview of Storefront Starter's architecture, essential components, and how it revolutionizes eCommerce platform integration.

What is Storefront Starter?

Storefront Starter accelerates the development of eCommerce solutions with its modular and extendable architecture. Optimized for speed and user engagement, it's built using popular frameworks such as Next.js for React or Nuxt for Vue.js.

A key feature of Storefront Starter is its unique approach to handling data from different eCommerce platforms. It does this by implementing the Unified Data Model and Unified Methods contracts, which standardize data structures and operations, making it easier to switch between eCommerce backends with minimal changes to the frontend.

Core Components

The Need and Advantages of Storefront Strater

In traditional setups, eCommerce integrations often come with their front-end implementations, meaning that your storefront will be tightly coupled to your chosen backend. This makes transitioning between platforms a significant task that requires large rewrites of your application. Storefront Starter addresses this challenge by offering:

  • Single Front-End Codebase: Utilize one frontend for all backend integrations, enhancing agility and reducing vendor lock-in.
  • Unified Data Layer: Facilitates easy switching between eCommerce platforms without significant frontend alterations.

These two components work together to provide a more robust, efficient, and flexible eCommerce platform that is not only easy to maintain and extend but also provides a consistent developer experience regardless of the eCommerce backend being used.

Core Components of Storefront Starter

  • Vue Storefront SDK: Acts as a bridge between the Storefront and the Middleware. It ensures type safety, modularity and provides simple APIs for data fetching.
  • Unified SDK Module: This module serves as a user-friendly way to interface with the Unified Data on the frontend. This module dynamically creates methods for interacting with the Unified API Extension endpoints, facilitating customizability and extension.
  • Vue Storefront Middleware: It orchestrates data flow, manages routing requests, handles responses, and integrates with a variety of Third-Party services.
  • Unified API Extension: Responsible for unifying the data from the different eCommerce backend integrations, which facilitates the data interaction across the various parts of the application. This module enhances default eCommerce integrations with endpoints adhering to the Unified Methods contract.
  • Normalizers: These functions transform raw eCommerce responses into the Unified Data Model, ensuring consistency and compatibility across different integrated systems.
  • Third-Party Systems: Storefront Starter integrates seamlessly with a range of eCommerce platforms, payment gateways, CMS, and search engines, offering a robust and versatile eCommerce solution.

You can find more details about each component in the dedicated sections of this documentation:

Storefront Starter Data Flow

  1. The Storefront sends a request to the Middleware via the Unified SDK Module.
  2. Since the request is sent to the Unified API endpoint, the Unified API Extension intercepts the request and processes it.
  3. The Unified API Extension uses configured Integration API Client to send a request to the eCommerce platform.
  4. The eCommerce platform responds with raw data.
  5. The Unified API Extension uses Normalizer function to transform the raw data into the Unified Data Model.
  6. The Unified API Extension sends the transformed data back to the Storefront.
  7. The Storefront receives the response and displays the data to the user.

Data Flow

This data flow ensures that no matter the eCommerce backend, the data delivered to the application is consistent and standardized, thereby reducing complexity, enhancing maintainability, and ensuring a uniform user experience.

Key Takeaways

Storefront Starter represents a significant leap in eCommerce platform integration, offering a unified, efficient, and customizable solution. Its architecture not only simplifies the development process but also ensures a consistent and enjoyable user experience across various eCommerce backends. This unified approach positions Storefront Starter as a key player in modern eCommerce solutions, adaptable to the ever-evolving digital marketplace.