Meet Harmony: A practical solution for composing a unified platform

Harmony is Bit's first component, which allowed us to compose Bit and the Bit Cloud platform from independent business features. You can learn more about the Bit story here.

For five years, we've pioneered composable architecture with Harmony, empowering developers at leading organizations to build software effectively at scale. We've distilled our experience from diverse customer implementations into a comprehensive, practical solution.

We couldn't build Bit without Harmony, and that's why I'm so thrilled to announce Harmony's general availability.

Evolution of composable software. Introducing Harmony.

Software architecture has evolved as organizations grappled with 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. Managing and maintaining these systems can be challenging, with complex orchestration increasing the feedback loop for development and troubleshooting.

Composability signifies a paradigm shift. By organizing around business capabilities rather than technical constraints, we achieve optimal performance, smooth user journey, and significantly enhanced 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 build features as independent components, composing them into a unified application at build time. 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 empowers developers 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 integrated seamlessly through declarative and framework agnostic feature manifests.

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

These manifests, called Aspects, use a programmatic API 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]: [SymphonyPlatformBrowser]) {
    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, Harmony allows developers to 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.

Harmony aspects are self-containing a 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.

In Harmony, shell applications are defined by declaratively composing independent business features, enabling greater 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 approach allows developers to build complete and independent business features and compose these features into applications. It facilitates the addition of new functionalities to the platform without necessitating alterations to the core application logic, thereby mitigating risks and enabling fine-grained control over the application's capabilities.

Harmony brings an API first approach to platform engineering, enabling to provide a clear, programmatic API for feature integration. This platform's layout and operations, promotes consistency, and streamlines collaboration between feature teams.

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

The platform itself is composable, built by integrating layout and navigation components and offering APIs that allow features to be seamlessly integrated:

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

You can expose integration slots as needed to satisfy platform-wide integration requirements.

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