Promises visualized

#​681 — March 28, 2024

Read on the Web

JavaScript Weekly

JavaScript Visualized: Promise Execution — A helpful diagrammed and animated article, coupled with an (optional) 8-minute video, that goes into how promises work and are scheduled behind the scenes. It’s useful to have a good mental model of these mechanics, given promises form the basis of asynchronous functions in JavaScript.

Lydia Hallie

▶  Node.js: A Documentary of Its Origin Story — It’s an hour long, but this documentary covers the history of Node particularly well, including how everything brewed up to the io.js fork of 2014. Easter weekend watching, perhaps?

Honeypot

Learn Advanced JavaScript Performance Optimization — Garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!

Frontend Masters sponsor

IN BRIEF:

The Node.js Technical Steering Committee has confirmed there’s no intention to remove npm from the main Node distribution.

Is Bun Windows Yet? No, but Bun 1.1, which will support Windows, is supposedly just four days away..

An example of a simple, yet useful, Web Component in a single GitHub Gist.

The RedwoodJS framework now supports React Server Components too, as an alternative to its traditional GraphQL-based approach.

RunJS Play is a neat Web-based JavaScript playground that shows instant live feedback alongside each line.

Vercel now fully supports Node.js 20 for both builds and functions.

RELEASES:

VitePress 1.0 – Powerful static site generator.

Neutralinojs 5.1 – Alternative cross-platform desktop app framework.

Babylon.js 7.0 – Powerful game & 3D rendering engine. No official release post yet, but expected later today.

Radix Themes 3.0 – Powerful frontend component library.

Node.js v20.12.0 (LTS) and Node v18.20.0 (LTS).

Deno 1.42.0, Vite 5.2, TypeChat 0.1, Chromatic 3.

📒 Articles & Tutorials

A Look at ECMAScript’s Iterator Helper MethodsThe proposal is several years old, but now at stage 3 in TC39, Iterator Helpers are being implemented and ship with V8 12.2/Chrome 122. The helpers are functions like .map, .filter, .take and .forEach and are made available to any object with Iterator.prototype in its prototype chain.

Rezvan Mahdavi Hezaveh (V8)

Introducing Waku’s “Pages Router”Waku is an interesting minimal server-side React framework and it’s now also bringing a minimal API to the modern React server components era: “Making a Waku site is now as simple as making a few files and folders in the ./src/pages directory”..

Sophia Andren

Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.

Userfront sponsor

What You Need to Know About Modern CSS — A guide with a list of the newest additions to CSS (think nesting, view transitions, :has(), etc). JS plays an occasional role too, whether by enhancing or polyfilling modern CSS features.

Chris Coyier

Building a Micro HTMX SSR Framework — Matteo builds on an earlier tutorial about creating a ‘movie quotes’ app by exploring an alternative backend stack to use, based upon Fastify, Vite and HTMX.

Matteo Collina

Meet Angular’s New output() API — Outputs allow component authors to emit values to parent components.

Paul Gschwendtner (Google)

We Rewrote our React App in Svelte in Three Weeks

Dusty Phillips

How to Use the Web Bluetooth API

Confidence Okoghenun

🛠 Code & Tools

Trix 2.1: A Clean, Rich WYSIWYG Editor for the Web — A WYSIWYG editor developed by the folks at 37signals (known as the birthplace of Ruby on Rails). It’s used in their Basecamp and HEY apps, so is about as stress tested as you can get. GitHub repo.

37signals

Meet the Future of Data Delivery with Hasura DDN — Join us April 16 for the unveiling of Hasura DDN. Create a unified, composable API, instantly and with no maintenance.

Hasura sponsor

Atlassian’s Pragmatic Drag and Drop Framework — A performance-focused drag-and-drop library that can be used to power experiences on any frontend stack. There’s a live demo on the page along with a recording of a talk by Alex Reardon walking through the motivations for creating it and how it works.

Atlassian

Create Vue3 App: A New Vue App Scaffolding Tool — Taking inspiration from tools like Create React App, this uses Vite to help you spin up a new Vue-based app using tools based upon answers you give to a number of questions.

Selemon Brahanu

<relative-time> 4.4: Format Timestamps as Localized Relative Times — Supply this web component with a standard formatted date and time and it’ll render the right text to suit. It’s actually used all over GitHub itself (use Inspect Element on commit times). Demo.

GitHub

DOM3D.js: 3D DOM Viewer in a GitHub Gist — Some code you can copy and paste into your browser console to get a 3D view of the DOM, sort of.. (move your pointer to navigate the.. thing it creates). The effect is odd but fun to play with.

Orion Reed

Free Auth for 1 Million MAUs — WorkOS provides easy-to-use APIs for authentication, user identity, and complex enterprise features like SSO and SCIM.

WorkOS sponsor

PGlite 0.1 – Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno.

npm-publish 3.1 – GitHub Action to publish packages to npm.

AdminJS 7.8 – Automatic admin interface for Node.js apps.

Slonik 39.3 – Node.js Postgres client with type safety.

react-three-fiber 8.16 – React renderer for Three.js.

Enhancing Node.js Core: Introducing Support for Synchronous ESM Graphs

Exciting news this week! One of the latest features in Node.js core is the addition of support for requiring synchronous ECMAScript Modules (ESM) graphs. This enhancement promises to simplify the transition for package authors and users alike, as the ecosystem gradually shifts towards ESM. This long-awaited feature, enabled via the –experimental-require-module flag, marks a pivotal moment in Node.js development, addressing a persistent pain point for developers.

In this blog post, we explore deeper into the journey leading to this milestone, exploring the technical and cultural intricacies that shaped its evolution.

Understanding the Update

