Micro Front-ends and Microservices Architecture in Web Application Development
Download as PPTX, PDF0 likes18 views
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.
Micro Front-ends and Microservices Architecture in Web Application Development
- 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.