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

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

I am Iacopo Ciao
Full Stack Developer at Plansoft s.r.l |
Developer | Java | Angular+ | Innovative
3
@kernelpanic92
Hello!

4
1. Intro in the magic world of Microservices
a. Principles, Architecture, Case studies
2. From Monolith to Microservices
3. What is a Micro Front-End?
4. Micro Front-end principles
5. Case studies & architecture comparison
6. Technical implementations
7. Q&A
8. Networking & Pizza
Agenda

1.
Microservices
Let set the world on fire

6
Yeah, you know.. We will working with Microservices..

“Microservices - also known as the microservice
architecture - 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.
7
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

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
8

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

Microservices Architecture - Example
10

Microservices Architecture - AWS Example
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
12
◦ 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

Service Oriented Architecture is very different from
Microservices Architecture!!
They are sharing some principles, but not all!
Let’s see some examples of these architectures
13
SOA != Microservices

14
Architectures comparison

SOA & Microservices Comparison
15

From
RubyOnRailsMonolith (Monorail) &
MySQLon a Self Managed Infrastructure
To
JavaServices on AWScloud
SOA Architecture
16
Case studies
.
From
.NETMonolith & SQL Serveron a Self
Managed Infrastructure
To
Java/PythonServices on AWScloud
Microservices Architecture

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
17

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
18

Cinema Microservices
https://github.com/Crizstian/cinema-
microservice
19

2.
From Monolith to Micro
Dudes, changing the world is a tough job...

21
Uber like App with a Monolith
Architecture

PRO
◦ Shared Memory
◦ Simple to develop
◦ Faster QuickStart (at the
beginning)
◦ Code reusability
◦ “Simple” to scale, but not
in the cheapest way of it
22
Monolith Architecture pro & cons
CONS
◦ Single codebase
◦ Elevate Bug Density
◦ Side effects on changes
◦ Less innovation
◦ Time consuming deploy
◦ Slower release
◦ No separation between
backend/frontend
◦ Difficult CD & CI

This means that build Monolith is bad?
23
Unfortunately, people have come to view the monolith as something to be
avoided as something that is inherently problematic. This is a problem. A
monolithic architec‐ ture is a choice, and a valid one at that. It may not be the
right choice in all circumstances, any more than microservices are, but it’s a
choice nonetheless.
Think about a modular Monolith architecture with a good business/service layer
separation: it will be easy to refactoring it into the microservices architecture —
like Netflix and others did in the past.
It depends

Let’s refactoring the previous Monolith to the
Microservices Architecture
24

25
Uber like App with a
Microservices Architecture

26
Use monolith architecture if you:
● Small Team
● MVP version of a new product
● No time or money to spend on innovation
● Other constraints
Use microservices architecture if you:
■ don’t have a tight deadline; microservices require you to research and
architecture planning to ensure it works
■ have a team with knowledge of different languages
■ worry a lot about the scalability and reliability of your product
■ distributed team
■ have an existing monolith app and see problems with parts of your application
that could be split across multiple microservices
Comparison

From
MagentoMonolith
To
Microservices & MicroFront-
End architecture
27
Case studies
From
Perl/Java/C++Monolith
To
Microservices & Serverless
architecture
From
Rails/Java/Scala Monolith
To
Microservices & Serverless
architecture

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

29

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

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

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

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

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

35
What I should see on the client side?

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

Sample of a Micro Front-End
Architecture - End2End
37
FromServicestoFront-End
WebComponent
s
MongoDB +
ElasticSearch
Angular
MongoDB +
ElasticSearch
React
MongoDB
WebComponent
s
Oracle

Sample of a Micro Front-End
Architecture - Generic
38

Development workflow
39
◦ 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

40
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

Sample of a Micro Front-End
Architecture - Zalando
41

Sample of a Micro Front-End
Architecture - Spotify
42

5.
Technical
implementations
Finally some incomprehensive code!

How can we get started?
44
◦ 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

HTTP/2
45
- 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.

PUB & SUB - Micro Front-End
communication
46
- 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

ESI & SSI & CSI
47
<esi:include src="http://example.com/1.html"
alt="http://bak.example.com/2.html" onerror="continue"/>
- EdgeServer 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

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
48

6.
Demo
Let’s see something folks!
https://github.com/plansoft-it/demo-microfrontends

Questions?

Thanks