The Happy JavaScript Module

Jordan Brennan's photo
Jordan Brennan
·

2 min read

There is a class of JavaScript modules that should be recognized separately from the rest of the frontend ecosystem. They could be called “happy modules” because everything about them brings developer happiness. The criteria for a module to qualify as a happy module is:

  • Less than 10kb

  • Zero dependencies

  • Instantly usable

  • IDE support

Less than 10kb

The final size at runtime must be 10kb or less minified and compressed.

Small modules like this install and download faster and they get parsed and executed faster too. They also take up less space. It's also an indication the module is disciplined about the problem scope it addresses.

Zero dependencies

They include no runtime dependencies. None. Nada. Zero.

Modules with zero dependencies preserve flexibility, will never require resolving conflicts, never tie your project down to an outdated peer-dependency, and they don't have unknown security risks or other costs from hitching themselves to a third party.

Instantly usable

The module must be installable via CDN (script tag or import) and be immediately ready for production use.

Modules must also be available for install via NPM, but they cannot require any sort of build step or configuration. This makes the module completely accessible and enables the developer to learn and work without speed bumps. This also eliminates variation between environments.

IDE support

JSDoc or TypeScript definitions must be included.

Documentation provided by either of those, especially JSDoc, gives developers the information they need in their IDE. This makes learning, using, and debugging the module fast and efficient.

These four criteria ensure superb performance, maximum compatibility, instant access, and great developer experience.

Examples of happy modules

There are already many really good “happy” modules available today, hence the need to qualify and set them apart from the rest of the frontend ecosystem. Some notable examples include:

  • Day.js - immutable date library, similar API as Moment

  • Underscore.js - functional utility library - a real classic!

  • Immer - immutable data structures with native JavaScript objects

  • rawjs - collection of data transformer and formatter functions

  • Velocity.js - animation engine leveraging modern CSS

  • Mdash - design system, leverages web standards (my project btw)

  • validate.js - simple object validation

JavaScriptWeb Development