Magento 2 and Adobe Commerce UI frontend architecture issues

Magento and Adobe Commerce has an outdated js frontend which was modern in 2012 when project was started. The main Magento 2 stack is require.js, jquery, knockout.Js, and a lot of spaghetti code. By the way, developers hate this shame and basically don’t use that and build their own frontend Magento-less solutions using ReactJS or an old Magento 1 approach. For example, Vue Storefront created my Divante and Hyva Teme created by Willem Wigman.

Magento 2 Luma Theme. Based on Legacy Knockout.JS

Adobe Commerce has terrible checkout out of the box. Magento Named it a single page application on KnockoutJS but it still requires a lot of backend work to render the initial page and not FPC catchable. The architecture is a jquery with KnockoutJS UI components defined in XML and js files. It is really difficult to change anything in this mess. Adobe Commerce has 3-d party extensions but they are an unmaintainable mess of the spaghetti code. When you are upgrading Magento something will definitely break in the checkout. Because the only way to extend shitty JS components is JQuery Mixin. Even if extension use Mixin it needs to do a lot of overrides in the spaghetti Magento UI code and after an upgrade, it will be definitely broken. You touch it in one place and you see other things get broken or modified in an unexpected way. Just like sticky spaghetti – you pull one end, and you see several places start moving.

Magento 2 has PWA implementation create by Adobe as a separate Project. When Adobe bought Magento 2 in 2018 they were shocked and VueStorefront clearly showed how bad Magento 2 UI is. But, as usual, they like overengineered the simple stuff. When they need a single simple React App they used all possible JS node npm packets such as heavy Apollo and created their own proxy server on PHP UPWARD which also has a JS implementation. Also, Magento Adobe PWA doesn’t have critical for the performance Server-Side Rendering (SSR) support. That’s why it is not popular, and merchants like to use better 3-d party solutions:

  • Hyva Theme – PHP and Alpine.JS

Also headless requires a fast backed API, however M2 has an extremely slow backend for the react app.

For sure, as an official Adobe solution, it will be forced sold to the merchants by Adobe partners the same as Magento Cloud.

Magento 2 is also a terrible technology for developers to work with. Uses of the legacy stack make from the advanced Software Developers just a Magento Coders which are forced to use the outdated technologies.

Magento/APP Cloud Architect. Melting metal server infrastructure into cloud solutions.