Today, Web Development has left the static structure of monolithic code far behind and has adopted new architectures that allow interaction, more efficient and easy data management, tolerance of potential errors, easier code upgrade, etc. Two of these architectures are those of micro front-ends and microservices which aim to separate a page or application into smaller services for more efficient management of client requests and data. In this thesis, the advantages of these two architectures are studied and analyzed, as well as their patterns, which offer different advantages depending on the developer’s goal. The bibliography used to extract the information mostly consists of scientific research from the last decade (between 2011 and 2022), concerning different aspects and uses of microservices and micro front-ends. In addition, examples are provided from the implementation of two e-commerce applications that were created in the context of the diploma thesis in order to highlight the use of micro front-ends using JavaScript and REACT framework. Finally, disadvantages of the architectures are presented as well as conclusions for their implementation.

1. MICROFRONTENDS AND
MICROSERVICES IN WEB
DEVELOPMENT
Τσαγκίδη Ηρώ (ΑΕΜ 495) - ΔΔΠΜΣ Προηγμένα
Συστήματα Υπολογιστών και Επικοινωνιών, ΑΠΘ

2. Τα κενά του μονολιθικού κώδικα
● Αργός ρυθμός ανάπτυξης - Το σύνολο των διαδικασιών που τελούνται με το
trigger κάποιου service και αφορούν το συνεχές testing και deployment από το
trigger μέχρι την επιστροφή του αποτελέσματος.
● Δυσνόητη δομή κώδικα - Ενα μονολιθικό σύστημα που περιέχει services,
αναπόφευκτα θα αποκτήσει ένα αρκετά δυσνόητο repository.
● Legacy τεχνολογίες - Ξεπερασμένες τεχνολογίες ή συστήματα που αφορούν
διατμηματικές διαδικασίες.

3. Μοτίβα μοντέρνας αρχιτεκτονικής ιστού
SINGLE PAGE APPLICATIONS (SPA) - Τρόπος
υλοποίησης εφαρμογών που περιέχονται σε μία μόνο
ιστοσελίδα (single web document) και ενημέρωσης του
κύριου περιεχομένου της ιστοσελίδας με τη χρήση
API.

4. Μοτίβα μοντέρνας αρχιτεκτονικής ιστού
NATIVE MOBILE APPLICATIONS - Εφαρμογές για
συστήματα Android και iOS. Σε αρκετές περιπτώσεις
η πρόσβαση στο internet δεν είναι απαραίτητη για τη
λειτουργία της εφαρμογής. Απαραίτητη η δημιουργία
αντιγράφων για πολλαπλές πλατφόρμες.

5. Μοτίβα μοντέρνας αρχιτεκτονικής ιστού
CLOUD NATIVE APPLICATIONS - Οι εφαρμογές
στο cloud είναι ανεξάρτητες υπηρεσίες
συσκευασμένες ως αυτόνομα, ελαφριά containers
που είναι φορητά και μπορούν να επεκταθούν
ανάλογα με τις ανάγκες τους.

6. Μοτίβα αρχιτεκτονικής Microservices
Τα μοτίβα σχεδιασμού microservices δημιουργούν επαναχρησιμοποιήσιμες αυτόνομες
υπηρεσίες. Εν γένει, η αρχιτεκτονική των microservices εξυπηρετεί στην ταχύτερη δημιουργία και
ανάπτυξη εφαρμογών αλλά και την ταχύτερη ανάπτυξη των επιμέρους υπηρεσιών της ίδιας της
εφαρμογής. Κάθε υπηρεσία είναι πλήρως αυτόνομη και full-stack, δηλαδή, με δικό της front-end,
back-end, database καθώς και όλη την ενδιάμεση συνδιαλλαγή και επικοινωνία. Η αλλαγή μιας
υπηρεσίας δεν επηρεάζει τις υπόλοιπες καθώς επικοινωνούν μέσω καλά καθορισμένων
διεπαφών.
Παρακάτω παρουσιάζονται ενδεικτικά τρία integration και τρία decomposition patterns από τα
συνολικά 19 που αναλύονται στη διπλωματική.

