Home-theater-designers
Οι εφαρμογές μιας σελίδας (SPA) και οι προοδευτικές εφαρμογές ιστού (PWA) φέρνουν επανάσταση στον ιστό. Είναι και οι δύο νέες τεχνολογίες που μοιάζουν, αλλά δεν είναι. Στο πρόσωπο, οι άνθρωποι συχνά τα χρησιμοποιούν εναλλακτικά.
Ας εμβαθύνουμε στα βασικά χαρακτηριστικά και την αρχιτεκτονική του καθενός από αυτά για να τα κατανοήσουμε καλύτερα.
Τι είναι οι εφαρμογές μιας σελίδας;
Τα SPA, όπως ακούγονται, είναι ιστότοποι που φορτώνουν περιεχόμενο δυναμικά σε μία σελίδα. Στην ουσία, κάθε μορφή περιεχομένου και στοιχείου που χρειάζεστε για να αλληλεπιδράσετε εκτείνεται σε μία σελίδα. Αυτό σημαίνει ότι δεν χρειάζεται να φορτώσετε ξεχωριστά πρότυπα αντικειμένου εγγράφου (DOM) κατά την πλοήγηση σε έναν τέτοιο ιστότοπο.
Τούτου λεχθέντος, ο στόχος είναι να διατηρούνται οι χρήστες στην ίδια σελίδα φορτώνοντας όλα όσα χρειάζονται για να χρησιμοποιήσουν και να δουν ταυτόχρονα. Αυτό μεταφράζεται σε μια καλύτερη εμπειρία χρήστη.
Η διεπαφή χρήστη, από την άλλη πλευρά, εξαρτάται από τον τρόπο που σχεδιάζετε και οργανώνετε το SPA σας. Αυτό οφείλεται στο γιατί μπορεί να θέλετε να διασπάσετε την τεντωμένη σελίδα σε πλοήγηση. Και αυτό δεν το εμποδίζει να είναι μία σελίδα, καθώς το περιεχόμενο εξακολουθεί να φορτώνεται μόνο μία φορά.
Έτσι, όταν πλοηγείστε σε ένα SPA, περιηγείστε σε προφορτωμένο περιεχόμενο σε ένα μόνο DOM και δεν επισκέπτεστε διαφορετικούς DOM όπως μπορεί να πιστεύατε λανθασμένα.
Η διάσπαση ενός SPA σε ξεχωριστές ενότητες περιεχομένου περιλαμβάνει συνήθως την παροχή σε καθένα από αυτά ενός URL χρησιμοποιώντας προβολές JavaScript. ο σύνδεσμος δεδομένων Ο σύνδεσμος συνδέει αυτές τις ενότητες με τον κύριο DOM και σας επιτρέπει να έχετε πρόσβαση σε αυτές ασύγχρονα.
Αν και άλλες τεχνολογίες όπως Οπως και και φτελιά-σπα έρχονται, το JavaScript εξακολουθεί να είναι η πιο κοινή γλώσσα προγραμματισμού για τη δημιουργία SPA.
Σχετικά: Πλαίσια JavaScript που αξίζει να μάθετε
Η JavaScript χρησιμοποιεί ένα async/αναμονή λειτουργία που σας επιτρέπει να φορτώνετε τόσο δυναμικό όσο και στατικό περιεχόμενο ασύγχρονα χωρίς μία είσοδος να αποκλείει την έξοδο ενός άλλου αιτήματος. Έτσι, τα SPA λειτουργούν σε ένα μη μπλοκαρισμένο σύστημα εισόδου-εξόδου (I/O).
Τούτου λεχθέντος, τα πλαίσια JavaScript όπως τα ReactJS, Vue.js, AngularJS, Ember.js και Backbone.js όλα υποστηρίζουν την ταχεία ανάπτυξη SPA. Για να ξεκινήσετε, μπορείτε να ανατρέξετε σε αυτήν την αρχική επισκόπηση του Vue.js.
Επειδή προσδίδει ταχύτητα, οι περισσότερες εταιρικές εφαρμογές έχουν υιοθετήσει την ιδέα να μετατρέψουν τους ιστότοπούς τους σε μία σελίδα. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter και Pinterest είναι όλα παραδείγματα SPA.
Τι είναι οι προοδευτικές εφαρμογές Ιστού;
Το PWA είναι μια διαδικτυακή εφαρμογή ή λογισμικό που χρησιμοποιεί τυπικές και αναδυόμενες οδηγίες για το πρόγραμμα περιήγησης ιστού στη λειτουργικότητά του. Τα PWA, σε αντίθεση με τα SPA, βασίζουν την αρχιτεκτονική τους σε ορισμένες κατευθυντήριες γραμμές που τις καθιστούν επεκτάσιμες, προσαρμόσιμες στο χρήστη, εξαιρετικά γρήγορες, εγκαταστάσιμες και μητρικές.
Ο στόχος ενός PWA που εισήχθη το 2015 από την Google είναι να δημιουργήσει εφαρμογές που μιλούν άμεσα και προοδευτικά στους χρήστες του. Στοχεύει να διατηρήσει τη ροή των χρηστών με την εφαρμογή, ακόμη και όταν υπάρχει κακή ή ανύπαρκτη σύνδεση δικτύου.
Αναμφίβολα, ένα PWA παρέχει όλα όσα χρειάζεστε σε ένα στιγμιότυπο. Δεν περνάει από το τυπικό χαρακτηριστικό αρχικής φόρτωσης περιεχομένου ενός SPA.
Κατά συνέπεια, ένας χρήστης αλληλεπιδρά με την εφαρμογή σαν να είναι εγγενής. Παρόλο που ένα βασικό χαρακτηριστικό των PWA είναι η δυνατότητα εγκατάστασης, μπορείτε ακόμα να έχετε πρόσβαση σε αυτά εν κινήσει μέσω του προγράμματος περιήγησής σας χωρίς καμία εγκατάσταση. Τούτου λεχθέντος, όπως κάθε άλλος ιστότοπος, ένα PWA πρέπει επίσης να έχει μια διεύθυνση URL.
Σχετίζεται με: Τι είναι οι προοδευτικές εφαρμογές Ιστού και πώς εγκαθιστάτε μία;
Οι προοδευτικές εφαρμογές ιστού είναι μοναδικές στο ότι έχουν βοηθούς στο παρασκήνιο που παραδίδουν περιεχόμενο όσο λάμψει. Έτσι, ακόμη και πριν φτάσετε στην εφαρμογή Ιστού, το περιεχόμενο και τα στοιχεία είναι άμεσα διαθέσιμα για χρήση από εσάς. Αυτό τα κάνει εξαιρετικά γρήγορα και πιο αξιόπιστα.
Εφαρμογές όπως το Spotify, το Slack και το Uber, μεταξύ άλλων, είναι παραδείγματα PWA.
Τα PWA έχουν γενικά έναν κοινό αρχιτεκτονικό κανόνα. Για να λειτουργήσει ένα PWA όπως πρέπει, πρέπει να έχει τα ακόλουθα χαρακτηριστικά:
1. Ένας Εργαζόμενος
Οι εργαζόμενοι σε υπηρεσίες παραδίδουν περιεχόμενο εύκολα σε PWA. Εξασφαλίζουν ότι η εφαρμογή σας μπορεί να φορτώσει σχετικά αποθηκευμένα δεδομένα όταν δεν υπάρχει σύνδεση δικτύου. Αυτό είναι δυνατό με τη βοήθεια του Cache API, το οποίο αποθηκεύει τις απαντήσεις στα αιτήματά σας εκτός σύνδεσης. Έτσι, ένας εργαζόμενος παρεμβαίνει στις πλοηγήσεις και στα αιτήματα των χρηστών.
Σχετίζεται με: Πώς λειτουργεί η προσωρινή μνήμη CPU;
Χρησιμοποιώντας ένα υπόσχεση αντικείμενο, ένας εργαζόμενος μπορεί να παραδώσει ήδη κατεβασμένο περιεχόμενο σε περίπτωση ενδεχόμενου αιτήματος από έναν χρήστη (ακόμα και όταν είναι εκτός σύνδεσης). Ένας υπάλληλος υπηρεσιών, ωστόσο, παρέχει μια ιδιότητα μη αποκλεισμού στα PWA.
2. Ένα ασφαλές πλαίσιο
Ένας υπάλληλος υπηρεσιών χρειάζεται μια ασφαλή σύνδεση (HTTPS) για την εμπιστευτικότητα του παραδοθέντος περιεχομένου. Όταν στέλνετε ένα αίτημα, ένας εργαζόμενος δημιουργεί ασφαλή επικοινωνία μεταξύ του PWA και του προγράμματος περιήγησης. Ένα ασφαλές πλαίσιο, επομένως, αποτρέπει τις παραβιάσεις του απορρήτου, όπως μια επίθεση στο μέσο (MITM) σε PWA.
3. Ένα Αρχείο Διαφημιστικής Εφαρμογής Ιστού
Ένα μανιφέστο ιστού είναι ένα αρχείο JSON που καθορίζει τα χαρακτηριστικά ενός PWA. Αναφέρει λεπτομερώς τις προϋποθέσεις πρόσβασης, ανακάλυψης και χρήσης του περιεχομένου ενός PWA. Συνήθως περιλαμβάνει το όνομα της εφαρμογής σας, τη διεύθυνση URL και τα στοιχεία της. Τελικά, ένα μανιφέστο αρχείο περιέχει τις απαραίτητες πληροφορίες για να μετατρέψει την εφαρμογή ιστού σας σε εφαρμογή που μπορεί να εγκατασταθεί.
Ποιες είναι οι ομοιότητες μεταξύ PWA και SPA;
Ενώ η λογική του PWA και των SPA είναι διαφορετική, εξακολουθούν να έχουν μερικά κοινά πράγματα. Παρόλο που η ταχύτητα παράδοσής τους μπορεί να διαφέρει σημαντικά, οι συμβατικοί ιστότοποι εξακολουθούν να υστερούν σε ταχύτητα και προσβασιμότητα.
Και οι δύο στοχεύουν στη βελτίωση της εμπειρίας του χρήστη παρέχοντας μια ανταποκρινόμενη διεπαφή.
Επειδή και οι δύο παρέχουν μια εμπειρία εφαρμογής, είναι εύκολο να τα ανακατέψετε και δύσκολα μπορείτε να ξεχωρίσετε ποια είναι όταν αλληλεπιδράτε μαζί τους. Τέλος, σε αυτήν τη σημείωση, και οι δύο χρειάζονται μια διεύθυνση URL για να μπορέσετε να έχετε πρόσβαση σε αυτές.
Οι βασικές διαφορές μεταξύ SPA και PWA
Τα PWA και τα SPA μπορεί να μοιράζονται μερικά κοινά χαρακτηριστικά, αλλά είναι δύο διαφορετικά πράγματα. Ακολουθούν οι βασικές διαφορές χαρακτηριστικών που πρέπει να σημειώσετε:
Βασικά χαρακτηριστικά των εφαρμογών μιας σελίδας
- Είναι προσβάσιμα μόνο μέσω του προγράμματος περιήγησης.
- Παρόλο που δεν συνιστάται, μπορείτε να τα εξυπηρετήσετε μέσω μη ασφαλούς δικτύου (HTTP).
- Δεν απαιτούν εργαζόμενους στην υπηρεσία.
- Τα SPA δεν διαθέτουν αρχείο εκδήλωσης JSON, πράγμα που σημαίνει ότι είναι απεγκατάστατα.
- Πρέπει να είναι μονοσέλιδες.
- Δεν είναι προσβάσιμο όταν δεν υπάρχει δίκτυο.
Βασικά χαρακτηριστικά των προοδευτικών εφαρμογών Ιστού
- Η πρόσβαση σε αυτά μέσω του προγράμματος περιήγησης είναι μια επιλογή, δεδομένου ότι είναι εγκατάστατα.
- Όλα τα PWA χρειάζονται εργαζόμενους στην υπηρεσία και πρέπει να υποβάλλουν αιτήματα μέσω ασφαλούς δικτύου (HTTPS).
- Οι απαντήσεις αποθηκεύονται στην προσωρινή μνήμη και παραδίδονται μέσω a υπόσχεση αντικείμενο.
- Είναι προσβάσιμα ακόμη και ελλείψει σύνδεσης δικτύου.
- Είναι πιο γρήγορα από τα SPA.
- Έχουν πάντα ένα μανιφέστο αρχείο, επομένως μπορούν να μεταφορτωθούν, να εγκατασταθούν και να είναι εύκολα προσβάσιμα.
- Ένα PWA μπορεί να μην είναι εφαρμογή μιας σελίδας.
Τα SPA και τα PWA επηρεάζουν την παράδοση ιστοσελίδων
Με πολλούς εταιρικούς ιστότοπους που υιοθετούν τώρα αυτές τις νέες τεχνολογίες, υπάρχει πλέον μια θετική στροφή προς την παροχή των υπηρεσιών τους.
Το πιο σημαντικό, η υιοθέτηση PWA βελτιώνει τη γενική εμπειρία των χρηστών, γεγονός που συνεπώς μειώνει τα ποσοστά εγκατάλειψης και αυξάνει τα έσοδα για τις περισσότερες εταιρικές εφαρμογές. Τα SPA, από την άλλη πλευρά, έχουν επίσης αναζωογονήσει τα μέσα κοινωνικής δικτύωσης, καθιστώντας εύκολη την αλληλεπίδραση των ανθρώπων μέσω του διαδικτύου χωρίς υποτονική φόρτωση σελίδων.
πώς να μάθετε πότε δημοσιεύτηκε ένα άρθροΜερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Σύγχρονος εναντίον ασύγχρονου προγραμματισμού: Πώς διαφέρουν;
Πρέπει να χρησιμοποιήσετε σύγχρονο ή ασύγχρονο προγραμματισμό για το επόμενο έργο σας; Μάθετε εδώ.
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- Προγραμματισμός
- Ανάπτυξη εφαρμογών
Η Idowu είναι παθιασμένη με οτιδήποτε έξυπνη τεχνολογία και παραγωγικότητα. Στον ελεύθερο χρόνο του, παίζει με κωδικοποίηση και μεταβαίνει στη σκακιέρα όταν βαριέται, αλλά του αρέσει επίσης να ξεφεύγει από τη ρουτίνα κάθε τόσο. Το πάθος του για να δείξει στους ανθρώπους τον δρόμο γύρω από τη σύγχρονη τεχνολογία τον παρακινεί να γράψει περισσότερα.
Περισσότερα από το Idowu OmisolaΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή