Nevo David

Posted on Nov 8

🔥14 game-changing open-source tools every developer should know 🚀

#webdev #javascript #programming #opensource

The software development landscape is evolving faster than ever. To stay ahead of the curve, you must arm yourself with tools and technologies built for the future.

I’ve curated a must-know list of open-source tools to help you build applications designed to stand the test of time.

1. Postiz - Grow your internet presence using AI

Postiz is a powerful, comprehensive tool infused with AI power for managing social media and your entire social media strategy.

Here are some key features:

Scheduling: Schedule, analyze, and engage with your audience seamlessly across several platforms.
AI Assistant: Lean on your AI agent for help in any stage of your content creation process. Use the AI within Postiz to manage the processes that generate images (of every kind) for your posts.
Team Management: Sort your pathway to social media success by delegating tasks to team members and liaising with them when necessary.
Analytics: Postiz offers a number of fantastic analytics features that allow you to track and predict the performance of your posts.

Check out the repository for more.

Star the Postiz repository ⭐

2. Composio: Ultimate platform for AI automation

We are witnessing unprecedented growth in the AI landscape. For me, it resembles the 1990s internet boom. Big companies like Google, OpenAI, Microsoft, etc., are betting billions on an AI future.

Composio is the only tool you need to build complex AI automation software. Composio allows AI models to access 3rd party tools and applications to automate interaction with them.

🎯 For instance, you can connect GitHub with the GPT model via Composio and automate reviewing PRs, resolving issues, writing test cases, etc.

It houses over 90 tools and integrations, such as GitHub, Jira, Slack, and Gmail, to automate complex real-world workflows.

Moreover, you can even integrate your applications, enabling AI to take actions like sending emails, simulating clicks, placing orders, and much more just by adding the OpenAPI spec of your apps to Composio.

Some of the critical highlights of Composio

SOC-II-approved and Role-based authentication control for enterprise users.
A single-plane monitoring dashboard is used for all the integrations.
Framework agnostic: use any AI framework like LangChain or LlamaIndex or build it raw.
It handles complex user authentication and authorization for all your users, including OAuth, JWT, API Key, and basic authentication.
Native support for Python and Javascript.

Here is how you can start with Composio with npm,

npm install composio-core

Define a method to let the user connect their GitHub account.

import { OpenAI } from "openai";
import { OpenAIToolSet } from "composio-core";

const toolset = new OpenAIToolSet({
  apiKey: process.env.COMPOSIO_API_KEY,
});

async function setupUserConnectionIfNotExists(entityId) {
  const entity = await toolset.client.getEntity(entityId);
  const connection = await entity.getConnection('github');

  if (!connection) {
      // If this entity/user hasn't already connected, the account
      const connection = await entity.initiateConnection(appName);
      console.log("Log in via: ", connection.redirectUrl);
      return connection.waitUntilActive(60);
  }

  return connection;
}

Add the required tools to the OpenAI SDK and pass the entity name on to the executeAgent function.

async function executeAgent(entityName) {
  const entity = await toolset.client.getEntity(entityName)
  await setupUserConnectionIfNotExists(entity.id);

  const tools = await toolset.get_actions({ actions: ["github_activity_star_repo_for_authenticated_user"] }, entity.id);
  const instruction = "Star a repo ComposioHQ/composio on GitHub"

  const client = new OpenAI({ apiKey: process.env.OPEN_AI_API_KEY })
  const response = await client.chat.completions.create({
      model: "gpt-4-turbo",
      messages: [{
          role: "user",
          content: instruction,
      }],
      tools: tools,
      tool_choice: "auto",
  })

  console.log(response.choices[0].message.tool_calls);
  await toolset.handle_tool_call(response, entity.id);
}

executeGithubAgent("joey")

Execute the code and let the agent do the work for you.

For more information, visit the official docs, and for even more complex examples, see the repository's example sections.

Star the Composio repository ⭐

