HomeBlogDevelopment
Published Oct 21, 2023 ⦁ 11 min read

New open source tools to accelerate your projects

Introduction

The world of open source development is constantly evolving with new libraries, frameworks, and tools emerging to help developers build software faster and more efficiently. As open source continues to gain popularity across companies and teams of all sizes, developers now have access to an incredible array of innovative new open source tools to accelerate their projects.

In this post, we'll explore some of the most promising and exciting new open source developer tools and how they can provide real value. Whether it's simplifying data fetching in React, enabling advanced testing capabilities, optimizing bundles, or improving collaboration, these tools are game-changers that can significantly boost productivity. By leveraging these new open source solutions, developers can save time, reduce costs, increase quality, and focus their efforts on solving complex problems vs dealing with repetitive tasks.

Adopting these tools wisely by starting small and integrating thoughtfully can generate huge wins. Let's dive in and see how these innovative new open source tools can help you and your team deliver better software in less time.

The Benefits of Open Source Tools

Before diving into specific new tools, it's worth highlighting the unique benefits open source solutions provide compared to proprietary alternatives. Open source tools offer developers more flexibility, lower costs, quicker innovation cycles and access to source code for security audits. Leading tech companies like Google, Facebook and Amazon build with open source.

However, open source does come with some potential drawbacks like the need for in-house expertise, integration costs and lack of dedicated support. Evaluating both the advantages and disadvantages of open source vs proprietary tools based on your team's needs is key before adopting.

To get a sense of the value proposition, let's compare some popular proprietary developer tools and their open source alternatives:

  • AWS vs OpenStack for cloud infrastructure
  • GitHub vs GitLab for repositories and collaboration
  • Sentry vs Errbit for error monitoring
  • Loggly vs Graylog for log management
  • Sketch vs Figma for design

When chosen wisely, open source tools can provide incredible capabilities at a fraction of the cost of proprietary solutions. But care must be taken to select active projects with strong communities.

How to Evaluate Open Source Tools

When assessing open source projects, look for these key signals of quality:

  • Recent commits and frequent releases
  • Corporate sponsorship or prominent backers
  • Permissive licensing like MIT, Apache, GPL
  • Complete documentation with examples
  • Active issue tracker and engaged community

Resources like DevHunt make discovering high-quality open source tools much easier by consolidating the best projects across categories like testing, monitoring, databases, dev tools, and more. Leveraging curated directories can help identify promising open source solutions worth evaluating.

Now let's explore some standout new open source tools gaining adoption across testing, libraries, developer tools and more.

The JavaScript ecosystem evolves at an incredible pace. Exciting new libraries seem to emerge daily, each aiming to solve common problems in creative ways. Here we'll explore some popular new open source libraries that are making it faster for developers to build complex web applications.

React Query

React Query has quickly become one of the most popular new open source libraries for managing server state and data fetching in React applications. It simplifies caching, synchronizing, deduplicating, and updating server data across your React components and hooks.

Some example use cases enabled by React Query include:

  • Fetching data from REST or GraphQL APIs with automatic caching
  • Tracking loading and error states for requests
  • Refetching data at intervals
  • Paginating and infinite scrolling
  • Deduping simultaneous requests
  • Parallel queries
// Fetch posts and store in React Query cache 
const { data, isLoading, error } = useQuery('posts', fetchPosts)

// Show loading indicator if still fetching
if (isLoading) return <Spinner /> 

// Render posts 
return (
  <div>
    {data.map(post => (
      <Post key={post.id} post={post} />  
    ))}
  </div>
)

Compared to traditional data fetching using React Redux, React Query requires way less boilerplate code. It handles caching, stale data, and request coordination automatically so you can focus on building features instead of wiring up state management. Key capabilities like query focus tracking, scroll position recovery, and pagination/infinite query helpers make implementing complex UI requirements simple.

TanStack Query

Building on the popularity of React Query, TanStack Query aims to add more advanced asynchronous data handling capabilities like Universal Queries (SSR), Dependent Queries, Infinite Queries, and Suspense mode.

