Modular Architecture

New Package Architecture

The new Storefront package architecture aims to make upgrades smoother for tenants using our platform. Instead of requiring them to completely rework their logic with every larger update, we're dividing specific features into independent, manageable packages.

This modular approach offers two primary benefits:

• It enhances the platform's overall flexibility and scalability.
• It allows tenants to upgrade or customize specific features without impacting other parts of their application. This is particularly important considering that some projects may not always have the resources to keep pace with the latest developments.

To achieve this, we have extracted the essential logic building blocks of each feature into its own dedicated package. The user interface components (Vue components) will remain within the Storefront Boilerplate, ensuring a consistent look and feel across their Storefront application. This separation allows us to focus on delivering core feature functionality effectively while minimizing complexity and dependencies.

Connecting all these independent feature packages will be @scayle/storefront-nuxt, acting as the central hub for shared logic. This ensures seamless integration and communication between different functionalities.

As we transition to this modular architecture, existing feature-specific functions within the current system will be phased out and migrated to their corresponding feature package.

mermaid

Copy

%%{
  init: {
    "flowchart": {
      "htmlLabels": false
    },
    "theme": "base",
    "themeVariables": {
      "primaryColor": "#02E88C",
      "primaryTextColor": "#404040",
      "primaryBorderColor": "#404040",
      "tertiaryColor": "#f5f5f5",
      "tertiaryBorderColor": "#808080",
      "edgeLabelBackground": "#e6e7eb"

    }
  } 
}%%
flowchart TB
    sfb((("
        Application: 
        Storefront Boilerplate
    ")))

    subgraph Feature Packages
        sfFeatCountryDetection{{"@scayle/storefront-country-detection"}}
        sfFeatProductListing{{"@scayle/storefront-product-listing"}}
        sfFeatProductDetails{{"@scayle/storefront-product-details"}}
    end

    subgraph Tooling
        nxOtel[/"@scayle/nuxt-opentelemetry"/]
    end

    subgraph AddOns
        sfOmni[/"@scayle/omnichannel-nuxt"/]
    end

    sfNuxt{"@scayle/storefront-nuxt/"}
   
    sapi[("@scayle/storefront-api")]

    sfb ==> sfNuxt
    sfb -.->|Optional| nxOtel
    sfb -.->|Optional| sfOmni
    sfb --> sfFeatCountryDetection
    sfb --> sfFeatProductListing
    sfb --> sfFeatProductDetails

    sfFeatCountryDetection --> sfNuxt
    sfFeatProductListing --> sfNuxt
    sfFeatProductDetails --> sfNuxt

    sfNuxt ==> sapi

Layers of modularity explained

Our new modular architecture is built on four key elements designed to maximize flexibility and streamline development.

1. Storefront Core SDKs

At its core are the Storefront Core SDKs. These SDKs provide the essential building blocks for core e-commerce functions, such as managing products, handling shopping carts, and managing user authentication. Our SDKs are designed to seamlessly integrate with Vue and Nuxt, providing developers with sensible defaults and best practices to reduce implementation efforts and a streamlined development experience. They ensure a smooth flow of information by connecting with backend systems like the Scayle Backend through designated APIs.

2. Storefront Feature Packages

The Storefront Feature Packages lie at the heart of this modular approach, enhancing both flexibility and scalability. Each package encapsulates the essential logic of a specific feature, allowing for independent upgrades or customization without affecting other parts of the application, while the visual components (Vue components) remain within the Storefront Boilerplate, ensuring a consistent look and feel across the finished application.

3. Storefront Boilerplate

The Storefront Boilerplate provides a ready-to-use starter kit built on the popular Nuxt framework. It comes pre-integrated with the Core SDKs and demonstrates the implementation of common e-commerce features and pages, typically provided by the Feature Packages, giving developers a significant head start. Beyond just a starting point, the Boilerplate showcases best practices for integrating and utilizing various features, serving as a valuable reference point for guidance and inspiration.

4. Storefront CLI

To further streamline feature adoption, we'll introduce the Storefront CLI, a command-line interface tool (@scayle/storefront-cli). Designed to simplify the integration of new feature packages, such as "Country Detection" or "Product Listing", the CLI guides tenants through a straightforward process.

Upon selecting a desired feature, the corresponding package is automatically installed into their Storefront Boilerplate project as a Nuxt module. The CLI then generates the necessary user interface components (Vue components), tests and utilities, ensuring alignment with the latest Storefront Boilerplate version and seamless integration, while using the corresponding feature package as dependency for the features core logic.

This approach offers significant advantages, particularly for tenants utilizing older versions of the Storefront Boilerplate. They can benefit from incremental feature updates and enhancements without requiring a full Boilerplate upgrade, allowing for a more flexible and gradual adoption of new features and ongoing improvements.

Former Package Architecture

The previous Storefront architecture, based on specific SDK packages, faced limitations in scalability and adaptability. Its linear modularity tightly coupled core functionalities within the SDKs, while shop-specific features resided separately in the Storefront Boilerplate.

This lack of granular modularity made it difficult to update specific functionalities independently. Even minor shop-specific changes often necessitated substantial upgrades across the entire codebase, creating significant challenges for tenants. The tight coupling and the resulting upgrade complexities hindered tenants from making tailored adjustments, integrating new features, and benefiting from targeted improvements. Ultimately, the architecture's rigidity limited tenant innovation and the ability to adapt swiftly to market changes.

mermaid

Copy

%%{
  init: {
    "flowchart": {
      "htmlLabels": false
    },
    "theme": "base",
    "themeVariables": {
      "primaryColor": "#02E88C",
      "primaryTextColor": "#404040",
      "primaryBorderColor": "#404040",
      "tertiaryColor": "#f5f5f5",
      "tertiaryBorderColor": "#808080",
      "edgeLabelBackground": "#e6e7eb"
    }
  } 
}%%
flowchart TB
    sfb((("
        Application: 
        Storefront Boilerplate
    ")))   

    sfNuxt{"@scayle/storefront-nuxt/"}

    sapi[("@scayle/storefront-api")]

    sfb ==> sfNuxt

    sfNuxt ==> sapi