jQuery lives on; major changes teased

#​639 — May 18, 2023

Read on the Web

JavaScript Weekly

Bun’s New Bundler: 220x Faster than webpack?Bun is one of the newest JavaScript runtimes (built atop the JavaScriptCore engine) and focuses on speed while aiming to be a drop-in replacement for Node.js. This week’s v0.6.0 release is the ‘biggest release yet’ with standalone executable generation and more, but its new JavaScript bundler and minifier may attract most of the attention and this post digs into why.

Jarred Sumner

???? If you’d prefer to read what a third party thinks, Shane O’Sullivan gave the new bundler a spin and shared his thoughts. There’s also some discussion on Hacker News. It’s early days and while esbuild may be fast enough for most right now, it’s fantastic to see any progress in bundling.

Deopt Explorer: A VS Code Extension to Inspect V8 Trace Log Info — A thorough introduction to MS’s new tool for performing analysis of the V8 engine’s internals, including CPU profile data, how inline caches operate, deoptimizations, how functions were run (interpreted or compiled) and more. There’s a lot going on.

Ron Buckton (Microsoft)

Supercharge Your Websites and Applications with Cloudflare — Get ready for supercharged speed and reliability with Cloudflare’s suite of performance tools. With ultra-fast CDN, smart traffic routing, media optimization, and more, Cloudflare has everything you need to ensure your site or app runs at peak performance.

Cloudflare sponsor

jQuery 3.7.0 Released — JavaScript Weekly is 638 issues old, or almost 13 years once you take away weeks off, so jQuery was a big deal in our early days. We hold a lot of nostalgia for it, and it remains widely used even if no-one is writing about it anymore ???? v3.7 folds the Sizzle selector engine into the core, adds some unitless CSS properties, gains a new uniqueSort method, and “major changes” are still promised in future. jQuery lives on!

Timmy Willison (jQuery Foundation)

⚡️ IN BRIEF:

TC39’s Hemanth.HM has begun keeping a list of ES2023 code examples like he did for ES2022, ES2021, and ES2020.

???? The New Stack has a story about Meta supporting the OpenJS Foundation – but who wrote the article is what we found more interesting..

The folks at Meta / Facebook have written about the efficiency gains made in Messenger Desktop by moving from Electron to React Native.

One downside to platforms like Cloudflare Workers using V8 isolates has been a lack of support for opening TCP sockets – quite an impediement if you want to talk to a RDBMS over TCP or something. Fear no more, Cloudflare Workers has introduced a connect() API for creating TCP sockets from Workers functions.

Promise.withResolvers progressed to stage 2 at the latest TC39 meeting.

RELEASES:

Node.js 20.2

Rome 12.1
↳ The formatter/linter gains stage 3 decorator support.

Ember.js 5.0 – App framework.

Jasmine 5.0 – Testing framework.

Gatsby 5.10

???? Articles & Tutorials

How to Get Full Type Support with Plain JavaScript — It’s possible to reap the benefits of TypeScript, yet still write plain JavaScript, as TypeScript’s analyzer understands types written in the JSDoc format.

Pausly

TypeScript’s own JS Projects Utilizing TypeScript page has more info on the different levels of strictness you can follow from mere inference on regular JS code through to full on TypeScript with strict enabled.

▶  Coding a Working Game of Chess in Pure JavaScript — No canvas, either. All using the DOM, SVG, and JavaScript. No AI and it’s not perfect, but it’s only 88 minutes long and it’ll give you something to work on..

Ania Kubow

Automate Slack and MS Teams Notifications Using Node.js — Quick guide to send and automate messages via Slack, MS Teams, and any other channel from your Node.js applications.

Courier.com sponsor

Your Jest Tests Might Be Wrong — Is your Jest test suite failing you? You might not be using the testing framework’s full potential, especially when it comes to preventing state leakage between tests.

Jamie Magee

A Guide to Visual Regression Testing with Playwright — The Playwright browser control library can form the basis of an end-to-end testing mechanism all written in JavaScript, and comparing the visual output of tests can help show where things are going wrong.

Dima Ivashchuk (Lost Pixel)

Create a Real Time Multi Host Video Chat in a Browser with Amazon IVS

Amazon Web Services (AWS) sponsor

React Server Components, Next.js App Router and Examples — Addy Osmani’s overview of of the state of React Server Components, the Next.js App Router implementation, other implementations, the move towards hybrid rendering, plus related links.

Addy Osmani

..and if React is your thing, the latest issue of React Status is for you.

???? Code & Tools

VanJS: A 1.2KB Reactive UI Framework Without JSX — A new entrant to an increasingly crowded space, VanJS is particularly light and elegant, and its author has put some serious effort into documenting it and offering tools to convert your HTML to its custom format. It’s short for vanilla JavaScript, by the way.. GitHub repo.

Tao Xin

JavaScript Scratchpad for VS Code (2m+ Downloads) — Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

Introducing Legend-State 1.0: Faster State for ReactAnother state management solution? After a year of effort, Legend State 1.0 claims to be the fastest option “on just about every metric” and they have the benchmarks to prove it. Whatever the case, this thorough intro is worth a look. GitHub repo.

Moo․do

Starry Night: GitHub-Like Syntax Highlighting — Apparently, GitHub’s own syntax highlighting approach isn’t open source, but this takes a similar approach and is. It’s admittedly quite ‘heavy’ (due to using a WASM build of the Oniguruma regex engine) but that’s the price of quality.

Titus Wormer

Garph 0.5: A Fullstack GraphQL Framework for TypeScript — Full-stack ‘batteries included’ GraphQL APIs without codegen. GitHub repo.

Step CI

headless-qr: A Simple, Modern QR Code Library — A slimmer adaptation of an older project without the extra code that isn’t necessary today. Turning the binary into an image is your job, or use something like QRCode.js if you want a canvas-rendered QR code out of the box.

Rich Harris

Scroll Btween: Use Scroll Position to Tween CSS Values on DOM Elements — Scrolling/parallax libraries tend to feel the same but this one demonstrates some diverse examples with colors, images, and text — all with no dependencies.

Olivier Blanc

eslint-plugin-check-file: Rules for Consistent Filename and Folder Names — Allows you to enforce a consistent naming pattern for file and directory names in projects.

Huan

Transformers.js 2.0 – Run Hugging Face transformers directly in browser.

PrimeReact 9.4 – Extensive UI component library.

The Lounge 4.4 – Cross-platform, self-hosted web IRC client.

Faast.js 8.0 – Serverless batch computing made simple.

???? Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

Fullstack Engineer at Everfund.com — Push code, change lives! Help us become the center for good causes on the modern web with our dev tools.

Everfund

????‍???? Got a job listing to share? Here’s how.

???? Go with the flow..

js2flowchart.js — A visualization library to convert JavaScript code into attractive SVG flowcharts. Luckily, there’s a live online version if you want to play without having to install anything.

Bohdan Liashenko

Announcing The NodeSource-GitHub Partnership

NODESOURCE PARTNERS WITH GITHUB
For Immediate Release

NodeSource enhances Node.js application security with the NCM integration for GitHub Deployment Protection Rules.

[Seattle, WA, April 13th, 2023] – NodeSource, a leader in Node.js application management, monitoring, and security, is excited to announce our partnership as a launch partner for Deployment Protection Rules with GitHub Actions, the world’s largest software development platform, to integrate Node Certified Modules (NCM) directly into the GitHub Marketplace. This integration brings enhanced security capabilities to the development process in Node.js applications, mitigating vulnerabilities and ensuring compliance with licensing requirements.

Node.js applications and services heavily rely on open-source Node packages for their source code. However, many of these packages may have publicly disclosed vulnerabilities often ignored or overlooked by developers, leaving applications at risk of malicious code execution and data leaks. To address this challenge, NodeSource has developed NCM, a powerful tool that scans for vulnerabilities, tracks package dependencies, and ensures compliance with licensing requirements.

“By enabling partners like NodeSource to create Deployment Protection Rules for users of GitHub Actions, organizations can now leverage NodeSource’s vulnerability management tools to identify security risks and maintain compliance before their applications are deployed to production. These improvements and new controls underscore GitHub’s commitment to empowering developers while enhancing governance, code quality, and security within GitHub Actions.” – Jamie Jones, GitHub VP of Technical Partnerships & Field Services. With NCM GitHub App for [Deployment ProtectionRules]https://github.blog/2023-04-20-announcing-github-actions-deployment-protection-rules-now-in-public-beta, developers can easily add NCM to their repositories, configure organization-wide rules for vulnerability scanning and approval processes.

With the integration of NCM for GitHub Deployment Protection Rules, users can now easily add and configure the NCM app into their GitHub repositories. This allows developers to seamlessly incorporate NCM into their workflow, with every deployment being analyzed and approved or rejected based on organization-configured rules for NCM. NCM provides a comprehensive report for every Pull Request, helping developers identify and mitigate security risks during code reviews. Check the NCM GitHub App.

“NodeSource is committed to providing the Node.js community with the tools and capabilities needed to secure their applications and mitigate risks associated with open-source packages,” said __Russ Whitman, CEO of NodeSource__. “Our partnership with GitHub further strengthens our mission, allowing users to easily access and utilize NCM within their GitHub Actions workflow, ensuring that their Node.js applications remain secure and reliable.”

NodeSource’s NCM also works offline, providing flexibility and convenience for developers in various development environments. NCM offers a comprehensive solution for managing Node.js application dependencies and assessing security vulnerabilities, license concerns, code risks, and code quality.

“Security is a top priority for NodeSource and our community of developers. We are thrilled to be a launch partner for GitHub Deployment Protection Rules and integrate NCM into GitHub Actions, providing our users with a powerful tool for securing their Node.js applications,” said __Adrian Estrada, VP of Technology of NodeSource__. “With NCM’s capabilities seamlessly integrated into GitHub Deployment Protection Rules, developers can now easily track and manage their package dependencies, ensuring that their applications remain secure and compliant.”

Node.js application security is of utmost importance, especially in today’s threat landscape, where supply chain attacks are becoming more prevalent. By leveraging NCM’s capabilities within their GitHub Actions workflows, developers can significantly reduce the risk of vulnerabilities in their Node.js applications, ensuring that their codebase remains secure and reliable.

About NodeSource:

NodeSource is a leading provider of Node.js application management solutions, Node.js Support and services, helping organizations successfully scale and secure their Node.js applications. Node Certified Modules (NCM) is a comprehensive tool that offers visibility, security, and governance for managing Node.js application dependencies. With its powerful features, NCM ensures that Node.js applications remain secure, reliable, and compliant with licensing requirements. For more information, visit www.nodesource.com.

About GitHub:

GitHub is the world’s largest software development platform, providing a collaborative environment for millions of developers to build, test, and deploy their software. GitHub offers many tools and integrations for efficient software development and secure collaboration. For more information, visit www.github.com.

Media Contact:
Russ Whitman
CEO NodeSource
[email protected]

Import maps go universal

#​632 — March 31, 2023

Read on the Web

JavaScript Weekly

JavaScript Import Maps Now Supported Cross-Browser — ES modules provide a modern way to include and reuse JavaScript code in web apps, and import maps provide the bridge between using module names in code and where those modules can actually be loaded from.

Thomas Steiner (Chrome Developers)

???? The import map news comes off the back of the release of Safari 16.4 which introduces a lot of new functionality to the Mac-based browser, from Web Push and import maps to improved Web Component support and lazy-loading support for iframes.

Updates from the 95th TC39 Meeting — Working group meetings might not seem interesting on the surface, but a lot of what TC39 discusses ends up in our day to day code. Of special interest this time are the progression of support for ranges and the async context proposal to stage 2, and awaiting a dictionary of promises and decorators for class constructors/methods to stage 1.

Hemanth HM

React Authentication, Simplified — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications.

Userfront sponsor

React Labs: What React Core Has Been Working On — The latest update from the React core team. The most striking update comes around the progress of React Forget, an optimizing compiler with the goal being able to build fully reactive systems using the JavaScript and React mental models you already have, with the compiler tackling the trickiest parts.

The React Core Team

IN BRIEF:

Over on Twitter, ???? Stefan Judis notes that Firefox Nightly is the first browser shipping support for @media (scripting: none) to detect disabled JavaScript in CSS.

???? Over half of new npm packages are junk. Though that’s an improvement on packages riddled with malware… Could we improve things by using ChatGPT to analyze packages? Maybe, says Socket.

???? Excited about the future of Angular? Next Tuesday, the Angular team is doing a livestream on YouTube about the Angular Signals RFC.

Microsoft has ‘rebuilt Teams from the ground up’ with React replacing AngularJS at the heart of the UI.

Did you know SVG almost got built-in network socket support? ????

The Cloudflare Workers edge serverless platform is based around V8 isolates rather than Node.js but is now gaining support for some Node.js APIs.

RELEASES:

Rome 12
↳ Big release for the linter & formatter.

Solid 1.7
↳ Flexible declarative library for UIs.

Visual Studio Code March 2023
↳ Now with improved switch scaffolding for TS/JS.

Ionic 7.0
↳ Powerful cross-platform mobile app toolkit.

Docusaurus 2.4
↳ React-powered docs site generator.

Node.js v16.20.0 (LTS)

???? Articles & Tutorials

Janet for MortalsJanet is a Lisp-like functional dynamic language that can nonetheless be compiled and interact with C libraries. This online book about Janet targets folks who already know JavaScript in particular.

Ian Henry

In Praise of Vite“The single best feature of Vite, as far as I’m concerned, is its simplicity. Compared to the nightmare of configuring WebPack and Babel? Vite is delightfully easy to use.”

Scott Vandehey

???? Robin Wieruch has just published a tutorial on migrating to Vite from Create React App (CRA) if you want to give it a go for yourself.

The Easiest Way to Add Chat to Your Application. Try Stream for Free — Build and ship real-time messaging in less time with our highly reliable chat infrastructure and feature-rich SDKs. Free 30-day trial.

Stream sponsor

Building Framer Motion Animations Inside a Qwik Application — Also touches on Motion One as a bonus, an animation library similar to Framer but lighter and faster to use.

Yoav Ganbar

A Business Case for SvelteKit — A good post covering the experience of migrating from Meteor to SvelteKit, the process this team undertook, and the outcomes from both a performance and UX point of view.

Chris Ellis

How to Enable OpenTelemetry Traces in React Apps — A ten-step approach to enabling OpenTelemetry traces in React apps all the way through to viewing the end results in Jaeger.

Purva Naik (Red Hat)

Build Developer-First Automations with Retool Workflows

Retool sponsor

Understanding module.exports and exports in Node

James Hibbard

???? Code & Tools

NPKILL 0.11.1: Delete node_modules Even Faster — NPKILL (homepage) is a popular tool for listing node_modules folders and how much space they take up, before allowing you to quickly delete them. This new release makes it even faster than before through using worker threads.

Gallardo and Gómez

Inferno 8.1: A Fast, React-a-Like with a Different Approach — React-like, but you might be more intrigued by its differences (which include a different approach to optimizing performance and lifecycle events on functional components).

Inferno

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.js sponsor

Nano JSX: A Lightweight SSR-First JSX Library — Features include no Virtual DOM, no external dependencies, on-demand hydration, and support for Node and Deno-based server-side rendering situations.

Nano JSX

Concurrent.js: Load Modules into Background Threads — For JS environments including the browser, Node and Deno, this library dynamically imports modules into worker threads (in Node) or Web Workers (in the browser) to run them away from the main thread.

Bitair

cron-schedule 4.0: Cron Parser and Scheduler — Parse and query cron style expressions in the browser, Node or Deno.

Pascal Sthamer

Bright: A React Server Component for Syntax Highlighting — Customizable and includes all of VS Code’s syntax highlighting themes, some of which are demonstrated on the page.

Code Hike

typescript-json-serializer 6.0 — Deserialize JSON into TypeScript classes and serialize classes into JSON.

Gillian Pérard

???? Jobs

Full Stack JavaScript Engineer @ Emerging Cybersecurity Startup — Small team/big results. Fun + flexible + always interesting. Come build our award-winning, all-in-one cybersecurity platform.

Defendify

Software Engineer — Join our happy team. Stimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness.

Stimulus

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

????‍???? Got a job listing to share? Here’s how.

QUICK RELEASES:

Ink 4.1
↳ Use React to build interactive CLI apps.

Ember Simple Auth 5.0
↳ Authentication and authorization for Ember apps.

Cypress 12.9
↳ Browser-oriented testing framework.

SVGR 7.0
↳ Transform SVGs into React components.

???? JZZ 1.6.1
↳ MIDI library for Node and browsers.

Vue Sonner
↳ The Sonner toast component but for Vue.

np 7.7 – A better npm publish.

Qwik 0.100 – The HTML-first framework.

DOM Testing Library 9.2

React Date Picker 4.11

pnpm 8.1

Playwright now offers a UI mode

#​631 — March 24, 2023

Read on the Web

JavaScript Weekly

Speeding Up the JavaScript Ecosystem: npm Scripts — The latest in what has been a fascinating series on finding ‘low hanging fruit’ when it comes to performance in the JavaScript world. The author explains it best himself:

“‘npm scripts’ are executed by JavaScript developers … all the time. Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.”
What Marvin does here is a valuable skill for all developers to pick up, and you can enjoy more by going back to the start.

Marvin Hagemeister

Playwright v1.32 – Now with UI Mode — The popular Web testing and automation framework is taking more steps toward the ground currently served by tools like Cypress by offering a ‘UI mode’ that lets you explore, run and debug tests in a UI environment, complete with watch mode. ▶️ This video provides a good introduction.

Microsoft

A Grid Component with All the Features & Great Performance — Try our powerful JS data grid component which lets you edit, sort, group and filter datasets with fantastic performance. Includes a TreeGrid, API docs and plenty of demos. Seamless integration with React, Angular & Vue apps.

Bryntum sponsor

Why We Added package.json Support to Deno — Deno shares some provenance with Node.js but till recently it hadn’t focused on supporting Node features like npm modules. But with Node and npm compatibility beginning to improve, the team has faced questions about the runtime’s priorities. Ryan Dahl explains more about their thinking here.

Ryan Dahl

???? In other Deno news, Deno 1.32 has been released with… improved package.json support, and more.

How to Start a React Project in 2023 — There are lots of ways, but this well-regarded author explains the pros and cons of a few approaches, and gives you a few options targeting specific use cases you might have.

Robin Wieruch

IN BRIEF:

GitHub had to update its RSA SSH host key today so you may see security related warnings when pushing and cloning. It’s easy to fix, but check the new fingerprint matches – it’s for your own security.

The New Stack caught up with Svelte’s Rich Harris on SvelteKit and what’s coming for Svelte 4.

The React team shared some cutting edge updates on what they’re working on including React Server Components and an optimizing compiler.

If you were experiencing errors on the official Node site last week, here’s the (detailed) post mortem of why. Config errors and inappropriate caching, mostly.

✨ Did you know there’s a market in fake GitHub stars? Some developers analyzed some repos to learn more about it.

???? Congratulations to Lea Verou on her TC39 appointment9. Her efforts to push the Web forward are legendary. Prism is one project you may be aware of.

Make your opinions known on what should be in the next version of Vite.

RELEASES:

Docusaurus 2.4
↳ Easy to maintain documentation site generator.

Puppeteer 19.8
↳ Headless Chrome Node.js API.

Neutralinojs 4.11
↳ Lightweight cross-platform desktop app framework.

Qwik 0.23

???? Articles & Tutorials

Buying a Hard-to-Get Bicycle using Playwright — An unusual use case for JavaScript, Playwright, and GitHub Actions, but Maciek managed to buy his bike.

Maciek Palmowski

Snyk Top 10: JavaScript OSS Vulnerabilities — Dive into the most prevalent critical and high open source vulnerabilities found by Snyk scans of JavaScript apps in 2022.

Snyk sponsor

The ‘End’ of Front-End Development? — A recent narrative doing the rounds suggests that large language models like GPT-4 (or even tools like Copilot X) could soon put some developers out of a job — however, Josh is “optimistic about what these AI advancements mean for the future of software development”.

Josh W. Comeau

In related news, Eric Elliott put ChatGPT through its paces to see if it would make for a good JavaScript tutor. It did well, though with mixed results.

Migrating from ts-node to Bun — A look at adopting performance-oriented Bun when you’re used to using TypeScript with Node.js. John runs us through porting a console app from the ts-node approach over to Bun — “a pretty easy process,” he says.

John Reilly

▶  A Pinia Crash Course for BeginnersPinia is a store / state management solution for Vue that does believe in pineapple on pizza.

Alexander Gekov

A Practical Guide to Getting Started with Astro — An extensive walkthrough of Astro that covers all the topics you’ll need to get you started.

Mojtaba Seyedi

???? Test Website Speed Continuously and Rank Higher In Google — You need a fast website to make users happy and meet Google’s Core Web Vitals metrics. Test and optimize with DebugBear.

DebugBear sponsor

Automatic npm Publishing with GitHub Actions and Granular Tokens

Tim Perry

Make Sure You Do This Before Switching to Signals in Angular

Jordan Powell

Six CSS Snippets Every Developer Should Know

Adam Argyle (Google)

???? Code & Tools

trace.cafe: Easy Webperf Trace Sharing — A quick way to share a performance profile saved from your DevTools, available for up to 90 days with the DevTools perf panel embedded (see example).

paul irish

VueUse: A Collection of Vue Composition Utilities — With over 200 functions targeting both Vue 2 and 3, there’ll be something in this suite of Composition API-based utility functions for you, whether it’s working with state, browser capabilities, animations, Electron, Firebase, and more.

Anthony Fu

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

OTPAuth: One Time Password (HOTP/TOTP) Library — When you log in to a site that uses 2FA and you’re asked for some digits from an authentication app, that’s probably a Time-based One-Time Password (or TOTP). This library for Node, Deno, Bun and the browser lets you work with TOTPs and HOTPs from JS.

Héctor Molinero Fernández

Recharts 2.5: Chart Library Built with React and D3 — Easy to deploy with declarative components, native SVG support, and lightweight dependency on D3. Line, bar, scatter, composed, pie, and radar charts are offered. There are lots of examples, complete with code.

recharts

DOCX 8.0: Generate Word .docx Files from JavaScript — The code to lay out documents is verbose but there’s a lot of functionality. Here’s a CodePen example and release notesGitHub repo.

Dolan Miu

SvHighlight: Code Syntax Highlighter for Svelte — Powered by Highlight.js, it includes a blurring feature to focus attention on specific areas of code and you an customize it with Tailwind. Try the interactive examples to see the effect.

SvHighlight

eslint-formatter-pretty 5.0: Pretty ESLint Formatter — Nicer output than the default. Sort results by severity. Get stylized inline code blocks, and more.

Sindre Sorhus

AWS JWT Verify: Verify JWTs Signed by Amazon Cognito — In both Node.js and the browser.

Amazon Web Services

???? Jobs

Software Engineer (Backend) — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.

Sticker Mule

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

????‍???? Got a job listing to share? Here’s how.

melonJS 15.0
↳ Mature HTML5 game engine.

Marked 4.3
↳ Markdown parser and compiler. (Demo.)

v8go 0.9
↳ Execute JavaScript from Go(lang).

Million 2.1
↳ Fast Virtual DOM to make React faster.

Partytown 0.7.6
↳ Take third-party scripts off the main thread.

???? Bonus Item

Make Bookmarklets — Create and test bookmarklets directly in the browser. Makes an irritating task slightly easier if you need to do it.

Cullan Luther

Introducing nsuv

Introducing nsuv

nsuv is a C++ wrapper around libuv with the main goal of supporting compile-time type safety when propagating data.

You can find the open source package here: https://github.com/nodesource/nsuv

Here at NodeSource we are focused on fixing issues for the enterprise. This includes adding functionality and features to Node.js that are useful for enterprise-level deployments but would be difficult to upstream. One is the ability to execute commands remotely on Worker threads without the addition of running the inspector, such as capturing CPU profiles or heap snapshots. Another feature necessary to make Node.js more reliable in production is the ability to record and send metrics without being at the mercy of a busy event loop.

To achieve these, we run a separate thread that receives commands and gathers metrics from each Node.js thread. The locks and data queues in the separate thread are managed by libuv. As the codebase grew, usability issues began to come up, such as remembering the correct type of each void pointer and keeping track of the lifetime of the many shared locks and resources. Our solution was to write a wrapper for libuv to alleviate these problems.

We had a lot of existing libuv code and didn’t want to rewrite everything from scratch. So we wrote a template class library that inherits from each libuv handle or request type and uses the curiously recurring template pattern (CRTP) for inheritance. Doing so made it possible to write a wrapper that serves as a drop-in replacement, allowing for incremental improvements while supplementing the wrapper’s API with what was needed.

N|Solid has a zero-failure tolerance, so none of our code can accidentally terminate your process. One way we do this is to try our best not to perform additional allocations. If an allocation is necessary, it always does with a strong exception guarantee, which is then caught and returned as a libuv error code.

We have also enabled compile time warnings when returned error codes aren’t handled. While developing nsuv, we analyzed many existing C++ projects that use libuv and discovered that most of them assume the state of the application and lack sufficient error handling in case something unexpected occurs. This can be especially painful when working with asynchronous code, but we understand that not everyone requires the same level of caution. It can be disabled by defining NSUV_DISABLE_WUR in your flags.

Getting Started

The following code example shows the execution of a simple libuv timer, and the only change was to turn the uv_timer_t to a nsuv::ns_timer instance while still being able to use the original libuv APIs:

static void timer_cb(uv_timer_t* handle) {
Foo* foo = static_cast<Foo*>(handle->data);
delete foo;
uv_close(reinterpret_cast<uv_handle_t*>(handle), nullptr);
}

static void call_timer() {
ns_timer timer;
Foo* foo = new Foo();

timer.data = foo;
uv_timer_init(uv_default_loop(), &timer);
uv_timer_start(&timer, timer_cb, 1000, 0);
uv_run(uv_default_loop(), UV_RUN_DEFAULT);
}

As you can see, there’s no need to cast timer before being passed to libuv’s timer function since ns_timer is a derived class of uv_timer_t and upcasting is implicit. It offers the first step in converting code to be more type-safe and improve overall usability. Improvements can be made incrementally from here. Below we take advantage of the CRTP and use it to downcast the uv_timer_t to the nsuv counterpart after using libuv’s timer API:

static void timer_cb(uv_timer_t* handle) {
// Downcast the libuv handle to its nsuv counterpart.
ns_timer* timer = ns_timer::cast(handle);
// Convenience method to retrieve and cast data.
Foo* foo = timer->get_data<Foo>();

delete foo;
timer->close();
}

While this is a good first step, it still requires we know what the data value should be cast to. The call to get_data() only serves as a convenience method for easier casting.

Passing Data

One of the most painful parts of working with libuv was ensuring we didn’t accidentally cast a void pointer to the wrong type from a specific queue. While this could be verified by hand, having the compiler tell us if we did it wrong would have been more reassuring.

To accomplish this, we wrapped libuv in a way that allows any function that takes a callback to be passed an arbitrary pointer. That pointer is then passed along as an argument in the callback’s parameters. Preventing us from needing to use the uv_handle_t::data property and ensuring the callback always has the correct pointer type.

Below we have fully converted the previous code to use nsuv. As you can see, the pointer that would have been stored in the data parameter can now be passed to the method, making it available as an argument in the callback.

static void call_timer() {
ns_timer timer;
Foo* foo = new Foo();
int r;

r = timer.init(uv_default_loop());
//check r
r = timer.start(+[](ns_timer* handle, Foo* foo) {
delete foo;
handle->close();
}, 1000, 0, foo);
// check r

uv_run(uv_default_loop(), UV_RUN_DEFAULT);
}

For the sake of the example, a C++ lambda function was used. Remember that when passing a lambda function, it needs to be converted to a plain old function pointer using the + operator.

Also notice that we are assigning and handling all return values from each call. As mentioned above, the compiler will warn us if we do not check each call’s return codes. For simplicity of future examples, the return value will be assigned but not include a comment that it needs to be checked.

Locks

Because of all the communication between threads, mutexes were heavily used. To make things simpler, we added a couple of APIs for convenience. The first API of note is that init() accepts an optional boolean value. If true is passed in, the mutex is automatically destroyed when the destructor is called. The other was to add an API for scoped locking.

static void try_mutex() {
ns_mutex mutex;
// The optional boolean argument sets if the mutex should be
// automatically destroyed in the destructor.
int r = mutex.init(true);
// Convenience class to create scoped locks. Accepts either a
// pointer or reference.
{
ns_mutex::scoped_lock lock(mutex);
}
}

Having a mutex call destroy() in the destructor was kept false by default to maintain parity with the libuv API and prevent surprises while migrating to nsuv.

Example Usage

At first, we only implemented the libuv APIs that were necessary for us to use internally, but since deciding to open source the library we have begun to add as much of the remaining libuv APIs as possible. But despite not having yet ported the entire libuv API, it’s still possible to take advantage of what has been done. The following is an example from a test that includes the checks to demonstrate how class instances are being passed around.

#include “nsuv-inl.h”

using namespace nsuv;

ns_tcp client;
ns_tcp incoming;
ns_tcp server;
ns_connect<ns_tcp> connect_req;
ns_write<ns_tcp> write_req;

static void alloc_cb(ns_tcp* handle, size_t, uv_buf_t* buf) {
static char slab[1024];
assert(handle == &incoming);

buf->base = slab;
buf->len = sizeof(slab);
}

static void read_cb(ns_tcp* handle, ssize_t, const uv_buf_t*) {
assert(handle == &incoming);

handle->close();
client.close();
server.close();
}

static void write_cb(ns_write<ns_tcp>* req, int) {
assert(req == &write_req);
// Retrieve a reference to the uv_buf_t array as a std::vector.
assert(req->bufs().size() == 2);
}

static void connection_cb(ns_tcp* server, int) {
int r;
r = incoming.init(server->get_loop());
r = server->accept(&incoming);
r = incoming.read_start(alloc_cb, read_cb);
}

static void connect_cb(ns_connect<ns_tcp>* req, int, char* data) {
static char bye_ctr[] = “BYE”;
uv_buf_t buf1 = uv_buf_init(data, strlen(data));
uv_buf_t buf2 = uv_buf_init(bye_ctr, strlen(bye_ctr));
// Write to the handle attached to this request and pass along data
// by constructing a std::vector.
int r = req->handle()->write(&write_req, { buf1, buf2 }, write_cb);
}

