MACH architecture is a collection of design principles focused on building agile, nimble, customer-centric, and future-proof software applications. In short, MACH stands for Microservices-based, API-first, Cloud-native, and Headless.

• Microservices: Independent units handling specific business tasks, each developed, deployed, and managed separately for greater flexibility.
• API-first: Prioritizes APIs for all functionalities, enabling seamless connections between applications or services.
• Cloud-Native SaaS: Embraces the cloud’s full potential, offering scalable, automatically updated services without manual upgrades.
• Headless: Separates front-end design from back-end logic, allowing creative freedom in UI design and easy integration with various platforms and devices.

Let’s look at how we can use the Bit platform template to create a simple MACH architecture.

Note: You can create the boilerplate code for the front end and set of Microservices by using the Bit platform template.

Bit components are technology agnostic and already support various frontend frameworks like React, Angular, Vue, and backend technologies, including Node.js, AWS Lambda, docker, etc, out of the box.

Microservices

Microservices offer many benefits for scaling application backends. They allow continuous releases and give development teams more autonomy. Yet, they come at a cost: managing distributed systems and compromising on code reuse.

The Bit approach allows the reuse of components across Microservices. Components are organized into groups named scopes in bit.cloud. Since each component is versioned with its dependencies, creating a similar team structure with access control to scopes makes the teams autonomous and enhances their collaboration.

The main advantage is that even if a single team updates a shared component, anyone can see how the change gets propagated across components and applications using the Bit dependency graph.

Let’s create Microservices in Node.js runtime using pre-built templates. These templates generate all the essentials for developing and deploying your Microservice.

Run the steps in the platform template quick start to create the boilerplate code. This creates a set of components in your code base that you can modify based on your needs.

Here, the platform component contains two Microservices (UserServer and Discussion Server) defined in the code.

# Code Reference: https://bit.cloud/acme/acme/acme-platform/~code/acme-platform.bit-app.tsx

import { Platform } from '@bitdev/platforms.platform';

const UserServer = import.meta.resolve('@bitdev/node.examples.user-server');
const DiscussionServer = import.meta.resolve('@acme/discussions.discussions-server');
const AcmeWeb = import.meta.resolve('@acme/acme.acme-web');
const PlatformGateway = import.meta.resolve('@bitdev/symphony.backends.gateway-server');

export const AcmePlatform = Platform.from({
  name: 'acme-platform',

frontends: {
    // main frontend application for the platform
    main: AcmeWeb,
  },

backends: {
    // use the default gateway component. supports proxy of graphql and restful requests.
    main: PlatformGateway,
    services: [
      // compose micro-service components.
      UserServer,
      DiscussionServer
    ]
  },
});

export default AcmePlatform;

Note: You can find the generated code in Bit cloud under acme organization.

Another benefit of Bit is that the CI configuration to build and test components is included by default in the code base. You only need to execute the relevant Bit CLI command to build, version, and deploy your components.

API-first

Building an API strategy helps streamline integrations across applications and organizational processes. When it becomes API-first, it goes to a new level, where individual business functionality is well-defined in APIs and documented before using them in different applications.

Thus, you need tooling such as API gateways to expose and harden these APIs for security, reliability, and monitoring. With Bit, you can build an extended API-first strategy at a more granular level, where each component and service interface is well-defined, with documentation and unit tests by default.

In addition, you can share entities between frontend and backend for strong contract and type completion.

This is also called the ‘entity-component pattern,’ where the component is shared between the API and its clients. It also provides the relevant types for the API’s data, utility functions to handle the data, and schema validation for error catching in runtime.

You can find more information about this pattern by referring to the following;

Cloud-native SaaS

The next category of tooling MACH architecture promotes is cloud-native services. The main advantage of using cloud-native services is that we get access to a wide range of tooling where the cloud provider handles most of the heavy lifting. These services range from function-as-a-service to cloud-native databases.

For example, you can deploy the application’s frontend to Netlify or Vercel cloud-native services, where the overhead of setting up a CDN, caching content, development, and maintenance is fully handled. Most Bit app types support deploying frontend code to Netlify, where you only need to configure credentials.

Let’s look at creating an AWS Lambda function using Bit components.

// @file: hello-world-lambda.lambda-app.ts

import type { LambdaAppOptions } from '@bitdev/aws.app-types.lambda-app-type';

export const HelloWorldLambdaApp: LambdaAppOptions = {
  /* the app's name (for Bit) */
  name: 'hello-world-lambda',
  /* an entry point for the app's build */
  entry: require.resolve('./hello-world-lambda.handler'),
  /* your aws host config and credentials */
  deployOptions: {
    clientConfig: {
      /* the hosting region */
      region: 'us-east-1',
      /* your aws credentials */
      credentials: {
        accessKeyId: process.env.AWS_ACCESS_KEY_ID as string,
        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY as string,
      },
    },
      /* the lambda's name (for aws). Using an already used name will update the code. */
      functionName: 'hello-world-lambda-example',
      /* the runtime execution environment */
      runtime: 'nodejs18.x',
      /* a description for your lambda (will be displayed on the aws console) */
      description: 'Deployed from Bit',
      /* the name of the method within your code that Lambda calls to execute your function */
      handlerName: 'handler'
  },
  /* the port range for running the app (lambda) in development (bit run) */
  portRange: [3000, 5000],
};

export default SimpleLambdaApp;

In addition to this, you can create docker images for your applications and deploy them to a K8 cluster.

Headless

In MACH architecture, the frontend user experience is completely decoupled from the back-end logic, allowing designers to design the frontend independently, with the potential to be used by a variety of frontend clients (various web apps, native apps, etc.)

Bit makes working with the frontend and backend seamless with components creating headless services and making them testable independently.

For frontend, you get the Bit development server, making it easier to visualize how each frontend component is rendered. You can start the Bit development server by running bit start command.