fancy Development Software Development and Consulting .Net Day Switzerland 2024 Daniel Murrmann Backend for Frontend as a Gateway to the World of Microservices

Daniel Murrmann [email protected] Who am I? Technology Focus Frontend Backend Hosting Fullstack Trainer / Consultant / Coach at Angular Architects Founder of fancy Development - your partner for direct project support Project Support Coach/Consultant Implementation Helping customers on their very individual challenges with knowledge and hands on support.

fancy Development – Daniel Murrmann

fancy Development – Daniel Murrmann Monolith to Modules Flight System Module 1 Module 2 Module 3 Module 4 ? Backend for Frontend

fancy Development – Daniel Murrmann Domain Driven Design Backend for Frontend Strategic Design Decomposing a System Tactical Design Design Pattern & Practices

fancy Development – Daniel Murrmann Microservices … Backend for Frontend …Is an Architectural Pattern to Modularize Software Systems into independent Processes

fancy Development – Daniel Murrmann Decompose based on functions/features instead of technical layers DDD and Decomposition into Microservices UI Business Logic Data Access Data UI BL Feature 1 Data Classic Layered Architecture Feature 1 Feature 2 Feature 1 Feature 2 DA Feature 1 Microservice 1 BL Feature 2 Data DA Feature 2 Microservice 2 BL Feature n Data DA Feature n Microservice n ? Backend for Frontend

fancy Development – Daniel Murrmann Fully Vertical / Self-Contained Systems UI Feature 1 Data Data Data Feature 2 Feature n UI UI Shell Microservice 1 Microservice 2 Microservice n How to… ▪ do authentication and authorization? ▪ handle CORS? ▪ aggregate data if needed? ▪ make the Microservice API universal? ▪ optimize the Microservice API for the UI? Backend for Frontend

fancy Development – Daniel Murrmann The API Gateway/BFF Backend for Frontend API Gateway/BFF Microservice 1 Microservice 3 Microservice 2 Frontend Implement an API Gateway as a single entry point for your frontend. Advantages ▪ Loose Coupling ▪ Enhanced Performance ▪ Improved Security Data Center / Kubernetes / etc.

fancy Development – Daniel Murrmann The Big Picture Backend for Frontend API Gateway UI Authentication Authorization API Microservice API Microservice API Microservice API 3rd Party System View Based API General Purpose API UI UI Shell

fancy Development – Daniel Murrmann API Gateway vs. BFF Backend for Frontend What is a Backend for Frontend (BFF)? If the API Gateway knows about the individual needs of an individual frontend, fulfills this needs and work with this frontend hand in hand – we call it a Backend for Frontend.

fancy Development – Daniel Murrmann What we need! Backend for Frontend Features of a good API Gateway ▪ Reverse Proxy – pass through Data to specific Destinations ▪ Data Aggregation – optimized Responses / one request per view ▪ Data Caching – saving requests and I/O load ▪ Authentication – handling OAuth flow and Tokens

fancy Development – Daniel Murrmann Reverse Proxy

fancy Development – Daniel Murrmann Data Aggregation

fancy Development – Daniel Murrmann Data Caching

fancy Development – Daniel Murrmann Authentication

Integreating Libraries is a Complex Task

Its already Done!

fancy Development – Daniel Murrmann Reverse Proxy Backend for Frontend Client Flight Shopping localhost:5001 Gateway localhost:5100 Flight Management localhost:5000 http://localhost:5100/ api/flight-management/* http://localhost:5100/ api/flight-shopping/*

fancy Development – Daniel Murrmann Data Aggregation Backend for Frontend Client Flight Shopping localhost:5001 Gateway localhost:5100 Flight Management localhost:5000 http://localhost:5100/ api/views/home /api/flight-management/ flights/summary /api/flight-shopping/ flights/summary

fancy Development – Daniel Murrmann Data Caching Backend for Frontend Client Flight Shopping localhost:5001 Gateway localhost:5100 Flight Management localhost:5000 http://localhost:5100/ api/views/home /api/flight-management/ flights/summary /api/flight-shopping/ flights/summary Cache

fancy Development – Daniel Murrmann Authentication with BFF Backend for Frontend Client Flight Shopping Static Files (SPA) Gateway Flight Management SameSite + HTTP-only Cookie + XSRF Token Token Store Authentication Facade Authorization Server

fancy Development – Daniel Murrmann Backend for Frontend Thank you for joining

Thank you for sponsoring