Two Types of libraries

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Two Types of libraries

There are two types of libraries:

  1. Automatic libraries
  2. Manual libraries

Automatic Libraries

Automatic libraries execute code automatically when the library is loaded. Users only need to include the JavaScript file and everything will work magically. They don’t have to write any JavaScript themselves.

Polyflills are great examples of Automatic Libraries. They detect missing features from a browser and include support for these features automatically. Users only need to include the JavaScript file. They don’t have to write JavaScript.

Components can be made into Automatic Libraries as well.

If a component is built into an Automatic Library, users will:

  1. Write HTML and CSS according to the component’s documentations
  2. Load the JavaScript file
  3. (And things should work magically)

Manual Libraries

Manual libraries require JavaScript. Users have to do two things:

  1. Load the JavaScript file
  2. Call the library’s function(s) manually inside their JavaScript.

Most manual libraries cannot work without user input.

DOMPurify is an example here. DOMPurify sanitizes a HTML string - you need to pass in a String for the library to work. Another example is zlFetch - you need to pass in an endpoint before zlFetch can send a request.

Components can also be made into Manual Libraries.

These components usually have one of the following characteristics:

  1. There are many configuration options
  2. They allow users to execute custom code (via callbacks)
  3. They allow users to use instance methods

Should you build an Automatic or Manual Library?

I prefer building Automatic Libraries over Manual Libraries. because I can include a JavaScript file and it’ll magically work. (It’s less work on my part).

The downside to Automatic Libraries is a lack for control for users - they have to follow the library’s HTML and CSS for their component to work. Keep this in mind when you build Automatic Libraries.

If you want to give users more control, consider Manual Libraries.

Also, choose Manual Libraries if users need to access your Library via JavaScript.

How to include libraries in your project

There are three ways to include libraries:

  1. Using the <script> tag.
  2. Using ES6 modules
  3. Using Dynamic Imports

We’ll discuss these methods in the next three lessons.