The pull request aims to address a long-standing pain point for Node.js users: the inability to require ESM modules synchronously. While Node.js has supported ESM for some time, requiring these modules has been restricted to asynchronous operations using import(). However, with the introduction of this new feature, developers can now use require() for synchronous loading of ESM modules.

How It Works

The implementation of this feature relies on the –experimental-require-module flag. When enabled, Node.js will allow synchronous loading of ESM modules via require(). However, there are certain conditions that must be met for this to work:

The ESM module must be explicitly marked as such, either through a “type”: “module” field in the closest package.json or by using a .mjs extension.
The module must be fully synchronous, meaning it contains no top-level await expressions.

If these conditions are met, require() will load the module as an ESM and return the module namespace object synchronously. This behavior mirrors dynamic import() but operates synchronously.

Background and Motivation

The decision to introduce this feature stems from ongoing discussions within the Node.js community. Previous attempts to support synchronous loading of ESM modules faced challenges, particularly in handling top-level await expressions. However, with the current implementation, the focus remains on simplicity and compatibility.

The motivation behind this enhancement is clear: to ease the transition for package authors and users as the ecosystem embraces ESM. By allowing synchronous loading of ESM modules, package authors can migrate their codebases without worrying about breaking changes for users. This not only streamlines the transition process but also reduces concerns about node_modules bloat and identity issues due to duplication.

The Agony of ERR_REQUIRE_ESM

For years, Node.js developers grappled with the frustration of ERR_REQUIRE_ESM. While importing CommonJS (CJS) modules was straightforward, requiring ESM modules remained elusive. This discrepancy led to confusion and wasted hours, particularly for those unaware of the underlying complexities. Package authors faced dilemmas, forced to choose between maintaining compatibility with both CJS and ESM users or risking breaking changes. Meanwhile, the prevailing belief that “ESM is async” perpetuated a myth, obscuring the true nature of ESM syntax.

Discovering Synchronous ESM Potential

A pivotal realization occurred when exploring the inner workings of ESM syntax. Contrary to popular belief, ESM was not inherently asynchronous but rather conditionally so, triggered only by the presence of top-level await expressions. This insight laid the groundwork for reconsidering synchronous require(esm), a concept previously explored in 2019 but overshadowed by technical challenges and heated debates.

A New Approach Emerges

Despite the complexities, a renewed effort to implement synchronous require(esm) gained momentum. A fresh perspective led to a simplified approach, focusing solely on supporting synchronous ESM graphs. This pragmatic approach garnered support, paving the way for the feature’s inclusion in Node.js core.

Looking Ahead

While the current implementation addresses the majority of use cases for synchronous ESM loading, there are still areas for improvement. Certain feature interactions, such as with experimental flags like –experimental-detect-module or –experimental-wasm-modules, may need further consideration. Additionally, edge cases involving cyclic dependencies might require additional handling.

However, as with any experimental feature, the goal is to iterate and improve over time. By introducing this capability as an experimental feature, Node.js can gather feedback from users and continue refining the implementation. As the JavaScript ecosystem evolves, Node.js remains committed to providing a robust platform for developers.

In conclusion, the addition of support for synchronous ESM graphs represents a significant step forward for Node.js. It not only simplifies the transition to ESM for package authors but also enhances the overall developer experience. With this new capability, Node.js continues to adapt and innovate, ensuring it remains a leading platform for server-side JavaScript development.

N|Solid: Node.js Compatibility Proven through Fastify CI Integration

At NodeSource, we understand the hesitance and scrutiny that often accompany claims of “Node.js compatibility”. The Node.js ecosystem is vast and intricate, and as Matteo Collina rightly points out, passing a “hello world” example is just the start.

We believe N|Solid should be a component of every Node.js project, especially in production, to provide developers and organizations with the most advanced performance and security observability tooling. To accomplish this, we need to ensure we work well within the ecosystem.

With that in mind, we’ve taken Matteo’s challenge head-on. We’re not just talking about compatibility; we’re proving it. It’s not just about N|Solid running well in isolation but about showing how it can be integrated seamlessly into existing Node.js workflows, such as those using GitHub Actions. Matteo’s open invitation to demonstrate runtime compatibility within the CI of his projects provided us with the perfect opportunity to showcase N|Solid’s robustness.

Integration Made Easy with GitHub Actions

The integration of N|Solid into GitHub Actions is straightforward, ensuring that your projects can enjoy the advanced features of N|Solid without any hassle. For developers and organizations aiming to maintain continuity while enhancing their Node.js applications with N|Solid’s capabilities, the transition is a breeze.

https://github.com/marketplace/actions/setup-nsolid-environment

Rising to the Challenge: Fastify and N|Solid Go Hand-in-Hand

In response to Matteo’s tweet, we rolled up our sleeves and sent a pull request to one of the most esteemed Node.js web frameworks around: Fastify. You can see our contribution here:
https://github.com/fastify/fastify/pull/5332.

Our goal was to demonstrate N|Solid’s compatibility without altering the existing test code in the Fastify repository. The result? Success. The pull request showcases a GitHub Actions pipeline executing Fastify’s comprehensive suite of library tests using the N|Solid runtime, maintaining green across the board.

This is not just a win for N|Solid; it’s a statement to the Node.js community that N|Solid is a runtime you can trust to support your applications completely. It’s Node.js compatibility that truly holds up under scrutiny.

Conclusion

Through diligent work and community engagement, NodeSource is excited to affirm that the N|Solid runtime stands as a fully compatible Node.js runtime, ready to be integrated into your projects. Whether you’re looking to leverage N|Solid’s enhanced security features, performance monitoring, or any other advanced capabilities, doing so will not ask you to sacrifice compatibility. With our successful Fastify tests and the ease of GitHub Actions integration, the path forward with N|Solid is clear, secure, and efficient. Try N|Solid for FREE today!

