Exploring App Builder: A Magento Developer's Perspective.

What is App Builder

When we, as Magento developers, encounter the term "App Builder," our initial thought might be related to building iOS or Android applications. However, Adobe's App Builder is not designed for typical mobile apps.

In Adobe's context, the term "App Builder" refers to a comprehensive framework that empowers enterprise developers to create and deploy customized web applications, enhancing Adobe Experience Cloud solutions.

Now, a natural question arises: What's the connection between Magento and "Adobe Experience Cloud"? To grasp the significance of App Builder, let's gain a brief understanding of "Adobe Experience Cloud."

What is "Adobe Experience Cloud"

• Adobe Experience Cloud enhances customer experiences by personalizing journeys and enhancing the entire customer journey through data insights.
• Customer data is sourced from various channels including CRM, ERP, point of sale, and customer support or call center data etc..
• To ensure a comprehensive customer profile, integration of all this data is essential. This is why the Experience Platform is designed to be open and flexible, enabling seamless integration with diverse data sources.
• So Basically, Adobe Experience Cloud offers essential tools for collecting, aggregating, personalizing, and reporting customer data. This is achieved through APIs and interactive dashboards, enabling efficient data gathering, processing, and interpretation to enhance interactions and provide outstanding customer experiences.

Additionally, it allows the development of custom apps where you can extend the existing capabilities of adobe experience cloud as per your business needs.

All good but still how does Magento benefits from extending the adobe experience cloud capabilities ? To understand this lets see the Capabilities of App Builder

Capabilities of App Builder

With the app builder primarily we can create app that falls in to the below 2 category

• Single Page Application
  • Create cloud native apps that combine functionality from multiple Adobe or third party applications.

• Microservices 
  • Develop microservices to establish connections between different platforms and solutions.
  • App Builder plays a pivotal role here, lightening the load of Magento's monolithic structure by transferring numerous backend processes and services typically found in Magento for third-party integrations.
  • The core objective of App Builder for Magento seems to shift the system towards a microservices architecture, departing from the current monolithic approach.
  • More insights on this will be explored in subsequent sections.

How to Create the App using App Builder

Using the app builder, you can have your sample "hello world" application deployed for your organization by following these steps:

1. Configure the app within the Developer Console.
2. Utilize the Adobe AIO command line tool to set up the app locally, write code, and deploy the application.

Where its Deployed

The App Builder app is built on React Spectrum, a serverless platform known for excellent scalability. There's no need to concern yourself with capacity planning or the deployment and management of these applications, as all of this is seamlessly handled by Adobe's infrastructure.

After undergoing review and receiving approval, the app finds its place alongside Adobe Experience Cloud apps. You retain control over the published applications specific to your company, ensuring that these apps are exclusively visible within your organization.

App Builder Use Case for Magento

Suppose you wish to transmit order data to the following third-party systems after an order is placed:

• Order Management System
• Analytics Systems
• Reporting Tools
• Enterprise Messaging Platforms
• Etc.

The general approach involves synchronously or asynchronously pushing relevant order data from Magento to the respective systems. This process includes the following steps:

1. Formatting the order data based on the specific third party.
2. Setting up separate cron jobs for each integration.
3. Implementing a fallback mechanism.
4. Incorporating a retry mechanism.
5. Establishing error notifications.

However, through the App Builder implementation outlined in the below image, many of the tasks typically performed within Magento can be streamlined. In this approach, Magento's primary responsibility is to transmit order data to the App Builder. The App Builder then handles the remaining activities, effectively reducing the workload on Magento.

App Builder Components:

UI Framework - Spectrum:

• Spectrum is a custom React framework with Adobe's internal UI library.
• Applications built with Spectrum have the same look and feel as Adobe apps.
• Enables building single-page applications seamlessly integrated with Adobe tools.

Custom Events

• You can utilize events to address asynchronous scenarios in your development.
• With Adobe Commerce integration, you gain immediate access to a vast collection of over 700 Native events, eliminating the need to write any code.
• These events come pre-built with App Builder and can be harnessed to construct intricate workflows and synchronize data with external systems, such as ERPs, order management systems, PIMs, or any other external system integrated alongside your Commerce platform.

App Builder Application Architecture

The architecture of a single-page application built using App Builder is straightforward:

• Static Assets and CDN Hosting:
  • The application's static assets are hosted in a Content Delivery Network (CDN).
  • CDN hosting is part of the App Builder package.
• Node Server:
  • The serverless code runs on the Node.js layer.
  • This Node server layer communicates with various backend services.
• Integration Possibilities:
  • Interaction with Adobe public APIs.
  • Connectivity to third-party APIs (up to 30).
  • Utilization of data storage, file systems, and custom events.
  • Option to incorporate custom APIs.

This architecture mirrors a multi-tier setup typical in web development, including single-page applications. With App Builder, you have the potential to create a wide range of applications, leveraging the integrated components and tools provided.

Extending Adobe Commerce with App Builder

Middleware Extensibility: Building Integrations and Streamlining Data Exchange

The concept of "middleware extensibility" involves building integrations between Adobe Commerce and external systems. This applies to a wide range of customers since most operate alongside various systems such as ERPs, pricing engines, and more. Integrating these diverse systems with Adobe Commerce is common and crucial.

• Common Integration Scenario:
  • Integrating Adobe Commerce with external systems is a frequent need.
  • These systems could include ERPs, pricing engines, order management, and more.
  • Middleware extensibility is highly relevant, especially in complex environments.
• Simplified Integration with App Builder:
  • App Builder simplifies middleware extensibility compared to previous approaches.
  • Leveraging App Builder, API Mesh, and Commerce events streamlines the process.
• Abundance of Commerce Events:
  • Over 700 Commerce events available out of the box.
  • Events can be configured to trigger actions within App Builder.
• Building Connectors and Middleware:
  • App Builder allows building connectors and middleware.
  • Custom logic can be developed to translate data between Adobe Commerce and external systems.
• Two-Way Data Flow:
  • External systems can send events to App Builder.
  • App Builder can consume these events and process data for further actions.

In summary, middleware extensibility facilitated by App Builder offers a comprehensive solution for integrating Adobe Commerce with various external systems. The availability of Commerce events and the capabilities of App Builder simplify the creation of connectors and middleware to enable seamless data exchange and functionality between different systems.

Core Service Extensibility

We have APIs available from various sources:

• Core Commerce application APIs
• SAS Services in Adobe Commerce, including live search, product recommendations, and more
• Adobe Payments Services
• Third party api's

These services offer their own APIs, with a mix of GraphQL and REST. For instance, using the search service involves direct interaction with its GraphQL API. Similar point-to-point integration applies to the recommendation API. In complex scenarios like storefront development, multiple APIs (potentially 10-20) could be used, each with varying technologies and extensibility options.

App Builder unifies these APIs into a single GraphQL schema, simplifying the process of constructing your desired experience. Beyond consolidating a federated graph of services, App Builder equips you with tools for extending any APIs. This includes implementing custom logic, such as pre- and post-processing, and directly creating custom resolvers. This approach streamlines development, eliminating the need to modify underlying core services.

User Experience Extensibility

App Builder serves user experience extensibility by functioning as a React framework for building single-page applications (SPAs). An upcoming JavaScript SDK will seamlessly integrate these SPAs into Adobe Commerce's back office. This entails creating back office screen apps within App Builder, installing them in your account, and configuring where they appear. This integration empowers you to enhance the back office user experience by injecting custom applications directly into Adobe Commerce. The process maintains the existing authentication and user access setup for a seamless extension.

Reference:

• https://www.youtube.com/watch?v=1oYpur9JSNI