Πρόσφατα, η Angular κυκλοφόρησε μια ανεξάρτητη «βιωματική» δυνατότητα ανάπτυξης που ονομάζεται Zone.js. Αν και το χαρακτηριστικό είναι ακόμα πειραματικό, η ομάδα της Angular εργάζεται πάνω σε αυτή τη σημαντική καινοτομία εδώ και πολύ καιρό. Τα responsive primitives γίνονται όλο και πιο σημαντικά για τους προγραμματιστές, υποδεικνύοντας ότι η Angular εισέρχεται σε μια άλλη νέα εποχή. Γωνιακές εξαρτήσειςΤα πλεονεκτήματα των Signals και των Rxjs είναι ακόμη πιο έντονα, εξαλείφοντας την ανάγκη να ακούτε συνεχώς για αλλαγές από τις οποίες Zone.js εξαρτώνται, και κατέληξε να ενεργεί ως μεσάζων κατά τη διάρκεια της ανάπτυξης.
Το Angular θα συνεχίσει να είναι ένα τολμηρό και ισχυρό πλαίσιο στο μέλλον και θα ξεκινήσει έναν νέο μετασχηματισμό.
Πρώτα απ 'όλα, το άρθρο μου δεν έχει σκοπό να διδάξει τίποτα σε κανέναν. Ελπίζω οι αναγνώστες μου να μην αισθάνονται ότι τους αξίζει να είναι τόσο παθητικοί. Προσπαθώ να μοιράζομαι τις εμπειρίες και τις γνώσεις μου όσο το δυνατόν περισσότερο και να ανοίγομαι σε συζητήσεις. Είναι σημαντικό να συζητάμε μαζί, να ανταλλάσσουμε ιδέες και να αξιολογούμε με βάση την κριτική σκέψη. Δεν πρέπει να ξεχνάμε ότι εξακολουθεί να υπάρχει κάποια σύγχυση σχετικά με το πώς ακριβώς λειτουργούν, ειδικά όταν οι τεχνολογίες που συζητούνται σε αυτό το άρθρο εξακολουθούν να βιώνονται και θα έλεγα ότι ακόμη και ο μηχανισμός ανίχνευσης αλλαγών μπορεί να προκαλέσει κάποια σύγχυση στη βασική ομάδα στο Angular.
Τι είναι Zone.js και τι κάνει;
Zone.js είναι μια μικρή βιβλιοθήκη που αναπτύχθηκε από τον Brian Ford το 2010 με το όνομα "Zones" για τη διαχείριση ασύγχρονης εργασίας σε JavaScript. Εμπνευσμένο από γλώσσες όπως η Erlang και το Dart, στοχεύει να φέρει δομημένο συγχρονισμό στο περιβάλλον ενός νήματος της JavaScript. Η ομάδα Angular κέρδισε δυναμική όταν υιοθέτησε το Zones ως μηχανισμό ανίχνευσης αλλαγών στο Angular 2 και η ομάδα Angular άρχισε να το συνεισφέρει με τη μορφή Zone.js, παρέχοντας ευρύτερη συμμετοχή της κοινότητας και περαιτέρω ανάπτυξη. Σήμερα, αν και εξακολουθεί να είναι στενά συνδεδεμένο με το Angular, Zone.js μπορεί αναμφισβήτητα να θεωρηθεί ένα ισχυρό εργαλείο για την παρακολούθηση και την παρέμβαση σε ασύγχρονες εργασίες, επιτρέποντας ανάλυση απόδοσης, δυνατότητες χειρισμού σφαλμάτων και πολλές αμφισβητήσιμες λειτουργίες.
Γιατί λοιπόν η Angular εγκατέλειψε Zone.js;
Αξιοποιώντας την ικανότητα του AI να μεταμορφώνει αβίαστα τις φανταστικές μας εικόνες σε σχέδια, χρησιμοποιήσαμε τη μεταφορά του «σφουγγάρι κάτω από το κρεβάτι» για να δημιουργήσουμε μια εικόνα για εύκολη κατανόηση.
Φανταστείτε το κρεβάτι στην παραπάνω εικόνα, το οποίο δεν είναι τοποθετημένο στο πάτωμα, αλλά σε ένα μεγάλο σφουγγάρι. Zone.js είναι σαν σφουγγάρι σε μια εφαρμογή Angular. Αυτό το σφουγγάρι διασφαλίζει ότι το κρεβάτι κάθεται σε μια άνετη, υποστηρικτική βάση ενώ παρέχει σχετική άνεση στον ύπνο. Το σφουγγάρι απορροφά κάθε κίνηση του κρεβατιού, εμποδίζοντας την κίνηση μέσα στο κρεβάτι να αντανακλάται προς τα έξω.
Οι ενημερώσεις κώδικα μαϊμού στο Zone.js ακούσουν όλα τα ασύγχρονα API στο πρόγραμμα περιήγησης, όπως: συμβάντα, δεσμεύσεις, παρατηρήσιμα, setTimeout, setInterval κ.λπ.
Ακούγοντας αυτά, η εφαρμογή Angular μπορεί να εντοπίσει τυχόν αλλαγές και έτσι να ενημερώσει τη διεπαφή χρήστη, στην πραγματικότητα, ακριβώς όπως ένα κρεβάτι στήριξης σφουγγαριού, Zone.js επιτρέπει επίσης στην εφαρμογή Angular να λειτουργεί ομαλά. Σε αυτήν την περίπτωση, μπορεί να προκύψουν προβλήματα απόδοσης που δεν αισθανόμαστε σε πολύ μεγάλα έργα.
Από την άλλη, αυτή η πολύπλοκη δομή φαίνεται να μας εμποδίζει να αντιληφθούμε ορισμένες συγκεκριμένες αλλαγές με την πάροδο του χρόνου. Κάθε προηγούμενο χαρακτηριστικό και εξέλιξη, μαζί με τη δική του εσωτερική ανάπτυξη και τις μεταβαλλόμενες ανάγκες, γίνεται ξαφνικά εμπόδιο για την επόμενη και ανάπτυξη.
Όταν τραβάμε το σφουγγάρι από κάτω μας, βλέπουμε ότι αρχίζει να αναδύεται η φυσική ελευθερία κινήσεων καθώς το κρεβάτι βρίσκεται σε άμεση επαφή με το έδαφος. Όταν η περιοριστική επίδραση του σφουγγαριού αρχίζει να φθείρεται, σημαίνει ότι η κίνηση στο κρεβάτι θα αντανακλάται πλέον απευθείας στο έδαφος.
Μια τέτοια μεταφορά μπορεί να σημαίνει ότι το σφουγγάρι παρέχει μια ζώνη άνεσης και παρέχει έναν σχετικά πιο άνετο ύπνο. Zone.js όπως αυτό το σφουγγάρι, παρέχει μια σοβαρή ζώνη άνεσης που μας επιτρέπει να νιώθουμε κάθε αλλαγή σε όλη την επιφάνεια. Ωστόσο, με την πάροδο του χρόνου, αυτή η πολύπλοκη δομή μπορεί να μας εμποδίσει να αντιληφθούμε κάποιες συγκεκριμένες αλλαγές. Ο πόνος στη μέση μπορεί να εμφανιστεί όταν τραβάμε το σφουγγάρι από κάτω μας, και αυτοί οι πόνοι και οι πόνοι δείχνουν ότι έχουμε κατέβει από τεχνητό σε φυσικό έδαφος, και ενώ αυτή η εμπειρία μετάβασης μπορεί να είναι λίγο επώδυνη, τελικά, με ίσιο κάτω μέρος της πλάτης, πιο άνετο ύπνο και καλύτερη κυκλοφορία, καθώς και υγιέστερη σωματική και πνευματική οξύτητα. Όταν μεταβαίνουμε σε ζώνη χωρίς ζώνη, δηλαδή πόνος στην πλάτη και στις αρθρώσεις από τον ύπνο σε κρεβάτι χωρίς σφουγγάρι, είναι καλό σημάδι ότι μεταβαίνουμε από τεχνητό σε φυσικό έδαφος. Αν και αυτή η εμπειρία μετάβασης είναι λίγο επώδυνη, ο πόνος μετάβασης εξαφανίζεται επίσης καθώς το κάτω μέρος της πλάτης μας αρχίζει να αναδιαμορφώνεται στην προηγούμενη φυσική του κατάσταση, παρέχοντας καλύτερη κυκλοφορία. Το παράδειγμα μετάβασης εδώ αντιστοιχεί στο πειραματικό Zoneless που ακούσαμε στο Angular v18.
Zone.js θεωρείται ότι προσθέτει επιπλέον φορτίο επειδή παρακολουθεί τις λειτουργίες asektron και τις μεταβιβάζει σε μηχανισμούς γωνιακής ανίχνευσης όπως κλήσεις, συμβάντα, σφάλματα κ.λπ. Σήμερα, όσον αφορά την απόδοση της Angular, δεν μπορούμε να δούμε ούτε καν να αισθανθούμε το επιπλέον φορτίο εδώ. Zone.js θα μπορούσαν να αναπτυχθούν περαιτέρω και να επιλυθούν ορισμένα ζητήματα εντοπισμού σφαλμάτων, αλλά η βάση εδώ είναι ο οδικός χάρτης της Angular. Βλέπουμε ότι η ίδια η Angular ανέπτυξε πρωτόγονα σήματα που αντιδρούν Zone.js τώρα εμποδίζουν τα μελλοντικά σχέδια της Angular. Ενώ η δομή Signals είναι πολύ χρήσιμη όσον αφορά τους μηχανισμούς ανίχνευσης και επίσης καλή όσον αφορά την απόδοση, εύκολη στη χρήση και ισχυρή, Zone.js δεν είναι πλέον απαραίτητη, αλλά δεν είναι μια βιβλιοθήκη που μπορεί να εγκαταλειφθεί από τη μια μέρα στην άλλη.
Κατανοούμε ότι η Angular δεν θέλει να περιορίσει τα όνειρά της, αλλά μάλλον θέλει να δημιουργήσει μια πιο ευέλικτη και αξιόπιστη εφαρμογή με ένα πιο αυτάρκης πλαίσιο, εξαλείφοντας όσο το δυνατόν περισσότερο τις ενδιάμεσες διαδικασίες. Βλέπουμε τη Angular να κινείται προς μια πιο πρακτική κατάσταση και να προσπαθεί να αδράξει την ευκαιρία να μπει ξανά στην ανοδική τάση στο μέλλον. Δυστυχώς, από την τρέχουσα έρευνα StateofJS, δεν μπορούμε να πούμε ότι βρίσκεται σε τέτοια τάση, αλλά βλέπουμε επίσης ότι η Angular είναι ανοιχτή σε όλες τις πιθανές καινοτομίες.
Πώς μπορώ να μεταβώ σε λειτουργία χωρίς ζώνη στο Angular 18;
Το Angular 18 έρχεται με ένα βήμα που μας επιτρέπει να μεταβούμε σε λειτουργία χωρίς ζώνη και να απαλλαγούμε από το σφουγγάρι. Όπως φαίνεται παρακάτω, μπορούμε τώρα να παρέχουμε αυτήν την εμπειρία χρησιμοποιώντας τον μηχανισμό ανίχνευσης αλλαγής χωρίς ζώνη στη φάση εκκίνησης.
Με την προσθήκη της παραπάνω λειτουργίας στον πάροχο, μπορούμε τώρα να χρησιμοποιήσουμε την εντολή npm uninstall zone.js για να αφαιρέσουμε από το angular.json τα zone.js που ορίζονται στον παρακάτω πίνακα polyfills.
Τώρα μπορούμε να χρησιμοποιήσουμε το Angular Zoneless!
Ποια είναι τα πλεονεκτήματα του Zoneless;
Το Zoneless παρέχει ένα πιο βελτιωμένο οικοσύστημα για τις εφαρμογές μας εξαλείφοντας τις περιττές λειτουργίες ακρόασης. Αυτό σημαίνει ταχύτερη απόδοση, υψηλότερη απόδοση, ταχύτερη φόρτωση σελίδων, μικρότερα μεγέθη πακέτων και ευκολότερο εντοπισμό σφαλμάτων.
Κάντε μια κλασική δοκιμή όπου προσθέτετε έναν μετρητή κάνοντας κλικ σε ένα κουμπί και θέλετε να αυξήσετε αυτόν τον αριθμό όταν κάνετε κλικ στο κουμπί. Σε αυτήν την περίπτωση, μπορούμε να δούμε ότι η αλλαγμένη τιμή αποδίδεται όταν ενεργοποιείται κάθε συνάρτηση και αυτή η τιμή αλλάζει στο HTML. Επειδή είναι ήδη μια συνάρτηση και την ενεργοποιούμε απευθείας, αποδίδεται εδώ. Τι συμβαίνει όμως αν αυτή η τιμή αλλάξει λόγω εξωτερικών επιρροών και θέλουμε να δούμε οποιαδήποτε αλλαγή τιμής χωρίς να την ενεργοποιήσουμε χειροκίνητα; Εάν υπάρχει Zone.js, ακούει συνεχώς όλες τις αλλαγές και ειδοποιεί την Angular για λογαριασμό μας. Ωστόσο, δεδομένου ότι δεν υπάρχει τέτοιος μηχανισμός αυτή τη στιγμή, πρέπει είτε να ενεργοποιήσουμε τον μηχανισμό ανίχνευσης αλλαγών μετά από κάποια ασύγχρονη λειτουργία, είτε να χρησιμοποιήσουμε απευθείας Signals ή RxJS, ώστε η αλλαγή να μπορεί να εντοπιστεί άμεσα λόγω αυτής της αντιδραστικότητας.
Η εξαφάνιση του Sponge μας διδάσκει ότι δεν είναι μόνο Zone.js που εξαφανίζεται, είναι και η «ζώνη άνεσης».
Εάν χρησιμοποιήσουμε Zone.js ως λειτουργική μονάδα με ακατέργαστη JavaScript, θα μοιάζει με αυτό.
Στο Angular, δεν χρειάζεται να αντιμετωπίσουμε αυτές τις καταστάσεις. Με το ngZone, αυτές οι λειτουργίες λειτουργούν ήδη παράλληλα με τον μηχανισμό ανίχνευσης.
Για παράδειγμα, στην περίπτωση του άμεσου DOM, των ακροατών συμβάντων, των παρατηρήσιμων και των δεσμεύσεων, των αιτημάτων HTTP και των ροών σύγχρονου ελέγχου, πρέπει να ενεργοποιήσουμε χειροκίνητα τον μηχανισμό ανίχνευσης αλλαγών για ασύγχρονες λειτουργίες.
Δεδομένου ότι τα σήματα ή τα R xjs ανιχνεύουν αυτόματα τις αλλαγές, δεν χρειάζεται να ενεργοποιήσετε τον μηχανισμό ανίχνευσης αλλαγών.
Παράδειγμα σήματος:
Τώρα ας γράψουμε μια εφαρμογή για να δοκιμάσουμε τους μηχανισμούς ανίχνευσης αλλαγών Zoneless και Angular και να δούμε πώς λειτουργεί.
Μετά την έναρξη του διαστήματος που ορίζεται παραπάνω ως στάνταρ, βλέπουμε ότι αρχίζει να λειτουργεί, αλλά το DOM δεν ανανεώνεται και οι αλλαγές δεν αντικατοπτρίζονται. Όταν χρησιμοποιούμε το διάστημα έναρξης σήματος, βλέπουμε ότι λειτουργεί χωρίς να ενεργοποιεί τον μηχανισμό ανίχνευσης αλλαγών του Angular. Όπως μπορείτε να δείτε, καθώς ξεκινά το συμβάν κλικ και το διάστημα σήματος, το Angular παρατηρεί την αλλαγή, καταγράφει αμέσως την αλλαγή στο τυπικό διάστημα και, στη συνέχεια, την απελευθερώνει.
Όταν στέλνουμε την τιμή σε μια μεταβλητή στο γονικό στοιχείο, διαπιστώνουμε ότι γίνεται αντιληπτή διαφορετικά τόσο στις περιπτώσεις push όσο και στις προεπιλεγμένες.
Όταν συνδέουμε την είσοδο στα αριστερά, η αλλαγή αντικατοπτρίζεται όταν δεν υπάρχει περιοχή, και ομοίως, μπορούμε να δούμε ότι η αλλαγή αντικατοπτρίζεται μετά από κλικ λόγω της υπόσχεσης.
Εδώ βλέπουμε ότι μετά από μια κλήση HTTP χωρίς ανίχνευση αλλαγών, οι αλλαγές δεν αντικατοπτρίζονται, μόνο όταν τις ενεργοποιούμε χειροκίνητα. Φυσικά, το Signals αντικατοπτρίζει εύκολα τους νεοφερμένους στην επιθυμητή οθόνη. Μερικοί από τους κωδικούς είναι οι εξής:
app.component.ts
change-detection-demo.component.ts
Η εφαρμογή έχει δημοσιευτεί στο Stacklibitz και μπορείτε να δείτε τις υπόλοιπες δοκιμές. Μπορείτε επίσης να παρακολουθείτε τα αποτελέσματα στη διεπαφή χρήστη μέσω κώδικα.
Stackblitz:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Το GitHub:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Υπάρχει επίσης ένα δείγμα εφαρμογής παρακάτω που δείχνει πώς λειτουργεί ο μηχανισμός ανίχνευσης αλλαγών του Angular και μπορείτε να το δοκιμάσετε και από εκεί.
Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Πράγματα που πρέπει να λάβετε υπόψη κατά τη μετάβαση σε λειτουργία χωρίς περιοχή
Είναι σημαντικό να σημειωθεί ότι, όπως υποδηλώνει το όνομά του, το ExperimentalZonelessChangeDetection εξακολουθεί να είναι πειραματικό.
Ενώ κάναμε κάποιες δοκιμές, παρατηρήσαμε κάποιες παραξενιές στον μηχανισμό ανίχνευσης αλλαγών. Για παράδειγμα, όταν ορισμένες αλλαγές δεν ενεργοποιούνται χειροκίνητα, δεν βλέπουμε αλλαγές στο DOM και η κατάσταση δεν ανανεώνεται. Ωστόσο, όταν μια άλλη μεταβλητή σήματος ή αντίδρασης λειτουργεί εκτός του μηχανισμού ανίχνευσης αλλαγών και προκαλεί την ανανέωση του DOM, μπορούμε να παρατηρήσουμε ότι ανανεώνεται και η κατάσταση που δεν είχε ανανεωθεί προηγουμένως.
Εάν θέλετε να εφαρμόσετε αυτήν τη δυνατότητα σε ένα υπάρχον έργο, θα πρέπει να δοκιμάσετε προσεκτικά όλες τις ενέργειες και τη συμπεριφορά της εφαρμογής. Συγκεκριμένα, οι βιβλιοθήκες τρίτων ενδέχεται να βασίζονται σε Zone.js, γεγονός που μπορεί να οδηγήσει σε ορισμένα σφάλματα και προβλήματα απόδοσης.
Αρχικός:Η σύνδεση με υπερσύνδεσμο είναι ορατή. |
Δημοσιεύτηκε στις 2024-12-30 11:02:42
|
|
|
|
Σπιτονοικοκύρης|
Δημοσιεύτηκε στις 2024-12-30 11:04:13
|