3. Encore - Backend framework for robust and type-safe applications

Cloud services are great for building scalable applications. However, it can quickly become messy with complex infrastructure management, inconsistent APIs, and scattered DevOps processes.

Encore simplifies this chaos by providing a unified development platform integrating type-safe backend frameworks, automatic infrastructure provisioning, and DevOps automation.

Key features

It offers a complete toolset that makes building and deploying cloud apps easier from start to finish.
Your local development environment looks like the cloud, with infrastructure set up automatically.
Built-in tools for service/API mocking, local test infrastructure, test tracing, and Preview Environments.
Automatically applies security best practices to protect your app.
Encore automates cloud infrastructure provisioning, eliminating the need for IaC tools like Terraform or YAML.

It is available both in Golang and Typescript.

Get started with Encore by installing the CLI.

curl -L https://encore.dev/install.sh | bash

Create an app.

encore app create

This will configure your free account, allow you to choose your app's name, and select the Hello World template.

This will create an example application with a simple REST API in a new folder using your chosen app name.

Open the file in your editor.

// Service hello implements a simple hello world REST API.
package hello

import (
    "context"
)

// This simple REST API responds with a personalized greeting.
//
//encore:api public path=/hello/:name
func World(ctx context.Context, name string) (*Response, error) {
    msg := "Hello, " + name + "!"
    return &Response{Message: msg}, nil
}

type Response struct {
    Message string
}

For more information, refer to their documentation.

Star the Encore repository ⭐

4. AssemblyScript - Typescript-like language for WebAssembly

There is a growing trend in building applications for web assembly or WASM to offer a native experience on the web, especially for compute-heavy tasks like animation, games, editors, etc.

If you want to build similar applications, AssemblyScript can be a great choice.

It is a typescript-like language that compiles to WebAssembly using **Binaryen** instead of JS.

Its close association with JS/TS syntax makes it ideal for developers to build near-native web apps without learning low-level languages.

The key features of AssemblyScript include

Language familiarity for most developers.
Near-native web performance.
Fast and lightweight.

It is easy to get started with the Assembly script.

npm install --save-dev assemblyscript

Once installed, the compiler provides a handy scaffolding utility to quickly set up a new project here in the current directory:

npx asinit .

The asinit command automatically creates the recommended directory structure and configuration files:

The example in assembly/index.ts can now be compiled to WebAssembly by invoking the build command:

npm run asbuild

Doing so will emit the compiled binaries, bindings and definition files to the build/ directory.

The generated test case in tests/index.js can be executed with:

npm test

Once built, the directory contains all the bits to use the module like any other modern Node.js ESM module:

import * as myModule from "myModule";

The generated index.html shows how the module can be used on the Web. A web server serving the module directory, defaulting to display index.html, can be started with:

npm start

For more information on AssemblyScript, refer to their repository.

Star the AssemblyScript repository ⭐

5. GodotEngine - Multi-platform 2D and 3D game engine

Gaming is a big market, and as per multiple surveys, the average gaming time has increased manifold in the past ten years. Godot can be a great start if you are considering game development.

It is a feature-packed, multi-platform game engine for building 2D and 3D games from a unified interface.

Games built with Godot can easily be exported to the Web, MacOS, Linux, Windows, Android, IOS, and consoles. With game engines, you can also build compute-intensive apps like photo editors, animation, etc.

Key Features

It includes tools for developing virtual and augmented reality applications.
It is efficient and lightweight, making it suitable for indie and small-scale projects.
Access to a growing library of free community assets.
Cross-platform.

For more, refer to their official documentation.

Explore the Godot repository ⭐

6. Bun - Fast JS runtime, bundler, and package manager

A faster runtime JS can significantly improve the development experience. Bun can be the ideal choice for a quicker JS runtime.

The bun runtime, a JS runtime, is designed as a drop-in replacement for Node JS. It is written in Zig and powered by JavaScriptCore under the hood, dramatically reducing startup times and memory usage.

