DEV Community

Cover image for šŸ”„14 game-changing open-source tools every developer should know šŸš€
Nevo David
Nevo David Subscriber

Posted on

šŸ”„14 game-changing open-source tools every developer should know šŸš€

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.

Game changer GIF


šŸ‘‘ 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.

Composio tools catalog

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


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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")


Enter fullscreen mode Exit fullscreen mode

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.

Composio GIF

Star the Composio repository ā­


2. Postiz - Grow your internet presence using AI

Building the product is one thing, but getting users and clients is a different ball game. Developers often forget they still must market their products and create communities to sustain the business.

Postiz helps you step up your social media game using AI.

It offers everything you need to manage social media posts, build an audience, capture leads, and grow your business.

Key Features

  • Schedule all your social media posts with powerful AI features.
  • Track performance with detailed analytics.
  • Collaborate with your team to exchange or purchase posts.
  • Invite team members to comment, collaborate, and schedule content together.

Check out the repository for more.

Postiz

Star the Postiz 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


Enter fullscreen mode Exit fullscreen mode

Create an app.



encore app create


Enter fullscreen mode Exit fullscreen mode

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
}


Enter fullscreen mode Exit fullscreen mode

For more information, refer to their documentation.

Encore GIF

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


Enter fullscreen mode Exit fullscreen mode

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



npx asinit .


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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";


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

For more information on AssemblyScript, refer to their repository.

Assembly Script

Star the AssemblyScript repository ā­


4. 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.

Godot Image

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.

Godot GIF

Explore the Godot repository ā­


5. 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


Enter fullscreen mode Exit fullscreen mode

RunĀ bun initĀ to scaffold a new project.



bun init


Enter fullscreen mode Exit fullscreen mode

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} ...`);


Enter fullscreen mode Exit fullscreen mode

Seeing TypeScript errors onĀ Bun?

Run the file from your shell.



`bun index.ts`

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


Enter fullscreen mode Exit fullscreen mode

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.

Bun GIF

Explore the Bun repository ā­


6. 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.

GitPod GIF

Star the Gitpod repository ā­


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

Continue GIF

Star the Continue repository ā­


8. 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


Enter fullscreen mode Exit fullscreen mode

The starter repository will have:

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


npm install turbo --global


Enter fullscreen mode Exit fullscreen mode

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

For more, refer to the documentation page.

Turbo build GIF

Star the Turborepo repository ā­


9. 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.

Tauri GIF

Explore the Tauri repository ā­


10. 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.

gRPC GIF

Explore the gRPC repository ā­


11. 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


Enter fullscreen mode Exit fullscreen mode

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>
  );
}


Enter fullscreen mode Exit fullscreen mode

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

Observable GIF

Explore the D3 repository ā­


12. 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


Enter fullscreen mode Exit fullscreen mode

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 }


Enter fullscreen mode Exit fullscreen mode

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 }


Enter fullscreen mode Exit fullscreen mode

For more, refer to theirĀ documentation.

Zod GIF

Explore the Zod repository ā­


13. 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


Enter fullscreen mode Exit fullscreen mode

Configure Biome,



npx @biomejs/biome init


Enter fullscreen mode Exit fullscreen mode

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" } }
}


Enter fullscreen mode Exit fullscreen mode

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.

Biomejs GIF

Explore the Biome repository ā­


Thanks for reading!

Top comments (1)

Collapse
 
sunilkumrdash profile image
Sunil Kumar Dash

Great list. Thanks for sharing.