Fastest Magento 2 ReactJS Luma Open Source Hyva alternative PWA Theme
We made a Core Web Vital performance test of our Magento ReactJS UI Hyva-like theme. There is a result:
Google Page Speed Insight Performace
Update: After Consultation with Erwin Hofman (https://www.linkedin.com/in/erwinhofman/) we made several improvements now React Luma performance is even better ->
Magento Luma React vs Hyva performance
So, we can see Luma React even 2 times faster than Hyva theme!
What Magento 2 ReactJS Luma theme?
It Reacts “native” default Magento theme with PWA features, but not a Single Page Application (SPA) like the rest of the Magento React implementation. It uses the modern ReactJS libraries ReactJS, VueJs out of the box instead of the defective Knockout JS Adobe UI. The theme uses the best Magento 2 development best practice: “Use as minimum Magento core as possible.” Unfortunately, it still uses Magento backend architecture (layouts, blocks, phtml), however, as little as possible without reusing Magento core JS libraries. Also, it is highly compatible with Magento Laragento/NodeJs/Python microservices. Each UI Component can use fast microservice instead of defective Magento2 PHP framework. You can also reuse any (Porto, Luma, Fastest, Argento, custom etc.) Magento theme design(UI)with this theme, but it is highly not recommended.
Magento 2 React Theme also has an optimized CSS compiler for Magento written on TypeScript. It allows optimise broken Magento 2 core CSS/LESS architecture to modern standards.
There, you can find the Magento ReactJS Module:
Them is generally available for now.
Updated: it is available and works well.
Open-Source GitRepo is here:
Sorry, Because of the war in Ukraine, I’m not contributing for a long time because we have another critical project to save the people of Ukraine and Europe from the Putin orcs.
There is a Magento React Theme demo site :
(Sorry! DEMO SITE is not working anymore)
And this is performance without Varnish just default PHP after optimizing Magento core broken Full page cache. Everything is broken in Magento even FPC.
It can generate 586 cached pages per second with an average response time of 130ms. For sure, cached page performance doesn’t matter, but for end-user and uncached pages, Google Page Speed Insight performance is also remarkable:
Also, ReactJS Luma Magento Theme is PWA ready. You can install it to your mobile device and use offline mode.
You can find the Open Source repo here :
Join us and contribute to the Adobe less React future of Magento!
To improve performance we are using minimalistic React or other librarians and JS native approach.
There are alternatives to React with a similar features and API but with a smaller size or a higher performance, but lack some features (e.g., fragments, portals, or synthetic events).
Preact | The smallest React alternative (preact@8.3.1 + preact-compat@3.18.3 is 7.6 kB gzipped; react@16.4.0 + react-dom@16.4.0 is 31.4 kB gzipped) | No synthetic events | IE8 supported with polyfills
Nerv | Smaller than React, larger than Preact (nervjs@1.3.3 is 9.8 kB gzipped, compat is not needed; react@16.4.0 + react-dom@16.4.0 is 31.4 kB gzipped) | The goal of Nerv is to have 100% the same API (without Fiber and Suspense), see NervJS/nerv#10 for details | IE8 supported
Inferno | Smaller than React, larger than Preact and Nerv (inferno@5.4.2 + inferno-compat@5.4.2 is 11.3 kB gzipped; react@16.4.0 + react-dom@16.4.0 is 31.4 kB gzipped) | Higher runtime performance than React, the highest performance among all React alternatives, manual optimization possibilities offered | Partial synthetic events | IE8 unsupported natively
Use alternatives with caution. Some of the alternatives don’t have synthetic events or are lacking some React 16 features (Preact issue, Inferno issue, Nerv issue). However, many projects still can be migrated without any codebase changes.
Or you can use any other JS framework or don’t use any framework Vanilla JS.
Hyva vs. Magento Luma React theme front performance.
Hyva is second on this screen.
Luma React is a Free Open Source Theme that aims to resolve performance issues by removing all the garbage introduced by Adobe Magneto 2-based themes and starting with a blank PHTML. The thousands of bloated junk JavaScript file libraries were replaced with no JS framework known as Vanilla JS, but you can add any JS framework for your needs, such as ReactJS, Vue.Js, and Alpine.js. In addition, all CSS is optimized(critical CSS injection, deferred the rest, removed unused, etc.) and not replaced. However, it is better to optimize it from scratch. So, you can basically convert your existing Magento junk theme to a fast theme.
