Γιατί πρέπει να χρησιμοποιήσετε το GatsbyJS για τη δημιουργία στατικών ιστότοπων

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

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

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

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

Τι είναι το Gatsby;

Είναι μια άλλη στατική γεννήτρια ιστότοπων όπως οι Hugo, Jekyll και ούτω καθεξής. Λοιπόν, τι το κάνει ξεχωριστό; Γιατί μιλάμε συγκεκριμένα για αυτό;

Το Gatsby μπορεί να χρησιμοποιηθεί για τη δημιουργία στατικών ιστότοπων που είναι Progressive Web Apps, ακολουθούν τα πιο πρόσφατα πρότυπα ιστού και έχουν βελτιστοποιηθεί για να έχουν υψηλή απόδοση. Χρησιμοποιεί τις πιο πρόσφατες και δημοφιλείς τεχνολογίες, όπως ReactJS, Webpack, GraphQL, μοντέρνο ES6 + JavaScript και CSS.

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

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

Προσέγγιση στην ανάπτυξη

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

Εάν ξεκινάτε με κάποιο από τα πιο πρόσφατα πλαίσια, ας πάρουμε την περίπτωση του React. Θα μπορούσατε να έχετε μια εφαρμογή και να λειτουργεί με ελάχιστη διαμόρφωση με το create-react-app. Αλλά αν ρίξετε μια ματιά στη δομή του έργου, μπορεί να μην έχει νόημα για έναν αρχάριο ή ακόμα και σε κάποιους προγραμματιστές που προέρχονται από άλλες τεχνολογικές στοίβες. Το μοτίβο είναι πολύ διαφορετικό από αυτό που έχετε ξαναδεί.

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

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

Χαρακτηριστικά

Συστατικά

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

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

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

Ομαδοποίηση πακέτων Web και πιο πρόσφατα εργαλεία

Το Webpack δημιουργεί βελτιστοποιημένα, ελαχιστοποιημένα πακέτα HTML, JavaScript και CSS. Όταν είναι προεγκατεστημένο με το Babel και περισσότερες προσθήκες, σας επιτρέπει να χρησιμοποιείτε τα πιο πρόσφατα ES6 + JavaScript και GraphQL.

Icing on the cake: Έχουμε εντυπωσιακή επαναφόρτωση και ενσωματωμένο διαχωρισμό κώδικα, προσφέροντας καλύτερη εμπειρία ανάπτυξης και καλύτερη απόδοση ιστότοπου. Αυτό έχει ως στόχο να κάνει τον προγραμματιστή να γράψει ελάχιστη διαμόρφωση εργαλείων και να επικεντρωθεί περισσότερο στην πραγματική ανάπτυξη ιστότοπου.

Πρόσθετα Gatsby, εκκινητές και πακέτα React

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

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

Χρησιμοποιώντας αυτά, το Gatsby μπορεί να επεκταθεί με επιπλέον λειτουργικότητα. Για παράδειγμα, μερικά παραδείγματα περιλαμβάνουν αποκριτικές εικόνες, λειτουργικότητα εκτός σύνδεσης, δεδομένα προέλευσης από CMS και μορφές σήμανσης δεδομένων, προσθήκη υπηρεσιών τρίτων (αναλυτικά στοιχεία Google κ.λπ.) και ούτω καθεξής.

Στυλ

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

Το Gatsby έχει υποστήριξη για βιβλιοθήκες SCSS, CSS-σε-JavaScript, επιτρέποντάς σας να διαχειρίζεστε τα στυλ καλύτερα και με ευκολία. Ακόμη και η ρύθμιση για αυτό είναι αρκετά εύκολο να χειριστεί με την εγκατάσταση ενός πρόσθετου ή πακέτου.

Αποκριτικές εικόνες

Αλλαγή μεγέθους εικόνων για απόκριση σε διαφορετικές συσκευές, τεμπέλης φόρτωσης, χρήσης srcsetsκαι picture… Ήδη ακούγεται κουραστικό όταν πρόκειται να γίνει χειροκίνητα.

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

Εν τω μεταξύ, στο Gatsby με μόνο ένα πρόσθετο, ειδικά το gatsby-plugin-sharp, μπορείτε να δημιουργήσετε απευθείας ρευστές εικόνες, να προσθέσετε φίλτρα, να αλλάξετε μορφές, να θολώσετε το φορτίο και πολλά άλλα. Αυτό εξοικονομεί πολλή δουλειά και χρόνο για να αλλάξετε το μέγεθος των εικόνων με μη αυτόματο τρόπο και να γράψετε ρητό κώδικα boilerplate για εικόνες που ανταποκρίνονται. Σας δίνει επίσης καλύτερη απόδοση και ομαλότερη εμπειρία χρήστη.

Εμπειρία σαν εφαρμογή

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

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

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

Το οικοσύστημα Gatsby

Πρόσθετα

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

Από τους διαφορετικούς τύπους προσθηκών του Gatsby, τα πρόσθετα προέλευσης gatsby λαμβάνουν συγκεκριμένα δεδομένα από μια τοπική ή απομακρυσμένη πηγή και επιτρέπουν τη χρήση τους μέσω GraphQL. Αυτές οι πηγές θα μπορούσαν να είναι CMS όπως Wordpress, Drupal, Plone, τοπική markdown, XML ή τέτοια αρχεία, βάσεις δεδομένων, API και μορφές δεδομένων όπως JSON, CSV.

