Micro Frontends Architecture is micro service approach for Frontend development. Micro Frontends thinks web-app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in it. A team is cross functional and develops its features end-to-end, from database to user interface and take care of CI/CD. Micro service architechure is well know concept for backend point of view but In frontend we need to follow diffrent type of design pattern to achieve this. Key Take away: 1. Learn about Micro Frontend 2. How to practically use them 3. Key challenges

1. 1CONFIDENTIALCONFIDENTIAL © Guavus, Inc. All rights reserved.
Micro Frontends Architecture
JitendraKumawat

2. 2CONFIDENTIAL
About Me
› Works at Guavus as a Lead Technology
› 8+ years of industry experience in different roles
› Like to explore and work on new technologies
› Expertise in Frontend development with different technologies

3. 3CONFIDENTIAL
Agenda
› Evolution of WebApps
› Frontend Architecture
› Micro Frontends
› Case study
› Challenges of Micro Frontends
› Key Take Away

4. 4CONFIDENTIAL
Evolution of WebApps

5. 5CONFIDENTIAL
Evolution of WebApps
Server Side Render Client Side Render Frontend Architecture

6. 6CONFIDENTIAL
Serve side render

7. 7CONFIDENTIAL
Serve side render
› HTML File in server
› Display in Browser
› Slow page
rendering
› Static sites
WordPress
› Non-rich site
interactions

8. 8CONFIDENTIAL
Client side render

9. 9CONFIDENTIAL
Client side render
› Rendering using
JavaScript.
› Rich site interactions
› Robust selection of
JavaScript libraries
› Great for web
applications

10. 10CONFIDENTIAL
SSR vs CSR

11. 11CONFIDENTIAL
Frontend Architecture

12. 12CONFIDENTIAL
Frontends Architecture
MONOLITHIC Frontends MICRO Frontends

13. 13CONFIDENTIAL
Monolithic Frontend Architecture
› Simple to
Develop
› Simple to
Debug
› Simple to
Test

14. 14CONFIDENTIAL
Monolithic Frontend with Micro services Architecture

15. 15CONFIDENTIAL
Monolithic Architecture Cons
› Difficult to Develop, Test and Deploy for large applications
› Upgrade technology stack
› Large Team management to support

16. 16CONFIDENTIAL
Then what next ?

17. 17CONFIDENTIAL
Then what next ?

18. 18CONFIDENTIAL
Micro Frontends

19. 19CONFIDENTIAL
Micro Frontend Architecture
› Inspired By Micro
service
Architecture
› Microservices are
loosely coupled
independent
services
› Micro Frontends
are web
components or
sub-modules

20. 20CONFIDENTIAL
Micro Frontend Architecture

21. 21CONFIDENTIAL
Core Ideas of Micro Frontends
› Be Technology
Agnostic
› Isolate Team Code
› Flexible development
› Improved fault
isolation
› Scaling potential
› Ease in CI/CD

22. 22CONFIDENTIAL

23. 23CONFIDENTIAL
Build micro front end concepts

24. 24CONFIDENTIAL
Design Analysis
› Isolate code base
› Avoid CSS conflicts
› Load resources
› Share common resources

25. 25CONFIDENTIAL
Create Micro Apps
› Product Header
App
› Product View
App
› Product Cart
App
› Main App

26. 26CONFIDENTIAL
Create Component
› Create a component

27. 27CONFIDENTIAL
Define Custom Web Element
› Builds component using their web technology of choice and wraps it inside a
Custom Element

28. 28CONFIDENTIAL
Communication between Web Components
› Expose component properties as per framework support

29. 29CONFIDENTIAL
Communication between Web Components
› The DOM specification of particular element (tag-name, attributes & events)
acts as the contract or public API

30. 30CONFIDENTIAL
Build and Publish as Module
Build the micro frontend application to reusable module/packaged as similar to any
Angular modules.
› Build
› Packaging
› Publish

31. 31CONFIDENTIAL
Integrate Micro Apps into Main App
› Add
dependency
› Import Module
› Create Template
› Build Application
› Run Application

32. 32CONFIDENTIAL
What did we achieve?
› Each micro app is ready to run stand alone
› Main is integrated with Web components
› Main app and micro apps can be deployed and published stand alone

33. 33CONFIDENTIAL
Another Ways
› Create Single-SPA with multiple frameworks like React,Vuejs
› Multiple single-page apps that live at different URLs.
› Custom Elements + Server Side Includes using SSI/ESI
› Use IFrames using libraries and Window.postMessage APIs to coordinate

34. 34CONFIDENTIAL
Companies

35. 35CONFIDENTIAL
Challenges
› Consistent look and feel
› Communication
between micro
frontends applications
› Complexity
› Browser Support of
Custom Elements

36. 36CONFIDENTIAL

37. 37CONFIDENTIAL
› Evolution of webapps
› Micro Frontends Architecture
› Key challenges
Key Take Away

38. 38CONFIDENTIAL
Connect Me
› LinkedIn : https://www.linkedin.com/in/jitendra-kumawat-a9486924/
› Email: kumawat.itbhu@gmail.com
› Source code reference (https://github.com/learnfrontend-dc/productmgt)
› Micro Frontends details (https://micro-frontends.org/)

39. 39CONFIDENTIAL
Thanks