SlideShare a Scribd company logo
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
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
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Microservices vs monolith 3
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
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
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
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
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
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;
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
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
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.
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
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
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
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.
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
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
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
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
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
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
micro-lc plugins 22
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
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
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
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
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
27
Start services
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)
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Configuration 29
⬡ /configuration
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
Configuration 30
⬡ /configuration
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
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
32
Configuration: plugins
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
33
Configuration: plugins
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
34
Configuration: plugins
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
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
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
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
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
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
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
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)
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
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}
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}
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)
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
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
48
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 />
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
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
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
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
53
<element-filter />
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
54
<element-filter />
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
55
<element-filter />
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
56
<element-filter />
event bus
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
57
<element-table />
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
58
<element-table />
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
59
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
60
⬡ /configuration/{configName}
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
61
⬡ /configuration/{configName}
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
62
<element-filter />
⬡ /configuration/{configName}
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
63
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
Mia-Platform
The information included in this document is strictly confidential. Any use must be approved by Mia-Platform.
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
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
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

More Related Content

Similar to Orchestrare Micro-frontend con micro-lc

IBM i Development: Increase Accuracy and Efficiency with SEQUEL's ABSTRACT a...
 IBM i Development: Increase Accuracy and Efficiency with SEQUEL's ABSTRACT a... IBM i Development: Increase Accuracy and Efficiency with SEQUEL's ABSTRACT a...
IBM i Development: Increase Accuracy and Efficiency with SEQUEL's ABSTRACT a...
HelpSystems
 
Open stack gbp final sn-4-slideshare
Open stack gbp final sn-4-slideshareOpen stack gbp final sn-4-slideshare
Open stack gbp final sn-4-slideshare
Sumit Naiksatam
 
Intro to GitOps with Weave GitOps, Flagger and Linkerd
Intro to GitOps with Weave GitOps, Flagger and LinkerdIntro to GitOps with Weave GitOps, Flagger and Linkerd
Intro to GitOps with Weave GitOps, Flagger and Linkerd
Weaveworks
 
Securing and automating your application infrastructure meetup 23112021 b
Securing and automating your application infrastructure meetup 23112021 bSecuring and automating your application infrastructure meetup 23112021 b
Securing and automating your application infrastructure meetup 23112021 b
lior mazor
 
Automatizovaná bezpečnost – nadstandard nebo nutnost?
Automatizovaná bezpečnost – nadstandard nebo nutnost?Automatizovaná bezpečnost – nadstandard nebo nutnost?
Automatizovaná bezpečnost – nadstandard nebo nutnost?
MarketingArrowECS_CZ
 
Scaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfScaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdf
KatamaRajuBandigari1
 
Platform governance, gestire un ecosistema di microservizi a livello enterprise
Platform governance, gestire un ecosistema di microservizi a livello enterprisePlatform governance, gestire un ecosistema di microservizi a livello enterprise
Platform governance, gestire un ecosistema di microservizi a livello enterprise
Giulio Roggero
 
Administering power platform deployment planning
Administering power platform deployment planningAdministering power platform deployment planning
Administering power platform deployment planning
Dipti Chhatrapati
 
Webinar Deck: Don't get stuck in the marketing cloud
Webinar Deck: Don't get stuck in the marketing cloud Webinar Deck: Don't get stuck in the marketing cloud
Webinar Deck: Don't get stuck in the marketing cloud
Ensighten
 
Mulesoft Connections to different companies, and different services
Mulesoft Connections to different companies, and different servicesMulesoft Connections to different companies, and different services
Mulesoft Connections to different companies, and different services
Byreddy Sravan Kumar Reddy
 
apidays LIVE New York 2021 - Simplify Open Policy Agent with Styra DAS by Tim...
apidays LIVE New York 2021 - Simplify Open Policy Agent with Styra DAS by Tim...apidays LIVE New York 2021 - Simplify Open Policy Agent with Styra DAS by Tim...
apidays LIVE New York 2021 - Simplify Open Policy Agent with Styra DAS by Tim...
apidays
 
Filterlab tutorial
Filterlab tutorialFilterlab tutorial
Filterlab tutorial
Claudia Antonio Urquidi
 
Cisco at v mworld 2015 shipped-vmworld
Cisco at v mworld 2015 shipped-vmworldCisco at v mworld 2015 shipped-vmworld
Cisco at v mworld 2015 shipped-vmworld
ldangelo0772
 
