DEV Community

Thanga Ganapathy
Thanga Ganapathy

Posted on • Edited on

Introducing Our New JavaScript Standard Library

js-std playground demoWelcome,

I would like to introduce our new JavaScript Standard Library @opentf/std, please keep on reading.

Docs: https://js-std.pages.dev/

Why a Standard Library Matters

Over the past few years, JavaScript has evolved at breakneck speed. The language has seen a proliferation of features, modules, and packages. The JavaScript projects with dependencies crisscrossing like a tangled web.

The Quest for Simplicity

As developers, our primary goal is to find the simplest solution to a problem. Simplicity means functionality, performance, readability, and efficiency. We walk a fine line between complexity and elegance.

The Package Proliferation Problem

Many NPM packages are one-liners—tiny snippets of code packaged up for convenience. But is this proliferation of trivial code a good thing? Not always. In the real world, it leads to issues. If a package is removed, chaos ensues. Dependencies become a house of cards, and maintaining sanity becomes a challenge.

Features

  • Simple & Familiar API with some differences
  • Practical Default Options
  • Cross-Environment Compatibility: Execute seamlessly in browsers, Node.js, Bun, Deno, etc.
  • Clean Code: We’ve followed best practices to ensure readability and maintainability.
  • Documentation: Clear explanations and examples for every function.
  • TypeScript Support

Usage Examples:

Let’s explore some of the library’s capabilities:

Checking if a Value is Numeric:

import { isNum } from "@opentf/std";

isNum(NaN); //=> false
Enter fullscreen mode Exit fullscreen mode

Converting Strings to Pascal Case:

import { pascalCase } from "@opentf/std";

pascalCase("pascal case"); //=> PascalCase
Enter fullscreen mode Exit fullscreen mode

Sorting an Array in Descending Order:

import { sort } from "@opentf/std";

sort([1, 10, 21, 2], "desc"); //=> [21, 10, 2, 1]
Enter fullscreen mode Exit fullscreen mode

Deep Cloning an Object:

import { clone } from "@opentf/std";

const obj = { a: 1, b: "abc", c: new Map([["key", "val"]]) };
clone(obj); // Returns deeply cloned value
Enter fullscreen mode Exit fullscreen mode

Checking Equality of Objects & Arrays:

import { isEql, isEqlArr } from "@opentf/std";

const mapA = new Map([["a", 1], ["b", 2]]);
const mapB = new Map([["b", 2], ["a", 1]]);
isEql(mapA, mapB); //=> false

isEqlArr([1, 2, 3], [2, 3, 1]); //=> true
Enter fullscreen mode Exit fullscreen mode

Adding a Delay (1 second) with sleep:

import { sleep } from "@opentf/std";

await sleep(1000); // Suspends execution for 1 second.
Enter fullscreen mode Exit fullscreen mode

Functions composition using pipe & compose functions:

import { pipe, compose } from "@opentf/std";

pipe(
  1,
  (x) => x + 1,
  (x) => x * 5
); //=> 10

compose(
  1,
  (x) => x + 1,
  (x) => x * 5
); //=> 6
Enter fullscreen mode Exit fullscreen mode

*You can try out these examples on the Playground.

Benchmarks

Some benchmark outputs are shown here for reference.

*Note: Our priorities are reliability and accuracy rather than performance.

clone:
┌───┬──────────────────────────┬─────────┬────────────────────┬────────┬─────────┐
│   │ Task Name                │ ops/sec │ Average Time (ns)  │ Margin │ Samples │
├───┼──────────────────────────┼─────────┼────────────────────┼────────┼─────────┤
│ 0 │ structuredClone (Native) │ 276,824 │ 3612.3959469709525 │ ±1.29% │ 27683   │
│ 1 │ _.cloneDeep (Lodash)     │ 216,965 │ 4609.032953864744  │ ±2.41% │ 21697   │
│ 2 │ R.clone (ramda)          │ 174,567 │ 5728.439422580611  │ ±1.92% │ 17457   │
│ 3 │ R2.clone (remeda)        │ 310,268 │ 3223.0154703960834 │ ±2.40% │ 31027   │
│ 4 │ cloneDeep (clone-deep)   │ 468,908 │ 2132.611673882092  │ ±1.70% │ 46891   │
│ 5 │ copy (fast-copy)         │ 486,179 │ 2056.852050680814  │ ±1.91% │ 48618   │
+ 6 │ clone                    │ 535,302 │ 1868.1028376072306 │ ±2.07% │ 53531   │
└───┴──────────────────────────┴─────────┴────────────────────┴────────┴─────────┘
*Note:
    - Here the lodash does not support errors, sparse arrays & objects in map keys.

    - Here the ramda & remeda does not support cloning Map & Set.

    - The fast-copy does not clone objects within Map, buffers in TypedArray, sparse arrays.

    - The clone-deep does not handle circular refs, does not clone objects within map,
    sparse arrays, internal refs within the object, TypedArray buffers & DataView.

