Τι είναι η προοδευτική βελτίωση και γιατί έχει σημασία

Το Progressive Enhancement (PE) είναι μια ισχυρή μεθοδολογία για την ανάπτυξη διαδικτυακών εφαρμογών.

Εδώ είναι ένας επίσημος ορισμός:

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

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

Και με λίγα λόγια…

… Μας δίνει βασική εμπειρία χρήστη και πολλαπλή συμβατότητα μεταξύ των προγραμμάτων περιήγησης για να διασφαλίσουμε τη σταθερότητα.

let PE = "Progressive Enhancement";

Η στρατηγική PE αποτελείται από τις ακόλουθες βασικές αρχές:

  • Το βασικό περιεχόμενο πρέπει να είναι προσβάσιμο σε όλα τα προγράμματα περιήγησης ιστού
  • Η βασική λειτουργικότητα πρέπει να είναι προσβάσιμη σε όλα τα προγράμματα περιήγησης ιστού
  • Η αραιή, σημασιολογική σήμανση περιέχει όλο το περιεχόμενο
  • Η βελτιωμένη διάταξη παρέχεται από εξωτερικά συνδεδεμένο CSS
  • Η βελτιωμένη συμπεριφορά παρέχεται από διακριτικό, εξωτερικά συνδεδεμένο JavaScript
  • Οι προτιμήσεις του προγράμματος περιήγησης ιστού τελικού χρήστη τηρούνται

Έτσι, όταν δημιουργείτε τον επόμενο ιστότοπό σας με πλαίσια JavaScript / CSS επόμενης γενιάς που λειτουργούν μόνο στο πιο ευνοϊκό περιβάλλον για τον κώδικά σας και σπάει όταν δεν τον παίρνει…. δεν πρόκειται για στρατηγική προοδευτικής βελτίωσης.

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

Παραδείγματα PE

Ας δούμε μερικά από τα παραδείγματα που δείχνουν πώς λειτουργεί η στρατηγική PE.

Γραμματοσειρές Web

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

Η εμφάνιση περιεχομένου είναι καλύτερη από το να περιμένετε γραμματοσειρές ιστού - ή να μην λαμβάνετε τίποτα.

Αρχικό HTML

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

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

Έλεγχος χαρακτηριστικών

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

Το Modernizr είναι μια δημοφιλής βιβλιοθήκη για ανίχνευση χαρακτηριστικών που μπορεί να σας βοηθήσει.

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

Τώρα, γιατί PE;

Σημαντικοί λόγοι για να εστιάσετε στη στρατηγική PE πριν δημιουργήσετε την επόμενη εφαρμογή σας:

Ισχυρό Ίδρυμα

Το PE επικεντρώνεται στην έναρξη του έργου σας χρησιμοποιώντας μόνο τις πολύ βασικές τεχνολογίες ιστού πριν από την εισαγωγή ορισμένων από τα πολύ περίπλοκα χαρακτηριστικά. Έτσι, σε όλες τις περιπτώσεις, έχετε τη βάση να υποστηρίξετε τις σύνθετες λειτουργίες σας για να βεβαιωθείτε ότι λειτουργούν.

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

Σταθερότητα

Quality Team : "Το εικονίδιο αναζήτησης δεν λειτουργεί στη σελίδα Safari for Offers"

Dev Team : "Λοιπόν λειτουργεί στο μηχάνημά μου , εκκαθάριση προσωρινής μνήμης, επαναφόρτωση ή κύβος"

Quality Team (από τον ουρανό): "Ακόμα δεν λειτουργεί, ελέγχετε το Chrome, σπάει στο Safari"

Dev Team : «Πότε ξεκινήσαμε να υποστηρίζουμε το Safari; Περίμενε…. επιδιόρθωση επιδιόρθωσης ……… ”

if(getBrowsers() == 'safari') {
Patch.magicHelpers.searchIconMagic()
}
Patch.magicHelpers = {
searchIconMagic: function() {
// Can't share magic, doing something
 }};

"Μετά από 1 ώρα ...... ελέγξτε τώρα".

Quality Team: "Λειτουργεί καλά για το Chrome και το Safari, αλλά έσπασε για τον Mozilla τώρα ... Αχχχ !!!!!"

Λοιπόν, όλοι βρισκόμασταν σε αυτήν την κατάσταση τουλάχιστον μία φορά.

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

Η στρατηγική PE σας βοηθά να δημιουργήσετε ένα ισχυρό θεμέλιο για το έργο σας όπου τα HTML, CSS και JS είναι ευθυγραμμισμένα και στοχεύουν στην παροχή εναλλακτικών. Προσπαθούν να διασφαλίσουν ότι δεν βασίζεστε σε μεγάλο βαθμό μόνο σε συγκεκριμένες λειτουργίες του προγράμματος περιήγησης.

SEO και προσβασιμότητα

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

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

Προοδευτικές εφαρμογές Ιστού(PWA) έχουν σχεδιαστεί για να λειτουργούν για όλους τους χρήστες, ανεξάρτητα από την επιλογή του προγράμματος περιήγησής τους, επειδή είναι κατασκευασμένοι με προοδευτική βελτίωση ως βασική αρχή.

Κλείνοντας σκέψεις

Η στρατηγική PE εστιάζει σε μια ισχυρή βάση για το έργο σας. Αυτή η ισχυρή βάση σας βοηθά στο όραμά σας για το προϊόν σας για ένα μακροπρόθεσμο σχέδιο.

Είναι εύκολο να συνδεθείτε σε ένα νέο πλαίσιο JavaScript / CSS για το νέο σας έργο και να ξεκινήσετε την κωδικοποίηση, αλλά αυτό μπορεί να οδηγήσει σε χαριτωμένη υποβάθμιση. Θα συνεχίσετε να επιδιορθώνετε τον κώδικά σας με εναλλακτικά προγράμματα περιήγησης ή συσκευές που δεν υποστηρίζουν πλαίσια.

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

Ελπίζω ότι αυτό έδωσε μια επισκόπηση της Προοδευτικής Στρατηγικής Βελτίωσης.

Μη διστάσετε να αφήσετε ένα σχόλιο παρακάτω.

Σας ευχαριστούμε που διαβάσατε αυτό το άρθρο! Αν έχετε απορίες, στείλτε μου ένα email (praveend806 [at] gmail [dot] com).

Πόροι που μιλούν περισσότερο για PE και περιπτωσιολογικές μελέτες:

Σχεδιασμός με προοδευτική βελτίωση: Δημιουργία του διαδικτύου που λειτουργεί για όλους

Η προοδευτική βελτίωση είναι μια προσέγγιση στην ανάπτυξη ιστού που στοχεύει να προσφέρει την καλύτερη δυνατή εμπειρία στο… www.oreilly.com Unboring.net | Ροή εργασίας: Εφαρμογή προοδευτικής βελτίωσης σε ένα έργο WebVR

Πώς έφτιαξα ένα διαδραστικό περιεχόμενο για να ενσωματωθεί στο weather.com unboring.net