Upcoming Photonic Impact – Transitioning from jQuery

Ever since I started work on WordPress in 2009, I have been a big proponent of jQuery. Up until recently almost all my projects used jQuery, with Kon-Tiki eventually breaking the trend by discarding JavaScript altogether.

The jQuery library came into prominence with a host of contemporaries – MooTools, Scriptaculous etc. It propagated the concept of “Write less, do more” by providing a terrific abstraction layer – almost every conceivable concept in JavaScript had an easy to use jQuery shorthand.

So why am I considering switching out of jQuery?

However, the more I worked with jQuery, the more I started feeling that maybe I was using jQuery where I shouldn’t. For example, I was using jQuery UI Tooltips and jQuery UI Dialog in Photonic, which, while good, were not necessary. They were adding ~70KB of scripts for something really simple. Considering that Photonic is a plugin for fetching heavy images from different sites, 70KB is a drop in the bucket, but I still wanted to see if I could optimize. I ended up replacing it with pure JS scripts that took up a combined 5.5KB!

The other aspect that I noticed is that in most cases the use of vanilla JS turned out to be considerably faster than jQuery, even if the file was bigger. For example, my script using jQuery might have been 10KB as opposed to a vanilla JS file of 13KB, but when you add the ~95KB of the jQuery core, the equation looks at lot more favourable towards vanilla JS. Throw in the speed of not having to go through an abstraction layer, and you are looking at making your site really fast!

I then started looking at an area that I had neglected for long – improvements in core JS. For so long had I relied on jQuery that I had failed to realize that the features introduced in core JS since 2015 have been groundbreaking. Most of these help write good, modular code that is remarkably concise. Armed with all of this, I started changing the core front-end code of Photonic to use vanilla JS instead of jQuery.

Challenges

There have been times when I have sorely missed the easy syntax of jQuery. A good example is the on function, which makes it easy to bind events to dynamically added content. The replacement syntax is decidedly clunky. I also miss the fact that the $ shorthand does just so much – it can convert a block of HTML into a DOM element, it can accept a selector and give you all matches for it, it always gives you an object without your having to check for nulls, etc. But with sufficient practice and patience I found myself writing the replacements without help.

Then came some practical challenges:

1. Most lightboxes in Photonic require jQuery. PhotoSwipe is an exception, and LightGallery has a vanilla JS version. So, while core Photonic wouldn’t require jQuery, those scripts would.
2. The slider script used by Photonic, LightSlider, requires jQuery. This is a major bummer, as it meant I would always require jQuery!
3. To truly use the new features users would have to be weaned off IE11 (currently between 1.4% and 3.5% of the market).

Since the second point was a showstopper in the process of the conversion of the code, I started looking for a vanilla JS replacement of LightSlider. I found a few: Glide, Glider, Splide and Siema. Of these, Splide seems most promising, as it is the only one that supports vertical scrolling (something that LightSlider does), and does several things better than LightSlider. I like Glider quite a lot because of its tiny footprint, but the absence of vertical scrolling means that it cannot offer everything that LightSlider offers.

As for the first point, if you pick PhotoSwipe or LightSlider as your lightbox scripts, you should be on a jQuery-free version of Photonic. I will look to add more lightboxes in the future that don’t require jQuery, so that there are other options for users.

Regarding the usage statistics of IE11, there are alternatives that “transpile” new code to the old format so that IE11 does not break. I will try to offer two sets of files – one transpiled an the other not. That way, people on modern browsers can benefit fully from this switch.

Timeline

This is a very high impact change, so it will take time and an insane amount of testing. I do hope to have my code done by the weekend of July 4th, but I cannot promise for sure.

Please feel free to post your questions.