A presentation to explain the microservices architecture, the pro and the cons, with a view on how to migrate from a monolith to a SOA architecture. Also, we'll show the benefits of the microservices architecture also for the frontend side with the microfrontend architecture.
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. I am Iacopo Ciao
Full Stack Developer at Plansoft s.r.l |
Developer | Java | Angular+ | Innovative
3
@kernelpanic92
Hello!
4. 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
7. “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
8. 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
9. 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
12. 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
13. 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
16. 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
17. 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
18. 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
22. 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
23. 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
26. 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
27. 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
30. “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
31. Micro Front-end Principles
Modelling around
business domain
Decentralisation
Culture of
automation
31
Hide
Implementation
details
Isolate failure
Deploy
independently
32. Micro Front-end Pros - Innovation
32
● Runtime injection of new features
● Faster feedback loops
● Tech agnostic
33. Micro Front-end Pros - Productivity
33
● End-to-End responsibility
● Full control
● Lean, Agile processes
● Independent development
● Continuous delivery
34. Micro Front-end Pros - Growth
34
● Faster onboarding
● Magnetic
● Easy to spin-off new teams
37. Sample of a Micro Front-End
Architecture - End2End
37
FromServicestoFront-End
WebComponent
s
MongoDB +
ElasticSearch
Angular
MongoDB +
ElasticSearch
React
MongoDB
WebComponent
s
Oracle
38. Sample of a Micro Front-End
Architecture - Generic
38
39. 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. 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
41. Sample of a Micro Front-End
Architecture - Zalando
41
42. Sample of a Micro Front-End
Architecture - Spotify
42
44. 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
45. 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.
46. 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
47. 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
48. 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
Backend For Frontend (BFF)
Loadbalencer prima dei gateway
Loadbalencer dopo gateway
Eventbus interno ai microservizi
Loadbalencer prima dei gateway
Loadbalencer dopo gateway
Eventbus interno ai microservizi
ESB allows communication via a common communication bus that consists of a variety of point-to-point connections between providers and consumers . In addition to above, the data storage is shared within all services in SOA
ESB allows communication via a common communication bus that consists of a variety of point-to-point connections between providers and consumers . In addition to above, the data storage is shared within all services in SOA
AirBnB più di 450 servizi => API Gateway & Internal Bus per comunicazione intraservizio => 3 Anni per cambiare architettura SkyScanner suddivisione in macroteam su aree di dominio e sottodominio del business
Monolita vecchio stampo, Monolita modulare, Monolita distribuito
Ports and Adapters architecture (a.k.a Hexagonal Architecture) differ between data layer and devices
https://microservices.io/patterns/monolithic.html
Zalando uses magento for its first ecommerce
AirBnB più di 450 servizi => API Gateway & Internal Bus per comunicazione intraservizio => 3 Anni per cambiare architettura SkyScanner suddivisione in macroteam su aree di dominio e sottodominio del business
Micro Frontend is a Microservice approach to front-end web development. The current trend is to build a powerful and feature-rich web application which resides on top of a Microservice architecture. Over time the front end part of the application, is often developed by a separate team, grows and gets more difficult to maintain, this type of application is called Frontend Monolith. To solve this problem, the concept of the Micro Frontend came into the picture.
The concept of Micro Frontend is to think about a web application as a composition of features owned by different independent teams. Each team having a distinct area of business that it specializes in. A team is cross-functional and develops end-to-end features, from the user interface to the database. Micro Frontend is more friendly and less bulky one.
In this type of architecture, split the entire application by business domain across the entire stack. This enables front-end teams the same level of flexibility, testability, and velocity that backend teams get from Microservices.
Jimmy old monolith
Jimmy old monolith
Ci permette di impacchetare in una volta più richieste, così da ridurre il tempo di attesa della risposta
Ci permette di impacchetare in una volta più richieste, così da ridurre il tempo di attesa della risposta
