The JavaScript ecosystem is rich with innovation and expanding rapidly. Here are seven tools and frameworks that point to what’s next for JavaScript.
Here are seven newer JavaScript projects you might not know about yet. These tools and frameworks cover a wide range of functionality and give us insight into emerging trends in JavaScript development. Examples include native app creation, strongly typed full-stack development, a drop-in runtime alternative to Node.js, in-browser graphics, and more. All of the projects are currently being embraced by developers, so they may not be under the radar for long. Just remember, you heard about them here first!
From our partners:
Tauri: A JavaScript framework for desktop apps
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, like React or Svelte, and turn it into a cross-platform “rich” client.
Denjell, a co-founder of Tauri, shared a bit about the incentive for developing a new desktop framework.
Tauri exists to streamline the process of building apps. So if someone is interested in building apps, they might stumble across Tauri. First of all, Tauri builds apps for Mac, Windows, and Linux. This summer, we will release a stable 2.0 that introduces iOS and Android to the mix, as well.
The development process for Tauri is quite interesting. The framework lets you build with the existing pipeline you are using, for example, SvelteKit built with Vite. Tauri can handle any stack that ultimately builds to JavaScript and HTML. It runs against the development server, generating the native desktop client for you as you go.
Denjell describes the development process as follows:
- Start a dev server using Svelte, Solid.js, React, Vue, etc.
- Configure
tauri.confto listen at that port. - Start a Tauri dev 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 applications for the universe of JavaScript developers. Unlike older frameworks that attempted similar feats, Tauri looks to deliver on the promise of multiplatform development using JavaScript.
tRPC: API development with TypeScript
tRPC is an alluring approach to building APIs backed by TypeScript. While it’s in the same family of technologies as GraphQL, tRPC is different in that it automates the interaction between the front- and back-end code. It also has superpowers derived from TypeScript’s ability to enforce typing.
I asked tRPC creator Alex Johansson why he created tRPC.
I am a longtime fan of GraphQL (and still am) but when building my own products I often feel like it slowed me down—I was using TypeScript on both ends. Why can’t I just use the language itself rather than bringing in an external schema?
tRPC’s superpower is using what’s already there to support enforcement and association of types across the whole stack. It provides a kind of two-way type inference, and makes it work without the intermediary of metadata or an extra build step to tie the API definitions to the consuming code. When I grokked what tRPC was about, I had a feeling of simplicity suggestive of genius.
Here is a live full-stack React app built by the tRPC team using StackBlitz. tRPC provides the endpoints and the whole thing is quite simple, with just a handful of files required. Simple is good.
In the StackBlitz example, the exposed endpoints drive the information the IDE has available. For example, on the front end, the result variable is populated using a custom tRPC useQuery hook like so: const result = trpc.greeting.useQuery({ name: 'client' });. On the back end, this is handled by a tRPC router.
The front end is then able to use the variable like so: {result.data.text}. The IDE (and TypeScript compilation step) is fully aware and able to supply the type definition of result.data. Likewise, the tRPC router endpoint is aware of the front end, for example, the parameter supplied in the query.
Overall, tRPC is a unique and enticing way to build full-stack 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 runtime for JavaScript
Bun.js is a rising star in JavaScript because it attacks several fronts in a single package. I asked the framework’s creator Jarred Sumner about his motivation and hopes in creating Bun.
Bun is an all-in-one JavaScript/TypeScript bundler, transpiler, NPM package manager and JavaScript runtime. We want to make JavaScript faster to run and simpler to write. An important part of that is ecosystem compatibility. Bun is designed as a drop-in Node.js replacement. People shouldn’t have to rewrite their code to use Bun. Many Node.js APIs like Node’s native module API (NAPI),
fs,path,process, and more are built into Bun (though we’re still working on it).
Bun is both a drop-in replacement for runtimes like Node.js and Deno and an alternative for secondary tooling like webpack, Vite, and Babel. It is fast becoming known for its astounding speed in running bun install as a replacement for npm install or yarn install. Bun’s performance advantage is the result of pushing much of the code out of JavaScript and into lower-level Zig and C++.
Bun’s fast processing, along with its all-in-one approach, makes it a compelling alternative to conventional stacks for back-end server-side JavaScript. Developers are taking note, too, awarding the framework 40,000 stars on GitHub to date.
Civet: A modern framework for TypeScript
What if you took TypeScript and combined it with some of the ideas in CoffeeScript and blended 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 creator Daniel Moore notes that “there’s a rumor going around 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 spec.”
Interestingly, Civet does not limit itself to enhancing TypeScript: it also consumes JSX. As Erik Demaine (the developer on the project responsible for most of the JSX enhancements) pointed out:
Civet takes these ideas and pushes them further, adding more highly desired language features (such as a pipe operator, many JSX improvements, and soon a pattern-matching switch), and building on top of (transpiling to) TypeScript, so it’s extremely compatible with existing tools.
In Listing 1, you can see a simple example of Civet at work (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 also handle JSX! I always feel like the looping syntax in JSX is awkward, but Civet simplifies it. (Also take a look at the Civet cheatsheet for more information.)
Tabby: A terminal for Node.js
I have to admit to a long-lived affection for consoles and shells. It’s been with me since I discovered the secret world behind Commodore 64 games where I could spill the BASIC guts onto the console. Tabby is a full-featured, cross-platform, windowed terminal that replaces native apps like cmd, powershell, and Terminal. It also handles SSH a la Putty and SFTP like WinSCP.
I asked Tabby’s creator, Eugeny, about the decision to create a new terminal application.
I originally created [Tabby] out of frustration with using Hyper (another Electron-based Terminal app) and general disappointment of other apps being stuck in the ’90s (small papercut issues like Alt-arrows not working for word traversal that quickly add up). Another inspiration was VS Code as an app that throws conventions out of the window in the name of better overall experience. My hopes would be to grow the community and eventually rewrite [Tabby] to 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 environments.
Pixi.js: Performance-intensive graphics in JavaScript
Navigate to Pixijs.com and observe the effect when moving the pointer over the background image. There is a very expensive-looking liquid effect but it doesn’t seem to have a huge impact on performance. How’d they do that? By using the Pixi.js library, of course!
Pixi gives you a performance-oriented, advanced API for building interfaces with WebGL and HTML5 Canvas. Pixi has been around for a while and it’s a mature, stable library. You can find the NPM package here.
Although Pixi.js seems made to order for in-browser gaming, it’s useful anywhere you need performance-intensive graphics, including charting and fancy effects in general. Just keep in mind it’s built for 2D, not 3D.
When combined with a framework like Tauri, Pixi can be used to build desktop platforms and the like. You can play around with Pixi in the online Pixi playground.
PM2: Application monitoring for Node.js
Strictly speaking, PM2 is not a JavaScript library but a systems-oriented tool built in JavaScript. It’s a very complete application monitoring tool that you can use to do sophisticated process monitoring and management from the command line.
Unix has monitoring and management tools like bg/fg, nohup, and screen, but PM2 does all of that and more in a user-friendly package.
PM2 has several restart strategies for handling almost any situation. Examples include starting based on a CRON time, auto-restart when stopped, and starting when a criteria (like memory consumption) is reached. It includes a --watch flag for restarting on file changes.
PM2 is worth a look if you need a tool for a variety of Node.js process management needs.
By: Matthew Tyson
Originally published at InfoWorld
Source: Cyberpogo
For enquiries, product placements, sponsorships, and collaborations, connect with us at [email protected]. We'd love to hear from you!
Our humans need coffee too! Your support is highly appreciated, thank you!