Αυτό σημαίνει ότι σχεδόν οτιδήποτε μπορεί να χρησιμοποιηθεί ως πηγή για να συνεργαστεί με το Gatsby και να δημιουργήσει στατικούς ιστότοπους.

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

Μετά την εγκατάσταση, ορισμένα πρόσθετα μπορούν να χρησιμοποιηθούν αμέσως καταχωρώντας τα gatsby-config.jsκαι άλλα διαμορφωμένα με ένα αντικείμενο επιλογών.

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

Ορεκτικά

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

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

Τα θέματα Gatsby είναι ένα χαρακτηριστικό που βρίσκεται ακόμη σε εξέλιξη και σας επιτρέπει να συσκευάσετε και να επαναχρησιμοποιήσετε αυτές τις λειτουργίες και μοτίβα παρόμοια με αυτά που εμφανίζονται στους εκκινητές. Διαβάστε περισσότερα για το τι ετοιμάζει στο blog του Gatsby.

Στατικοί ιστότοποι

Πρώτον, ας ρίξουμε μια ματιά στο πώς λειτουργεί το Gatsby εσωτερικά. Σε αντίθεση με τα SPA που υποβάλλουν αιτήματα API κατά την εκτέλεση της εφαρμογής, το Gatsby κάνει όλα τα δεδομένα, συμπεριλαμβανομένων των δεδομένων που προέρχονται από τοπικά αρχεία, κατά τη διάρκεια του χρόνου κατασκευής. Στη συνέχεια, όλα αυτά τα δεδομένα χρησιμοποιούνται για τη δημιουργία στατικών αρχείων HTML, JavaScript και CSS. Αυτή η στατική απόδοση είναι αυτό που κάνει τα πράγματα να λειτουργούν πιο γρήγορα.

Αυτό ήταν πολλά για το Gatsby, το οικοσύστημα του και πώς σας βοηθά να δημιουργήσετε εκπληκτικούς στατικούς ιστότοπους. Γιατί όμως θα θέλαμε στατικούς ιστότοπους; Δεν ακούγεται σαν ένα βήμα πίσω από δυναμικά;

  • Δεν απαιτούν σύνθετη ρύθμιση διακομιστή με βάσεις δεδομένων, συντήρηση και δεν έχουν προβλήματα κλιμάκωσης.
  • Τα δεδομένα είναι πλήρως ασφαλή. Τα CMS και τα API έχουν ιδιωτικές δυνατότητες, αλλά τα δεδομένα εξακολουθούν να υπάρχουν στον διακομιστή που μπορούν να αξιοποιηθούν. Το Gatsby παίρνει μόνο τα απαιτούμενα δεδομένα για να εμφανιστεί από την πηγή και τα ιδιωτικά ή ασφαλή δεδομένα δεν υπάρχουν καν στην τελική έκδοση. Ποιο είναι το ασφαλέστερο που μπορεί να πάρει.
  • Αντί να βασίζεστε σε διακομιστές για τη δημιουργία δυναμικών σελίδων, προ-αποδώστε όλες τις σελίδες στο build και χρησιμοποιήστε CDN για μια γρήγορη και ομαλή εμπειρία για τους χρήστες σε όλο τον κόσμο.
  • Ο Gatsby κάνει στατική απόδοση. Αυτό καθιστά το περιεχόμενο διαθέσιμο ως HTML και βελτιστοποιημένη μηχανή αναζήτησης, χωρίς μεγάλο αρχικό χρόνο φόρτωσης.

Δοκίμασέ το!

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

Ίσως ήρθε η ώρα να βυθίσετε τα χέρια σας και να ρίξετε μια ματιά γύρω!

Χάρη στο CodeSandbox, μπορούμε να το κάνουμε αμέσως, στο ίδιο το πρόγραμμα περιήγησης.

Εάν θέλετε να το εκτελέσετε τοπικά, θα πρέπει να δείτε το gatsby-cli. Είναι ο πιο γρήγορος και ευκολότερος τρόπος για να ξεκινήσετε. Έχουν επίσης καταπληκτική τεκμηρίωση και σεμινάρια για να εξερευνήσετε αναπτυσσόμενους ιστότοπους στο gatsbyjs.org.

Ελπίζω να σας άρεσε αυτό το άρθρο και το βρήκατε χρήσιμο. Μπορείτε να δείτε όλα τα έργα μου στο Github ή το Dribbble και μην διστάσετε να επικοινωνήσετε μαζί μου στο Twitter!

Ίσως θέλετε επίσης να ρίξετε μια ματιά στα άλλα άρθρα μου:

Προοδευτικές εφαρμογές ιστού: Γεφύρωση του χάσματος μεταξύ εφαρμογών ιστού και κινητών

Αν δεν έχετε ζήσει κάτω από ένα βράχο, πιθανότατα έχετε ακούσει για PWA ή Progressive Web Apps. Είναι ένα καυτό θέμα σωστά… medium.freecodecamp.org Hackathon Report: Τι μπορείτε να κωδικοποιήσετε σε 30 ώρες; Αρκετά!

Τι μπορείτε να χτίσετε σε 30 ώρες κατ 'ευθείαν; Ως μια ομάδα φοιτητών δεύτερης χρονιάς με ένα αυξανόμενο χαρτοφυλάκιο εργασίας… medium.freecodecamp.org ACM Month Of Code 2k17: Building Moodify

Ο Μάρτιος ήταν ένας πολύ παραγωγικός μήνας, χάρη σε αυτή τη μεγάλη εκδήλωση που διοργανώθηκε από το Association for Computing Machinery, NIT… hackernoon.com