7. Μοτίβα αρχιτεκτονικής Microservices
AGGREGATOR - Πρόγραμμα ή ιστοσελίδα που
συγκεντρώνει και παρουσιάζει δεδομένα, με τη
χρήση του business logic και στη μορφή των
REST endpoints. Χρησιμοποιείται στην
αρχιτεκτονική των microservices ως μία βασική
για την εφαρμογή ιστοσελίδα που καλεί κάθε
φορά ένα σύνολο υπηρεσιών για την ανάκτηση
δεδομένων και την επίτευξη απαιτούμενων
λειτουργιών. Η έξοδος (output) που
επιστρέφεται είναι αποτέλεσμα συνδυασμού
δεδομένων από ξεχωριστές αυτόνομες
υπηρεσίες.

8. Μοτίβα αρχιτεκτονικής Microservices
API GATEWAYS - Διαφοροποίηση του
aggregator pattern. Εξυπηρετούν στην
μαζική διαχείριση πληροφοριών για κάθε
ξεχωριστό microservice. Πέραν αυτού, τα
gateways χρησιμεύουν ως μεσολαβητές
για τη δρομολόγηση ενός αιτήματος προς
το εκάστοτε microservice. ́Ενα API gateway
χρησιμοποιείται για την αποστολή
αιτημάτων από clients προς τα διάφορα
services, με τη βοήθεια ενός load balancer
ενώ ταυτόχρονα μπορεί να
χρησιμοποιηθεί και για την επιστροφή
αποτελεσμάτων όπως συμβαίνει στο
aggregator pattern

9. Μοτίβα αρχιτεκτονικής Microservices
Ασύγχρονη Επικοινωνία - Επιτρέπει
στα διάφορα microservices να
επικοινωνούν και να ανταλλάσσουν
αιτήματα μεταξύ τους χωρίς ωστόσο να
διακόπτουν την ατομική λειτουργία τους.
Ο client μπορεί μέσω ενός microservice
να αποστείλει αίτημα σε περισσότερα από
ένα microservices. Η ασύγχρονη
επικοινωνία επιτυγχάνεται μέσω της
σειράς αιτημάτων (queue) και έρχεται σε
αντίθεση με την δομή των synchronous
REST API τα οποία περιμένουν πάντα
την επιστροφή του αποτελέσματος
(response) μετά από ένα request για να
συνεχιστεί η εκτέλεση των υπηρεσιών.

10. Μοτίβα αρχιτεκτονικής Microservices -
Decomposition Patterns
Η διάσπαση της εφαρμογής σε επιμέρους
υπηρεσίες κάνει το έργο διαχείρισης των
developers πιο εύκολο ως προς την υλοποίηση
του. Για τον σωστό διαμοιρασμό των υπηρεσιών
μίας εφαρμογής πρέπει να πληρούνται ορισμένες
προϋποθέσεις όπως ότι οι υπηρεσίες θα πρέπει να
είναι συνεντκικές, δηλαδή, όλες οι συναρτήσεις της
υπηρεσίας να σχετίζονται άμεσα, να είναι χαλαρά
συνδεδεμένες μεταξύ τους (loosely coupled),
δηλαδή κάθε υπηρεσία να μπορεί να επικοινωνεί με
τις υπόλοιπες με τη χρήση API, να μπορεί να γίνει
ανάπτυξη και testing κάθε ξεχωριστής υπηρεσίας
από την ομάδα που τη διαχερίζεται χωρίς να
χρειάζεται η συνεργασία με άλλες ομάδες και η
αρχιτεκτονική του κώδικα να είναι σταθερή.

