ScandiPWA
Create Magento AppCreate ScandiPWA AppUser ManualGitHub
  • Why Scandi
  • 🚀Quick-start Guide
  • 🗺️Roadmap
  • Introduction to the Stack
    • CMA, CSA, and ScandiPWA
    • Challenges
  • Setting up Scandi
    • Storefront Mode Setup
      • Proxying requests to server
    • Magento Mode Setup
    • Existing Magento 2 setup
    • Magento Commerce Cloud setup
    • Updating to new releases
      • Storefront mode upgrade
      • Magento mode upgrade
      • CMA upgrade
      • CSA upgrade
      • Custom ScandiPWA composer dependency update
      • Local ScandiPWA Composer Package Setup
    • Docker Setup [deprecated]
      • Legacy Docker setup
      • Migrating to CMA & CSA
  • Developing with Scandi
    • Override Mechanism
      • Overriding JavaScript
        • Overriding classes
        • Overriding non-classes
      • Overriding Styles
      • Overriding the HTML / PHP
      • Parent Themes
    • Extensions
      • Creating an extension
      • Installing an extension
      • Migrating from 3.x to 4.x
      • Publishing an extension
      • Extension Terminology
    • Working With Magento
      • Magento troubleshooting
      • Working with Magento modules
      • Working with GraphQL
      • GraphQL Security
      • Working with "granular cache"
    • Developer Tools
      • Debugging in VSCode
      • ScandiPWA CLI
      • Configuring ESLint
      • CSA Commands
    • Deploying Your App
      • Build & Deploy Android app
      • Build & Deploy iOS app
  • Structure
    • Directory Structure
    • Building Blocks
      • Components
        • Styling Components
      • Routes
      • Redux Stores
      • GraphQL Queries
      • Global Styles
      • The Util Directory
      • Type Checking
    • Application assets
    • Code Style
      • JavaScript Code Style
      • SCSS Code Style
  • Tutorials
    • Customizing Your Theme
      • Styling
        • Customizing the Global Styles
        • Adding a New Font
        • Overriding a Components Styles
        • Extending a Component's Styles
      • Customizing JavaScript
        • Customizing the Footer Copyright
        • Adding a New Page
        • Adding a Section in My Account
        • Adding a Tab on the Product Page
        • Creating a New Redux Store
    • Payment Method Integration
      • Setting Up for Development
      • Redirecting to the Payment Provider
      • Handling the Customer's Return
    • Creating a Custom Widget
      • Scandi CMS System Overview
      • Creating a Magento Widget
      • Implementing the Rendering
    • Video Tutorials
      • #1 Setting up and talking theory
      • #2 Templating in React
      • #3 Overriding a file
      • #4 Styling the application
      • #5 Patterns of ScandiPWA
    • Dark Mode Extension
    • Deploying Native Apps
    • Product 3D Model Extension
      • Part 1: Magento 3D Model Uploads
      • Part 2: GraphQL API
      • Part 3: Scandi Frontend
    • Social Share, Full Extension Development
      • STEP-1 and 2 Creating Magento 2 Module
      • STEP-3 Backend Configurations Settings
      • STEP-4 Simple GraphQl and Resolver
      • STEP-5 Creating Extension, Base Redux Store
      • STEP-6 Extension plugins
      • STEP-7 GraphQL types, Helpers
      • STEP-8 Query Field and FieldList
      • STEP-9 render Plugins and MSTP Plugin, Component creation
      • STEP-10 SocialShare Component Development
      • STEP-11 SocialShare for CategoryPage
      • TASK-1 Changing LinkedIn to Twitter
      • STEP-12 Comments for Admin Users
      • STEP-13 Final, bugfixes
    • Accessing Magento 2 Controllers
      • STEP-1 Creating Magento 2 Module
      • STEP-2 - Create Magento 2 Frontend Route and Basic Controller
      • STEP-3 Accessing Magento 2 Controller, Bypassing ScandiPWA frontend
      • STEP-4 Creating ScandiPWA Extension with additional dependencies
      • STEP-5 Creating Plugin and Axios request
  • About
    • Support
    • Release notes
    • Technical Information
    • Data Analytics
    • Contributing
      • Installation from Fork
      • Repository structure
      • Code contribution process
      • Submitting an Issue
      • Publishing ScandiPWA