We’re proud to contribute to the Node.js ecosystem and look forward to seeing how our efforts help you build better, more reliable, and more performant applications.

Package managers, the new todo app?

#​680 — March 21, 2024

Read on the Web

JavaScript Weekly

Runtime Compatibility Across JavaScript Runtimes — Several developers have come together to build this convenient way to visualize the compatibility of different Web APIs and JavaScript features across the ever increasing number of different runtimes (e.g. Bun, Deno, Node, LLRT..)

Tom Lienard et al.

✅ The item above reminds me of node.green, a visualization of JS feature support across versions of Node / V8, though it is nearly entirely green/Yes these days!

Introducing the Vlt (/vōlt/) Team — Last summer, Darcy Clarke (who used to work on the npm CLI team) wrote about a massive bug at the heart of the npm ecosystem around the security of manifests. Now, he’s teamed up with npm creator Isaac Z. Schlueter and fellow npm CLI team alumnus Ruy Adorno to work on… a new package manager and registry. (Yes, Brenda, ▶️ another one!)

vlt /vōlt/

Register for POST/CON 24! (April 30 – May 1, 2024) — Postman’s annual user conference will be one of 2024’s biggest developer events and a chance to network while growing your API skills! Connect with the global API community, hear from industry leaders, and take part in hands-on workshops.

Postman sponsor

IN BRIEF:

Angular’s ngConf 2024 is taking place right now and some interesting announcements have been coming out, including some AI integrations and a merger with another Google framework called Wiz.

As of Chrome 123, WebAssembly JSPI is entering origin trial. JSPI (JavaScript Promise Integration) allows WebAssembly code to directly use asynchronous Web APIs (via promises).

▶️ The Stack Overflow podcast interviewed Node’s creator Ryan Dahl about why he moved on to creating Deno, as well as JSR, edge functions, and the future of JavaScript generally.

sh.mhs / shorthand javascript is a cute example of some JavaScript golfing using some well considered, but still readable, aliases.

▶️ Honeypot’s Node.js documentary premieres on YouTube later today (but just after we go to press).

Last week we featured the v1.0 release of WinterJS, a SpiderMonkey-based JS runtime, but how fast it compared to the alternatives?

🤖 The W3C is working on a Web Neural Network API.

RELEASES:

Nuxt 3.11 – The full-stack Vue framework, and the last release before 4.0, but a significant release nonetheless.

Angular 17.3 landed last week, but here’s what’s new.

Preact 10.20.0, Express.js 4.19.0.

Save 30% on Your POST/CON Ticket! — Time is running out to save 30% on POST/CON 24. Don’t miss out on Postman’s biggest user conference ever.

Postman sponsor

📒 Articles & Tutorials

📉 Optimizing JavaScript for Fun and for Profit — A tour of several things to avoid to keep your code running fast and smooth, complete with examples. While the performance ground upon which we walk is often shifting, many of these things are good, common sense practices.

Rom Grk

Bringing require(esm) to Node.js — Joyee writes about landing experimental support for require()-ing synchronous ES modules in Node, a feature that has been a long time coming.

Joyee Cheung

FusionAuth’s New Vue, React And Angular SDKs — These JavaScript SDKs simplify authentication integration into React, Angular, or Vue apps, allowing you to focus on user features while ensuring top-tier security.

FusionAuth sponsor

How Figma Built a Custom Permissions DSL — Figma has a complex permissions setup, the implementation of which was causing tech debt, bugs, and delays. After not finding any open source answers, they built a DSL that isolated policies and data while also being cross-platform (Ruby and TypeScript.)

Jorge Silva (Figma)

Building a Node App with TypeScript — How to set up a seamless TypeScript development experience for bundling modern Node apps with pnpm and ES modules, by someone who certainly knows a few things about TypeScript.

Matt Pocock

Type Predicate Inference: The TS 5.5 Feature No One Expected — And another from Matt, who’s getting excited about the forthcoming inclusion of type predicate inference from function bodies in TypeScript 5.5.

Matt Pocock

WebSockets vs Server Sent Events vs Long-Polling vs WebRTC vs WebTransport

RxDB Docs

🛠 Code & Tools

Atrament 4.0: Library for Smooth Canvas Drawing and Handwriting — A small library for beautiful drawing and handwriting on canvas elements. It’s been around for several years but v4.0 is almost a complete rewrite. GitHub repo.

Jakub Fiala

MistCSS: Write React Components with Just CSS — Forget about CSS-in-JS.. what about JS-from-CSS? This approach provides a way to compile CSS-only React components into a TypeScript equivalent. (Code example.)

Typicode

MicroDiff: No Dependency Object and Array Comparison Library — Given two objects or arrays, it returns the differences (think diff but for JavaScript objects). Boasts high performance and TypeScript support. There’s also an article from 2022 about how it works.

AsyncBanana

Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.

Userfront sponsor

oneRepo 1.0: A New Suite of Monorepo Tools for Teams — There always seems to be discontent when JS monorepo management tools get discussed, but maybe Paul’s approach could win you over?

Paul Armstrong

Eta 3.4: Embedded JS Template Engine for Node, Deno, & Browsers — Boasts being lighter and faster than EJS but with many of the same features (it looks a lot like Ruby’s ERB, if you like that vibe). GitHub repo.

Ben Gubler

TanStack Virtual 3.2: Headless UI for Virtualizing Large Element Lists — Supporting TS/JS, React, Solid, Svelte and Vue, this is a way to build 60 fps experiences even with large numbers of elements while retaining full control over markup and style.