11. Μοτίβα αρχιτεκτονικής Microservices -
Decomposition Patterns
By business capability - Ο διαχωρισμός των
υπηρεσιών ανάλογα με την αρμοδιότητα των
̈αντικειμένων ̈ της εφαρμογής (business
capabilities of business objects) συναντάται
στη μοντελοποίηση αρχιτεκτονικής
επιχειρήσεων.. Τα business capabilities
κατηγοριοποιούνται ιεραρχικά, ανάλογα με
την σημαντικότητα τους για την εταιρική
εφαρμογή στην οποία ανήκουν (ανάπτυξη
της υπηρεσίας, διανομή της υπηρεσίας,
δημιουργία ζήτησης της υπηρεσίας από τους
χρήστες, κ.α).

12. Μοτίβα αρχιτεκτονικής Microservices -
Decomposition Patterns
By subdomain - Το domain model ολόκληρης της
εφαρμογής διασπάται και χωρίζονται σε subdomains
δηλαδή, σε μικρότερους επιμέρους τομείς με ξεχωριστές
και σχετικές μεταξύ τους αρμοδιότητες. Τα subdomains
κατηγοριοποιούνται ιεραρχικά ως βασικά, υποστηρικτικά ή
γενικά.
● Βασικοί τομείς είναι όσοι τομείς αφορούν αντικείμενα
μή σχετικά μεταξύ τους, των οποίων οι λειτουργίες
ανήκουν στους βασικούς πυλώνες μίας e-commerce
εφαρμογής.
● Υποστηρικτικοί τομείς είναι όσοι επιμέρους τομείς
σχετίζονται με την επιχείρηση, αλλά περιέχουν
υποστηρικτές και όχι βασικές λειτουργίες.
● Τέλος, οι γενικοί τομείς, που αφορούν διάφορες
άλλες λειτουργίες πέραν της επιχείρησης.

13. Μοτίβα αρχιτεκτονικής Microservices -
Decomposition Patterns
By transactions - Η ομαδοποίηση των
microservices με βάση τις συναλλαγές
που εκτελούν, χρησιμοποιείται για να
αποφεύγεται η καθυστέρηση κατά την
κλήση του συστήματος προς τα
microservices. Η εφαρμογή της
συγκεκριμένης αρχιτεκτονικής
βελτιστοποιεί την διαθεσιμότητα των
δεδομένων καθώς και το χρόνο
απαντήσεων προς τα requests του
συστήματος, ενώ διατηρεί και την ακρίβεια
των δεδομένων.

14. Τρόποι εφαρμογής των Microfrontends
́Οπως τα microservices χρησιμοποιούνται για την ευκολότερη διαχείριση του back-end
τμήματος μίας εφαρμογής, προσφέροντας μία πληθώρα τρόπων κατανομής και διαχωρισμού
των δεδομένων και των τομέων ενδιαφέροντος, έτσι και τα micro front-ends χρησιμοποιούνται
για την πιο οργανωμένη διαχείριση του front-end τμήματος του κώδικα και του UI της
εφαρμογής.
● Ελαστικότητα Σχεδιασμού και Ανάπτυξης
● ∆ιαχωρισμός των codebases
● Προτίμηση του Native Browser
● Απομόνωση κατα το σφάλμα
● Επεκτασιμότητα
● Λιγότερος Χρόνος Κατασκευής
● Επαναχρησιμοποίηση του κώδικα

15. Τρόποι εφαρμογής των Microfrontends
Build time integration με τη χρήση
πακέτων - Τα micro front-ends
χρησιμοποιούνται μέσα στην εφαρμογή
ως πακέτα, τα οποία μπορούν να
προέρχονται από διαφορετικά repositories
και να εισάγονται ως modules, ενώ η
εφαρμογή τα περιλαμβάνει σαν library
dependencies.
● Γρήγορη ανάπτυξη κώδικα
● Καλύτερη κατανόηση της
εφαρμογής
● Ανεξαρτησία της εφαρμογής

