Ajax Load More 5.0

After months of planning, development, and testing I’m excited to officially announce the release of Ajax Load More 5.0.

Version 5 is a major milestone for Ajax Load More and the suite of add-ons. Removing years of jQuery code meant essentially re-writing the plugin from scratch while maintaining compatibility across the board.

Keep reading to find out what’s new and why this update is so vital to the growth and sustainability of Ajax Load More.

What’s New in 5.0

• The Removal of jQuery
• Callback Functions

The Removal of jQuery

This may be the single most significant update to Ajax Load More since the initial launch back in 2015, jQuery is no longer a required dependency of core Ajax Load More or the add-ons 🎉

Removing jQuery essentially meant a complete rewrite of the plugin. There was over 3000 lines of custom JavaScript code that required some sort of modification. Whether that was updating jQuery functions to vanilla JS or swapping out the Ajax requests from jQuery.ajax() to Axios.

For simplicity, I decided to move forward with the rewrite using vanilla JS (ES6) rather than rely on a library like React or Vue. I also updated the build process from Gulp to Webpack to allow for better bundling and module import/export methods.

To be honest, at one point I didn’t think removing jQuery was ever going to be possible. I needed to remove the dependency from the core Ajax Load More plugin, and five add-ons (Filters, SEO, Next Page, Single Posts and Paging) and they all had to launch simultaneously to avoid plugin conflicts when users updated.

Why was removing jQuery so important to Ajax Load More?

1. Zero script dependencies
   
   Ajax Load More is now a standalone product, meaning the compiled script relies on no other library or framework to perform it’s tasks.
2. Modernization of the code base
   
   With the dependancy on jQuery came many support headaches – from supporting users running jQuery 1.x, 2.x and 3.x to users loading three and four different jQuery versions on a single page. It was becoming overly difficult to provide great support with so many outside variables out of my control.
3. Future proofing
   
   With the inception of the Gutenberg block editor and WordPress heading straight into the JavaScript revolution who knows how long developers will be enqueuing jQuery in their themes.

These are just a few high level reasons for the update. In the end I feel like removing jQuery as a core dependancy opens up new opportunities and modernizes the tech stack to allow for quicker iteration and feature updates.

Callback Functions

With the removal of jQuery, all callback and public functions required an update to remove the $.fn() prototype properties of each function.

To help with the transition, users referencing the old callback functions in their code can visit the ALM Settings page and enable the Legacy Callbacks option. With this option enabled, a helper JavaScript file will be loaded along with Ajax Load More to maintain compatibility.

The overall functionality of the callbacks have not changed so don’t worry about that. Have a look below for a quick comparison between the old (legacy) function definitions and the new definitions.

// OLD
$.fn.almComplete = function(alm) {
   console.log('Ajax Load More has completed!');
};

// NEW
almComplete = function(alm) {
   console.log('Ajax Load More has completed!');
}

Other Improvements and Bug Fixes

• NEW – Added ImagesLoaded library in place of WaitForImages for images_loaded param.
• NEW – Nested Ajax Load More instances will now auto-trigger on load.
• UPDATE – Updated build process from Gulp to Webpack.
• UPDATE – Added JS polyfills for various IE 11, 10 and 9 issues.
• UPDATE – Added ALM ID to alm_nextpage_query for Next page users.
• Fix – Fixed issue with querySelector on button element when using nested ALM instances.
• FIX – Removed duplicate transition_container_classes when using Paging add-on.
• FIX – Fixed issue with .alm-listing container causing an error with the Comments addon.
• FIX – Added fix for destroy_after not triggered button .done class.
• Fix – Various JS other fixes and UX improvements.

What do you think of this latest Ajax Load More update? Let me know your thoughts in the comments below.