Kafka/SMM Crash Course
Kafka/SMM Crash CourseKafka/SMM Crash Course
Kafka/SMM Crash Course
DataWorks Summit
 
Extending Jenkins to the Mainframe. A Simpler Approach.
Extending Jenkins to the Mainframe.  A Simpler Approach.Extending Jenkins to the Mainframe.  A Simpler Approach.
Extending Jenkins to the Mainframe. A Simpler Approach.
DevOps.com
 
Microservices and the Modern IT Stack: Trends of Tomorrow - AppSphere16
Microservices and the Modern IT Stack: Trends of Tomorrow - AppSphere16Microservices and the Modern IT Stack: Trends of Tomorrow - AppSphere16
Microservices and the Modern IT Stack: Trends of Tomorrow - AppSphere16
AppDynamics
 
Managing multi-version applications in cics
Managing multi-version applications in cicsManaging multi-version applications in cics
Managing multi-version applications in cics
Matthew Webster
 
TRITON: How it Disrupted Safety Systems and Changed the Threat Landscape of I...
TRITON: How it Disrupted Safety Systems and Changed the Threat Landscape of I...TRITON: How it Disrupted Safety Systems and Changed the Threat Landscape of I...
TRITON: How it Disrupted Safety Systems and Changed the Threat Landscape of I...
Priyanka Aash
 
IMA/Thales SceneGate Viewer for OpenSimulator Presentation at OSCC19
IMA/Thales SceneGate Viewer for OpenSimulator Presentation at OSCC19IMA/Thales SceneGate Viewer for OpenSimulator Presentation at OSCC19
IMA/Thales SceneGate Viewer for OpenSimulator Presentation at OSCC19
Lisa Laxton
 
Csa summit 2017 - Plataforma de Seguridad para entornos Cloud
Csa summit 2017 - Plataforma de Seguridad para entornos CloudCsa summit 2017 - Plataforma de Seguridad para entornos Cloud
Csa summit 2017 - Plataforma de Seguridad para entornos Cloud
CSA Argentina
 

Similar to Orchestrare Micro-frontend con micro-lc (20)

IBM i Development: Increase Accuracy and Efficiency with SEQUEL's ABSTRACT a...
 IBM i Development: Increase Accuracy and Efficiency with SEQUEL's ABSTRACT a... IBM i Development: Increase Accuracy and Efficiency with SEQUEL's ABSTRACT a...
IBM i Development: Increase Accuracy and Efficiency with SEQUEL's ABSTRACT a...
 
Open stack gbp final sn-4-slideshare
Open stack gbp final sn-4-slideshareOpen stack gbp final sn-4-slideshare
Open stack gbp final sn-4-slideshare
 
Intro to GitOps with Weave GitOps, Flagger and Linkerd
Intro to GitOps with Weave GitOps, Flagger and LinkerdIntro to GitOps with Weave GitOps, Flagger and Linkerd
Intro to GitOps with Weave GitOps, Flagger and Linkerd
 
Securing and automating your application infrastructure meetup 23112021 b
Securing and automating your application infrastructure meetup 23112021 bSecuring and automating your application infrastructure meetup 23112021 b
Securing and automating your application infrastructure meetup 23112021 b
 
Automatizovaná bezpečnost – nadstandard nebo nutnost?
Automatizovaná bezpečnost – nadstandard nebo nutnost?Automatizovaná bezpečnost – nadstandard nebo nutnost?
Automatizovaná bezpečnost – nadstandard nebo nutnost?
 
Scaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfScaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdf
 
Platform governance, gestire un ecosistema di microservizi a livello enterprise
Platform governance, gestire un ecosistema di microservizi a livello enterprisePlatform governance, gestire un ecosistema di microservizi a livello enterprise
Platform governance, gestire un ecosistema di microservizi a livello enterprise
 
Administering power platform deployment planning
Administering power platform deployment planningAdministering power platform deployment planning
Administering power platform deployment planning
 
Webinar Deck: Don't get stuck in the marketing cloud
Webinar Deck: Don't get stuck in the marketing cloud Webinar Deck: Don't get stuck in the marketing cloud
Webinar Deck: Don't get stuck in the marketing cloud
 
Mulesoft Connections to different companies, and different services
Mulesoft Connections to different companies, and different servicesMulesoft Connections to different companies, and different services
Mulesoft Connections to different companies, and different services
 