sortBy:
┌───┬────────────────────┬───────────┬───────────────────┬────────┬─────────┐
│   │ Task Name          │ ops/sec   │ Average Time (ns) │ Margin │ Samples │
├───┼────────────────────┼───────────┼───────────────────┼────────┼─────────┤
│ 0 │ _.orderBy (Lodash) │ 1,231,295 │ 812.1529684071648 │ ±3.09% │ 123130  │
│ 1 │ R.sortWith (Ramda) │ 1,279,200 │ 781.7380570822326 │ ±2.27% │ 127921  │
│ 2 │ R2.sortBy (Remeda) │ 1,419,707 │ 704.3703291518029 │ ±2.81% │ 141971  │
│ 3 │ sort (Moderndash)  │ 2,697,568 │ 370.7042634668106 │ ±1.82% │ 269757  │
+ 4 │ sortBy             │ 2,728,366 │ 366.5196435965459 │ ±2.19% │ 272837  │
└───┴────────────────────┴───────────┴───────────────────┴────────┴─────────┘

*Note: Here the Moderndash does not support passing object prop as string.

isEql:
┌───┬─────────────────────────────────────┬─────────┬────────────────────┬────────┬─────────┐
│   │ Task Name                           │ ops/sec │ Average Time (ns)  │ Margin │ Samples │
├───┼─────────────────────────────────────┼─────────┼────────────────────┼────────┼─────────┤
│ 0 │ deepStrictEqual (Native)            │ 950,686 │ 1051.871609041841  │ ±0.24% │ 95069   │
│ 1 │ fastDeepEqual (fast-deep-equal/es6) │ 652,611 │ 1532.3058134904193 │ ±1.49% │ 65262   │
│ 2 │ dequal                              │ 120,791 │ 8278.7573675501    │ ±0.74% │ 12080   │
│ 3 │ _.isEqual (Lodash)                  │ 152,075 │ 6575.660376117521  │ ±2.02% │ 15208   │
│ 4 │ R.equals (Ramda)                    │ 51,496  │ 19418.976504855284 │ ±1.70% │ 5150    │
+ 5 │ isEql                               │ 104,355 │ 9582.655710998957  │ ±1.13% │ 10436   │
└───┴─────────────────────────────────────┴─────────┴────────────────────┴────────┴─────────┘

*Note:

  - The native util `deepStrictEqual` not available in browsers, does not check `Map` ordering & same invalid dates.
  - The `fast-deep-equal/es6` does not support cyclic refs, Map ordering check, invalid dates, symbols, objects values in Set & TypedArrays.
  - The lodash `isEqual` does not check `Map` ordering & object values in `Set`.
  - The ramda `equals` does not check `Map` ordering & symbols.
  - The dequal does not support cyclic refs, Map ordering, symbols & same invalid dates.
Enter fullscreen mode Exit fullscreen mode

Conclusion:

We invite you to be part of our journey. The world of JavaScript development is ever-evolving, and together, we can shape it for the better. Here’s what we’d like you to take away:

Collaboration Matters:

Open-source projects thrive on collaboration. Whether you’re contributing code, reporting issues, or sharing ideas, your voice matters. Join us on GitHub and let’s build something remarkable.

Simplicity Wins:

In a sea of complexity, simplicity stands out. Our library aims to simplify your coding life, one function at a time. Embrace the elegance of clean code and watch your productivity soar.

Keep Learning:

JavaScript surprises us daily. Stay curious, explore new ideas, and never stop learning. The next breakthrough might be just a line of code away.

Visit our docs website for more info.

🙏 Thanks for reading.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay