7 awesome JavaScript projects to check out today

Here are seven newer JavaScript projects that you may not be aware of yet. These tools and frameworks cover a wide range of functionality and give us insight into emerging trends in JavaScript development. Examples include building native apps, strongly typed full-stack development, a direct runtime alternative to Node.js, in-browser graphics, and more. All of the projects are currently being adopted by developers, so they may not go unnoticed for long. Just remember, you heard about them here first!

Tauri: A JavaScript Framework for Desktop Applications

Tauri is a JavaScript framework for building desktop applications. Perhaps “meta-framework” is a better term. It allows you to use any front-end web framework, such as React or Svelte, and make it a cross-platform “rich” client.

Denjell, co-founder of Tauri, shared a bit about the incentive to develop a new desktop framework.

Tauri exists to streamline the application creation process. So if anyone is interested in building apps, they might stumble upon Tauri. First of all, Tauri creates applications for Mac, Windows and Linux. This summer, we’ll be releasing a stable 2.0 that also brings iOS and Android into the mix.

Tauri’s development process is quite interesting. The framework allows you to build with the existing pipeline you’re using, for example SvelteKit built with Vite. Tauri can handle any stack that is eventually built on JavaScript and HTML. It runs against the development server, generating the native desktop client for you on the fly.

Denjell describes the development process as follows:

Start a development server with Svelte, Solid.js, React, Vue, etc.
Set up tauri.conf to listen on that port.
Launch a Tauri development window.

Although Tauri’s code is systems-oriented and built in Rust, developers interact with APIs that are almost all written in JavaScript. Tauri is a compelling approach to building native desktop apps for the JavaScript developer universe. Unlike previous frameworks that have attempted similar feats, Tauri seeks to deliver on the promise of cross-platform development using JavaScript.

tRPC: API development with TypeScript

tRPC is an attractive approach to building TypeScript-backed APIs. Although it belongs to the same family of technologies as GraphQL, tRPC is different in that it automates the interaction between front-end and back-end code. He also has superpowers derived from TypeScript’s ability to enforce the script.

I asked the creator of tRPC alex johansson why he created tRPC.

I’m a long time fan of GraphQL (and still am), but when building my own products I often feel like it slows me down – I was using TypeScript on both ends. Why can’t I just use the language itself instead of embedding an external schema?

The super power of tRPC is using what already exists to support implementation and type binding across the entire stack. It provides a sort of two-way type inference and makes it work without the metadata middleman or an extra build step to link API definitions to consuming code. When he took in what tRPC was all about, he had a sense of simplicity that suggested genius.

Here’s a live full-stack React app built by the tRPC team using StackBlitz. tRPC provides the endpoints and everything is pretty simple, with only a handful of files needed. Simple is good.

In the StackBlitz example, the exposed endpoints handle the information that the IDE has available. For example, at the front, the result the variable is populated with a custom tRPC useQuery hook like this: const result = trpc.greeting.useQuery({ name: 'client' });. On the back-end, this is handled by a tRPC router.

The front-end can use the variable like this: {result.data.text}. The IDE (and the TypeScript compile step) is fully aware of and can provide the type definition of result.data. Similarly, the tRPC router endpoint knows the front-end, for example, the parameter provided in the query.

Overall, tRPC is a unique and attractive way to build complete TypeScript applications. It is gaining increasing interest from the developer community, with close to 20,000 stars on GitHub as of this writing.

Bun.js: a faster execution time for JavaScript

Bun.js is a rising star in JavaScript because it attacks multiple fronts in a single package. I asked the creator of the framework. jarred sumner about his motivation and hopes in creating Bun.

Bun is an all-in-one JavaScript/TypeScript bundle, compiler, NPM package manager, and JavaScript runtime. We want JavaScript to be faster to run and easier to write. An important part of that is ecosystem compatibility. Bun is designed as a drop-in replacement for Node.js. People shouldn’t have to rewrite their code to use Bun. Many Node.js APIs such as the Node Native Module API (NAPI), fs, path, processand more are built into Bun (although we’re still working on it).

Bun is a drop-in replacement for runtimes like Node.js and Deno and an alternative to secondary tools like webpack, Vite and Babel. He is quickly becoming known for his amazing running speed. bun install as a replacement for npm install either yarn install. Bun’s performance advantage is the result of taking much of the code out of JavaScript and putting it in lower-level Zig and C++.

Civet: A Modern Framework for TypeScript

What happens if you take TypeScript and combine it with some of the ideas in CoffeeScript and mix in some extra niceties to boot? You’d get something like Civet, a framework designed to make writing TypeScript code simpler and more powerful.

civet maker daniel moore notes that “Rumor has it that Civet is the new CoffeeScript, but maybe that’s a good thing. CoffeeScript brought classes, destructuring, async/await, arrow functions, rest parameters, and more to the official JavaScript specification.

Interestingly, Civet doesn’t just improve TypeScript: it also consumes JSX. As Erik Demaine (the project developer responsible for most of the JSX improvements) pointed out:

Civet takes these ideas and pushes them further, adding more desired language features (like a pipeline operator, lots of JSX improvements, and soon a pattern matching switch) and building on top of (transpiling to) TypeScript, making it extremely compatible. with existing tools.

In Listing 1, you can see a simple example of Civet in action (taken from the Civet documentation).

Listing 1. Simple civet example


// Civet syntax
i .= 0
loop
  i++
  break if i > 5

// TS output
let i = 0;
while (true) {
  i++;
  if (i > 5) {
    break;
  }
}

Don’t forget that Civet can handle JSX too! I always feel like the loop syntax in JSX is awkward, but Civet makes it simple. (Also take a look at the Civet cheat sheet for more information.)

Tabby: a terminal for Node.js

I have to admit that I have a lasting affection for consoles and shells. He’s been with me ever since I discovered the secret world behind Commodore 64 games where I could spill the guts of BASIC on the console. Tabby is a full-featured, cross-platform, windowed terminal that replaces native applications like cmd, powershelland terminals. Also handles SSH to the Putty and SFTP like WinSCP.

I asked the creator of Tabby, eugeneabout the decision to create a new terminal application.

originally created [Tabby] due to frustration with using Hyper (another Electron based Terminal app) and general disappointment of other apps getting stuck in the 90’s (little paper cutting issues like Alt arrows not working for traversal of words that add up quickly). Another inspiration was VS Code as an app that throws conventions out the window in the name of a better overall experience. My hopes would be to grow the community and eventually rewrite [Tabby] use Tauri instead of Electron to reduce size and improve performance.

Tabby gives you all the niceties like colors, special key handling, and copy/paste in a platform that stays consistent across all environments.

Pixi.js: Performance Intensive Graphics in JavaScript

Go to Pixijs.com and see the effect when you move your pointer over the background image. There is a liquid effect that seems very expensive, but doesn’t seem to have a huge impact on performance. How did they do that? Using the Pixi.js library of course!

Pixi gives you an advanced performance-oriented API for building interfaces with WebGL and HTML5 Canvas. Pixi has been around for a while and is a mature and stable library. You can find the NPM package here.

Although Pixi.js seems tailor-made for in-browser gaming, it’s useful anywhere you need high-performance graphics, including generally sophisticated graphics and effects. Just keep in mind that it’s designed for 2D, not 3D.

When combined with a framework like Tauri, Pixi can be used to build desktop rigs and the like. You can play with Pixi in Pixi’s online playground.

PM2: Application Monitoring for Node.js

Strictly speaking, PM2 is not a JavaScript library but a systems-oriented tool built on JavaScript. It is a very comprehensive application monitoring tool that you can use to monitor and manage sophisticated processes from the command line.

Unix has monitoring and management tools like bg/fg, nohupand screenbut PM2 does all of that and more in one easy-to-use package.

PM2 has several reset strategies to handle almost any situation. Examples include starting based on a CRON time, automatically restarting when stopped, and starting when a criteria is reached (such as memory consumption). Includes a --watch flag to restart on file changes.

PM2 is worth a look if you need a tool for a variety of Node.js process management needs.