FEVR - Micro Frontend

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

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

1.
Microservices
Let’s set the world on ﬁre

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

“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

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

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

Microservices Architecture - Generic Example
9

Microservices Architecture - AWS Example
10

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
◦ Difﬁculties on refactoring

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

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

Fun (not too much) fact
What happen at Skyscanner when a service is generating
multiple 500 errors and affect its 1% trafﬁc?
“A component with high cache key cardinality (including the date of a ﬂight 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

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

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

“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

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

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

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

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

23
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
25
FromServicestoFront-End
WebComponents
MongoDB +
ElasticSearch
Angular
MongoDB +
ElasticSearch
React
MongoDB
WebComponents
Oracle

Development workﬂow
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
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 conﬁgurations

Sample of a Micro Front-End
Architecture - Zalando
28

5.
Technical
implementations
Finally some incomprehensive code!

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

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, ﬂow control and
effective handling of TLS
- Reduced network latency and
improved throughput.

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

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

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
speciﬁcation that deﬁnes
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

FEVR - Micro Frontend

Recommended

More Related Content

What's hot (20)

Similar to FEVR - Micro Frontend (20)

Recently uploaded (20)

FEVR - Micro Frontend