Using App Builder and API Mesh to expand your eCommerce functionalities

Using App Builder and API Mesh to expand your ecommerce functionalities

Whether your business sells to consumers (B2C), businesses (B2B), or through distributors or ecommerce marketplaces, Adobe Commerce can help you succeed. Adobe Commerce’s composable modular architecture sets it apart, providing businesses with a platform that is adaptable, scalable, secure, and profitable. This architecture enables you to seamlessly integrate third-party extensions and other functionalities to tailor your online store to your specific needs, all without sacrificing performance or stability. Major global brands leverage the power of Adobe Commerce to confidently deliver exceptional customer experiences and fuel substantial growth in their highly competitive industries. Here are some of the brands:

Adobe Commerce is designed as a highly modular, API-first open platform. Developers have full control over every facet, allowing them to modify, customize, and integrate to meet requirements unique to their organization. The Commerce Web APIs enable developers to access and interact with their data, integrate third-party applications, and create autonomous applications. Adobe provides comprehensive REST APIs and GraphQL for out-of-the-box features. This opens the door to limitless possibilities for businesses, who can then tailor the product to their requirements. Let’s explore how Adobe’s extensibility approach has evolved and how developers can use new innovations, App Builder and API Mesh, to expand their ecommerce functionalities.

Adobe’s approach has evolved

Historically, the API and GraphQL frameworks of Adobe Commerce were used to integrate directly with third-party solutions. Adobe also provided the ability to expand core features via third-party Commerce Marketplace-listed extensions. These extensions are collections of code that deliver specific functions — or more specifically directories containing PHP and XML files organized as blocks, controllers, helpers, and models for specific business features. To integrate with other solutions, Adobe Commerce offered multiple integration strategies.

While Adobe Commerce could integrate effectively with any third-party solutions — like OMS, WMS, ERP, and CRM — the use of third-party iPaaS middleware or custom PHP extensions added complexity with the upgrades and patch installation as the extensibility is dependent on core code. With increased attention to composability, scalability, and security, these integration methodologies were revisited.

Adobe Commerce shifted to modular, composable architecture

Adobe Commerce has evolved its approach to better support developers in extending their platform and to introduce new features and integrations — shifting a traditional monolithic architecture toward a modular, composable architecture. To do so, Adobe Commerce launched App Builder and App Mesh.

Adobe Developer App Builder is a serverless extensibility platform for integrating and developing custom experiences to extend Adobe Commerce functionalities. App Builder enables the development of secure, scalable applications that extend Commerce-native functionality and integrate with third-party solutions. It also allows your features to scale, prevents you from needing more products to integrate, and gives you a single framework for integrating and developing custom applications. With App Builder, developers can build custom microservices, extend core Commerce functionalities and integrate Adobe Commerce with other Adobe solutions and third-party solutions — including OMS, WMS, CRM & ERP. Seamlessly add APIs and services from Adobe or third parties to expand your shopping experiences in a way that is more scalable and stable.

API Mesh lets developers integrate multiple data sources into a singular GraphQL endpoint. In contrast to working with APIs, the GraphQL query language allows you to determine the information contained in the response. API Mesh improves the end-user experience when accessing your back-end services by serving multiple sources through a single gateway and delivering customized responses. API Mesh allows developers to integrate third-party APIs with other Adobe products such as App Builder, Adobe IO Gateway, and serverless technologies. By subscribing to near-real-time events, developers can enable external systems to synchronize data, partake in distributed workflows, and respond to events as they occur.

Using App Builder and API Mesh removes the need to directly customize Adobe Commerce, ensuring the commerce layer remains lean. This helps to reduce the amount of code needed to extract data from the database and decreases the number of calls to the database by caching the response received from the database. What used to involve complex integrations with third-party services, extensions, external systems, and more now becomes a single integration layer that sits on top of Adobe’s cloud-native, scalable, and performant environment.