Bun is designed as a faster, leaner, more modern replacement for Node.js.

Key features

Optimized for speed with faster startup and runtime performance than Node.
Comes with a built-in JavaScript bundler for seamless module packaging.
Combines runtime, bundler, transpiler, and more in a single tool.

Install Bun on Linux, Mac, and WSL.

curl -fsSL https://bun.sh/install | bash

Run bun init to scaffold a new project.

bun init

Open index.ts and paste the following code snippet, which implements a simple HTTP server with Bun.serve.

const server = Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response("Bun!");
  },
});

console.log(`Listening on http://localhost:${server.port} ...`);

Seeing TypeScript errors on Bun?

Run the file from your shell.

`bun index.ts`

`Listening on http://localhost:3000 ...`

Visit http://localhost:3000 to test the server. You should see a simple page that says "Bun!".

For more information on Bun, refer to their documentation.

Explore the Bun repository ⭐

7. Gitpod - On-demand cloud development platform

If you were looking for a cloud-based development environment for your team, your search ends here. Gitpod is an open-source development environment that automates the setup of coding environments.

Gitpod provides automated and standardized development environments that run self-hosted in your cloud or local machine.

key features

Instantly sets up fully configured workspaces from Git repositories.
It provides a cloud-based IDE that is accessible from any browser, allowing developers to code without local setup.
Workspaces are initialized with necessary dependencies and tools.
Enables multiple developers to collaborate in the same workspace.

For more information on Gitpod, refer to their official documentation.

Star the Gitpod repository ⭐

8. Continue - Leading AI-powered code assistant

You must have heard about Cursor IDE, the popular AI-powered IDE; Continue is similar to it but open source under Apache license.

It is highly customizable and lets you add any language model for auto-completion or chat. This can immensely improve your productivity. You can add Continue to VScode and JetBrains.

Key features

Chat to understand and iterate on code in the sidebar
Autocomplete to receive inline code suggestions as you type
Edit to modify code without leaving your current file
Actions to establish shortcuts for common use cases

For more, check the documentation.

Star the Continue repository ⭐

9. Turborepo - Optimized mono repo management system for JS/TS

Building mono repo software can be challenging as the software grows. If not managed properly, it can become a nightmare.

Turborepo solves your mono repo's scaling problem. It is a high-performance build tool designed for JS/TS apps to speed up workflows in single-package workspaces.

Key features

Incremental Builds: Only rebuilds changed parts of the codebase to save time.
Monorepo Management: Optimized for managing multiple projects within a single repository.
Caching: Leverages local and remote caching to avoid redundant builds.
Parallel Execution: Runs tasks like tests and builds concurrently for faster results.

Get started quickly.

npx create-turbo@latest

The starter repository will have:

Two deployable applications
Three shared libraries for use in the rest of the monorepo

npm install turbo --global

Once installed globally, you can run your scripts through turbo from your terminal,

For more, refer to the documentation page.

Star the Turborepo repository ⭐

10. Tauri - Build blazingly fast apps for desktops

Tauri is a lightweight, fast, and secure framework for building cross-platform applications using web technologies like HTML, CSS, and JavaScript. The application's backend is a rust-sourced binary with an API that the front end can interact with.

Key features

Build apps for multiple platforms: Windows, MacOS, and Linux.
It uses the system's WebView, avoiding bundling a browser.
The core is built with Rust for privacy and speed.
Supports JS/TS frameworks like Svelte, react, Vue, etc.

Check out the documentation for more on Tauri.

Explore the Tauri repository ⭐

11. gRPC - An RPC library and framework

REST API is not enough for building fast, distributed, low-latency microservices. You will need something speedy and robust, and gRPC is perfect.

It is an open-source tool from Google that is built for efficient communication between services across different platforms and languages. It uses HTTP/2 and Protocol Buffers (protobufs) for serialization.

Key features

