How to remove Prototype in Magento?

What is Prototype?

Prototype is an JavaScript library that offers various utilities and extensions to “take the complexity out of client-side web programming”. It is the older counterpart to the jQuery library.

But during the years jQuery gained much more attendance and got exciting new features, so developers time after time switched to this JavaScript framework which eventually led to Prototype being abandoned. Nowadays in most of my software projects I opt for a "no framework" approach and instead rely on plain vanilla JavaScript.

Why remove Prototype from Magento?

Back in the old days of web-programming, aka the time when Magento 1 has been developed, JavaScript frameworks like Prototype and jQuery, were very helpful in order to rapidly build applications that are then compatible with most of the browsers.
There were lots of browser incompatibilities that made it absolutely logical and saving lots of time to use such an abstraction framework.

Nowadays I am switching more and more away from full-blown frameworks towards small utility libraries for specific purposes.
Also the JavaScript standard, that browser vendors agreed on, got much better and lots of functions that in the past needed a complex implementation are now available as built-in browser functions. One example for this is document.querySelectorAll('.selector') versus the old Prototype implementation $('.selector').

With smaller libraries you can achieve that your Google Lighthouse score sky-rockets, because otherwise you have lots and lots of code in the framework that is unused on your website but your visitors are forced to download that code anyhow. E.g. in the case of the Prototype library for most Magento installations ca. 85 % of the code or more are unused on every page!
Additionally you also prevent security issues that might arise from methods in the framework that you do not even use.

The biggest problem especially with Prototype in Magento is, that the Prototype project has been abandoned. The latest release is from September 2015 which means that there were no updates since more than 5 years (which is a lot in the internet space).
In addition there were some severe security issues recently like CVE-2020-27511 that then have to be fixed by your developers.

Where to remove Prototype from Magento or OpenMage?

Of course as you may imagine, entirely removing Prototype from Magento is no easy and straightforward thing. There are lots of dependencies and the effort to remove it depends on several of factors, such as the installed extensions, used Magento standard features and so on.
If it were easy, the guys at Adobe or OpenMage would have done it in the meantime ;-)

So this blog post can only be a starting point to make you think into the right direction. It is neither complete nor is it applicable for every use case.

In my projects I usually do the removal of Prototype in Magento in a 2-step process:

1. First I remove Prototype from all the CMS pages, the catalog, contacts page, etc.
2. In a second step then I remove it also from the checkout as this is a bit more complex.

I have never removed Prototype library from Magento admin yet, because in general the backend is protected by several measures and I assume your backend users know what they are doing and are not trying to exploit your Magento. So the security and performance argument against Prototype is not that important for the backend.

Steps to remove Prototype from Magento

Removing the Prototype JavaScript library files from Magento 1 or OpenMage can be done with the following layout XML, e.g. in your theme’s local.xml file:

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="removeItem"><type>js</type><name>prototype/prototype.js</name></action>
            <action method="removeItem"><type>js</type><name>lib/ccard.js</name></action>
            <action method="removeItem"><type>js</type><name>prototype/validation.js</name></action>
            <action method="removeItem"><type>js</type><name>scriptaculous/builder.js</name></action>
            <action method="removeItem"><type>js</type><name>scriptaculous/effects.js</name></action>
            <action method="removeItem"><type>js</type><name>scriptaculous/dragdrop.js</name></action>
            <action method="removeItem"><type>js</type><name>scriptaculous/controls.js</name></action>
            <action method="removeItem"><type>js</type><name>scriptaculous/slider.js</name></action>
            <action method="removeItem"><type>js</type><name>varien/js.js</name></action>
            <action method="removeItem"><type>js</type><name>varien/form.js</name></action>
            <action method="removeItem"><type>js</type><name>varien/menu.js</name></action>
            <action method="removeItem"><type>js</type><name>mage/translate.js</name></action>
        </reference>
    </default>
  
    <catalog_product_view>
        <reference name="head">
            <action method="removeItem"><type>js</type><name>varien/product.js</name></action>
            <action method="removeItem"><type>js</type><name>varien/product_options.js</name></action>
        </reference>
        <reference name="product.info.options.wrapper">
            <remove name="options_js"/>
        </reference>
    </catalog_product_view>
</layout>

As you can see next to the Prototype library we also have to remove some default Magento JavaScript files that also rely on Prototype.

As described above to add the Prototype to checkout again, we can use the following XML:

<?xml version="1.0"?>
<layout version="0.1.0">
    <checkout_cart_index>
        <update handle="page_use_prototype"/>
    </checkout_cart_index>
  
    <checkout_onepage_index>
        <update handle="page_use_prototype"/>
    </checkout_onepage_index>
  
    <page_use_prototype>
        <reference name="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>
            <action method="addJs"><script>prototype/validation.js</script></action>
            <action method="addJs"><script>varien/js.js</script></action>
            <action method="addJs"><script>varien/form.js</script></action>
        </reference>
    </page_use_prototype>
</layout>

This defines a layout handle page_use_prototype that can be applied to all routes or pages that should continue to use Prototype until you have removed it all.

After you have done these 2 steps you should flush the cache and check your frontend for JavaScript errors. Probably there will be lots of them now ;-)

Alternative Prototype Components

As I said I cannot guide you through all these errors as this is mostly very specific to your Magento installation but here are some common challenges and issues and possible alternatives.

One thing is that you either have to remove all decorateTable() calls from all template files or you can simply implement a dummy method like this:

function decorateTable(table, options) { }

Below I will list some popular libraries that I recommend for several purposes. With a little bit research you will find very good vanilla JavaScript libraries or plain CSS implementations for most of your use cases.

I hope that were some inspiration points on how to remove Prototype from Magento. I know it is lots of work but in the end it usually pays out if your Google Lighthouse score sky-rockets.