App Builder comes with built-in authentication services, end-user controls, data storage, and CI/CD pipelines to help you create custom apps faster, design new services, and automate processes with event-based integrations. It is also Payment Card Industry (PCI) compliant with proper tools where the apps can be developed, tested, and approved before they are published for use on production instances. The App Builder apps are Node.js applications, which means developers creating them don’t need to be specialists in Adobe Commerce. App Builder is also compatible with multiple Adobe Experience Cloud solutions, enabling developers with diverse skill sets to create apps that extend Adobe Commerce's core functions without coding. This approach also ensures that regardless of patch or version upgrade, your app is not impacted — and no immediate upgrades are needed to use it. Events from Adobe Commerce are available in App Builder apps, making it easy for developers to integrate with other microservices and making sure the right data is synced.

Next, let’s discuss how different Adobe Commerce implementations can be extended using App Builder and API Mesh.

Extending Adobe Commerce implementations

Starting with a simple case

First, we can look at how App Builder and API Mesh can be used for a simple project with Adobe Commerce for the back end and PWA Studio for the front end.

As you can see in the diagram below, the Adobe Commerce foundation is now being extended using App Builder and API Mesh. The frontend browser experience (which can be either a Luma or PWA Studio) now connects to Adobe Commerce via App Builder which in turn is fetching information from Adobe Commerce multi-tenant SaaS services, along with third-party systems. This architecture avoids extending the core Adobe Commerce foundation making it independent of any customizations, thus keeping it light and further helping with easy patch installation and upgrades. This architecture also ensures that Adobe Commerce Cloud compute capacity is not used for extending. Rather, the serverless function and capacity provided with App Builder extend functionalities. This architecture takes us closer to MACH — microservices-based, API-first, cloud-native, and headless — while ensuring that you are still utilizing the composable hybrid capabilities provided by Adobe Commerce.

Consider the use case in which a consumer searches for a product. Previously, we would send this request to MySQL Database and conduct a full-text search. Using Live Search with App Builder and API Mesh, the request will be sent to the mesh, which will then look up Live Search and retrieve the results without interacting with Adobe Commerce database. This will ensure that the search result is returned much faster, that the core application is not modified with additional PHP codes to add features such as "suggestive search, synonyms, and others," and that the database no longer receives unwanted requests because the requests are now being served by the SaaS services via App Builder. As App Builder is a serverless function, computing resources are also utilized sparingly.

With App Builder, we can decouple the integration between Adobe Commerce and third-party systems to support scalability and performance. App Builder also reduces dependencies on interrelated modules and allows merchants to bring best of the breed solutions to enhance their ecommerce business. Further, the core Adobe Commerce foundation stays light, which helps merchants install security patches and upgrade easily, without fear of overriding integrations or extension code, which could negatively impact features.

Expanding to a deeper stack with multiple Adobe products

Next, let’s examine an implementation with multiple Adobe products, including Adobe Commerce, Adobe Experience Manager, Adobe Analytics, and Adobe Target. This customer is focused on creating personalized commerce experiences using Experience Manager for their front end with Adobe Analytics for rich customer understanding and Adobe Target for optimization and testing.

While multi-product integrations have historically required significant developer effort, with help of Data Connection (formerly Adobe Experience Platform Connector) and App Builder, the integration is now seamless. Further, all third-party systems still connect to Adobe Commerce via the App Builder instance. App Builder and API Mesh allow developers to avoid major changes to the core code of Adobe Commerce and reduce direct interaction with the Adobe Commerce database, all while ensuring that infrastructure scales seamlessly to support business growth.

Adobe Developer App Builder architecture and use cases

What is the architecture for a standard application built on App Builder? Let’s look at an example:

Here you can see a serverless App Builder application that extends the Adobe product APIs. This application can be either headless or headful. To learn more about the architecture, its underlying technology, security, deployment methodologies, integration patterns and more, go here. To read about how you can use App Builder to make custom apps, go here.

Common use case for App Builder and API Mesh

Now that we know what App Builder and API Mesh are and how they help to scale and extend Adobe Commerce, we can explore a few top use cases for App Builder and API Mesh.

  1. Moving PHP extensions to App Builder and API Mesh