apidays LIVE New York 2021 - Simplify Open Policy Agent with Styra DAS by Tim...
apidays LIVE New York 2021 - Simplify Open Policy Agent with Styra DAS by Tim...apidays LIVE New York 2021 - Simplify Open Policy Agent with Styra DAS by Tim...
apidays LIVE New York 2021 - Simplify Open Policy Agent with Styra DAS by Tim...
 
Filterlab tutorial
Filterlab tutorialFilterlab tutorial
Filterlab tutorial
 
Cisco at v mworld 2015 shipped-vmworld
Cisco at v mworld 2015 shipped-vmworldCisco at v mworld 2015 shipped-vmworld
Cisco at v mworld 2015 shipped-vmworld
 
Kafka/SMM Crash Course
Kafka/SMM Crash CourseKafka/SMM Crash Course
Kafka/SMM Crash Course
 
Extending Jenkins to the Mainframe. A Simpler Approach.
Extending Jenkins to the Mainframe.  A Simpler Approach.Extending Jenkins to the Mainframe.  A Simpler Approach.
Extending Jenkins to the Mainframe. A Simpler Approach.
 
Microservices and the Modern IT Stack: Trends of Tomorrow - AppSphere16
Microservices and the Modern IT Stack: Trends of Tomorrow - AppSphere16Microservices and the Modern IT Stack: Trends of Tomorrow - AppSphere16
Microservices and the Modern IT Stack: Trends of Tomorrow - AppSphere16
 
Managing multi-version applications in cics
Managing multi-version applications in cicsManaging multi-version applications in cics
Managing multi-version applications in cics
 
TRITON: How it Disrupted Safety Systems and Changed the Threat Landscape of I...
TRITON: How it Disrupted Safety Systems and Changed the Threat Landscape of I...TRITON: How it Disrupted Safety Systems and Changed the Threat Landscape of I...
TRITON: How it Disrupted Safety Systems and Changed the Threat Landscape of I...
 
IMA/Thales SceneGate Viewer for OpenSimulator Presentation at OSCC19
IMA/Thales SceneGate Viewer for OpenSimulator Presentation at OSCC19IMA/Thales SceneGate Viewer for OpenSimulator Presentation at OSCC19
IMA/Thales SceneGate Viewer for OpenSimulator Presentation at OSCC19
 
Csa summit 2017 - Plataforma de Seguridad para entornos Cloud
Csa summit 2017 - Plataforma de Seguridad para entornos CloudCsa summit 2017 - Plataforma de Seguridad para entornos Cloud
Csa summit 2017 - Plataforma de Seguridad para entornos Cloud
 

More from Commit University

Alla scoperta dei Vector Database e dei RAG
Alla scoperta dei Vector Database e dei RAGAlla scoperta dei Vector Database e dei RAG
Alla scoperta dei Vector Database e dei RAG
Commit University
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Commit University
 
Breaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdf
Breaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdfBreaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdf
Breaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdf
Commit University
 
Accelerating API Development: A Pit Stop with Gin-Gonic in Golang-Slide.pdf
Accelerating API Development: A Pit Stop with Gin-Gonic in Golang-Slide.pdfAccelerating API Development: A Pit Stop with Gin-Gonic in Golang-Slide.pdf
Accelerating API Development: A Pit Stop with Gin-Gonic in Golang-Slide.pdf
Commit University
 
Slide-10years.pdf
Slide-10years.pdfSlide-10years.pdf
Slide-10years.pdf
Commit University
 
Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...
Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...
Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...
Commit University
 
Vue.js slots.pdf
Vue.js slots.pdfVue.js slots.pdf
Vue.js slots.pdf
Commit University
 
Commit - Qwik il framework che ti stupirà.pptx
Commit - Qwik il framework che ti stupirà.pptxCommit - Qwik il framework che ti stupirà.pptx
Commit - Qwik il framework che ti stupirà.pptx
Commit University
 
Sviluppare da zero una Angular Web App per la PA
Sviluppare da zero una Angular Web App per la PASviluppare da zero una Angular Web App per la PA
Sviluppare da zero una Angular Web App per la PA
Commit University
 
Backstage l'Internal Developer Portal Open Source per una migliore Developer ...
Backstage l'Internal Developer Portal Open Source per una migliore Developer ...Backstage l'Internal Developer Portal Open Source per una migliore Developer ...
Backstage l'Internal Developer Portal Open Source per una migliore Developer ...
Commit University
 
Prisma the ORM that node was waiting for
Prisma the ORM that node was waiting forPrisma the ORM that node was waiting for
Prisma the ORM that node was waiting for
Commit University
 