Some of the unique benefits TanStack Query introduces include:

  • Universal Queries for server side rendering and hydration
  • Dependent Queries to chain and compose queries
  • Parallel Infinite Queries for complex infinite scroll UIs
  • Suspense mode for code splitting and async boundaries
  • Query initialization via context for SSR
  • Selective query refetching based on cache changes

In addition to advanced features, TanStack Query also improves performance and reduces bundle size compared to React Query. The integration with upcoming React Server Components unlocks game-changing fast page loads. Overall, TanStack Query makes orchestrating complex asynchronous React code easier to reason about.

React Table

React Table has emerged as a lightweight but powerful data grid library for React. It makes building complex table interfaces with sorting, filtering, pagination, row selection, expandable rows, pivot tables, tree grids, and more much simpler.

Some of the key features React Table provides out of the box include:

  • Sorting, filtering, pagination for data grids
  • Flexible column ordering and resizing
  • Column grouping and pivoting
  • Fixed headers
  • Aggregation with summary rows
  • Row expansion
  • Row selection with ctrl/cmd click
  • Expandable detail panels
  • Tree view data grids
  • Server-side data integration

Compared to other React table libraries, React Table provides a great balance of customizability and rich features while staying fast and extensible. It works seamlessly with existing data fetching solutions and UI libraries. For any React project needing to display complex data grids or tables, React Table is a robust solution that can handle incredibly flexible use cases.

Exciting New Testing Tools

Reliable testing is crucial for maintaining high quality software, but not all developer experiences building tests are created equal. Thankfully, the JavaScript testing ecosystem has expanded recently with incredibly helpful new open source libraries that simplify writing maintainable tests.

These new testing tools introduce improved ergonomics and APIs that reduce frustrations around test flakiness and unnecessary implementation details. They provide developers with better abstractions that enable faster test creation and encourage testing best practices like avoiding over-mocking. Let's explore some popular options gaining adoption.

Cypress

Cypress has gained a huge following as a next generation front end testing framework purpose built for modern web applications. It runs inside an exclusive browser-based Runner providing advanced capabilities not possible from traditional Selenium testing tools chained to WebDriver.

Some key advantages Cypress introduces include:

  • Time travel debugging with test replay
  • Automatic waiting instead of sleeps
  • Spies, stubs, and clocks for controlling time
  • Screenshots and videos of test runs
  • Network traffic control for mocking
  • Consistent results across environments
// Visit page 
cy.visit('/profile')

// Interact with element  
cy.get('#name').type('John') 

// Assert DOM contains text
cy.contains('John')

Cypress makes cross-browser testing simple out of the box, with support for Chrome, Firefox, Edge and Electron. The familiar chained API and automatic waiting behavior significantly reduces test flakiness compared to other frameworks. If you develop modern JavaScript web applications, Cypress is absolutely worth evaluating.

Playwright

Playwright is a Node.js library for browser automation and testing built by the Chrome team. It provides a single API for testing web apps across Chrome, Firefox and Safari both locally and on remote CI services.

Some of the core capabilities Playwright delivers include:

  • Multi-browser testing across Chromium, Firefox, WebKit
  • Reliable automatic waiting for elements and network calls
  • Web app, mobile app, Electron app support
  • Browser context customization like geolocation
  • Network mocking and proxying
  • Screenshot comparisons for visual regressions
  • Trace viewer for failed test analysis
  • Browser executable downloads for CI

Compared to Selenium, Playwright introduces more reliable APIs with smart automatic wait handling built-in. It also executes tests faster by isolating browser contexts instead of running everything through one shared browser session. For teams seeking an efficient scriptable browser testing solution, Playwright is absolutely worth evaluating.

Testing Library

Testing Library emerged as a game-changing shift in how JavaScript UI testing is approached. Guiding principles like testing behavior rather than implementation details have spawned Testing Library flavors for React, Vue, Angular, and more.

Some key principles that make Testing Library so useful:

  • Avoid over-mocking implementation details
  • Test UIs the way users interact with them
  • Encourage better testing practices
  • Lightweight and unopinionated