Basic PHP extensions created by system integrators (SIs) are ideal to move to App Builder and API Mesh. Adobe Commerce Marketplace is now accepting App Builder app listings. This will help extension builders move their extension to App Builder and be part of the composable extendable architecture that Adobe is creating. Even better, Adobe is waving all the commission fees for two years from the date the App is listed on the Marketplace for Apps submitted in 2023. This also helps the merchant by moving to composable architecture, which results in better performance while retaining their existing extension functionality and investment in it.

  1. ERP Integration

Another great use case for App Builder is integrating your ERP system to your commerce platform. The inventory and price call can be done through App Builder to ensure commerce functionality is extended without modifications to the core. Historically, this has involved direct API calls or third-party iPaaS systems. Now, with App Builder you can handle ERP requests in near real time without experiencing a performance backlog. This same application works for syncing orders between Adobe Commerce and your ERP system. App Builder supports eventing which makes it more relevant to use for such use cases. The Adobe Commerce Event Collector package can be explored with App Builder to access common data layer, and an event publishing and subscription service.

  1. Logistic Gateway Integration

A final example is integrating with a Logistic Gateway, either to send order information for a shipment or to allow your customers to check their order shipment status. Instead of extending Adobe Commerce via PHP extension, with App Builder and API Mesh you can now create an app with the API endpoint of the Logistic Gateway without having to write a single line of PHP code. When you want to generate the order shipment request or check the order shipment status, you can evoke the app, call the API, and perform the required operation. This ensures that your extensibility is not dependent on PHP or MySQL version.

What do our customers think of App Builder and API Mesh?

Early adopters of App Builder and API Mesh are already loving the flexibility and cost savings that it brings to their IT organizations. Based on analysis of past implementations, we estimate that utilizing API Mesh can reduce system integration time by 86% and increase development efficiency by 14%. This allows teams to focus on higher value features and worry less about the enterprise-wide connectivity of services. Here are some quotes about App Builder and API Mesh that demonstrate the extensibility it provides:

The mesh shines when used with a headless front end like Adobe Experience Manager. API Mesh’s goal is to allow Adobe Commerce projects to more easily leverage third-party and cloud services without direct Adobe Commerce Marketplace Extensions. Many IT executives are seeking to integrate this kind of technology with their stack to reduce code — relying more on configuration — and to add an important layer of observability to the architecture, providing key metrics such as throughput, response times, and abuse claims. This value-add capability of API Mesh brings cost-effective solutions to an existing enterprise architecture."

– Rick Buczynski

VP of solution architecture for Blue Acorn iCi.

“We moved to Adobe Commerce because it was a more composable platform, enabled us to create a global platform model, and it had modern features and functionality that our prior platform did not.”

– Leo Griffin

VP of Technology and Global Head of Consumer Technology, Hanesbrands.

Extend your Commerce experience with App Builder and API Mesh

App Builder and API Mesh are excellent lightweight integration solutions to extend the core capabilities of Adobe Commerce and build composable shopping experiences. These features help keep the commerce foundation lean by decreasing the use of custom PHP code and dependencies on underlying technology, which helps improve business processes during upgrades. App Builder brings an easy user experience that saves time for the developer by creating apps much faster than the prior custom extension approach.

Adobe provides an allocation of compute capacity for App Builder included with Adobe Commerce cloud licenses, which ensures that these applications are independently scalable and easily maintainable. With the out-of-the-box ecommerce APIs offered by Adobe Commerce, it becomes much easier for developers to use App Builder to use any third-party extension without impacting the performance of the database and to accelerate time to market.

Vikrant Shukla is currently working as a cloud solution architect (CSA) at Adobe. He manages the JAPAC region as CSA, supporting merchants and partners by leading solutions engineering and architecture through pre-customer technical discovery, planning, and solutioning for Adobe Experience Cloud — especially Adobe Commerce. Shukla has worked with Adobe for over four years. He formerly held the position of business solution architect in Adobe Consulting, where he was instrumental in successful digital transformation across different geographies for some of the most prominent Adobe customers.