Decision-making for Software Development Teams - Commit University
Decision-making for Software Development Teams - Commit UniversityDecision-making for Software Development Teams - Commit University
Decision-making for Software Development Teams - Commit University
Commit University
 
Component Design Pattern nei Game Engine.pdf
Component Design Pattern nei Game Engine.pdfComponent Design Pattern nei Game Engine.pdf
Component Design Pattern nei Game Engine.pdf
Commit University
 
Un viaggio alla scoperta dei Language Models e dell’intelligenza artificiale ...
Un viaggio alla scoperta dei Language Models e dell’intelligenza artificiale ...Un viaggio alla scoperta dei Language Models e dell’intelligenza artificiale ...
Un viaggio alla scoperta dei Language Models e dell’intelligenza artificiale ...
Commit University
 
Prototipazione Low-Code con AWS Step Functions
Prototipazione Low-Code con AWS Step FunctionsPrototipazione Low-Code con AWS Step Functions
Prototipazione Low-Code con AWS Step Functions
Commit University
 
KMM survival guide: how to tackle struggles between Kotlin and Swift
KMM survival guide: how to tackle struggles between Kotlin and SwiftKMM survival guide: how to tackle struggles between Kotlin and Swift
KMM survival guide: how to tackle struggles between Kotlin and Swift
Commit University
 
Da Vuex a Pinia: come fare la migrazione
Da Vuex a Pinia: come fare la migrazioneDa Vuex a Pinia: come fare la migrazione
Da Vuex a Pinia: come fare la migrazione
Commit University
 
Fastify has defeated Lagacy-Code
Fastify has defeated Lagacy-CodeFastify has defeated Lagacy-Code
Fastify has defeated Lagacy-Code
Commit University
 
SwiftUI vs UIKit
SwiftUI vs UIKitSwiftUI vs UIKit
SwiftUI vs UIKit
Commit University
 

More from Commit University (20)

Alla scoperta dei Vector Database e dei RAG
Alla scoperta dei Vector Database e dei RAGAlla scoperta dei Vector Database e dei RAG
Alla scoperta dei Vector Database e dei RAG
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Breaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdf
Breaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdfBreaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdf
Breaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdf
 
Accelerating API Development: A Pit Stop with Gin-Gonic in Golang-Slide.pdf
Accelerating API Development: A Pit Stop with Gin-Gonic in Golang-Slide.pdfAccelerating API Development: A Pit Stop with Gin-Gonic in Golang-Slide.pdf
Accelerating API Development: A Pit Stop with Gin-Gonic in Golang-Slide.pdf
 
Slide-10years.pdf
Slide-10years.pdfSlide-10years.pdf
Slide-10years.pdf
 
Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...
Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...
Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...
 
Vue.js slots.pdf
Vue.js slots.pdfVue.js slots.pdf
Vue.js slots.pdf
 
Commit - Qwik il framework che ti stupirà.pptx
Commit - Qwik il framework che ti stupirà.pptxCommit - Qwik il framework che ti stupirà.pptx
Commit - Qwik il framework che ti stupirà.pptx
 
Sviluppare da zero una Angular Web App per la PA
Sviluppare da zero una Angular Web App per la PASviluppare da zero una Angular Web App per la PA
Sviluppare da zero una Angular Web App per la PA
 
Backstage l'Internal Developer Portal Open Source per una migliore Developer ...
Backstage l'Internal Developer Portal Open Source per una migliore Developer ...Backstage l'Internal Developer Portal Open Source per una migliore Developer ...
Backstage l'Internal Developer Portal Open Source per una migliore Developer ...
 
Prisma the ORM that node was waiting for
Prisma the ORM that node was waiting forPrisma the ORM that node was waiting for
Prisma the ORM that node was waiting for
 
Decision-making for Software Development Teams - Commit University
Decision-making for Software Development Teams - Commit UniversityDecision-making for Software Development Teams - Commit University
Decision-making for Software Development Teams - Commit University
 
Component Design Pattern nei Game Engine.pdf
Component Design Pattern nei Game Engine.pdfComponent Design Pattern nei Game Engine.pdf
Component Design Pattern nei Game Engine.pdf
 
Un viaggio alla scoperta dei Language Models e dell’intelligenza artificiale ...
Un viaggio alla scoperta dei Language Models e dell’intelligenza artificiale ...Un viaggio alla scoperta dei Language Models e dell’intelligenza artificiale ...
Un viaggio alla scoperta dei Language Models e dell’intelligenza artificiale ...
 