Tanner Linsley

React Data Grid: A Fast Excel-Style Data Grid Component — A fantastic live demo shows off all of this component’s unique features, from grouping rows and columns to handling a million cells without slowdowns. Works with React 18+. GitHub repo.

Adazzle

VanJS 1.5 – The small but sweet reactive UI framework. (Homepage.)

Mercurius 14.0 – Implement GraphQL servers and gateways on Fastify.

Happy DOM 14.2 – JS implementation of a web browser sans UI.

Encoding.js 2.1 – Character encoding conversion and detection.

Javet 3.1 – Embed Node and V8 into Java apps.

Build-time macros for everyone

#​679 — March 14, 2024

Read on the Web

JavaScript Weekly

Use Parcel Macros in Other Bundlers with unplugin-parcel-macrosMacros, as implemented in Parcel (and Bun!), are JS functions that run at build time whose results are inlined into a bundle in place of the original call. You can now use this feature with webpack, Vite, Rollup, esbuild, etc. Here’s a quick example of how handy this can be.

Devon Govett

𝕏 Devon goes into extra detail 🐦 in this Twitter/X thread. You can also revisit the release of Parcel 2.12.0 to learn more.

How to Add an Onboarding Flow for your Application — Learn to enhance onboarding for your app with Clerk and Next.js: add custom session tokens, configure Next.js middleware for session data, and auto-update user metadata for a streamlined, code-efficient user experience with minimal code.

Clerk sponsor

Speedometer 3.0: The Best Way Yet to Measure Browser Performance — Speedometer has been around since 2014, but this new release is the first with a full collaborative approach involving each major browser engine (Blink, Gecko, WebKit). You can run the test yourself here.

Apple, Google, Microsoft, and Mozilla

WinterJS 1.0: A Fast WinterCG and WASM-Compatible JS Runtime — WinterJS initially pitched itself as a Rust and SpiderMonkey-powered ‘Service Workers server’ but now simply boasts being the fastest WinterCG-compatible JavaScript web server full stop. The ability to run JITed JS workloads entirely under WebAssembly is next on their radar.

Wasmer

IN BRIEF:

Last week we linked to JSR, Deno’s attempt at a new JavaScript registry. If that post was too much to digest, they now have ▶️ a 6-minute video introduction covering the key motivations and features.

The Astro folks have unveiled Astro DB, a fully managed SQL database designed exclusively for Astro.

📊 Benchmarking Node vs LLRT/QuickJS.

f(x) is a fantastic terminal-based JSON viewer app (written in Go, but it can integrate with JS functions) – its latest version supports YAML too.

RELEASES:

Biome 1.6 – The toolchain gets partial support for Astro, Svelte & Vue files.

D3.js 7.9 – Popular data visualization library. They launched a fantastic new homepage several months ago too, if you haven’t checked in for a while.

React Native Skia 1.0 – Complete with ▶️ a launch video.

Node.js v21.7.1, Cypress 13.7, Angular 17.3, Ember 5.7

📒 Articles & Tutorials

Comparing JavaScript Frameworks: Templates — A thorough comparison of the template languages used by React, Vue, Angular and Svelte. Interesting analysis and this looks set to turn into a great series.

Maarten Hus

▶  Setting up an Express.js App with TypeScript in 2024 — This hour-long video isn’t about building an entire app, but getting everything set up and working in a clear, easy to follow way, including a variety of modern DX niceties.

Anson the Developer

5 Lessons Design Systems Teams Can Learn from Open-Source Maintainers — Design system teams must balance evangelism with maintenance and development. Turns out, the same is true of open source.

StackBlitz sponsor

Make Your TypeScript Functions More Reusable with Generics — Matt kicks this off with a challenge for you to consider, before showing how to make a function more flexible and type-safe by using type parameters instead of any.

Matt Pocock

How HEAD Works in Git

Julia Evans

🛠 Code & Tools

Shiki 1.0: A Powerful Syntax Highlighter — A few months ago, we linked to Shikiji, a fork of Shiki that was created to push the project forward. Happily, the creators of both libraries decided to join forces and Shiki 1.0 was born. It’s a syntax highlighter based on TextMate grammar and themes, the same engine as used by VS Code. The docs are good.

Pine Wu, Anthony Fu

Rolldown: A Rust-Powered Bundler for JavaScript — A new entry to an increasingly crowded market, but they explain why they’re building it here – it’s intended to underpin a future bundler to be used in Vite, rather than esbuild and Rollup. GitHub repo.

Rolldown

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.

Wallaby Team sponsor

Storybook 8 Released — The popular front-end component workshop introduces built-in visual testing, support for React Server Components, up to 50% faster start times, Vite 5 support, and upgraded Vue and React control auto-generation. There’s also ▶️ a launch video to enjoy.

Michael Shilman (Storybook)

The Playwright Test Generator — I don’t know why I’ve not linked this before, as it’s so useful. Playwright isn’t just a library for controlling browsers from JavaScript, but also includes a tool for generating tests and page navigation code from your own interactions. Hit record, do stuff, and code is written.

Microsoft

Managed Reliability & Observability for Webhooks & Asynchronous Messaging — Send, receive, authenticate, transform, filter, & route events between 3rd-party APIs (Stripe, Shopify, Twilio, etc.) & serverless functions.

Hookdeck sponsor

TinyBase 4.7: A Reactive Data Store for Local-First Apps — If you want a bit more database-esque structure around the management of state in your apps, this is worth a try. The demos show it off well. v4.7 adds support for Turso’s LibSQL (a fork of SQLite).

James Pearce et al.