Powered by GitBook
On this page
  • React and Redux
  • Scandi Override Mechanism
  • Scandi Plugin Mechanism

Was this helpful?

Introduction to the Stack

A quick overview of the technologies of Scandi

PreviousRoadmapNextCMA, CSA, and ScandiPWA

Last updated 3 years ago

Was this helpful?

ScandiPWA front-end stack basically consists of 4 technologies:

  1. – a JavaScript library for building user interfaces

  2. – a global state container and manager

  3. ScandiPWA override mechanism

  4. ScandiPWA plugin mechanism

Technologies 1) and 2) are well established in the front-end world, while the 3) and 4) require more attention and explanation.

React and Redux

Let's first consider how the normal React + Redux application looks like:

Well, simple! We have one global Redux store, which React Components talk to, and receive updates from. What's the problem? Well, in theory, there is none! If we had to write an application for a single-use – that's would be the way we do it!

But we have a problem. ScandiPWA is meant to be used as a base for other projects, it is almost never used without a modification. So, if we consider the above application, what problem would we face?

Well, for every project, we would have to maintain a copy of an entire application! Why is that a problem? Well, changes might be located in many different files, making it hard to trace changed files. As a consequence: developers might struggle during an update or while locating a file. With 800+ files in the project, going through each and every might be quite a struggle.

So, what might be a solution to this problem? Well, to make the application contain just the changed files. This is where the "override mechanism" comes into play!

Scandi Override Mechanism

To make the application contain just the changed files, ScandiPWA introduced the override (aka. shadowing, fallback) mechanism. It works in a very simple way:

To override a file - means to create a file that will be used instead of the original file.

Here is how our new application looks like now (red highlights application file overrides):

The application data-flow is unchanged, and React components and the Redux Store store is now coming from two sources: ScandiPWA and your custom application.

To learn more about how to override, please follow the link below:

Is our application perfect now? Well, yes! At least for 95% of Magento 2 features – that's should be enough! But what if we need additional functionality, that did not came out-of-the-box? How do we add it to our application? What if we need this functionality in different combinations on many different projects?

Manual import and use of packages might cause many problems. Feature implementations might require changes to many different places across the application, tracing this code back after the integration might become very challenging. And what if our feature requires a change inside one of our NPM packages? Well, we have no other option, but to copy the package to our project and modify it.

So, what might be a solution to this problem? We need a tool that allows to:

  • Build standalone NPM packages

  • Contain the integration logic within a distributed package

This is where the "plugin mechanism" comes into play!

Scandi Plugin Mechanism

To make the NPM packages contain integration logic, ScandiPWA introduced the plugin mechanism (aka. extension mechanism). It works a follows:

To create a plugin - means to create a programmable proxy between the original function and the function caller. The plugin can modify original function arguments and return values.

Here is how our new application looks like now (blue highlights application plugins):

This is how our application looks in the end. Notice, every layer is encapsulated:

  • Plugins are contained in their own packages, there is no need to import them manually. The code does not get mixed with newly added features.

  • Overrides are contained in their own package and contain project-specific changes. They make it easy to customize the presentation layer without modifying the source code.

To learn more about how to create application plugins, please follow the link below:

Well, Magento 2 has , but how to deal with such issues in our React + Redux world? Well, there are NPM packages, you might say. Well, NPM packages solve the issue of distributing and encapsulating the logic of a feature in one place. But what about their integration? Every time we want to use one, we need to manually import it into our code.

Override Mechanism
Extensions
React
Redux
its own module-system