Should I Use A JavaScript Library or Framework

During the last several years, we have seen post arguing against the use of jQuery or other libraries in application development. However, it is not as easy as it may seem. Developers and designers keep their browsers updated, also they use very powerful machines compared to the common John Doe. Here are some suggestions for when to use a library or framework and when not to use it.

When You Don’t Need A Framework or Library

The Application is Small

When the application is very small, and everything can be done with vanilla JavaScript quickly, you are probably spending more time researching for a framework or library for the project than coding the application itself. A small single page application where you display some data depending on some input is better to coded from scratch. That will not only save you time of searching for the “perfect” framework, but you will have a faster app overall. For instance, if you only need to reference couple of elements with document.getElementById, please don’t download jQuery just to use the dollar sign. I am not going to provide examples of how to avoid jQuery, because that has been done numerous times before and you should do your research too.

When Speed Is Important

We all know that frameworks come with a lot of features that are not needed for most projects, those features are loaded into the application even if you don’t use them. That makes the application larger and download larger file sizes, which affects the overall performance of the application. In addition, those unnecessary features may be bloated with workarounds in order to work with most browsers as possible which also increase the file size of your JavaScript code. The previous example of jQuery applies here too.

When Target Audience Might Be Affected by JavaScript Only Apps

Yes, Progressive Enhancement has been out there for a long time; however, it is not outdated. The right way to build applications is using Progressive Enhancement. Offering a good experience is better and more rewarding than any JavaScript framework. Thus, maybe, your users don’t need fancy features but a working app where they perform their tasks and a server side framework is good enough. Then, you can sugar coat your app using JavaScript for the ones that have modern browsers. Please remember, as I said before, developers and designers have powerful computers, most users don’t.

When You Can Use Feature Detection with A Line of Code

This one goes for developers that use libraries like Modernizr. Let me be clear, this library is awesome. Especially, years ago where we were trying to work with cutting edge HTML5 features. But, we need to know what we are using instead of just downloading and using another framework. For example, if you just need to know if the browser support the Battery API, in Modernizr, you have to download the library and use it as follow:

if(Modernizr.batteryapi) {
   // supported, your code here
} else {
  // no supported, your code here
}

Additionally, when the library runs, it adds the following classes to the root element: “.no-battery-api” or “.batteryapi”, depending on the support of the feature.

In vanilla JavaScript, we can achieve something similar without the need of the library:

if(typeof navigator.getBattery === 'function'){
   // It is supported
   document.documentElement.classList.add('yes-batteryapi');
   // Your code here
} else {
   // No supported
   document.documentElement.classList.add('no-batteryapi');
   // Your code here
 }

It might look a little longer at first; nevertheless, you do not load the Modernizr library which saves you an HTTP request and extra code that made the pages load slower. Furthermore, you avoid an extra dependency which reduces another point of failure for depending on code that you did not write. Remember what happened with the Nodejs community several months ago. If you can code it on your own in a few lines without having to depend on someone else’s code, the go ahead and do it.

(If you need to support older versions of IE, you can use className instead of classList.)

When You Need A Framework or Library

Complex Applications

Starting a large and complex application from scratch is not fun because you face a lot issues along the way. Also, most frameworks are opinionated and expect the structure of the application in a certain way so the application can work and avoid you headaches.

In Large Teams

One of the benefits of working with a framework is that everybody is on the same page. As said in the previous point, frameworks expect the same structure, and it is implied in the framework without having to go to each team member on how the framework works. Just by looking at the documentation, the developer can figure it out even if he/she has no experience with it. That saves a lot of meetings and explanations on how the app should behave. Additionally, there is a lot of out of the box features that developers may use to speed up the development of the application.

Saves Time and Resources

As stated previously, frameworks in libraries come with a lot features out of the box. This helps you to work faster, especially since those features have been tested with different platforms and browsers so you don’t have to write them on your own and fix problems that you may encounter that may takes from hours to days to fix.

When Working with Cutting Edge Features

Libraries, facades, and polyfills are the best options with working with cutting edge features. Usually, browsers start implementing features in their own way while they are being standardized. This means that an API may be inconsistent across browsers and dealing with it directly could be very problematic. Nicholas Zakas explains the problem of working directly with native APIs. It is a must read even whether you agree or disagree.

Support Old Browsers

Libraries like jQuery deal with browsers’ differences and support. They are great when you have to support older browsers and it helps you to keep your code clean as they deal with different implementations underneath. The older the browsers you need to support, the more necessary a JavaScript library is. You don’t want to code an application with a bunch of patches and hacks that later have to be removed. It is better to have a library that does that and you can discard once you don’t need to support outdated browsers.

Conclusion

Every application is unique and saying that you should avoid frameworks and libraries is as crazy as using them for everything no matter the type of application. My suggestion is to do your research on what you need before jumping into coding. Just remember that JavaScript frameworks and libraries usually have a short life span and you eventually will need to rewrite or look for alternatives for frameworks that end up abandoned.

Teylor Feliz
Teylor Feliz

Teylor is a seasoned generalist that enjoys learning new things. He has over 20 years of experience wearing different hats that include software engineer, UX designer, full-stack developer, web designer, data analyst, database administrator, and others. He is the founder of Haketi, a small firm that provides services in design, development, and consulting.

Over the last ten years, he has taught hundreds of students at an undergraduate and graduate levels. He loves teaching and mentoring new designers and developers to navigate the rapid changing field of UX design and engineering.

Articles: 186