This content originally appeared on Bits and Pieces - Medium and was authored by Mike Chen
Why You Should Build Your Platform with Harmony: A Full-Stack Integration System
Build scalable, modular, and high-performing platforms with Harmony — an integration framework that unifies frontend and backend, enhances collaboration, and simplifies deployment.
Modern software development demands architectures that are modular, scalable, and maintainable. Harmony is a full-stack integration framework that enables developers to build highly flexible, efficient, and collaborative platforms.
This blog assumes Harmony is used along with Bit. While Harmony does not require Bit, it is best used with Bit. Coupling the two makes dependency management easier, ensures compatibility across teams, and enhances collaboration by leveraging Bit’s powerful component-driven workflows.
1. Full-Stack Standardized Feature Integration
Harmony unifies frontend and backend capabilities, allowing teams to develop a full-stack feature as a single reusable unit. Each unit, called an “aspect,” adheres to the standards and protocols of the system. This makes the aspect easily pluggable and enables other features (other “aspects”) to extend their capabilities using it.
For example, this “People” aspect, responsible for registering and authenticating users, registers into the platform’s browser runtime using its people.browser.runtime.tsx file:
/**
* @componentId: pied.people/people
* @filename: people.browser.runtime.tsx
*/
import { MyPlatformBrowser, MyPlatformAspect } from '@my-org/my-platform.my-platform';
// ...
export class PeopleBrowser {
// ...
static dependencies = [MyPlatformAspect];
static async provider(
[piedPlatform]: [MyPlatformBrowser]
) {
const people = new PeopleBrowser();
myPlatform.registerRoute([
{
path: 'people',
component: () => {
return <PeopleLobby />
}
},
]);
myPlatform.registerTopLevelComponents({
component: ({ children }) => {
return <AuthProvider>{children}</AuthProvider>;
}
});
return people;
}
}
export default PeopleBrowser;
Similarly, it integrates into the platforms NodeJS platform, using its people.node.runtime.ts file:
/**
* @componentId: pied.people/people
* @filename: people.node.runtime.ts
*/
import { MyPlatformNode, MyPlatformAspect } from '@my-org/my-platform.my-platform';
// ...
export class PeopleNode {
// ...
static dependencies = [MyPlatformAspect];
static async provider([myPlatform]: [myPlatformNode]) {
const people = new PeopleNode();
myPlatform.registerBackendServer([
{
routes: [],
gql: gqlSchema
}
]);
return people;
}
myPlatform.registerMiddlewares([
(req, _, next) => {
const user = people.getCurrentUser(req);
req.user = user;
next();
}
]);
}
export default PeopleNode;
It’s like a build-time Micro Frontends integration framework — only it is not limited to the frontend. Each aspect can extend the system’s frontend, backend, or both by providing a different entry point for each runtime.
The build process for the platform will result in separate artifacts for the “browser runtime” and for the “NodeJS runtime.”
Slots
Harmony’s slot-based architecture allows aspects to register components dynamically, making the system highly flexible and adaptable. This design empowers third-party developers and teams to extend features without modifying the core logic, facilitating open innovation.
3. Dependency Injection & Inversion of Control
By inverting control over integration, Harmony reduces guesswork and prevents unintended breaking changes. Components register to aspects rather than relying on direct dependencies, ensuring loose coupling. This allows aspects to conditionally utilize platform features depending on their availability, making the system more dynamic and adaptable.
For example:
// ...
export class PeopleBrowser {
// ...
static dependencies = [MyPlatformAspect, HeaderAspect];
static async provider(
[myPlatform, header]: [MyPlatformBrowser, HeaderBrowser|undefined]
) {
// ...
/* Register to the header aspect only if it exists in the platform */
piedPlatform?.registerHeaderActions([
{
name: 'user-bar',
component: () => {
return <Button href="/">Get started</Button>
}
}
]);
return people;
}
}
export default PeopleBrowser;
By implementing the Inversion of Control principle, Harmony also enables teams greater autonomy as they can integrate into the system without requiring changes to code they do not own or maintain.
4. Framework-Agnostic
Harmony provides official runtimes for Node.js and the browser, with extensibility for other environments. It supports various execution models, including Single Page Applications (SPA) and Server-Side Rendering (SSR), ensuring broad compatibility across different deployment scenarios.
5. Build-Time Integration for Performance and Reliability
Harmony integrates dependencies at build time, ensuring that the entire system is tested end-to-end before deployment. This approach optimizes performance by eliminating dynamic loading at runtime, reducing runtime errors, and enhancing reliability. It also results in optimized artifacts, mainly optimized bundles and bundle splitting.
6. Unified Deployment & Cloud Portability
With Harmony, the platform produces a single build artifact per runtime, simplifying deployment and improving performance. This makes it easy to deploy applications to various cloud providers or on-premise servers, offering greater flexibility in infrastructure choices.
7. Gradual Adoption without Disruptive Rewrite
One of Harmony’s key advantages is that it allows for gradual adoption. Teams can start using Harmony without discarding their existing codebase. Existing packages, APIs, and even microservices can be wrapped as Bit components and Harmony aspects, enabling smooth transitions without disruptive rewrites.
8. Enhanced Collaboration and Reusability
Harmony fosters better teamwork by enabling teams to develop and test features independently. Shared components and aspects can be reused across multiple applications, ensuring consistency and reducing duplication of work. This leads to faster development cycles and more maintainable systems.
Conclusion
Harmony empowers developers to compose scalable, maintainable, and high-performing platforms while keeping development workflows flexible and collaborative.
By leveraging Harmony’s modular architecture, dependency management, and build-time integration, teams can create robust platforms that evolve seamlessly over time. Whether integrating existing systems or building from scratch, Harmony provides the tools to streamline development, enhance performance, and enable long-term scalability.
Why You Should Build Your Platform with Harmony was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Mike Chen
Mike Chen | Sciencx (2025-02-26T17:46:48+00:00) Why You Should Build Your Platform with Harmony. Retrieved from https://www.scien.cx/2025/02/26/why-you-should-build-your-platform-with-harmony/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.