Adobe Developer App Builder And API Mesh Defined

Have you ever heard about Adobe Developer App Builder? What about API Mesh? They are two revolutionary product features that can essentially alter Adobe Commerce as an e-commerce platform. Both Adobe Developer App Builder and API Mesh are intended to change how apps for Adobe Commerce are created. Meet the new level of scalability and agility! Below, we explain what Adobe Developer App Builder is and define API Mesh. You will also learn how to build Adobe Commerce experiences using App Builder and API Mesh.

What is Adobe Developer App Builder?

Adobe Developer App Builder is a serverless extensibility platform that implements a low-code principle and leverages the existing Adobe solutions to create custom applications that run on the Adobe infrastructure.  

The very first goal of this product is to extend the Commerce-native functionality. Along with that, Adobe Developer App Builder is also designed for integrations with third-party solutions. Let’s dive deep under the hood of this solution to understand why it has a chance to become a breakthrough. 

Adobe Developer App Builder empowers you with instruments optimized for creating apps that are more secure and scalable and run on the existing Adobe infrastructure. It leverages such modern technologies as JAM stack, serverless computing, Node, and React. Also, the new framework adheres to the best app-building practices, including event-driven architecture, microservices, continuous integration and delivery, etc.

As a developer, you get a significantly improved environment for creating apps. First of all, you deal with a low-code setting. However, there is nothing revolutionary new in that in 2023. 

What makes Add Builder a breakthrough is that Adobe takes care of provisioning and managing compute, storage, and CDN capacity. As a developer, you can focus on what you can do best — building apps. 

Another essential aspect is that App Builder requires zero customization to the core product code. Consequently, you deal with essentially simplified upgrades and a reduced total cost of ownership. 

At the same time, you get the ability to develop custom apps that interact with core Adobe services and automate routine processes with the help of event-based integrations. Adobe Developer App Builder lets you access authentication services as well as publish/consume custom events, data storage, CI/CD pipelines, etc. 

UI design features are also a part of this new tool. They inherit React Spectrum elements. Since its components match the look and feel of Adobe’s products, App Builder makes it easier to create apps that perfectly fit the ecosystem.

And don’t forget about security. With Adobe Developer App Builder, you can get API authorization and user access control out of the box. 

App Builder Components

From a developer perspective, App Builder introduces the following main components:

• Single Page Application. Create SPAs that use React Spectrum for the client side.
•  I/O Runtime. Leverage I/O Runtime, which is Adobe’s serverless platform to create microservices and orchestrate APIs on the backend side. 
• Developer Tools. Harness CLI, SDKs, Adobe Services, and Developer Console. App Builder also supports Adobe authentication, CDN, publishing/consuming custom events, end-user access control, storing data and files, CI/CD pipelines, and developer sandboxes. All are provided out of the box.
• Execution Environment. Since Adobe Experience Cloud is your execution environment, your custom apps will become neighbors with the Adobe Experience Cloud solutions.

App Builder Use Cases

Common use cases for App Builder include integrating with various enterprise systems. For instance, you can utilize this instrument to establish connections with Enterprise Resource Planning or Product Information Management systems. You can create the following apps on top of this framework:

• Dashboards. Adobe Developer App Builder is good for creating custom dashboards or other decision-making support tools. The framework can help you take data from Adobe solutions and external systems and represent it in a visually attractive manner. 
• User Experiences. App Builder lets you customize the existing experiences associated with Adobe solutions the way your customers want and need them. The out-of-the-box user experience can be replaced with way more flexible workflows.
• Integrations. You can use the framework to create custom integrations between the Adobe ecosystem and other external platforms no matter whether they have or don’t have a UI.
• Built-in Functionality. Extending Adobe’s built-in functionality is also a possible use case for Developer App Builder. For instance, you can use the framework to modify Adobe Experience Manager (AEM) Assets.

How App Builder Works

Creating custom apps with App Builder is associated with the following four stages:

1. Build. You begin by creating a new project in the Developer Console. Add credentials for the Adobe APIs to use in your app, define the required sandboxes, and set up your local development environment with the project in place. After that, the CLI can access the project and deploy the code to the appropriate environments. You can also rely on the CLI in application scaffolding. Generate code using one of the available templates to get client-side code along with backend microservices.
2. Deploy. Use the CLI to deploy the app to your sandbox or a GitHub-based CI/CD pipeline. Thus, you send the microservices to the I/O Runtime and the static files to the CDN.  
3. Test. After completing the previous step, run the app in the context of Experience Cloud, simulating different end-users interacting with it. Since your application is not yet published, your customers will not be able to use it.
4. Publish. When your app is ready, visit the Developer Console and publish the application. Now an Admin has to approve it. When the tool is approved, business users will find it in Experience Cloud.