16. Τρόποι εφαρμογής των Microfrontends
Build time integration με τη
χρήση HTML iframes - πλαίσια
που χρησιμοποιούνται για την
ενσωμάτωση ενός νέου document
μέσα στο υπάρχον HTML
document. Με την χρήση των
iframes δίνεται η δυνατότητα
σύνθεσης μίας σελίδας η οποία θα
απαρτίζεται από πολλές μικρότερες.
Η κάθε ξεχωριστή σελίδα λειτουργεί
απομονωμένα και αυτόνομα από τις
υπόλοιπες με αποτέλεσμα η
σχεδίαση της να γίνεται με βάση τις
ανάγκες της ίδιας και οι global
μεταβλητές όλων των σελίδων να
μην συγχέονται.
<!DOCTYPE html>
<html>
<head>
<title>HTML iframe Tag</title>
</head>
<body style="text-align: center">
<h1>NameOfTheApp</h1>
<h2>HTML iframe Tag</h2>
<iframe src=
"https://ide.app.com/index.php"
height="200"
width="400">
</iframe>
</body>
</html>

17. Τρόποι εφαρμογής των Microfrontends
Build time integration με τη χρήση Web Components - Σουίτα διαφορετικών εργαλείων και τεχνολογιών
που επιτρέπουν τη δημιουργία προσαρμοσμένων και επαναχρησιμοποιήσιμων στοιχείων.
Η εργαλειοθήκη περιλαμβάνει προσαρμοσμένα στοιχεία τα οποία επιτρέπουν τη δημιουργία
προσαρμοσμένων ετικετών HTML και είναι συμβατά με τη χρήση JavaScript. Μέρος της εργαλειοθήκης
αποτελούν και τα HTML templates τα οποία αποτελούν ένα μηχανισμό για την αγνόηση συγκεκριμένων
HTML στοιχείων από τον browser.
Τέλος, το Shadow DOM χρησιμοποιείται για την ενσωμάτωση δομών (με δικό τους σχεδιασμό και
συμπεριφορά) στο κεντρικό DOM, οι οποίες μένουν κρυφές και ανέπαφες από τον υπόλοιπο κώδικα

18. Πείραμα - Δημιουργία εφαρμογής με τη χρήση
microfrontends

19. Πείραμα - Δημιουργία εφαρμογής με τη χρήση
microfrontends

20. Κενά και μειονεκτήματα microfrontends
● Έλλειψη επικοινωνίας των ομάδων και ελέγχου των modules.
● Αυξημένα payloads.
● Πολύπλοκη διαδικασία ανάπτυξης της υπηρεσίας.
● Ασυνέπεια στο UX
Συμπερασματικά, η αρχιτεκτονική αυτή, μπορεί να εξυπηρετήσει τόσο μικρές εφαρμογές που
έχουν από πίσω τους μικρές ομάδες ανάπτυξης, όσο και αρκετά μεγάλες, με την προϋπόθεση
πως τα ξεχωριστά micro front-end codebases είναι πλήρως οργανωμένα και η συνεχής
ενημέρωση και επικοινωνία διέπουν τις επιμέρους ομάδες των διαφόρων microfrontends,

21. Ενδεικτική Βιβλιογραφία
1. Alshuqayran, Nuha, Nour Ali, and Roger Evans. "A systematic mapping study in
microservice architecture." 2016 IEEE 9th International Conference on Service-
Oriented Computing and Applications (SOCA).
2. Pavlenko, A., Askarbekuly, N., Megha, S., Mazzara, M. (2020). Microfrontends:
application of microservices to web front-ends. J. Internet Serv.
3. Mezzalira, L. (2021). Building Micro-Frontends, Pbl: O’Reilly Media
4. Waseem, M., Liang, P., Márquez, G., Shahin, M., Khan, A. A., Ahmad, A. (2021). A
decision model for selecting patterns and strategies to decompose applications
into microservices. In Service-Oriented Computing: 19th International
Conference, ICSOC 2021, Virtual Event, November 22–25, 2021, Proceedings 19
(pp. Springer International Publishing.
5. Wang, B., Cai, H., Jiang, L. (2011, November). The research and application of
business-driven internet component integration. In IET International
Communication Conference on Wireless Mobile and Computing (CCWMC 2011)
IET.