gRPC uses HTTP/2, which allows multiplexing multiple requests over a single connection, reducing latency and improving performance.
gRPC supports various programming languages.
gRPC supports streaming in both directions, enabling real-time data exchange between client and server.

Check out the documentation for more.

Explore the gRPC repository ⭐

12. D3 - Bring data to life with SVG, Canvas and HTML

There are no better alternatives to D3 when creating visualizations in JavaScript. D3 is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics.

Popular visualization frameworks like Plotly use D3 to draw interactive plots and charts.

D3 works in any JavaScript environment.

Quickly get started by installing D3.

npm install d3

Here’s an example of a line chart in React.

import * as d3 from "d3";

export default function LinePlot({
  data,
  width = 640,
  height = 400,
  marginTop = 20,
  marginRight = 20,
  marginBottom = 20,
  marginLeft = 20
}) {
  const x = d3.scaleLinear([0, data.length - 1], [marginLeft, width - marginRight]);
  const y = d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]);
  const line = d3.line((d, i) => x(i), y);
  return (
    <svg width={width} height={height}>
      <path fill="none" stroke="currentColor" strokeWidth="1.5" d={line(data)} />
      <g fill="white" stroke="currentColor" strokeWidth="1.5">
        {data.map((d, i) => (<circle key={i} cx={x(i)} cy={y(d)} r="2.5" />))}
      </g>
    </svg>
  );
}

Check out all the examples of plots and graphs built using D3.

Explore the D3 repository ⭐

13. Zod - TypeScript-first schema validation with static type inference

Zod is a Typescript=first schema declaration and validation library. It allows you to define schemas for data structures and validate them with TypeScript type inference, ensuring that your data conforms to specific shapes and rules.

Typescript is only type-safe at compile time; Zod validates the data at runtime, ensuring that invalid data doesn’t slip through.

Key features

Zero dependencies
Works in Node.js and all modern browsers
Tiny: 8kb minified + zipped
Immutable: methods (e.g. .optional()) return a new instance
Concise, chainable interface
Functional approach: parse, don't validate
It works with plain JavaScript, too! You don't need to use TypeScript.

Get started by installing Zod.

npm install zod

Creating a simple string schema

import { z } from "zod";

// creating a schema for strings
const mySchema = z.string();

// parsing
mySchema.parse("tuna"); // => "tuna"
mySchema.parse(12); // => throws ZodError

// "safe" parsing (doesn't throw error if validation fails)
mySchema.safeParse("tuna"); // => { success: true; data: "tuna" }
mySchema.safeParse(12); // => { success: false; error: ZodError }

Creating an object schema

import { z } from "zod";

const User = z.object({
  username: z.string(),
});

User.parse({ username: "Ludwig" });

// extract the inferred type
type User = z.infer<typeof User>;
// { username: string }

For more, refer to their documentation.

Explore the Zod repository ⭐

14. Biome - Toolchain for the web

Biome is a fast and efficient web development tool focusing on code quality. It offers linting, formatting, and compiling features in a single tool.

It is designed to provide better performance, lower resource usage, and an improved developer experience compared to ESLlint and Prettier.

Key Features

It is an all-in-one tool offering linting, formatting, and compiling in a single tool.
Native support for Typescript.
It is built with Rust for fast execution and low resource usage.
It allows custom rules for linting and formatting.
Simplifies workflows by reducing the need for multiple tools.

Get started with Biome by installing it using any package manager.

npm install --save-dev --save-exact @biomejs/biome

Configure Biome,

npx @biomejs/biome init

After running the init command, you’ll have a new biome.json file in your directory:

biome.json

{
  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": { "ignoreUnknown": false, "ignore": [] },
  "formatter": { "enabled": true, "indentStyle": "tab" },
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": { "recommended": true }
  },
  "javascript": { "formatter": { "quoteStyle": "double" } }
}

The linter.enabled: true enables the linter, and rules.recommended: true enables the recommended regulations. These correspond to the default settings.

Check out the documentation for more.