This document discusses micro front-ends, which are the technical representation of a business subdomain in a microservices architecture. It covers the principles of micro front-ends such as modeling around business domains and decentralization. Implementation techniques discussed include using HTTP/2, a publish/subscribe communication method between micro front-ends, and edge server includes. Frameworks for building micro front-ends like Single-SPA, Mosaic9, and Open Components are also mentioned. The document provides an overview of micro front-ends in the context of migrating monolithic applications to a microservices architecture.

1. Micro Front-end
The Microservice Development Architecture on the
Front-end side

2. Hello!
I am Miki Lombardi
Full Stack Developer at Plansoft s.r.l |
Endless curious, computer science lover, cinema
addicted, sport maniac | Married w/ Pizza
2
@thejoin95

3. 3
1. Introduction into the magic world of Microservices
(Principles, Architecture, Case studies)
2. What is a Micro Front-End?
3. Micro Front-end principles
4. Case studies & architecture comparison
5. Technical implementations
Agenda

4. 1.
Microservices
Let’s set the world on fire

5. 5
Yeah, you know.. We are working with Microservices..

6. “Microservices is an architectural style that
structures an application as a collection of services
that are highly maintainable, testable, resiliently,
independently deployable and organized around
business capabilities.
6
Breaking up an application into a series of smaller,
more specialised parts, each of which communicate
with one another across common interfaces such as
APIs and REST interfaces like HTTP

7. Why I should develop in
Microservices?
◦ Scalability
◦ Multi Language
◦ DDD
◦ Reliability
◦ Easy to release
◦ Decoupled services
◦ Agile/Lean Team
◦ Better maintenance
◦ Production ready
◦ Cross Platform
◦ Cloud implementation
◦ Performance
7

8. Microservices Principles
Modelled around
business domain
Culture of
automation
Hide
implementation
details
8
Decentralization
Deploy
independently
Consumer First
Isolate failure Highly observable CI and Team
development

9. Microservices Architecture - Generic Example
9

10. Microservices Architecture - AWS Example
10

11. Pros & Cons of Microservices architecture
◦ Independent Databases
◦ Independent technology
stack
◦ High testability
◦ Easy Q&A
◦ Easy to release a new version
◦ Independent in case of
failures
◦ Parallel development
◦ Services oriented
11
◦ A lot of effort on design,
orchestration, CI/CD
◦ Need at least a DevOps
◦ “Dynamic cost” (it depends)
◦ Maintenance cost in term of
services languages
◦ Hard ACID transactions
◦ Need a service discovery
◦ Difficulties on refactoring

12. From
RubyOnRails Monolith (Monorail) &
MySQL on a Self Managed Infrastructure
To
Java & Scaka Services on AWS cloud
SOA Architecture
12
Case studies
.
From
.NET Monolith & SQL Server on a Self
Managed Infrastructure
To
Java/Python Services on AWS cloud
Microservices Architecture

13. Fun fact
AirBnB is still working to migrate some features from the
monolith to the Microservices architecture
They are still migrating! It been 3 years since they started
13

14. Fun (not too much) fact
What happen at Skyscanner when a service is generating
multiple 500 errors and affect its 1% traffic?
“A component with high cache key cardinality (including the date of a flight search in the
key) had been released from behind an A/B experiment to 100% of travellers and was
hammering the cache. This release was done by an external squad, so was not seen in the
Flight Search Result service’s release logs.”
https://medium.com/@SkyscannerEng/production-incident-postmortem-aws-cache-12d722e30840
14

15. From
Magento Monolith
To
Microservices & Micro
Front-End architecture
15
Case studies
From
Perl/Java/C++ Monolith
To
Microservices & Serverless
architecture
From
Rails/Java/Scala Monolith
To
Microservices & Serverless
architecture

16. 3.
What are Micro
Front-End?
What are you talking about?!

17. 17

18. “Micro Front-ends are the
technical representation of a
business subdomain, they
provide strong boundaries with
clean contracts, also they avoid
sharing data with other
subdomains
18
Luca Mezzalira, DAZN VP Manager

19. Micro Front-end Principles
Modelling around
business domain
Decentralisation
Culture of
automation
19
Hide
Implementation
details
Isolate failure
Deploy
independently

20. Micro Front-end Pros - Innovation
20
● Runtime injection of new features
● Faster feedback loops
● Tech agnostic

21. Micro Front-end Pros - Productivity
21
● End-to-End responsibility
● Full control
● Lean, Agile processes
● Independent development
● Continuous delivery

22. Micro Front-end Pros - Growth
22
● Faster onboarding
● Magnetic
● Easy to spin-off new teams

23. 23
What I should see on the client side?

24. 4.
Architecture & Case
studies
Get some inspiration from the Big company

25. Sample of a Micro Front-End
Architecture - End2End
25
FromServicestoFront-End
WebComponents
MongoDB +
ElasticSearch
Angular
MongoDB +
ElasticSearch
React
MongoDB
WebComponents
Oracle

26. Development workflow
26
◦ Select a subdomain / feature
◦ Cross functional Team (size 2-6)
◦ Design & Build
◦ Deploy on Dev / Staging Environment
◦ End2End Test
◦ Q&A session
◦ Deploy or deploy with A/B test

27. 27
BIG Case studies
An iframe composition
with event bus for
coordinating the events
across different iframes.
It is an old style approach,
but still working
Inspired by BigPipe
framework (Facebook)
they developed Mosaic9
for assembling all the
different layer of the
architecture, from routing
to compose all the UI
fragment on the runtime
A hybrid solution between
Zalando and Single-spa
framework by building a
middle layer called
Bootstrap, that is
responsible for application
startup, I/O operations,
routing e configurations

28. Sample of a Micro Front-End
Architecture - Zalando
28

29. 5.
Technical
implementations
Finally some incomprehensive code!

30. How can we get started?
30
◦ Setup a global reset.css
◦ Build cross functional team for each subdomain
◦ Select the technology stack for a Front-End team
◦ Build your front-end application
◦ Setup HTTP2 and caching protocol
◦ Setup a Front-End communication protocol
◦ Setup routing and templating services
Guidelines: http://microservice-websites.netlify.com/
Note: you can also build an end-to-end team that develop from back-end to front-end

31. HTTP/2
31
- Low overhead in parsing data
- Less prone to errors.
- Lighter network footprint.
- Enables other capabilities of
the HTTP/2 including
compression, multiplexing,
prioritization, flow control and
effective handling of TLS
- Reduced network latency and
improved throughput.

32. PUB & SUB - Micro Front-End
communication
32
- It is an easy way to published
event and message between
micro front-end
- We are not sharing any global
state or other micro
front-end variable
- We are manipulating just the
micro front-ends that we
needed

33. ESI & SSI & CSI
33
<esi:include src="http://example.com/1.html"
alt="http://bak.example.com/2.html" onerror="continue"/>
- Edge Server Include - Include a portion of HTML from the CDN or Proxy
server
- Server Side Include - Generate the HTML on the response from the
server, without JS
- Client Side Include - As ESI, but on the client side

34. Most used frameworks
Single-SPA
Single-SPA is a framework
for bringing together
multiple javascript
frameworks in a frontend
application with a simple
architecture
Mosaic9
Mosaic is a set of services,
libraries together with a
specification that defines
how its components
interact with each other, to
support a microservice
style architecture for large
scale websites
Open Components
OpenComponents is an
open-source, "batteries
included" micro frontends
framework developed by
OpenTable
34

35. Thanks