Υλοποίηση microfrontends σε Android χρησιμοποιώντας δυναμικές λειτουργικές μονάδες και Compose

• Υλοποίηση αρθρωτών αρχιτεκτονικών για την αποσύνδεση των κύκλων ανάπτυξης και εγκατάστασης.
• Χρήση ομοσπονδίας ενοτήτων και δυναμικής φόρτωσης για βελτιστοποίηση της απόδοσης και της επεκτασιμότητας.
• Ενσωμάτωση διαφόρων πλαισίων και τεχνολογιών χρησιμοποιώντας shell containers και event buses.

Το περιεχόμενο αυτού του σεναρίου δημιουργείται αυστηρά για εκπαιδευτικούς σκοπούς. Η χρήση γίνεται με δική σας ευθύνη.

Όταν μια εφαρμογή αρχίζει να αναπτύσσεται ανεξέλεγκτα, η τυπική μονολιθική προσέγγιση γίνεται πραγματικός πονοκέφαλος. Η διαχείριση μιας τεράστιας βάσης κώδικα σημαίνει ότι ακόμη και η παραμικρή αλλαγή μπορεί να προκαλέσει ένα φαινόμενο ντόμινο σφαλμάτων, γι’ αυτό και η αρχιτεκτονική microfrontend αναδεικνύεται ως η ιδανική λύση για τη διάσπαση αυτού του συμπαγούς μπλοκ σε πολύ πιο διαχειρίσιμα και αυτόνομα κομμάτια.

Αυτό το μοντέλο απλώς φέρνει τη φιλοσοφία των μικροϋπηρεσιών του backend στον οπτικό κόσμο. Ουσιαστικά, περιλαμβάνει τη διαίρεση της διεπαφής σε ανεξάρτητες ενότητες που μπορούν να δημιουργηθούν, να δοκιμαστούν και να κυκλοφορήσουν χωρίς να επηρεάσουν την υπόλοιπη εφαρμογή, επιτρέποντας στις ομάδες ανάπτυξης να εργάζονται με τον δικό τους ρυθμό και χωρίς επικαλύψεις.

• Δες επίσης: Ενσωμάτωση του API Google Health Connect στο Kotlin

Βασικές Αρχές της Ομοσπονδίας Μονάδων

Για να λειτουργήσει ολόκληρο αυτό το σύστημα, χρειαζόμαστε ένα βασικό στοιχείο που ονομάζεται ομοσπονδία λειτουργικών μονάδων. Αυτή η τεχνολογία, που κυριαρχεί στο Webpack 5, επιτρέπει σε διαφορετικές εφαρμογές να μοιράζονται αποσπάσματα κώδικα κατά τον χρόνο εκτέλεσης , εμποδίζοντας τον χρήστη να χρειάζεται να κατεβάσει την ίδια βιβλιοθήκη πολλές φορές. Ουσιαστικά, πρόκειται για τη δυνατότητα δυναμικής φόρτωσης ενός απομακρυσμένου στοιχείου σαν να ήταν μέρος της ίδιας της εφαρμογής.

Σε αυτό το οικοσύστημα, βρίσκουμε δύο κύριους ρόλους. Από τη μία πλευρά, τον Κεντρικό Υπολογιστή ή Κέλυφος , ο οποίος λειτουργεί ως το περίβλημα ή ο εγκέφαλος που ενορχηστρώνει ποιο μικροπροστατευτικό σύστημα πρέπει να φορτωθεί ανάλογα με το τι κάνει ο χρήστης. Από την άλλη πλευρά, έχουμε τα Απομακρυσμένα Υπολογιστικά , τα οποία είναι αυτά τα πακέτα JavaScript ή οι ενότητες Android που περιέχουν τη συγκεκριμένη λειτουργικότητα και εισάγονται στον κεντρικό υπολογιστή όταν χρειάζεται.

Το μεγάλο πλεονέκτημα αυτής της προσέγγισης είναι ότι μας προσφέρει απίστευτη τεχνολογική ευελιξία . Δεν είμαστε δεσμευμένοι σε ένα μόνο framework. Θα μπορούσαμε να έχουμε ένα μέρος της εφαρμογής στο Angular, ένα άλλο μέρος στο React και ορισμένα συγκεκριμένα τμήματα στο Vue ή στο Jetpack Compose, αρκεί να τηρούμε τις καθιερωμένες συμβάσεις επικοινωνίας.

• Δες και αυτό το σχετικό άρθρο: Οδηγός Διαμεσολάβησης AdMob: Μεγιστοποίηση eCPM με AppLovin και IronSource Meta Networks

Στρατηγικές Υλοποίησης σε Angular και Modern Frameworks

Όσον αφορά το Angular, αυτό το πλαίσιο ταιριάζει απόλυτα χάρη στην εγγενή αρθρωτή δομή του . Χρησιμοποιώντας εργαλεία όπως το CLI και την ομοσπονδία ενοτήτων, είναι δυνατό να μετατρέψετε μια επιχειρηματική ενότητα (όπως το καλάθι αγορών ή τον κατάλογο) σε αυτόνομη εφαρμογή με δικό της αγωγό CI/CD. Αυτό σημαίνει ότι η ομάδα Πληρωμών μπορεί να αναπτύξει μια ενημέρωση χωρίς να χρειάζεται η ομάδα Αναζήτησης να μεταγλωττίσει ξανά ολόκληρο το έργο.