⌘K 1.0: A Composable, Unstyled ‘Command Menu’ for React Apps — The home page includes some neat examples in a variety of styles. GitHub repo.

Paco Coursey

webtoon/PSD: Zero-Dependency PSD Parser for Browsers and Node — PSD (Photoshop Document) is the format used by Photoshop and this library lets you dig into metadata and pixels on each image layer.

webtoon inc

Knip 5.1 – Find unused files, dependencies and exports.

React Date Picker 6.3 – Simple date picker component. (Demo.)

OverlayScrollbars 2.6 – JavaScript custom scrollbars plugin.

🗓 date-fns 3.4 – Modern JavaScript date utility library.

Slonik 37.3 – Node.js Postgres client with type safety.

MQTT.js 5.4 – MQTT client for Node and browsers.

Perspective 2.9 – Fast visualization of streaming datasets.

Rspack 0.5.7 – Fast Rust-based web bundler.

A new challenger appears

#​678 — March 7, 2024

Read on the Web

JavaScript Weekly

📒  Eloquent JavaScript Goes Fourth — Coming several years after the third edition, the latest version of, perhaps, the best ‘all rounder’ book for learning JavaScript is here: “adjusted to the realities of 2024 and generally touched up.” You can read it on the Web, but it’ll be available in print later on too.

Marijn Haverbeke

Deno Introduces JSR: A New JavaScript Registry — The JavaScript Registry (a.k.a. JSR) is a new TypeScript-first, ESM-only module registry designed for the entire JavaScript ecosystem. This post digs into what it’s all about and how it builds upon the success of npm.

Dahl, Casonato, and Whinnery

Advanced JavaScript Tools to Empower Your Applications — Build better web applications with powerful JavaScript developer tools including: SpreadJS Excel-like spreadsheet components, ActiveReportsJS reporting tools, Wijmo UI component suite, and Document Solutions viewers for PDF, Excel, Image, and more.

MESCIUS inc sponsor

‘Apple Backs Off Killing Web Apps, But The Fight Continues’ — Last week, we linked to an open letter imploring Apple to reverse its moves around breaking PWAs.. and it worked? Whatever the case, Apple continues to seem hostile to developers, and there’s more to be tackled in this area.

Open Web Advocacy

IN BRIEF:

JavaScript is the focus of a WIRED feature where the author ponders if JavaScript Runs the World – Maybe Even Literally.

The OpenJS Foundation says we should care about package metadata interoperability and has put together a ‘collab space’ to focus on it.

📅 This year’s JSHeroes conference takes place in Romania on May 23-24.

Is client side security dead, or a critical part of the future? asks Gal Weizman.

RELEASES:

Node.js v21.7 (Current) – Node gains a built-in way to output colored text, load and parse environment variables, and support multi-line values in .env files.

TypeScript 5.4 – Improved type narrowing, the NoInfer utility type, Object.groupBy, Map.groupBy, and more.

Mermaid 10.9 – Generate diagrams from text.

Bun v1.0.30, Vue Language Tools 2.0, Ember 5.7

Sentry Launch Week: Making Debugging Fun — We’ll be making debugging fun, raffling swag and talking about all things developer, every. single. day. (For one week.)

Sentry sponsor

📒 Articles & Tutorials

Ultimate Guide to Visual Testing with Playwright — ‘Ultimate’ is always a gamble in a title, but this tutorial is pretty thorough and will get you several steps down the road of fetching pages and making comparisons, all from JavaScript.

Mike Stop Continues (BrowserCat)

Streaming HTML Out of Order Without JavaScript? — An interesting, yet short and sweet, demo of a browser feature that enables a technique you may not have imagined possible without JavaScript – note that support is still rather fresh in Firefox.

Chris Haynes

Effortless GraphQL with Hasura and TypeScript Functions — Connect to your data sources, generate a GraphQL API, and deploy globally — instantly. Want to write and use TypesScript functions directly in your GraphQL API? With Hasura, you can. Check it out.

Hasura sponsor

▶  Drizzle ORM Explained in 100 Seconds — The latest bitesize video from the always educational Fireship channel covers Drizzle ORM, a fast, TypeScript-based way to work with a variety of database systems across numerous JavaScript platforms, from Node to Bun, Deno Deploy, Supabase Functions, Cloudflare Workers, and more. If you need more, there’s ▶️ a 13 minute ‘crash course’ to learning Drizzle, too.

Fireship

Fireship has a ▶️ Expo in 100 seconds video out too, providing a rapid explanation of what the React Native-based toolkit is about.

JavaScript Bloat in 2024 — What’s the average size of JavaScript code downloaded per website? Spoiler alert: it’s a lot and will make anyone from the 56k dialup days cry.

Nikita Prokopov

Tiny Predictive Text — Using 2MB of JavaScript with no AI or LLMs in sight (but using a variant of a Markov chain).

Adam Grant

Coroutines and Web Components“We will see how coroutines can be used to model web components in a different way, and why you might like it.”

Laurent Renard

Using Web Bluetooth to Read BBQ Temperature Sensor Data

Rik Schennink

🛠 Code & Tools

Million Lint: A Linter for React PerformanceMillion’s mission is to make React apps faster and the new VS Code extension Million Lint takes a new approach: imagine ESLint but for suggesting performance improvements.

Aiden Bai

Your Google Translate for UI ↔️ Code — Don’t get lost in translation. Build UI with code and copy clean JSX off your design.

UXPin Merge sponsor

BlockNote 0.12: A ‘Notion-Like’ Block-Based Text Editor0.12.0 is a significant release for this ProseMirror and TipTap-based editor that lets you drag and drop blocks, add real-time collaboration, add customizable ‘slash command’ menus, and more. It has an all new homepage, too, along with new examples.

