4 things you should know about small and lightweight Javascript plugins

Javascript has seen a lot of change over the last years and with it, the number of JS plugins available today is huge. I would’ve loved to share an impressive number with you, but I wasn’t able to find one in this big ocean of Javascript plugins. However, on NPM alone there are over half a million packages. This is not a bad thing if you know how to find the one you need.

As web developers, we’re always looking for ways to increase website performance, and naturally, a common word used for Javascript plugins is “lightweight”. Because in Javascript, size matters! Though there is a certain point where lightweight becomes small, and that’s the point where you’re website is not awesome anymore.

Lightweight is about balancing the Javascript size in order to obtain maximum performance, functionality, usability, in other words awesomeness. Unfortunately, there’s no exact size to look for when choosing a Javascript plugin. This value highly depends on what the plugin is meant to do.

If a Javascript plugin passes in the Heavyweight area, then first of all performance is starting to drop. There might also be other problems, such as messy code, poor architecture, cluttered user interface, and so on.

If the plugin is in the Small area, then we have exactly the opposite of a Heavyweight plugin: since there isn’t too much code, it’s probably not messy and it doesn’t have or need an architecture; it merely has a user interface; the UX is bad. but performance should be okay if you have anything to perform at all.

Small Javascript plugins widely affect many areas of the Javascript world. For example, WYSIWYG HTML editors have developed a bad reputation among web developers. Although it may seem easy, web editing is quite hard to tackle and this led to the creation of over 50 small Javascript WYSIWYG HTML editors that I know of. With only a handful of good editors and tens of poor quality, there’s no wonder web devs confuse this technical challenge with a “WYSIWYG Hell” on their first interaction with it.

So let’s dig deeper into this article and learn more about what the HTML editor can provide to the developers and the plugins for the Froala Javascript HTML Editor.

1. What’s the value?

How many lines of code are you writing daily? What’s the size of the file containing those lines? If the size of a Javascript plugin is somewhere near, then why not write it yourself?

We shouldn’t reinvent the wheel, but we first have to make sure we’re even talking about inventing something at all. Or is it just some plain obvious code there? If the Javascript plugin is too small, then it probably has some basic code and it would be far better for you to write it yourself and have more control.

Javascript plugins should bring some value in our projects in regards of technical know-how, performance, quality and time. Unfortunately, small Javascript plugins most of the time bring nothing, but pain to integrate, customize and extend. For example, just using the contenteditable attribute is not enough for a WYSIWYG HTML editor and building something only around the execCommand feature is a very bad idea.

2. UX

One of the reasons Javascript goes through continuous evolution is because of user experience. We live in a changed world and users are expecting more and more from our web apps. User experience is what makes your users stay or leave your website. This is probably the second most important aspect of your website, after performance (cause you want your website to load, right?).

If a Javascript plugin plays an important role in the UX of your website, as a WYSIWYG HTML editor does, then you might want to test it thoroughly. A small Javascript plugin, is very unlikely to have anything done for UX. The first critical aspects you should look for are:

• Adoptability: is it easy to start using?
• Usability: is it easy to use?

The answer to the questions above should be obvious from the beginning, if not you might want to consider doing some changes to it. How easy can you make them? The fun fact is that the integration and customization code you write might exceed the initial size of the plugin.

3. Cross browser

Although things started to change recently, Javascript is still plagued with browser compatibility issues, this should be one of our main concerns when dealing with JS plugins.

First of all, a good and respectful Javascript plugin should have some browser compatibility information somewhere. If you can’t find one, ask for it. Secondly, never blind trust that information. Test it yourself!

Some Javascript areas are known to have more problems with browser compatibility than others. Take for example, contenteditable; there are no clear standards and therefore each browser has a different implementation of the basic things such as enter, backspace or delete. If the plugin you want to use is in the “danger zone”, then the small sized plugin should raise a red flag, so double test it across multiple browsers.

4. Drinking game for web devs

All these small Javascript plugins give us headaches, when searching for a good one. It’s like searching for the hay in the needle stack. But that’s not all that bad, we finally have a drinking game to play as web devs. The rules are simple:

1. Think of a noun
2. Google “<noun>.js”
3. If a library with that name exists – drink

Enjoy the game! No cheat sheet for it yet, but would definitely love one :D.