When should you use a JavaScript plugin on your website?

My main point in writing this post is to have you think twice before using a pre-built JavaScript plugin. Thousands and thousands of plugins have been written and uploaded to the web for you to download for free and achieve just about any functionality that you may need. It’s tempting to keep using pre-built plugins, but will it always save you time? I’ll dive into the pros and cons of both options.

As I’ve built multiple websites I have questioned the use of pre-built plugins. Many of these come with extra utilities that are built in and that I don’t necessarily use or need when I implement it into my website. These extra utilities mean more lines of code and an increased site size! Plugins may cause your website to become bloated and less optimized, but at the same time can be life savers that allow you to implement features that you may not have been able to in the time frame that is required of you.

Pros of Pre-Built JS Plugins

  • Those without an in-depth knowledge of JavaScript are able to achieve the benefits of JavaScript.
  • Feature rich sections of your site can be achieved within minutes.
  • Updates and security patches are taken care of for you with supported plugins.
  • Allows you to avoid “re-inventing the wheel”. Why code something that someone has already perfected?

Cons of Pre-Built JS Plugins

  • Plugins often come with features and functionality that you do not need, causing the total size of your site to increase. (You can often write the JS you need in much less code than a plugin you would like. See my example later in this post…)
  • If you need to add functionality to the plugin at a later date it can be complicated and difficult to extend the current plugin code.
  • Pre-built plugins will not be as tailored to your site and needs as your own custom code.

When considering whether to use a plugin, always review the size of the JS file and determine whether or not it could be feasible for you to achieve the functionality you need with less lines. In a recent project I worked on I was asked to built a site component with tabbed content. All I needed was something with links(tabs) that when clicked would switch the display of the anchored tab content. We had used a plugin called Responsive Tabs on previous projects. I looked at the code and decided I could achieve what I needed in far less code. The Responsive Tabs JS file 705 lines long and 26.3 KB large:

https://github.com/jellekralt/Responsive-Tabs/blob/master/js/jquery.responsiveTabs.js

I was able to build a simple custom tab plugin for my needs in 60 lines and 1.43 KB. That’s over 18 times smaller! Here is the link to the plugin I wrote:

https://github.com/tnschmidt/quick-tabs/blob/master/jquery.quickTabs.js

When you’re dealing with multiple plugins on a site you’ll start decreasing the size of your site very quickly, which will be a huge improvement for anyone loading the site on a slow network. Since this I’ve gone ahead and built a few other custom plugins for a few projects. Here is a simple plugin for a rotating banner image:

https://github.com/tnschmidt/bg-rotate.js

To finish, I want to reiterate that using a pre-built or custom plugin can both be a good idea depending on your situation. Before you decide make sure to weigh the pros and cons of each option!

Leave a Reply

Your email address will not be published. Required fields are marked *