.NET Day 2024: Backend for Frontend as a Gateway to the World of Microservices

More info at: https://dotnetday.ch

Transcript

1. fancy Development Software Development and Consulting .Net Day Switzerland 2024 Daniel Murrmann Backend for Frontend as a Gateway to the World of Microservices
2. Daniel Murrmann daniel.murrmann@fancy-development.net 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.
3. fancy Development – Daniel Murrmann
4. fancy Development – Daniel Murrmann Monolith to Modules Flight System Module 1 Module 2 Module 3 Module 4 ? Backend for Frontend
5. fancy Development – Daniel Murrmann Domain Driven Design Backend for Frontend Strategic Design Decomposing a System Tactical Design Design Pattern & Practices
6. fancy Development – Daniel Murrmann Microservices … Backend for Frontend …Is an Architectural Pattern to Modularize Software Systems into independent Processes
7. 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
8. 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
9. 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.
10. 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
11. 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.
12. 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
13. fancy Development – Daniel Murrmann Reverse Proxy
14. fancy Development – Daniel Murrmann Data Aggregation
15. fancy Development – Daniel Murrmann Data Caching
16. fancy Development – Daniel Murrmann Authentication
17. Integreating Libraries is a Complex Task
18. Its already Done!
19. 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/*
20. 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
21. 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
22. 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
23. fancy Development – Daniel Murrmann Backend for Frontend Thank you for joining
24. Thank you for sponsoring