App Builder Advantages

Adobe Developer App Builder introduces the following advantages: 

• Time to Value. App Builder introduces the fastest way to extend Adobe solutions.
• User Context. Custom apps built with App Builder have the same look and feel as other Adobe products. Furthermore, users don’t need to authenticate with a different user/password, seamlessly moving between Adobe solutions and custom apps.
• Security. Custom apps get an extra security level with API authorization and user access control.
• No Infrastructure Management. Adobe manages all the infrastructure for you.
• Adobe-Native. The App Builder framework is merged with other Adobe solutions and services. It results in a low-code approach and more features out-of-the-box.

The App Builder framework is now available to Adobe enterprise customers and Adobe partners who work with Adobe enterprise customers. You need to be familiar with modern web technologies and JavaScript, to get started right now. Follow this link for more information: Adobe Developer App Builder.

What is API Mesh for Adobe Developer App Builder?

API mesh is another vital component that tends to revolutionize app building for Adobe commerce. It is an API orchestration layer included with App Builder. The goal of API Mesh is to combine multiple sources of API into a single unified graph. As a developer, you now have the easiest way to add, upgrade, or replace Adobe and third-party services into the mesh.

The decoupled API platform enables enterprise and mid-market developers to use Adobe IO to integrate private and third-party APIs and other software interfaces with Adobe products. Thus, it is possible to combine multiple data sources into a single GraphQL endpoint, determining the information the response contains.

The ability to serve multiple sources through a single gateway and provide customized responses enables developers to create a better end-user experience. So, API Mesh becomes a synonym for a better way to access your backend services. Now, businesses that need to access functionality across multiple systems, can easily do that.

With API Mesh, developers can integrate a GraphQL Mesh or any third-party APIs with other Adobe products, including App Builder and Adobe IO Gateway, or other serverless technologies. 

API Mesh for Adobe Developer App Builder also allows developers to subscribe to near-real-time events. Consequently, developers can enable external systems to synchronize data, react to events as they occur, participate in distributed workflows, etc.

API Mesh Features

Below, you can see core API Mesh features:

• Adobe API Manager. API Mesh introduces a reverse proxy that can accept most API calls for multiple backend services.
• Configurable Integrations. API Mesh implements a low/no-code method for integrations between your private APIs and Adobe Commerce, other Adobe products, as well as third-party APIs.
• Backward Compatibility. With API Mesh, you can preserve existing APIs and gradually adapt to new ones.
• Extensibility. API Mesh provides the ability to customize and extend your APIs right in the gateway. Changes to the API source are no longer required.

API Mesh Security

If you have any security concerns, there is nothing to worry about. API Mesh uses the GraphQL data plane that is public but at the same time well-protected. It requires both a Mesh ID and an API Key to access. Note that it is recommended to store your API Key in a header. Attaching the API Key to your mesh’s URL is less secure.

While your Mesh ID and API Key provide basic identification, API Mesh honors any downstream authorization headers that your sources provide. For additional authentication, use custom resolvers.

At a global level, Adobe offers such security measures as DDOS attack protection, rate limiting, and throttling. 

If you need more individualized protection, consider adding a CDN solution through edge caching.

API Mesh Use Case

API Mesh introduces a low-code way to integrate other APIs into the Storefront and Storefront Management APIs. Apart from that, it presents a way for the Storefront API and the Storefront Management APIs to intercommunicate.

Why GraphQL?

So, why did Adobe decide to use GraphQL?

GraphQL is a query language for your API. It provides the ability to query the information you need. GraphQL Mesh, in its turn, lets you use GraphQL to query multiple data sources at the same time. 

Adobe decided to use GraphQL for API Mesh since it has several advantages over REST and other APIs:

• Predictable Responses. GraphQL lets you specify what information your response should contain.
• Response Time. The ability to control data that appears in your response positively impacts your response time: the less extraneous data it contains, the more rapid your calls become.
• Defined Schema. GraphQL introduces a well-defined set of types. Thus, you can easily understand what data to query.

Follow this link for more information: API Mesh for Adobe Developer App Builder.

How to Build Adobe Commerce Experiences Using App Builder and API Mesh

In the video below, you will learn the end-to-end developer flow for creating a headless experience-focused storefront. The session describes the very first steps with App Builder API Mesh and illustrates how to aggregate content from Adobe Experience Manager and Commerce. 

You will discover how to create a headless experience that displays products enhanced with Adobe Experience Manager Content Fragments. 

The last section illustrates how to use Micro Frontends to integrate a shopping cart into your app.

Also, we recommend checking these official tutorials: App Builder guides & API Mesh guides.  

And don’t forget to check this GitHub Repo.

Adobe Developer App Builder And API Mesh FAQ