Τι είναι το Gatsby και γιατί ήρθε η ώρα να φτάσετε στο τρένο

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

Περιμένετε, τι είναι το Gatsby;

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

Η έμφαση τους (θα εξηγήσω αργότερα). Μου αρέσει να το περιγράψω ως Δημιουργία εφαρμογής React στα στεροειδή, όπου είναι ένας εύκολος τρόπος για να κάνετε bootstrap μια εφαρμογή React και να επικεντρωθώ στο να γίνετε παραγωγικοί με τα πραγματικά διαφορετικά μέρη της εφαρμογής σας. Στον πυρήνα του, είναι μια ένδοξη εφαρμογή Webpack, όπου όλα χτίζονται πάνω στον ίδιο αγωγό Webpack που έχετε δυσκολευτεί να γράψετε και να κατανοήσετε πλήρως μέχρι σήμερα (ή ίσως αυτό είναι μόνο εγώ).

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

Είναι όλα στα σενάρια

Το Gatsby είναι ένα από τα πολλά διαθέσιμα εργαλεία που υποστηρίζει την αρχιτεκτονική JAMstack. Για τους άγνωστους, το JAM σημαίνει API Javascript και Markup, ή σχεδόν έναν στατικό ιστότοπο HTML που χρησιμοποιεί javascript για να κάνει τη μαγεία να συμβεί.

Οι εφαρμογές JAMstack έχουν πολλά οφέλη από το κουτί, όπως:

  • Εύκολη φιλοξενία
  • Φτηνές φιλοξενία
  • Φορτώνει εξαιρετικά γρήγορα (τις περισσότερες φορές)

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

Ακούγεται λίγο οικείο;

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

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

const Nav = () => { return ( A normal nav component in a normal Gatsby app. ) }

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

Λοιπόν, τι το κάνει πραγματικά τόσο υπέροχο;

Κυριολεκτικά bootstrap σε λιγότερο από ένα λεπτό

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

Για παράδειγμα, αν θέλετε να δημιουργήσετε ένα νέο έργο barebones με το Sass:

$ gatsby new my-cool-gatsby-project //github.com/colbyfayock/gatsby-starter-sass $ cd my-cool-gatsby-project $ yarn develop

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

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

Συγκεντρώστε τα όλα στο πλέγμα περιεχομένου

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

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

Δωρεάν ενίσχυση απόδοσης!

Έξω από το κουτί, έχετε τη διαμόρφωση της υπερφόρτισης webpack που περιλαμβάνει διαχωρισμό κώδικα, προ-λήψη, ενσωματωμένα στυλ, ελαχιστοποίηση στοιχείων και πολλά άλλα μεγαλοπρεπή. Αναβαθμίστε τόσο εύκολα με πληθώρα προσθηκών που είναι εύκολο να διαμορφώσετε, όπως ρύθμιση της εφαρμογής σας ως PWA (προοδευτική εφαρμογή ιστού) και παροχή της δυνατότητας για λειτουργία εκτός σύνδεσης

Υπάρχουν πολλές λέξεις-κλειδιά εκεί, αλλά στο τέλος της ημέρας, αυτό σημαίνει ότι ο ιστότοπός σας θα πρέπει να βασίζεται σε βέλτιστες πρακτικές που βελτιστοποιούν όλα τα στοιχεία του ιστότοπού σας για ταχύτητα και παράδοση, καθιστώντας ταυτόχρονα όσο το δυνατόν πιο προσιτή, μεταβαίνοντας για παλαιότερα προγράμματα περιήγησης και διασφαλίζοντας ότι οι αργές συνδέσεις δεν σπαταλούν πολύτιμους πόρους. Είναι δύσκολο να επιβεβαιωθεί ως σκληρό στατιστικό, αλλά ο Kyle Mathews (Gatsby Founder) ισχυρίζεται ότι οι ιστότοποι του Gatsby είναι 2-3 φορές ταχύτεροι από παρόμοιους τύπους ιστότοπων.

Αυξημένη παραγωγικότητα!

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

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

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

Μεγάλη κοινότητα

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

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

Φίλος του Hackerman

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

Το ίσως όχι τόσο υπέροχο…

Η γρήγορη δημιουργία αποδίδει περισσότερα σφάλματα

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

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

Απλώς φροντίστε να είστε προσεκτικοί στη δοκιμή των αναβαθμίσεων του πακέτου σας και μην φοβάστε να υποβαθμίσετε και να κλειδώσετε την έκδοση του πακέτου σας εάν αντιμετωπίζετε προβλήματα.

Οι στατικοί ιστότοποι είναι πρώτης τάξεως και όχι εφαρμογές ιστού

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

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

Απλά δοκιμάστε το ήδη!

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

Δημιουργήστε, πειραματιστείτε και μοιραστείτε τα υπέροχα πράγματα που κάνετε!

Επεξεργασία: Άλλαξε «επιβράδυνση» σε «αποφυγή βιασύνης» για να αποσαφηνίσει την πρόθεση της δήλωσης, καθώς δεν επιβραδύνει το ποσό της πραγματικής εργασίας που μπαίνει, αλλά προσπαθούν να είναι πιο προσεκτικοί με αυτό.

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; ️ Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου

Αρχικά δημοσιεύτηκε στο //www.colbyfayock.com/2019/09/what-is-gatsby-and-why-its-time-to-get-on-the-hype-train