Learn about the key features of a micro frontend platform, including role management and authentication using Keycloak, implementing micro frontends with microservices, communication between micro frontends, code reuse, and polyglot frontend development. These basics will allow developers to get started using the Entando platform at docs.entando.com.

1. 5 Key Steps To
Implementing A
Micro Frontend
Platform for
Kubernetes

2. MICRO FRONTENDS

3. MICRO FRONTENDS
Monolith SOA Microservices
Micro-
service
Micro-
service
Micro-
service
Micro Frontends
Micro-
service
Micro-
service
Micro-
service
Micro
Frontend
Micro
Frontend
Micro
Frontend
API GATEWAY API GATEWAY / BFFS
BASE APP
FrontendBackend

4. MICRO FRONTENDS
Sign in form
KUBERNETES
ENTANDO
API
GATEWAY
MS MS MS
API REST
External service connection
Micro Service
External DB connection
Micro Frontend
(React, Java, Angular)
Database
UX DESIGN EXAMPLE LAYOUT

5. KEY BENEFITS
TL
DM
DEV
DEV
DEV
DEV
DEV
DEV
BA
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
TL
BA
DEV
DEV
DEV
DEV
DEV
DEV
Sign in form
Large
Team
• Huge, interconnected
codebase
• Complex delivery processes
• Test all application against any
small change
• Refactoring nightmare
• Hard to work on performance
and scaling

6. TEAM STRUCTURE
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
DEV
TL
DM
BA
321
1 2 3
• Light, independent
software components
• Independent agile dev
teams
• Isolated, decoupled testing
• Easier to maintain
• Can leverage k8s to work
on scaling and performance

7. OUR CLIENT: SEED BANK

8. THE SEED BANK CASE

9. THE SEED BANK CASE

10. THE SEED BANK CASE

11. ENTANDO AND
KEYCLOAK
1

12. ENTANDO AND KEYCLOAK
Open Source Identity and Access Management Solution
Part of Entando Setup
Authentication
Authorization
Session Management
Audit

13. ENTANDO AND KEYCLOAK
•Standard Protocols (OpenID Connect,
OAuth 2.0 and SAML 2.0)
•SSO
•Identity Brokering
•Social Login
•User Federation

14. ENTANDO AND KEYCLOAK
•Minimum effort to integrate in
your widgets
•Easy to configure via web
panel
•Automatic management of
users and roles with Entando
•Scalability and Performance
Micro
FrontendMicro
FrontendMicro
Frontend
Entando

15. ENTANDO AND KEYCLOAK
Routing on page
Entando
Entando
Redirect to KC + returnUrl
Check authentication + returnUrl
Login page + auth cookie + returnUrl
Login submit + auth cookie + returnUrl
Routing on page + auth cookie validated
Response
Redirect to returnUrl + auth cookie validated
Route is
protected
Client is not authenticated
Login data are correct
Validate auth cookie
Client
Client

16. SEED BANK
MICRO FRONTENDS
2

17. FRONTENDS DECOMPOSITION
Sign in form
KUBERNETES
ENTANDO
API
GATEWAY
MS MS MS
API REST
External service connection
Micro Service
External DB connection
Micro Frontend
(React, Java, Angular)
Database
UX DESIGN EXAMPLE LAYOUT

18. LOGIN / SIGNUP
• Finite and closed functionality
• Distinct Business Value
• Exclusive Ownership of its
Data
• Can be developed
autonomously

19. THE DASHBOARD
Summary
Card
Notifications
Transaction
Table

20. LOGIN / SIGNUP
API GATEWAY
MS
Entando
MS MS
Database
LoginSignup Forgot
Pwd

21. SUMMARY CARD
1
MS
Micro Frontend
(React, Java, Angular)
API REST

22. TRANSACTION TABLE
1
MS
Micro Frontend
(React, Java, Angular)
API REST

23. NOTIFICATIONS
API GATEWAY
Entando
1
API REST
External service connection

24. THERE IS NOT A SINGLE WAY
•Dev Teams Independency
•Scaling and Deployment
•Go to Market Strategy
•Resiliency
•Business Value
•Data Access
•Third Party Integrations

25. COMMUNICATION
3

26. TALKING TO EACH OTHER

27. CUSTOM EVENTS
Custom Event
Listener

28. CUSTOM EVENTS
Widgets can communicate through Custom Events
The seeds_card widget fires a custom event, 'seedscard.transactionsDetail':
const widgetEvent = new CustomEvent('seedscard.transactionsDetail', {
detail: {
payload: {
cardname: <cardname>,
accountID: <accountID>
}
},
});
where <cardname> is the name of one of the cards among 'checking', 'savings' or 'creditcard', and <accountID> is the id of the account
related.
The seedscard-transaction-table widget has an event listener for 'seedscard.transactionsDetail' events.
When the listener catches the event, it's made an API call using the <cardname> and the <accountID> parameters

29. REUSE OF MFEs
4

30. REUSE OF MFEs
1
MS
Micro Frontend
(React, Java, Angular)
API REST

31. MFE CONFIGURATION PANEL

32. MFE LANGUAGE
INDEPENDENCE
5

33. MFE LANGUAGE INDEPENDENCE
React
Angular
Vue

34. ENTANDO COMPONENT
REPOSITORY
6

35. ENTANDO COMPONENT REPOSITORY
32
Sign in form
UX DESIGN EXAMPLE LAYOUT
1
UX COMPONENT
1 2 3
MICRO COMPONENT
DESIGN SYSTEM
ENTANDO
COMPONENT
REPOSITORY

36. ENTANDO COMPONENT REPOSITORY
Pages Page Template Content Type Widget Plugin Fragments
Bundle

37. ENTANDO COMPONENT REPOSITORY

38. github.com/entando
www.entando.com
info@entando.com
twitter.com/entando
facebook.com/Entando
slideshare.net/Entando
Read the latest news on the Entandoblog: www.entando.com/page/dxp_blog
linkedin.com/company/entando
www.youtube.com/c/EntandoVideos