static void do_listen() {
static char hello_cstr[] = “HELLO”;
struct sockaddr_in addr_in;
struct sockaddr* addr;
int r;

r = uv_ip4_addr(“127.0.0.1”, 9999, &addr_in);
addr = reinterpret_cast<struct sockaddr*>(&addr_in);

// Server setup.
r = server.init(uv_default_loop());
r = server.bind(addr, 0);
r = server.listen(1, connection_cb);

// Client connection.
r = client.init(uv_default_loop());
r = client.connect(&connect_req, addr, connect_cb, hello_cstr);

uv_run(uv_default_loop(), UV_RUN_DEFAULT);
}

The request types ns_write and ns_connect are also used in the above example. They inherit from uv_write_t and uv_connect_t respectively, and can be upcast and downcast the same way as handles. Each request type API is templated to identify which handle is being used and can return the correct handle type.

While the write() method does accept a uv_buf_t[] array, we’ve also added the ability to pass in a std::vector of buffers for ease of use. Once the request is complete, the list of written buffers can be retrieved via the ns_write::buf() API as a reference to the std::vector that’s stored internally.

Conclusion

One goal when creating nsuv was to reduce cognitive load by mimicking the libuv API naming and structure while adding safety features offered by C++. We’ve made it easy to transition existing projects to nsuv. By open-sourcing nsuv, we hope to give developers more confidence that their code will behave as expected when expected.

There is near zero runtime overhead using nsuv. The template function proxy pattern used can be completely optimized out by modern compilers. Combining that with the ability to enforce type checks at compile time, I won’t be using libuv in C++ without nsuv going forward.

Using nsuv is as simple as including the two header files from the project repository. We are still working on getting complete coverage of the libuv API and hope the community can help us decide what to work on next. We are also working on porting all applicable tests from libuv to nsuv, which can serve as usage examples. We hope that you’ll find nsuv as useful as we have.

NodeSource has delivered Node.js fresh to your Linux system via your package manager within hours, minutes, days, or weeks. For NodeSource, sustaining the community is essential because we want to support more people using Linux to have Node.js in production.

Also, we are looking for more community involvement in the project. Help will be appreciated! So if you have ideas or solutions or want to help us continue supporting open source, you can contribute to this GitHub Repo.

Continue the conversation with NodeSource here:
Twitter
LinkedIn
Github
As always, the best place to contact us is via our website or [email protected]

Ready for more?

If you are looking for NodeSource’s Enterprise-grade Node.js platform, N|Solid, please visit https://downloads.nodesource.com/. For detailed information on installing and using N|Solid, please refer to the N|Solid User Guide.

Interview With Italo José Core committer at @herbsjs

@ItaloJosé is Microsoft MVP in the Node.js category and works at NodeSource as a Software Engineer; He organizes CityJS Brazil.

We are thrilled to be part of developing powerful tools like N|Solid. We are immensely proud of our engineers who have dedicated their time and expertise to support the open-source ecosystem. This is our way of giving voice and visibility to the projects they are passionate about.

We want to recognize Italo José’s work with Herb.js on this occasion. He has been working on the Herbs.js project since 2020, where he developed the initial versions of the CLI, made significant contributions to numerous repositories, and mentored new contributors.

NS: What benefits does Herbs.js provide?

IJ: Different from other frameworks that help you to write a better infrastructure layer, like the API, database layer, documentation, and tests. The Herbs.js want to help you avoid writing it and focus on what matters, the domain’s code. How do we do it? We read your use case and provide you with the infrastructure; this way, you can save more than 50% of the time developing a server-side application.

It’s good for the business and developers that will stop writing boring and repetitive code for every project.

NS: How can I use Herbs.js to improve my development process?

IJ: The first step is writing your entities and use cases using the @herbsjs/herbs library, besides you have a more organized and readable use cases’ code. After that, you can add our glues(other libraries) that will read your use case and provide you the infrastructure code like rest or GraphQL APIs, documentation, repositories layer and more.

NS: What are the most popular features of Herbs.js?

IJ: Our CLI, the herbs2rest libraries.
The CLI, you know, helps you to generate and maintain a project using the Herbs.js. The herbs shelf reads your use cases and provides human documentation (this is my favorite).

The herbs2rest plugin reads your use case and provides a configured express instance containing all endpoints, an error handling layer, and auth layer for you.

These are the three most popular, but we have plugins for GraphQL, databases, tests, and more.

NS: How does Herbs.js simplify the development process?

IJ: Besidesprevents you writing 80% of the infrastructure code; we provide you with and structured way to write the use cases that allow you to maintain your code self-documented and organized in steps; it’s interesting because this way, new developers and non-developers can understand in a fast way what is happening in your code, it allows for example, project owners validate your use case rule for going to production.

Besides, we save time by avoiding writing the “repetitive” infrastructure code in all projects in our lives.

NS: How user-friendly is Herbs.js?

IJ: It’s pretty simple; as I mentioned in question 2, you write your entities and use case using the @herbsjs/herbs, and after that, just pass it for the glues, so the magic happens.

We assume you want to know more about this project. In that case, we invite you to review this amazing keynote that Italo left for the Community at CityJS Conference: Do you really code domain-oriented systems?

Want to contribute to an OS Project?

At NodeSource we released a project to compare the main APMs and thus help developers make decisions with real data. Here you can view the project and contribute directly to our GitHub repository.

If you have any questions, please contact us at [email protected] or on Twitter @nodesource. To get the best out of Node.js, try N|Solid SaaS #KnowYourNode

N|Solid v4.8.3 is now available

