Developing with Scandi
Tutorials
Why Scandi
Welcome to Scandi, providing next-generation user experience for e-commerce!
ScandiPWA is a next-generation Magento 2 front-end written in React. It supports 95% of all Magento features while offering a significantly improved user experience and flexible customization technologies. With Scandi, you have the power to use file overrides for theme development and application plugins for reusable extensions.
Client-Side Rendering
In a conventional Magento theme, all of the pages are generated on the server. This means that the client needs to fetch the entire page every time the user clicks on a link, and even with caching enabled, the pages need to be fully re-generated whenever part of the relevant data is modified. Not only does this make Magento resource-hungry, but it results in slow load time.
Instead of rendering the pages on the server and fetching them every time, ScandiPWA only fetches the data from the server (using GraphQL), and performs the rendering on the client-side, using React. The page is never actually reloaded - once the app's JavaScript code has been loaded, the front-end magic happens without any help from a server. This is called a Single-Page Application, and it provides several advantages.
Improved Performance
Now that the rendering happens on the client, the server does not need to render the entire page every time. It merely needs to serve the data required by the client, which can happen much faster.
Smooth Transitions
Since the client is responsible for rendering the page, it knows the structure of the page even before requesting the data. As a result, we can implement a smooth transition to the next page, and display placeholder loaders until the data arrives.
Progressive Web Application
In addition to being rendered entirely client-side, ScandiPWA is a Progressive Web Application (PWA). This means that it can act similarly to a native iOS or Android application without any additional code.
Being a PWA also means that the application has a service worker (SW). The SW is a piece of caching code that intercepts certain requests it has already seen before, and simply returns the data it has already received, instead of making the same request again. Not only does this make repeat requests almost instantaneous, but it enables offline browsing of data that has already been fetched at some point.
Still a Magento Theme
Even with all these improvements, ScandiPWA is still a Magento theme - it can be installed on any Magento instance without setting up additional software! The only difference is that we use a faster mechanism for rendering the UI - instead of using Magento's layout system with templates, we use React components.
Fully Customizable
While the traditional methods of extending a Magento theme won't be applicable, we offer something even better - the Override Mechanism, which you can use to completely customize the theme. Keep any default functionality you need while overriding specific components to suit your needs. There's nothing you can't customize easily with the override mechanism!
In addition, it is possible to create and install reusable extensions for the theme. With minimal setup investment, you can get additional functionality in your app, defined by an extension – just like in any other Magento store!
Last modified 8mo ago