Για να διασφαλιστεί η άρτια συνεργασία αυτών των ενοτήτων, συνήθως εφαρμόζεται σύνθετη δρομολόγηση . Ο κύριος δρομολογητής του κελύφους χειρίζεται τη γενική πλοήγηση, ενώ κάθε μικρο-προσθέτεινον διαχειρίζεται τις εσωτερικές του διαδρομές. Για να αποτραπεί η υπερβολικά μεγάλη διάσταση της εφαρμογής, εφαρμόζεται η αργή φόρτωση , φορτώνοντας τον κώδικα της ενότητας μόνο όταν ο χρήστης κάνει κλικ στην αντίστοιχη ενότητα.

Επικοινωνία και Διαχείριση της Κατανεμημένης Κατάστασης

Μία από τις πιο δύσκολες προκλήσεις είναι το πώς να επικοινωνήσουν δύο ανεξάρτητα στοιχεία χωρίς να δημιουργηθεί στενή σύνδεση. Η πιο κομψή λύση είναι η χρήση ενός διαύλου συμβάντων . Αντί η ενότητα Α να καλεί απευθείας την ενότητα Β, η ενότητα Α στέλνει ένα συμβάν στον αέρα και όποιος ενδιαφέρεται για αυτές τις πληροφορίες το λαμβάνει και αντιδρά.

Όσον αφορά τα δεδομένα, έχουμε αρκετές επιλογές ανάλογα με τις ανάγκες. Μπορούμε να διατηρήσουμε την τοπική κατάσταση μέσα σε κάθε microfrontend για απλές εργασίες ή να συγκεντρώσουμε κρίσιμες πληροφορίες (όπως το διακριτικό συνεδρίας) στο κέλυφος. Είναι επίσης σύνηθες να χρησιμοποιείτε το localStorage ή κοινόχρηστες υπηρεσίες μέσω έγχυσης εξαρτήσεων για να διασφαλίσετε μια ομαλή και συνεπή εμπειρία χρήστη.

• Σχετικό άρθρο που αξίζει: Οδηγός Αγοράς Εντός Εφαρμογής (IAP) για Android: Υλοποίηση της Βιβλιοθήκης Χρέωσης Google Play v7

Σχεδιαστικά πρότυπα και βέλτιστες πρακτικές

Για να αποτρέψετε την αταξία του έργου, είναι ζωτικής σημασίας να ακολουθήσετε ορισμένα μοτίβα. Το μοτίβο BFF (Backend For Frontends) είναι ιδιαίτερα χρήσιμο, καθώς δημιουργεί ένα ενδιάμεσο επίπεδο που προσαρμόζει τα δεδομένα του διακομιστή στις συγκεκριμένες ανάγκες κάθε microfrontend, βελτιστοποιώντας έτσι την κίνηση δικτύου.

• Ενιαία Ευθύνη: Κάθε microfrontend θα πρέπει να επικεντρώνεται σε έναν μόνο επιχειρηματικό τομέα για να αποφευχθεί ο υπερβολικός κατακερματισμός.
• Παρατηρησιμότητα: Εφαρμογή τυποποιημένης τηλεμετρίας και αρχείων καταγραφής για να γνωρίζετε ακριβώς πού έχει αποτύχει μια ενότητα χωρίς να επηρεάζονται οι υπόλοιπες.
• Κεντρική ασφάλεια: Η διαχείριση της αυθεντικοποίησης και της εξουσιοδότησης θα πρέπει κατά προτίμηση να γίνεται στο κέλυφος για να διασφαλίζεται η ασφαλής και ομοιόμορφη πρόσβαση.

Δεν μπορούμε να ξεχνάμε τη σημασία των Web Components . Χάρη σε πρότυπα όπως το Lit Element, μπορούμε να δημιουργήσουμε στοιχεία διεπαφής που είναι εντελώς ανεξάρτητα από το framework, επιτρέποντας σε ένα component που έχει κατασκευαστεί σε Angular να αποδίδεται τέλεια μέσα σε μια εφαρμογή React.

Βελτιστοποίηση απόδοσης και ανάπτυξη

Η εκκίνηση των microfrontends μπορεί να επηρεάσει αρνητικά την ταχύτητα φόρτωσης σελίδας, εάν δεν γίνει στρατηγικά. Η χρήση Δικτύων Παράδοσης Περιεχομένου (CDN) είναι απαραίτητη για την προβολή στατικών αρχείων από διακομιστές που βρίσκονται κοντά στον χρήστη, μειώνοντας δραστικά την καθυστέρηση. Επιπλέον, είναι σημαντικό να μοιράζεστε κοινές εξαρτήσεις, ώστε το πρόγραμμα περιήγησης να μην κατεβάζει την ίδια βιβλιοθήκη React ή Angular τρεις φορές.

Η ροή εργασίας αλλάζει ριζικά: μεταβαίνουμε από μια μονολιθική ανάπτυξη σε ανεξάρτητες διοχετεύσεις . Αυτό μειώνει τον κίνδυνο καταστροφικών σφαλμάτων, καθώς εάν αποτύχει μια ενημέρωση της ενότητας “Προφίλ χρήστη”, η υπόλοιπη εφαρμογή (όπως ο κατάλογος και η πύλη πληρωμών) συνεχίζει να λειτουργεί χωρίς προβλήματα.

Η υιοθέτηση αυτής της αρχιτεκτονικής συνεπάγεται μια αλλαγή νοοτροπίας, τόσο τεχνικά όσο και οργανωτικά, μετατρέποντας την ανάπτυξη σε μια πολύ πιο ευέλικτη και επεκτάσιμη διαδικασία. Συνδυάζοντας τη δύναμη της ομοσπονδίας μονάδων με την έξυπνη διαχείριση καταστάσεων και την αργή φόρτωση, οι εταιρείες μπορούν να δημιουργήσουν τεράστιες εφαρμογές που παραμένουν ανανεωμένες και εύκολες στην ενημέρωση μακροπρόθεσμα.