Integrate the user interface with APIs

Decoupling frontend and backend: with a clear separation between frontend and backend, developers can work in parallel and not interfere with each other. The result is a higher speed of development, as Controllers are not attached to any specific Views anymore.

Getting started

In an era of digital transformation and journey to cloud offerings, the current IT world is faced with challenges and is also reaping benefits. By embracing digital transformation, distributed business model processes and services are brought together. The underlying IT systems engage with different technologies to work together in a seamless way by adapting the API-led connectivity approach. This is where API integration comes in and aligns with different UI or any external system integration patterns.

Integration patterns

Server-side page fragment composition: Backend systems may have series of fine-grained APIs available to be consumed. As we progress, we need some business capabilities to get the aggregation of data consumed. Coarse-grained APIs or pages can collaborate and include all the distributed APIs grouped as one single subdomain or business capability. This way, the API client will be required to make only a single call to such a group.

When you need a front-end service to compose the pages, each API (or microservice) can have its own HTML fragments. All these fragments can have the same vocabulary for CSS, JS and so on. This approach may take more time initially but will be a more versatile and easily deployable API. This way, an independent API will be treated as a separate component or product and Angular Universal, Next.js, Nuxt.js, and so on are a couple popular tools used to develop such deliverables.

Client-side UI composition: As the API services are fragmented, UI is responsible to group them using page-skeletons that builds UI pages by composing multiple, service-specific UI components. The UI components directive (for example, Angular 2+, React.js, Vue.js) will call all APIs or series of APIs and set the priority order before it is available to the end user. The UI components can create façade edge services internally which can integrate with the backend API.

Hybrid (server + client-side) UI composition: Alternatively, a complete UI application can be built on top of the backend APIs. This will lead to a monolithic UI application with tighter UI but a better flow. GraphQL has emerged as a technique which directly calls to REST. This means it may eliminate the need for REST while calling backend APIs in some cases. Angular GraphQL, Apollo GraphQL, React Relay are some tools that simplify App development by combining APIs, databases, and microservices into a single data graph.

API gateway: Single entry point in the backend from different types of clients or any external request to consume any API, the API gateway is most popular pattern. To promote the mobile-first aspect in cloud concept, the IT ecosystem receives a request to integrate with one single API in many ways and from many clients or devices. API gateway is the standard that handles all types of requests and as per the policy, routing, and security-key enablement, API or microservices receive the request to execute.

For the API gateway to achieve better throughput, highly cohesive, low coupling and distributed architecture, is preferred so that each API service can accomplish something as expected.

Backend for frontend (BFF): The segregation of API calls or client requests strategy are managed at the intermediate layer before calling out any fine-grained APIs to execute and serve the response usually referred to as BFF. This could be for many scenario-based segregations, but it is primarily categorized by web API, mobile API, third-party public API, and so on. This is an extension of the API gateway by separating concerns based on the type of requests.

Client-side service discovery: When dealing with several microservices across the ecosystem, you usually register all fine-grained APIs with the service registry. The client-side as well as the server-side service registry ensures uninterrupted integration with UI even if the UI changes rapidly within the same microservices or APIs. While making a request to API services, the client obtains the real URI and location of such API services by querying a service registry.

REST client: Nowadays, as there are more mature web browsers to perform and interact with the backend services, many web browsers work as a REST client tool. This browser is compatible to send the desired payload while making an API call. This way the API integration model is achieved, and the API status and health check are tested.

Point-to-point Integration using REST template (low-level APIs): When using REST based communication and integration model, UI typically focuses on one API, but the same API calls another one internally. It is point-to-point integration over the REST template methods and communication protocols. Note that, this model is least recommended and superseded by messaging channel model.

Messaging channel: As enterprises grow, the demand for business capabilities to be mapped with the IT ecosystem grows simultaneously. Multiple microservices collaboration can be achieved via the pub-sub model and event-driven architecture style. This leads to define event-driven architecture (EDA) underlined with event sourcing and event bus strategy. This way, any two APIs or microservices can collaborate and communicate seamlessly after one-time subscribing to the event bus. This messaging model also promotes the asynchronous way of communication between one publisher and many subscribers.

Similarly, there is the messaging-queue based two-way direct communication protocol model that fits in one-to-one asynchronous full-duplex communication between a client and a server. Unlike typical HTTP connections, web socket protocol is long-lived. Web browser exposes all the necessary client-side functionalities through the WebSocket object.

• Enterprise to API integration: Today’s enterprises need to reduce complexity, particularly at the IT integration level. API comes in handy here; as each API provides a code that enables communication between software programs. API integration is a way to connect enterprise private cloud, enterprise to enterprise public cloud, mobile chatter or SaaS and on premises applications as well as third-party applications. This is to achieve end-to-end communications seamlessly using the integration platform as a service (iPaaS) or middleware integration tool bounded by firewalls.
• Expose on premises assets with APIs: APIs enable legacy assets that are difficult to be cloud-enabled. To proceed with hybrid infrastructure where the client-facing applications can be modernized and switched to cloud deployment but need to establish the communication with legacy on premises applications at the same time. This way, end-to-end integration needs to interact with external firewalls or DMZ as well as internal firewalls along with the secret key tooling concept.
• System of record (SOR) designed to be a system of engagement (SOE): System of engagement is a collaborating system which ensures the required data availability is underlined by backend API integration. The system of interaction (SOI) or insight exposes API endpoints and integrates SOR with SOE. One cohesive offering serving all integration needs that is connect seamlessly, develop rapidly, and scale efficiently.

For example, over time, legacy mainframe green screen (SOR) concept is now being replaced by workday (SOE) tool.

• This shift is to collaborate the user data directly to engage with the user’s format and demand. Here, client facing app or social media applications interact with the SAP-based backend system over the API-led connectivity approach and gets engaged to fetch the information as needed.