For example, React Testing Library provides intuitive utilities for rendering React components, interacting with elements, and asserting rendered UI output. Matching user flows instead of React internals makes tests more resilient to UI changes. The handy react-testing-library ecosystem of utils makes writing maintainable React component tests enjoyable.

Innovative New Developer Tools

Beyond libraries and testing tools, the open source community has also produced awesome new developer tools that improve our workflow in surprising ways. Let's check out a few impressive new tools that aim to make development more enjoyable.

Bundlephobia

Bundlephobia provides an invaluable service - easily checking the minified+gzipped bundle size of any npm package right from your terminal. This helps developers avoid inadvertently bloating their app with huge third-party dependencies.

Some examples of how Bundlephobia improves development include:

  • Quickly checking a package size before installing
  • Comparing sizes of alternative libraries
  • Ensuring new dependencies don't bloat bundles
  • Analyzing cost/benefit tradeoffs of dependencies
  • Integrating size checks into CI pipelines
// Check package size
npx bundlephobia react

// Result
react: 5.3kB gzipped (122.4kB uncompressed)

Instead of needing to manually import packages into a trivial project just to check how much they'll inflate your production bundles, Bundlephobia gives you an instant report on any package. This tool has quickly become invaluable for optimizing bundle sizes.

Winds

Winds is an open source RSS reader and podcast manager built with React, Node, and PostgreSQL. It provides a beautiful interface for managing subscriptions and consuming content from blogs, podcasts, YouTube channels and more.

Some of the standout features Winds delivers include:

  • Organizing and reading content from RSS feeds
  • Watching YouTube videos and listening to podcasts
  • Offline reading with full-text caching
  • Automatically skipping deleted episodes
  • Dark mode
  • Mobile apps
  • Self-hosting and data ownership

Compared to managed services like Feedly or Apple Podcasts, Winds gives you full control and a reactive, web-based interface for consuming content. Teams can self-host Winds to securely share content sources. For developers seeking an extensible RSS reader, Winds is a fantastic open source option.

StackBlitz

StackBlitz provides an online IDE for web development that lets you edit code and see changes live in the browser. It supports TypeScript, JavaScript, React, Angular, Vue and more both as embedded sandboxes and connected to GitHub/Git repos.

Some of the awesome features StackBlitz enables:

  • Live-editing React, Vue, Angular projects
  • Shareable, embeddable sandboxes
  • GitHub/Git repo integration
  • VS Code-powered editor
  • Online terminals
  • Multiplayer collaboration

Compared to alternatives like CodeSandbox and CodePen, StackBlitz provides closer integration with existing toolchains via GitHub, Git, and VS Code. The collaboration features make it simple to pair program remotely. Overall, StackBlitz lowers the barrier to live editing modern web apps in the browser.

Adopting New Open Source Tools

The open source community continues rapidly innovating, producing incredible tools like the ones we've explored that can generate real value. But integrating new tools successfully requires planning and care.

When considering adopting one of these emerging developer tools, be sure to:

  • Evaluate thoroughly on a pilot project first
  • Start small and focused before expanding usage
  • Monitor for unintended side effects
  • Socialize with the broader team
  • Plan integration into existing workflows

With a thoughtful approach, these new open source libraries, testing tools, and other solutions can significantly improve productivity. The key is integrating intelligently and measuring results.

Conclusion

The open source ecosystem continues accelerating at an astounding pace. Incredible new tools are emerging constantly to help developers build better software faster. React Query, Cypress, Bundlephobia, and the other innovative new open source tools we've covered provide real value if adopted wisely.

Hopefully this post has highlighted exciting new solutions worth evaluating on your next project. Assembling the right toolchain can unlock huge productivity gains. The open source community is outdoing itself producing these amazing tools - now it's our job as developers to use them to build revolutionary software.

For more discovery and promotion of quality open source tools, be sure to explore DevHunt.

Development ToolsLibrariesProductivityTesting

Related posts