Prototipazione Low-Code con AWS Step Functions
Prototipazione Low-Code con AWS Step FunctionsPrototipazione Low-Code con AWS Step Functions
Prototipazione Low-Code con AWS Step Functions
 
KMM survival guide: how to tackle struggles between Kotlin and Swift
KMM survival guide: how to tackle struggles between Kotlin and SwiftKMM survival guide: how to tackle struggles between Kotlin and Swift
KMM survival guide: how to tackle struggles between Kotlin and Swift
 
Da Vuex a Pinia: come fare la migrazione
Da Vuex a Pinia: come fare la migrazioneDa Vuex a Pinia: come fare la migrazione
Da Vuex a Pinia: come fare la migrazione
 
Fastify has defeated Lagacy-Code
Fastify has defeated Lagacy-CodeFastify has defeated Lagacy-Code
Fastify has defeated Lagacy-Code
 
SwiftUI vs UIKit
SwiftUI vs UIKitSwiftUI vs UIKit
SwiftUI vs UIKit
 

Recently uploaded

AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteAI Pilot Review: The World’s First Virtual Assistant Marketing Suite
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
Google
 
Graspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code AnalysisGraspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code Analysis
Aftab Hussain
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
lorraineandreiamcidl
 
Cracking the code review at SpringIO 2024
Cracking the code review at SpringIO 2024Cracking the code review at SpringIO 2024
Cracking the code review at SpringIO 2024
Paco van Beckhoven
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
mz5nrf0n
 
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket ManagementUtilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
Utilocate
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
SOCRadar
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j
 
Launch Your Streaming Platforms in Minutes
Launch Your Streaming Platforms in MinutesLaunch Your Streaming Platforms in Minutes
Launch Your Streaming Platforms in Minutes
Roshan Dwivedi
 
Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging  a  Tech AgencyPreparing Non - Technical Founders for Engaging  a  Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
ISH Technologies
 
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdf
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdfAutomated software refactoring with OpenRewrite and Generative AI.pptx.pdf
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdf
timtebeek1
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
kalichargn70th171
 
APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)
Boni García
 
May Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdfMay Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdf
Adele Miller
 
Enterprise Resource Planning System in Telangana
Enterprise Resource Planning System in TelanganaEnterprise Resource Planning System in Telangana
Enterprise Resource Planning System in Telangana
NYGGS Automation Suite
 
DDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systemsDDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systems
Gerardo Pardo-Castellote
 
A Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of PassageA Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of Passage
Philip Schwarz
 
SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024
Hironori Washizaki
 
Codeigniter VS Cakephp Which is Better for Web Development.pdf
Codeigniter VS Cakephp Which is Better for Web Development.pdfCodeigniter VS Cakephp Which is Better for Web Development.pdf
Codeigniter VS Cakephp Which is Better for Web Development.pdf
Semiosis Software Private Limited
 

Recently uploaded (20)

AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteAI Pilot Review: The World’s First Virtual Assistant Marketing Suite
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
 
Graspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code AnalysisGraspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code Analysis
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
 
Cracking the code review at SpringIO 2024
Cracking the code review at SpringIO 2024Cracking the code review at SpringIO 2024
Cracking the code review at SpringIO 2024
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
 
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket ManagementUtilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
 
Launch Your Streaming Platforms in Minutes
Launch Your Streaming Platforms in MinutesLaunch Your Streaming Platforms in Minutes
Launch Your Streaming Platforms in Minutes
 
Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging  a  Tech AgencyPreparing Non - Technical Founders for Engaging  a  Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
 
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdf
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdfAutomated software refactoring with OpenRewrite and Generative AI.pptx.pdf
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdf
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
 
APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)
 
May Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdfMay Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdf
 
Enterprise Resource Planning System in Telangana
Enterprise Resource Planning System in TelanganaEnterprise Resource Planning System in Telangana
Enterprise Resource Planning System in Telangana
 
DDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systemsDDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systems
 
A Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of PassageA Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of Passage
 
SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024
 
Codeigniter VS Cakephp Which is Better for Web Development.pdf
Codeigniter VS Cakephp Which is Better for Web Development.pdfCodeigniter VS Cakephp Which is Better for Web Development.pdf
Codeigniter VS Cakephp Which is Better for Web Development.pdf
 

Orchestrare Micro-frontend con micro-lc

  • 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