Enhancing Magento Frontend Performance with ReactJS and Comparing It to Knockout

Abstract

Magento 2 is a PHP-based framework used for building e-commerce solutions. It enables developers to easily extend, customize and create pages and features in order to build the best possible e-commerce solutions. This thesis was commissioned by Vaimo Finland Oy. The company previously developed a module for Magento 2 that replaced the product search functionality with a new user interface using KnockoutJS. While providing with a better and more efficient solution than the default Magento search, it still lacked in performance, particularly in older browsers such as Internet Explorer. The implementation done for this thesis aimed at replacing this solution with a new module using ReactJS as the framework for the search user interface.

For this thesis, a new module for Magento 2 was built. It fetches search results asynchronously and uses ReactJS as the library for rendering the user interface. Performance testing was conducted to assert whether the new user interface had more performant rendering than the previous one created with Knockout.

The implementation resulted in a proof of concept that in the future will undergo further development and replace the user interface from the current module. The testing done showed that the new user interface had improved rendering performance compared to the previously created solution.