for Magento built with Vue.js
Open source StoreFront X PWA will help you achieve the top score in all Lighthouse metrics and easily customize your online store without unnecessary complications. Thanks to modular architecture and smart build-time tree shaking.
StoreFront X framework outperforms similar products in all Lighthouse Performance Score metrics. Here you can check how your online store is performing.
StoreFront X maximizes website speed & other metrics, improves conversion rate and CX of your website and supports SSR.
Combines the best from other frameworks
✔ StoreFront X combines the best features from SSR and SPA/PWA approaches into one modern platform.
✔ Uses GraphQL for minimal data transfer (REST and other protocols supported).
✔ Contains a small server for backend-related features (image resizing, proxy, etc.).
✔ Uses the modern headless approach for simple, independent deployment.
✔ Comes with built-in best practices and architecture guidelines to make every app performant.
✔ Provides a better Time to Market.
Basic features (for Magento)
StoreFront X is designed to be easily customizable, scalable, and high-performing at the same time. Therefore, its architecture is modular. It consists of a very small core and additional modules for particular functionalities. A great advantage of this type of architecture is its positive effect on performance, which is crucial for every e-commerce business. The important part here is that code from turned-off modules is not sent to the client at all.
The application is divided into many small modules (catalog, blog, checkout). For example, you can create your own module with bestsellers and add this functionality to the catalog. You can have a lot of different modules and turn them off and on as you wish.
What if you want to change some modules? That’s when overriding comes into play.
- Modules are able to change the behavior of other modules, which allows you to modify any part of StoreFront X.
- Do you like the default theme but not the footer? No problem, you can change it.
- Doesn't the" add to cart" method send some data to your custom API endpoint? You can change that.
- Do you want to integrate StoreFront X with a different backend other than Magento? You fix that.
All of this is built on top of our powerful dependency injection container, which is fully resolved and compiled out during build-time, which means no unnecessary overhead during runtime.
...and simple infrastructure
StoreFront X does not use middleware or any additional services. It communicates with the backend API directly via a simple built-in proxy server. Therefore, it is easy to deploy and maintain. However, this does not mean that StoreFront X can’t be integrated with different back-end APIs. Instead of a middleware service, StoreFront X leverages its modules as an abstraction layer between presentation logic and different back-end APIs.
The server-side rendering magic
Imagine that: you want to click a button, and a second before clicking, an ad or image appears in the same place, and you click on it instead. How to avoid this kind of horror scene? Use SSR! Server-side rendering (SSR) allows you to send the most important content to the client during the initial request. As a result, users will see the app almost immediately and without annoying layout shifts.
Better UX, improved by SSR, boosts conversion rate and decreases bounce rate. It also positively affects Web Vitals:
- Better First Contentful Paint (content is visible right away)
- Better Largest Contentful Paint (large images are pre-tagged and therefore visible right away)
- Zero Cumulative Layout Shift (server-rendered markup protects the page from scrolling when dynamic content is loaded)
How about visibility?
This doesn't mean that these components are not visible. The user sees them normally. We only load the necessary code for their interactivity when it is actually needed. For a better understanding, take a look at the diagram.
How does this approach impact Web Vitals?