NodeSource is excited to announce N|Solid v4.8.3 which contains the following changes:

Node.js v18.12.0 (LTS): Rebase of N|Solid on Node.js v18.12.0 (LTS)(see details below).

For detailed information on installing and using N|Solid, please refer to the N|Solid User Guide..

Changes

NodeSource is excited to announce N|Solid v4.8.3 which contains the following changes:

Rebase of N|Solid on Node.js v18.12.0 (LTS). This version of Node.js contains the following changes (see here for more details).

There are three available LTS Node.js versions for you to use with N|Solid, Node.js 16 Gallium, Node.js 14 Fermium and Node.js 18 Hydrogen.

N|Solid v4.8.3 Fermium ships with Node.js v14.20.1.

N|Solid v4.8.3 Gallium ships with Node.js v16.18.0.

N|Solid v4.8.3 Hydrogen ships with Node.js v18.12.0.

The Node.js 14 Fermium LTS release line will continue to be supported until April 30, 2023.

The Node.js 16 Gallium LTS release line will continue to be supported until September 11, 2023.

The Node.js 18 Hydrogen LTS release line will continue to be supported until April 30, 2025.

Supported Operating Systems for N|Solid Runtime and N|Solid Console

Please note that The N|Solid Runtime is supported on the following operating systems:

Windows:

Windows 10
Microsoft Windows Server 1909 Core
Microsoft Windows Server 2012
Microsoft Windows Server 2008

macOS:
macOS 10.11 and newer

RPM based 64-bit Linux distributions (x86_64):

Amazon Linux AMI release 2015.09 and newer
RHEL7 / CentOS 7 and newer
Fedora 32 and newer

DEB based 64-bit Linux distributions (x86_64, arm64 and armhf):

Ubuntu 16.04 and newer
Debian 9 (stretch) and newer

Alpine
Alpine 3.3 and newer

Download the latest version of N|Solid

You can download the latest version of N|Solid via http://accounts.nodesource.com or visit https://downloads.nodesource.com/directly.

New to N|Solid?

If you’ve never tried N|Solid, this is a great time to do so. N|Solid is a fully compatible Node.js runtime that has been enhanced to address the needs of the Enterprise. N|Solid provides meaningful insights into the runtime process and the underlying systems. Click here to start!

As always, we’re happy to hear your thoughts – feel free to get in touch with our team or reach out to us on Twitter at @nodesource.

N|Solid v4.8.4 is now available

IMPORTANT: This release of N|Solid v4.8.4 contains a Node.js security release!

NodeSource is excited to announce N|Solid v4.8.4 which contains the following changes:

Node.js v14.21.1 (LTS): Includes a Node.js security release captured in Node.js v14.21.1 (LTS).
Node.js v16.18.1 (LTS): Includes a Node.js security release captured in – Node.js v16.18.1 (LTS).
Node.js v18.12.1 (LTS): Includes a Node.js security release captured in Node.js v18.12.1 (LTS).

For detailed information on installing and using N|Solid, please refer to the N|Solid User Guide..

Changes

NodeSource is excited to announce N|Solid v4.8.4 which contains the following changes:

This release includes patches for these vulnerabilities:

CVE-2022-3602: X.509 Email Address 4-byte Buffer Overflow (High)
CVE-2022-3786: X.509 Email Address Variable Length Buffer Overflow (High)
CVE-2022-43548: DNS rebinding in –inspect via invalid octal IP address (Medium)

There are three available LTS Node.js versions for you to use with N|Solid, Node.js 16 Gallium, Node.js 14 Fermium and Node.js 18 Hydrogen.

N|Solid v4.8.4 Fermium ships with Node.js v14.21.1.

N|Solid v4.8.4 Gallium ships with Node.js v16.18.1.

N|Solid v4.8.4 Hydrogen ships with Node.js v18.12.1.

The Node.js 14 Fermium LTS release line will continue to be supported until April 30, 2023.

The Node.js 16 Gallium LTS release line will continue to be supported until September 11, 2023.

The Node.js 18 Hydrogen LTS release line will continue to be supported until April 30, 2025.

Supported Operating Systems for N|Solid Runtime and N|Solid Console

Please note that The N|Solid Runtime is supported on the following operating systems:

Windows:

Windows 10
Microsoft Windows Server 1909 Core
Microsoft Windows Server 2012
Microsoft Windows Server 2008

macOS:
macOS 10.11 and newer

RPM based 64-bit Linux distributions (x86_64):

Amazon Linux AMI release 2015.09 and newer
RHEL7 / CentOS 7 and newer
Fedora 32 and newer

DEB based 64-bit Linux distributions (x86_64, arm64 and armhf):

Ubuntu 16.04 and newer
Debian 9 (stretch) and newer

Alpine
Alpine 3.3 and newer

Download the latest version of N|Solid

You can download the latest version of N|Solid via http://accounts.nodesource.com or visit https://downloads.nodesource.com/directly.

New to N|Solid?

If you’ve never tried N|Solid, this is a great time to do so. N|Solid is a fully compatible Node.js runtime that has been enhanced to address the needs of the Enterprise. N|Solid provides meaningful insights into the runtime process and the underlying systems. Click here to start!

As always, we’re happy to hear your thoughts – feel free to get in touch with our team or reach out to us on Twitter at @nodesource.