TypeCell

PixiJS v8: Build Striking 2D WebGL ExperiencesPixiJS is a very mature, long standing rendering library that abstracts away all the pain of building fast 2D graphical experiences for the Web. v8 boasts significant performance improvements, a WebGPU-backed renderer, and a variety of API improvements. If you’re new to Pixi, there’s an interactive tutorial to show you the ropes.

PixiJS Team

NSFW JS 4.1: Client-Side Indecent Content Checking — A client-side TensorFlow.js-powered option for detecting potentially indecent images before they even go over the wire. It’s not fool proof but may help as another layer of protection for both you and your users. GitHub repo.

Infinite Red, Inc.

Plotly 2.30: A JavaScript Graphing Library — A high-level, declarative charting library, built on top of D3 and stack.gl, with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.

Plotly, Inc.

ONBOARDING_LIB: A Headless Onboarding Library — An onboarding library for building accessible, customizable and persisted onboarding flows in React apps. The site itself is an example of such a flow.

Neftic Oy

Finder 3.2: CSS Selector Generator — Given an element, it produces the shortest possible, but precise, selector that reaches that element.

Anton Medvedev

Set Your JavaScript Job Hunt on Autopilot — First 2 Apply automatically monitors most popular job sites and sends you instant notifications for new listings. Try it for free.

First2Apply sponsor

Partytown 0.10.0 – Move intensive third-party scripts off the main thread and into a web worker.

AdminJS 7.7 – Automatic admin interface for Node.js apps.

visx 3.9 – Airbnb’s React-based visualization primitives.

NVM Desktop 3.2 – GUI for Node Version Manager.

melonJS 17.0 – Browser-based 2D game engine.

NodeBB 3.7 – Node.js based forum system.

Choosing the Right Node.js Package Manager in 2024: A Comparative Guide

The year 2024 marks a crucial juncture in the Node.js ecosystem, where developers face different choices when it comes to selecting the right package manager for their projects. npm, Yarn, and pnpm stand out as the frontrunners, as they are the most widely used in the Node.js ecosystem. Each package offers unique features and capabilities tailored to address the challenges of modern development environments.

Let’s examine the differences, advantages and disadvantages between them to help developers make informed decisions about which tool best suits your project needs, and get insights into the evolving trends shaping their usage in 2024.

npm – Node Package Manager

npm is the default package manager for Node.js, known for its extensive package registry and seamless integration with the Node.js ecosystem. It was created to simplify the process of installing, managing, and sharing code dependencies in Node.js projects. npm provides a vast repository of over two million packages, making it a comprehensive ecosystem for JavaScript developers and the largest software registry in the world.

Here’s a closer look at npm:

Advantages:

__Vast Package Repository__: Developers love npm for its unmatched package registry, boasting over two million packages covering a wide range of functionalities and use cases. Developers have access to a rich ecosystem of open-source libraries and modules, enabling them to leverage existing solutions and accelerate development.
__Default Choice for Node.js__: npm comes bundled with Node.js installations, making it the default package manager for Node.js projects. Its seamless integration with the Node.js ecosystem simplifies dependency management and ensures compatibility with the Node.js runtime.
__Mature Ecosystem__: npm has a mature and well-established ecosystem with robust infrastructure and community support. It has been in use for many years and has undergone continuous improvements, resulting in a stable and reliable tool for managing project dependencies.
__Comprehensive CLI__: npm provides a comprehensive command-line interface (CLI) with a wide range of commands and options for managing packages, scripts, and configurations. Developers can perform tasks such as installing, updating, publishing, and scripting with ease using npm’s intuitive CLI.
__Semantic Versioning__: npm follows semantic versioning (SemVer) rules, allowing developers to specify version ranges for dependencies accurately. This ensures compatibility and predictability when updating packages, minimizing the risk of breaking changes in projects.
__Custom Scripts__: npm allows developers to define custom scripts in the “package.json” file, which can be executed using the npm run command. This feature enables automation of various development tasks such as building, testing, and deployment, streamlining the development workflow.
__Integration with npm Registry__: npm seamlessly integrates with the npm registry, a centralized repository where developers can publish and discover packages. This centralized infrastructure fosters collaboration and code sharing within the JavaScript community, contributing to the growth and innovation of the ecosystem.

Overall, npm offers a robust and feature-rich package management solution that addresses the needs of developers building Node.js applications. Its extensive package repository, mature ecosystem, comprehensive CLI, and community support make it a preferred choice for JavaScript developers worldwide.

Disadvantages:

__Performance Issues__: npm can sometimes suffer from performance issues, especially in large-scale projects with many dependencies. Some developers find Yarn and pnpm faster. Slow installation times and high resource consumption may impact developer productivity and build times.
__Versioning Complexity__: Managing package versions and dependency conflicts can be challenging with npm, particularly in projects with complex dependency trees. Resolving version conflicts and ensuring compatibility between packages may require manual intervention and careful oversight.
__Dependency Bloat__: npm’s default behavior of installing packages locally can lead to dependency bloat, where projects accumulate unnecessary dependencies over time. This can increase project size and complexity, potentially impacting performance and maintenance efforts.
__Security Concerns__: npm packages are not immune to security vulnerabilities, and relying on third-party code introduces potential risks to projects. While npm provides tools for auditing packages and detecting vulnerabilities, developers must remain vigilant and proactive in addressing security issues.
__Reliance on Centralized Registry__: npm’s reliance on a centralized registry for package distribution and discovery introduces a single point of failure and potential network bottlenecks. Disruptions or outages in the npm registry can disrupt development workflows and dependency management processes.
__Limited Offline Support__: While npm provides some support for offline installations through local caches, its offline capabilities are not as robust as some other package managers like Yarn. Developers working in environments with limited or intermittent internet connectivity may encounter difficulties when relying on npm.

