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.
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
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
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
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
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
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
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}
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
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