Meet Harmony: A practical solution for composability

Decentralized architecture has undoubtedly revolutionized software development, driving remarkable progress and scalability. However, it also brought new challenges that hinder future growth and advancement.

This is why we are so excited to announce Harmony. Harmony connects decentralized architectures into unified, cohesive platforms. It transforms what was once an extremely complex undertaking into something as straightforward as building a simple app.

Harmony is the foundation of Bit and the Bit Cloud platform. Refined with over a decade of composable architecture experience and forged through real-world customer implementations, Harmony offers a complete, comprehensive and battle-tested solution.

Evolution of composable software. Introducing Harmony.

Software architecture has evolved as organizations face increasingly complex challenges. Each stage addressed existing limitations, yet introduced new ones.

Monoliths were simple but lacking scalability. Microservices improved scalability but introduced significant operational complexity. Micro-frontends aimed for frontend autonomy but brought runtime integration issues, performance bottlenecks, and complex deployments.

While decentralized systems offer advantages like improved team autonomy, they often come at the cost of increased complexity, potential performance degradation, and a diminished end-user experience.

Composability signifies a change in approach. By composing independent business features into a unified platform, we eliminate technical boundaries, achieving optimal performance, seamless user experiences, and dramatically improved maintainability.

Harmony is a minimalistic open-source library for composing highly performant and consistent platforms from independent business features. It empowers developers to seamlessly integrate API-centric features into shell applications while maintaining optimal user experience, performance, safety, and developer experience.

Composable architecture. An application shell using a set of features, each composing independent components to the platform

Harmony lets you compose features into a unified application. This approach simplifies integration, ensures consistent behavior, and enables atomic deployments. Benefits include optimal SSR/SPA performance, a consistent UX, simplicity of scale, API-first development, tech stack agnosticism, and a reduced learning curve.

Harmony supports Node.js and browser runtime environments by default and is extensible to other runtimes and development tools.

Harmony allows to build and maintain independent components using standard technologies like React, Node.js, or any other framework suitable for your platform. These components are then composed into features using declarative programmatic APIs.

Integrate independent `user bar` and `login` components to the platform

These feature manifests, called Aspects are used to compose components into the platform. Here's how it looks in practice:

// people.browser.runtime.ts
import { AcmePlatformAspect, type AcmePlatformBrowser } from '@acme/acme.acme-platform';
import { Login } from '@acme/people.routes.login'; // import the independent React login component.
import { UserBar } from '@acme/people.composites.user-bar'; // import the independent User Bar component.

export class PeopleBrowser {
  // state the dependencies to other aspects
  static dependencies = [AcmePlatformAspect];

  static async provider([acmePlatform]: [AcmePlatformBrowser]) {
    const people = new PeopleBrowser();
    
    acmePlatform.registerRoute([ // compose the login as a route to the platform.
      {
        path: '/login',
        component: () => <Login />
      }
    ]);

    acmePlatform.registerHeaderAction([ // compose the user bar as an header action.
      {
        name: 'user-bar',
        component: () => {
          return <UserBar />;
        }
      }
    ]);

    return people;
  }
}

Copied

By inverting control over integration, developers can compose and test component changes within the context of a live platform, all while working independently. This approach eliminates integration guesswork, minimizes the risk of disrupting existing functionality or requiring the change of further components.

Similarly, each feature can expose APIs to facilitate integration with other features. For instance, the people aspect might provide an API to add an item to the application's user bar.

Harmony aspects are full-stack architecture of a complete feature, supporting diverse runtimes. This enables seamless composition of frontend and backend components within a single feature, streamlining deployment on the platform.

Aspects are composed into shell applications via a manifest, reducing integration risks and improving flexibility, reusability, and maintainability.

Application shells are composing features into a unified application

Features are easily toggled on or off within the platform manifest file:

// acme-platform.bit-app.ts
import { HarmonyPlatform } from '@bitdev/harmony.harmony-platform';
import { SymphonyPlatformAspect } from '@bitdev/symphony.symphony-platform';
import { PeopleAspect } from '@acme/people.people'; // import the people feature component  
import { SupportAspect } from '@acme/support.support'; // import the support feature component

export const AcmePlatform = HarmonyPlatform.from({
  name: 'acme-platform',
  platform: [SymphonyPlatformAspect], // base on the default symphony platform 
  
  aspects: [
    SupportAspect,
    PeopleAspect, // compose the people feature into the platform
  ],
});

Copied

This manifest demonstrates the addition of new functionalities to the platform without applying changing to the core application logic, mitigating risks and enabling control and reuse of capabilities.

Composability transforms manual platform integration into an API-first approach. This provides a clear, programmatic interface for feature integration, promoting consistency and enabling features to self-integrate.

Compose a platform layout and provide API for features to introduce new routes

The platform itself is an aspect, integrating the layout and navigation components and offering APIs for allowing features to register routes, navigation items or anything else needed into the platform:

// pied-platform.browser.runtime.tsx
export class PiedPlatformBrowser {
  constructor(
    private config: PiedPlatformConfig,
    private symphonyPlatform: SymphonyPlatformBrowser,
  ) {}

  // Define the platform API for new features to use.
  registerRoute(routes: Routes[]) {
    this.symphonyPlatform.registerRoute(routes);
    return this;
  }

  static dependencies = [SymphonyPlatformAspect];

  static async provider(
    [symphonyPlatform]: [SymphonyPlatformBrowser],
    config: PiedPlatformConfig,
  ) {
    const piedPlatform = new PiedPlatformBrowser(config, panelSlot);

    // Integrate the platform routes and layout components as needed
    symphonyPlatform.registerLayoutEntry([
      position: 'top',
      component: () => {
        return <Header />;
      }
    ]);

    return piedPlatform;
  }
}

export default PiedPlatformBrowser;

Copied

In the example above, the platform provides an API for registering routes and integrates the Header within the application layout. This same approach can be used to address other platform integration needs. For instance, the platform can expose APIs and integrate components for error handling (404 and 500 pages), navigation, and global context.

Harmony supports Bit's existing framework integrations, including React, Node.js, Angular, Vue and others. While a unified tech stack is ideal, Harmony acknowledges the reality of diverse enterprise environments and allows for integrating components built with different frameworks, although strategic standardization remains recommended.

React and Angular mounted to a unified platform

To learn more about combining frameworks in a unified platform on our documentation.

Bit empowers you to create independent workspaces, enabling you to build, maintain, and release them independently. This flexibility allows you to tailor your development workflow to your specific needs. Here are guides for creating independent feature and platform workspaces:

• Platform workspace
• Feature workspace

With Bit, you have the freedom to structure your workspaces in a way that best aligns with your organization's structure and evolving needs.

You can get started building new features with Harmony today, leveraging 100% of your existing code:

• Get started
• Start with AI
• Gradual adoption

Godspeed,
Ran Mizrahi
Founder and CEO of Bit