Overall, while npm is a powerful and widely adopted package manager, developers should be aware of its limitations and consider alternative solutions or best practices to mitigate potential challenges in dependency management and project maintenance.

Yarn:

Yarn is a package manager for Node.js, developed by Facebook. It was created to address some of the limitations and performance issues encountered with npm and it focuses on performance, reliability, and deterministic dependency resolution. Let’s explore its features:

Advantages:

__Improved Performance__: Yarn is known for its faster installation times and more efficient dependency resolution compared to npm. It achieves this through parallel package installations and caching mechanisms, reducing the time and resources required for managing dependencies.
__Deterministic Dependency Resolution__: Yarn ensures deterministic dependency resolution by generating a lockfile (yarn.lock) that captures the exact versions of dependencies used in a project. This helps prevent dependency conflicts and ensures consistency across different development environments.
__Offline Support__: Yarn provides robust support for offline installations, making it suitable for environments with limited or intermittent internet connectivity. It caches packages locally, allowing developers to install dependencies without relying on an active internet connection.
__Intuitive CLI__: Yarn offers an intuitive command-line interface (CLI) with clear and concise commands for managing packages and running scripts. Its CLI is designed to be user-friendly and easy to use, streamlining the development workflow.
__Improved Error Handling__: Yarn provides detailed error messages and diagnostics, making it easier for developers to troubleshoot and resolve issues related to package installation or dependency management.
__Backward Compatibility__: Yarn maintains compatibility with the npm registry and existing npm workflows, allowing developers to transition seamlessly from npm to Yarn without disrupting their projects.

Overall, Yarn is a powerful and efficient package manager for Node.js, offering performance improvements, deterministic dependency resolution, offline support, and an intuitive CLI. It has gained significant adoption within the Node.js community and is widely used in both small and large-scale projects.

Disadvantages:

__Compatibility Issues__: Although Yarn aims for compatibility with npm, there may still be occasional compatibility issues or differences in behavior between the two package managers. This can sometimes lead to unexpected behavior or difficulties when migrating projects between npm and Yarn.
__Resource Consumption__: Yarn’s caching mechanisms and parallel installation processes can consume significant system resources, especially in projects with large dependency trees. This may impact the performance of development environments, particularly on systems with limited resources or older hardware.
__Community Fragmentation__: While Yarn has gained widespread adoption within the Node.js community, its ecosystem and community support may still be smaller and less extensive than npm’s. This can result in fewer third-party plugins, integrations, and community-driven initiatives compared to npm.
__Potential for Lockfile Drift__: Yarn generates a lockfile (yarn.lock) to ensure deterministic dependency resolution. However, if developers manually modify dependencies or update packages without updating the lockfile, it can lead to lockfile drift, where the lockfile becomes out of sync with the actual dependencies installed in the project.
__Limited Configuration Options__: Yarn’s configuration options are more limited compared to npm, which provides more granular control over package installation, registry settings, and other aspects of dependency management. Developers may find themselves lacking certain customization options available in npm.
__Maintenance Overhead__: While Yarn offers benefits such as improved performance and dependency resolution, it also introduces additional maintenance overhead in terms of managing the Yarn-specific configuration, lockfile, and dependencies. This can add complexity to project maintenance and version control.

Overall, while Yarn addresses many of the shortcomings of npm and offers significant improvements in performance and reliability, it’s essential for developers to consider the trade-offs and potential drawbacks when deciding whether to adopt Yarn for their projects.

pnpm

pnpm, short for “Performant npm,” is a package manager for Node.js applications. Unlike traditional package managers like npm and Yarn, pnpm takes a unique approach to dependency management, emphasizing efficiency, disk space optimization, and installation speed.

Advantages:

Key features of pnpm include:

__Shared Dependencies__: pnpm utilizes a shared dependency model, where common dependencies across projects are stored in a single location on disk. This approach minimizes disk space usage by avoiding duplicate copies of dependencies, leading to significant savings in storage resources.
__Efficient Installation__: By leveraging shared dependencies and efficient caching mechanisms, pnpm offers faster installation times compared to traditional package managers. It can dramatically reduce the time required to install dependencies, particularly in projects with large dependency trees.
__Deterministic Dependency Resolution__: Similar to Yarn, pnpm ensures deterministic dependency resolution by generating a lockfile (pnpm-lock.yaml) that captures the exact versions of dependencies used in a project. This helps prevent dependency conflicts and ensures consistency across different development environments.
__Reduced Network Bandwidth__: pnpm optimizes network bandwidth usage by sharing package downloads across projects. When multiple projects require the same dependency, pnpm fetches the package only once and shares it among all projects, reducing the amount of data transferred over the network.
__Improved Cache Efficiency__: pnpm’s caching mechanisms are designed to be highly efficient, reducing the need to re-download packages and improving installation speeds. It maintains a centralized cache of packages and dependencies, enabling faster installations and minimizing redundant downloads.
__Command-Line Interface (CLI)__: pnpm provides an intuitive CLI with commands for installing, updating, and managing packages. Its CLI is designed to be user-friendly and easy to use, with clear and concise syntax for executing common tasks.
__Compatibility with npm__: pnpm maintains compatibility with the npm registry and existing npm workflows, making it easy for developers to transition from npm to pnpm without disrupting their projects. It can install packages from the npm registry and works seamlessly with existing npm packages and configurations.

Overall, pnpm offers significant advantages in terms of disk space optimization, installation speed, and network bandwidth usage, making it an attractive choice for developers looking to streamline dependency management in Node.js projects. Its shared dependency model and efficient caching mechanisms make it well-suited for projects with large dependency trees and resource constraints.

