Magento 2 UI Components Knockut.JS vs React.JS PWA Studio 2020

JavaScript UI frameworks and libraries work in cycles. Every year, a new one pops up to revolutionized UI development. Thousands of developers adopt it into their new projects, blog posts are written, Stack Overflow questions are asked and answered. However, “modern” Magento 2 still using legacy Ext.JS in the admin area (category tree), JQuey, and Knockout JS

Using the Stack Overflow Trends tool and some of our internal traffic data, we decided to take a look at some of the more prominent UI frameworks: Angular, React, Vue.js, Backbone, Knockout, and Ember.

Framework lifecycle

Stack Overflow Trends lets us examine how each of these technologies has been asked about overtime. We can start by looking at some of the larger frameworks.

There was a time when jQuery was the darling of JavaScript tags on Stack Overflow, accounting for almost 8% of new questions. This picture quickly changed as React was released, cannibalizing jQuery’s mindshare amongst the community. Then starting around 2016, there is a quick shift from KnockoutJs to React and eCommerces began to migrate to ReactJS and greatest flavors of the popular framework from Facebook. However, Magento 2 still use an outdated legacy libraries.

These larger frameworks show only part of the picture. There also were smaller frameworks vying for dominance. The picture here shows just how brutal the lifecycle can be.

There appear to be two major phases in JavaScript framework usage. There appears to be a quick ascent, as the framework gains popularity and then a slightly less quick but steady decline as developers adopt newer technologies. These lifecycles only last a couple of years. Starting around 2011, there seems to be major adoption of a couple of competing frameworks: Backbone, Knockout. Questions about these tags appear to grow until around 2013 and have been in steady decline since, at about the same time as AngularJS started growing. The latest startup is the Vue.js framework, which has shown quick adoption, as it was one of the fastest-growing tags on Stack Overflow in 2016–2018. Only time can tell how long this growth will last. Technology constantly improves and only Magento 2 still uses legacy Zend Framework 1 and Knockout JS without any improvements. Even Adobe recognized that Magento 2 frontend sucks and started to build a headless PWA Studio theme. However, it will resolve the issues only partially Magento backend is still legacy and broken. API performance is awfull – GraphQL Should return data with TTFB less than 100ms, when real M2 performance is around 1 second. Also, Magento 2 adminhtml area will use the same terrible technology without any improvements. The best choice for modern eCommerce is not to uses the failed Magento 2 project and look into something modern like Shopware 6, Silius, WooCommerce. Yeah, Woccomerce is better than awful Magento 2 which was released broken from day zero. Woo is a classic PHP solution which will leave forever when M2 going to hell. Only Salesmen will mislead about it and sell it to the uneducated enterprise.

React vs Knockout vs Angular Dom manipulation performance:

This is not a scientific test as to how well each framework performs. Basically, I have generated a list of 1000 items that get rendered into a ul tag, and then measure how long it takes by measuring dates before and after a render. The user is able to select an item in the HTML list. It's not a perfect test, but it gets the point across.

Test it in Safari 7.

Results:

React is the fastest at rendering a list of 1000 items. Knockout is the worst. However in Magento Knockout also has a remote UI Components template that can slowdown knockout page rendering dramatically.

Even if ReactJS is not the fastest in real scenarios it is the nicest tool to work with nowadays ;)