I micro-frontend sono uno degli argomenti più interessanti nel mondo frontend dell'ultimo periodo ma nonostante la loro popolarità, non esistono delle linee guida comuni per svilupparli. micro-lc risponde a questa esigenza e permette di raccogliere in un unico applicativo tanti micro-frontend, orchestrandoli e rendendoli parte della stessa applicazione e non più componenti singoli, scollegati e sconnessi.

1. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.

2. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
2
Benvenuti!
NICE TO MEET YOU!
I’m Michel Murabito
Developer Advocate

3. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Microservices vs monolith 3

4. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Microservices vs monolith 4
Frontend Microservices
API
Gateway

5. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Microservices vs monolith 5
Frontend Microservices
API
Gateway

6. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Microservices vs monolith 6
Frontend Microservices
API
Gateway

7. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Microservices vs monolith 7
Frontend Microservices
API
Gateway

8. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Microservices vs monolith 8
Frontend Microservices

9. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
What are Micro-Frontends? 9
The concept of micro-frontends extend the microservices architecture to the frontend world.
⬡ The current trend is to build single browser applications on top of a
microservice architecture (Frontend Monolith);
⬡ With micro-frontends, websites or web apps are built as a
composition of features owned by different teams that work
independently;
⬡ Each team has a distinct area of expertise where it specialises in,
while a cross functional team develops end-to-end features, from
database to user interface;
⬡ This approach is gaining consensus and momentum as it enables
new possibilities for frontend development;

10. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Micro-Frontends Benefits 10
The micro-frontend architectural style brings various benefits:
Culture of
automation
Decentralisation Failure isolation
Modelling
around business
domains
Independent
deploy
Hidden
implementation
details

11. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Defining Micro-Frontends 11
Horizontal Vertical
Micro-frontends can be defined inside the same view or for a specific area of the application.
Team A Team B
Team C
Team A Team B

12. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Defining Micro-Frontends 12
Horizontal
Header (Team A)
Content
(Team B)
Footer (Team C)
Vertical
Team A Team B
Header
Footer
Content Slideshow
Header
Form
Micro-Frontends can be defined inside the same view or for a specific area of the application.

13. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
13
Horizontal
Header (Team A)
Content
(Team B)
Footer (Team C)
Vertical
Team A Team B
Header
Footer
Content Slideshow
Header
Form
element-composer
micro-lc is the open source tool by Mia-Platform to develop your own micro-frontend application.
Developing Micro-Frontends with micro-lc

14. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
14
Developing Micro-Frontends with micro-lc

15. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
15
Horizontal
Header (Team A)
Content
(Team B)
Footer (Team C)
Vertical
Team A Team B
Header
Footer
Content Slideshow
Header
Form
element-composer
micro-lc is the open source tool by Mia-Platform to develop your own micro-frontend application.
Developing Micro-Frontends with micro-lc

16. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
⬡ Orchestrator: manage analytics, users data,
plugins, error pages, assets and customizations.
⬡ Quick editing: with runtime integration, edit only
your configuration files and deploy your
micro-frontends in no time.
⬡ Secure: built-in authentication process through
configuration file.
⬡ Plugin-to-Plugin communications: thanks to
Qiankun framework, plugins are not isolated, as
it happens with iFrame, and talk to each other.
Orchestrate your micro-frontends with micro-lc 16
micro-lc is an open-source component that contains and orchestrates your micro-frontend architecture.

17. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
How does micro-lc work? 17
micro-lc
Runtime
integration
Backend
Container
Fe-container
/authentication
/configuration
Plugin
Extension/
Configuration
Runtime Integration
Plugin
Backend
Plugin
Plugin
Extension/
Configuration
Runtime Integration
Plugin
Backend
Plugin
Plugin to plugin
communication

18. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
The be-config exposes the endpoints used to configure the
fe-container:
⬡ /authentication
⬡ /configuration
⬡ /configuration/{element}
Orchestrate your micro-frontends with micro-lc 18

19. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
micro-lc bootstrap 19
⬡ /authentication
⬡ /configuration

20. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
micro-lc bootstrap 20
⬡ /authentication
⬡ /configuration

21. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
micro-lc bootstrap 21
⬡ /configuration
⬡ /authentication

22. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
micro-lc plugins 22

23. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
micro-lc plugins 23
⬡ /configuration/{element}
PLUGIN
/react-app-1
host:3001

24. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
micro-lc communication #1 24
PLUGIN
/react-app-1?id=1
host:3001?id=1

25. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
micro-lc communication #2 25
PLUGIN
/react-app-1
host:3001
local storage

26. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Search micro-lc on GitHub
github.com/micro-lc

27. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
27
Start services

28. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
The main composition of micro-lc 28
The micro-lc front-end can be technically divided in two essential elements:
The UI
(orange)
The
orchestrator
(green)

29. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Configuration 29
⬡ /configuration

30. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Configuration 30
⬡ /configuration

31. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
plugins
⬡ plugins it’s required
⬡ The list of the plugins to render. It contains
information on how to integrate the plugins in
micro-lc
Configuration: plugins 31

32. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
32
Configuration: plugins

33. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
33
Configuration: plugins

34. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
34
Configuration: plugins

35. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
35
Configuration: plugins
Other integrationMode
⬡ href
⬡ iframe

36. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
internalPlugins
⬡ internalPlugins it’s optional
⬡ The list of the plugins that will be registered, but
will not appear on the menu. It contains
information on how to integrate the plugins in
micro-lc.
Configuration: internalPlugins 36

37. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
How to create a plugin: lifecycle hooks 37
PLUGIN

38. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
38
How to create a plugin: lifecycle hooks

39. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
39
How to create a plugin: lifecycle hooks

40. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
40
How to create a plugin: bundler

41. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
41
Horizontal
Header (Team A)
Content
(Team B)
Footer (Team C)
Vertical
Team A Team B
Header
Footer
Content Slideshow
Header
Form
element-composer
micro-lc is the open source tool by Mia-Platform to develop your own micro-frontend application.
Developing Micro-Frontends with micro-lc

42. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Web Components
42
Horizontal
element-composer
micro-lc is the open source tool by Mia-Platform to develop your own micro-frontend application.
Developing Micro-Frontends with micro-lc
Header (Team A)
Content
(Team B)
Footer (Team C)
(You can use any Web Component library)

43. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
(You can use any Web Component library)
43
Horizontal
element-composer
micro-lc is the open source tool by Mia-Platform to develop your own micro-frontend application.
Developing Micro-Frontends with micro-lc
Header (Team A)
Content
(Team B)
Footer (Team C)
Web Components

44. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
44
micro-lc element-composer
⬡ /configuration/{configName}

45. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
45
micro-lc element-composer
element-composer
it allows multiple micro frontend per page
(through web component)
⬡ /configuration/{configName}

46. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
⬡ /configuration/{configName}
46
micro-lc element-composer
Web Components
(and any HTML tags)

47. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
47
⬡ /configuration/{configName}
micro-lc element-composer
event bus
(RxJS)
local storage

48. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
48

49. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
49
<element-filter />
<element-detail />
<element-table />

50. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
50
event bus
don’t process
the message
process the
message

51. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
51
event bus
process the
message
send message

52. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
52
⬡ styles
It contains CSS, which is applied to the web component
⬡ properties
It contains the properties definition
⬡ constructor
Used to initialize the web component
⬡ render
It contains HTML of our web component
⬡ _onClick & sayHello

53. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
53
<element-filter />

54. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
54
<element-filter />

55. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
55
<element-filter />

56. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
56
<element-filter />
event bus

57. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
57
<element-table />

58. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
58
<element-table />

59. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
59

60. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
60
⬡ /configuration/{configName}

61. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
61
⬡ /configuration/{configName}

62. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
62
<element-filter />
⬡ /configuration/{configName}

63. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
63

64. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Search micro-lc on GitHub
github.com/micro-lc

65. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.

66. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Q&A - Feedback & Resource 66
bit.ly/feedback-mich
⬡ micro-lc
github.com/micro-lc
⬡ micro-lc element composer
github.com/micro-lc/micro-lc-element-composer
⬡ Lit Web Components
github.com/akelity/webcomponents-test-elements

67. Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Two OSS projects 67
https://github.com/kube-green https://github.com/rond-authz

68. The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Thanks!
www.mia-platform.eu
Via Imbonati 18, MAC7
20159 Milano
info@mia-platform.eu
Michel Murabito
Developer Advocate
Mia-Platform
michel.murabito@mia-platform.eu