Disadvantages:

__Learning Curve__: Switching from traditional package managers like npm and Yarn to pnpm may require developers to learn new commands, workflows, and concepts specific to pnpm. While pnpm’s CLI is intuitive, there is still a learning curve involved, particularly for developers unfamiliar with its shared dependency model and caching mechanisms.
__Compatibility Issues__: Although pnpm aims for compatibility with npm and Yarn, there may still be occasional compatibility issues or differences in behavior between the package managers. This can sometimes lead to unexpected behavior or difficulties when migrating projects between npm/Yarn and pnpm.
__Resource Consumption__: While pnpm’s shared dependency model reduces disk space usage, it may still consume significant system resources, especially in projects with large dependency trees. Caching dependencies and managing shared packages can require additional memory and processing power, impacting the performance of development environments.
__Lockfile Handling__: pnpm generates a lockfile (pnpm-lock.yaml) to ensure deterministic dependency resolution. However, managing the lockfile and ensuring its consistency across different environments can be challenging. Developers must be careful to avoid lockfile drift, where the lockfile becomes out of sync with the actual dependencies installed in the project.
__Community Support__: While pnpm has gained adoption within the Node.js community, its ecosystem and community support may still be smaller and less extensive than npm and Yarn. This can result in fewer third-party plugins, integrations, fewer documentation resources and tutorials available, and community-driven initiatives, limiting the available resources and support for pnpm users.

Overall, while pnpm offers compelling advantages in terms of disk space optimization and installation speed, developers should carefully weigh the trade-offs and consider the potential drawbacks when deciding whether to adopt pnpm for their projects.

Structure of the projects:

__npm__: When using npm install, the package-lock.json is created, and generates the node_modules folder. You can manually place a .npmrc configuration file at the root level.

__Yarn__: Similarly, Yarn generates both a yarn.lock file and a node_modules folder. You can also configure your yarn with a .yarnrc file; Yarn also acknowledges .npmrc files.

One problem with the npm and yarn approach, is that packages were copied several times to satisfy multiple dependencies. pnpm solved this issue without flattening the dependency tree. Each package’s dependencies are grouped in a node_modules folder and symlinks are used to group dependencies together, so the directory tree is flat.

__pnpm__: In contrast, pnpm diverges and doesn’t create a flattened dependency tree.
Upon installing dependencies with pnpm i, a package.json file is generated alongside a node_modules folder. However, the structure of the node_modules directory differs significantly from that of npm and Yarn due to pnpm’s content-addressable storage approach.

Which one should you choose?

Ultimately, the best package manager for your project depends on your specific requirements, preferences, and willingness to adapt to new workflows. Experimentation and careful consideration of the trade-offs involved will help you make an informed decision that aligns with your project’s goals and constraints.

According to some advantages and disadvantages previously mentioned, some further research and personal opinion, we can see a comparative chart below, number 1 meaning the lowest score and number 3 the highest score:

Even though npm and yarn are more popular, pnpm seems to have a promising future. Let’s check some benchmarks of JavaScript Package Managers:

Speed: pnpm is three times faster and more efficient than npm, and with both cold and hot cache, pnpm is faster than Yarn.

Source: Benchmarks of JavaScript Package Managers

Security: Pnpm, like yarn, has a special file with the checksum of all the installed packages. This ensures the integrity of all the installed packages before their code is executed. Regarding npm, there have been some security vulnerabilities that have directly affected many projects due to the way npm handles bad packages.
Disk space efficiency: pnpm employs a content-addressable file system to store packages and dependencies on disk. This means that identical packages are not duplicated. Even with varying versions of the same package, pnpm intelligently maximizes code reuse. For instance, if version 1 of a package consists of 500 files and version 2 adds just one more file, pnpm will not duplicate the original 500 files for version 2. Instead, it will establish a hard link to the existing 500 files and only write the new file. In contrast, npm would duplicate the original 500 files for version 2. This distinction becomes significant in large monorepo projects where a package is utilized by numerous others, potentially saving substantial disk space when using pnpm.
Lock files: Yarn generates a yarn.lock file to ensure that all team members are using the same package versions. This helps prevent “works on my machine” issues. Like Yarn, pnpm uses a pnpm-lock.yaml file to ensure consistent dependency versions. npm can present inconsistencies in package-lock.json which can be annoying and present issues for developers.

Migrating from npm/Yarn to pnpm:

If your projects use npm or yarn, then migrating to pnpm will not be very difficult. Here is a comparison of commands between npm, yarn, and pnpm.

npm command
Yarn command
pnpm equivalent

npm install
yarn
pnpm install

npm install [pkg]
yarn add [pkg]
pnpm add [pkg]

npm uninstall [pkg]
yarn remove [pkg]
pnpm remove [pkg]

npm update
yarn upgrade
pnpm update

npm list
yarn list
pnpm list

npm run [scriptName]
yarn [scriptName]
pnpm [scriptName]

npx [command]
yarn dlx [command]
pnpm dlx [command]

npm exec
yarn exec [commandName]
pnpm exec [commandName]

npm init [initializer]
yarn create [initializer]
pnpm create [initializer]

Source: Why you should prefer using pnpm over npm and yarn?

Real Time Monitoring with N|Solid

Which package do you use? Let us know on Twitter @NodeSource!

Using N|Solid, you can get real time insights and keep your apps secure, providing developers the tools to optimize their Node.js applications and enhance efficiency. You can also check the performance of your projects with different package managers.

Connect with us on Twitter @NodeSource, LinkedIn, and to stay updated with the latest from N|Solid.