Μια εισαγωγή στο JAMstack: η αρχιτεκτονική του σύγχρονου διαδικτύου

Είμαι βέβαιος ότι έχετε συναντήσει τη λέξη JAMstack στο παρελθόν, αλλά ίσως να μην καταλάβατε τι σήμαινε πραγματικά. Έχω ξαναδεί αυτή τη λέξη, αλλά δεν ήθελα να τη δω μέχρι το Egwuenu Gift να οργανώσει το JAMstack Lagos. Στη συνέχεια συνειδητοποίησα ότι έχω ήδη δημιουργήσει εφαρμογές JAMstack.

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

Σε αυτό το άρθρο, θα σας παρουσιάσω τι σημαίνει το JAMstack, γιατί πρέπει να νοιάζεστε, βέλτιστες πρακτικές και πώς να ξεκινήσετε. ;

Εισαγωγή

Σύμφωνα με την επίσημη τεκμηρίωση του JAMstack,

Το JAMstack είναι μια μοντέρνα αρχιτεκτονική ανάπτυξης ιστού που βασίζεται σε JavaScript πελάτη, επαναχρησιμοποιήσιμα API και προκαθορισμένη σήμανση. Όταν μιλάμε για το "The Stack", δεν μιλάμε πλέον για λειτουργικά συστήματα, συγκεκριμένους διακομιστές ιστού, γλώσσες προγραμματισμού backend ή βάσεις δεδομένων. Το JAMstack δεν αφορά συγκεκριμένες τεχνολογίες. Είναι ένας νέος τρόπος δημιουργίας ιστότοπων και εφαρμογών που προσφέρει καλύτερη απόδοση, υψηλότερη ασφάλεια, χαμηλότερο κόστος κλιμάκωσης και καλύτερη εμπειρία προγραμματιστή.

Το JAMstack είναι μια σημαντική τάση στην ανάπτυξη διαδικτύου που επινοήθηκε από τον Mathias Biilman, τον διευθύνοντα σύμβουλο και συνιδρυτή της Netlify.

Εντάξει, ηρεμήστε! Τι είναι το JAMstack;

Ίσως να έχετε συναντήσει συγκεκριμένους όρους, όπως MEAN stack και MERN stack. Αυτοί είναι απλώς όροι που χρησιμοποιούνται για την ταξινόμηση ή ομαδοποίηση ορισμένων τεχνολογιών με σκοπό την επίτευξη ενός συγκεκριμένου στόχου.

Το JAMstack εδώ σημαίνει

J avaScript

Ένα PI

M arkup

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

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

Χρήσιμοι Όροι

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

  • Το API είναι το αρκτικόλεξο για το Application Programming Interface, το οποίο είναι ένας διαμεσολαβητής λογισμικού που επιτρέπει σε δύο εφαρμογές να μιλούν μεταξύ τους.
  • Το CDN (δίκτυο παράδοσης περιεχομένου) είναι ένα σύστημα κατανεμημένων διακομιστών (δίκτυο) που παραδίδει σελίδες και άλλο περιεχόμενο Ιστού σε έναν χρήστη, με βάση τις γεωγραφικές τοποθεσίες του χρήστη, την προέλευση της ιστοσελίδας και τον διακομιστή παράδοσης περιεχομένου.
  • Ο διακομιστής είναι ένας υπολογιστής που έχει σχεδιαστεί για την επεξεργασία αιτημάτων και την παράδοση δεδομένων σε άλλον υπολογιστή μέσω του Διαδικτύου ή ενός τοπικού δικτύου.
  • Η βάση δεδομένων είναι μια συλλογή πληροφοριών που είναι οργανωμένες έτσι ώστε να είναι εύκολα προσβάσιμες, διαχειριζόμενες και ενημερωμένες

Γιατί JAMstack;

Οι παραδοσιακοί ιστότοποι ή οι ιστότοποι CMS (π.χ. WordPress, Drupal κ.λπ.) βασίζονται σε μεγάλο βαθμό σε διακομιστές, προσθήκες και βάσεις δεδομένων. Ωστόσο, το JAMstack μπορεί να φορτώσει κάποια JavaScript που λαμβάνει δεδομένα από ένα API, εξυπηρετώντας αρχεία από ένα CDN και σήμανση που δημιουργείται χρησιμοποιώντας μια στατική γεννήτρια ιστότοπου κατά τη διάρκεια της ανάπτυξης.

Ακούγεται δροσερό, σωστά ;!

Το JAMstack είναι γρήγορο

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

Το JAMstack είναι εξαιρετικά ασφαλές

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

Το JAMstack είναι φθηνότερο και ευκολότερο να κλιμακωθεί

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

Βέλτιστες πρακτικές JAMstack

  • Χρησιμοποιήστε το CDN για να διανείμετε τα αρχεία σας αντί για διακομιστές
  • Η εγκατάσταση και η συμβολή στο έργο σας πρέπει να είναι εύκολη και λιγότερο περίπλοκη. Χρησιμοποιήστε εργαλεία όπως npm και Git για να διασφαλίσετε την τυπική και ταχύτερη ρύθμιση.
  • Χρησιμοποιήστε εργαλεία κατασκευής και κάντε το έργο σας συμβατό για όλα τα προγράμματα περιήγησης (π.χ. Babel, Browserify, Webpack κ.λπ.)
  • Βεβαιωθείτε ότι το έργο σας ανταποκρίνεται στα πρότυπα ιστού και είναι εξαιρετικά προσβάσιμο
  • Βεβαιωθείτε ότι η διαδικασία κατασκευής σας είναι αυτοματοποιημένη για τη μείωση του στρες.
  • Κάντε αυτόματη τη διαδικασία ανάπτυξης, μπορείτε να χρησιμοποιήσετε πλατφόρμες όπως το Netlify για να το κάνετε αυτό

Πώς μπορώ να ξεκινήσω;

Μπορείτε να χρησιμοποιήσετε ορισμένες ήδη ενσωματωμένες τεχνολογίες για να δημιουργήσετε εφαρμογές JAMstack σε λίγα λεπτά. Εδώ είναι μερικά:

  • Gatsby : Το Gatsby είναι ένα δωρεάν και ανοιχτού κώδικα πλαίσιο βασισμένο στο React, το οποίο βοηθά τους προγραμματιστές να δημιουργούν γρήγορους ιστότοπους και εφαρμογές
  • NuxtJS : Το NuxtJS είναι το Vue.js Framework για Καθολικές εφαρμογές, εφαρμογές στατικής δημιουργίας, εφαρμογές μίας σελίδας, προοδευτικές εφαρμογές ιστού και εφαρμογές για επιτραπέζιους υπολογιστές
  • Hugo : Το Hugo είναι το γρηγορότερο πλαίσιο στον κόσμο για την κατασκευή ιστότοπων. Είναι μία από τις πιο δημοφιλείς γενικές γεννήτριες στατικού ιστότοπου ανοιχτού κώδικα. Με την εκπληκτική ταχύτητα και ευελιξία, το Hugo κάνει τη δημιουργία ιστοσελίδων διασκεδαστική ξανά.
  • Netlify CMS : Το Netlify CMS είναι μια διαχείριση περιεχομένου ανοιχτού κώδικα για τη ροή εργασίας σας στο Git, η οποία μπορεί να χρησιμοποιηθεί με οποιαδήποτε στατική γεννήτρια ιστότοπου για ένα ταχύτερο και πιο ευέλικτο έργο Ιστού
  • Contentful : Contentful είναι ένα πιο έξυπνο και απρόσκοπτο σύστημα διαχείρισης περιεχομένου που παρέχει στους συντάκτες και τους προγραμματιστές ένα ενοποιημένο περιεχόμενο, ενισχύοντας έτσι τη συνεργασία και διασφαλίζοντας τα ψηφιακά προϊόντα να μεταφέρονται στην αγορά γρηγορότερα.
  • Svelte : Το Svelte είναι μια ριζική νέα προσέγγιση στη δημιουργία διεπαφών χρήστη. Ενώ τα παραδοσιακά πλαίσια όπως το React και το Vue κάνουν το μεγαλύτερο μέρος της δουλειάς τους στο πρόγραμμα περιήγησης , το Svelte αλλάζει αυτό που λειτουργεί σε ένα μεταγλωττισμένο βήμα που συμβαίνει όταν δημιουργείτε την εφαρμογή σας.

και πολλά άλλα. . .

Χρήσιμοι πόροι

  • JAMstack WTF
  • Πώς να δημιουργήσετε έναν ιστότοπο JAMstack
  • Τι είναι το JAMstack και γιατί πρέπει να το δοκιμάσετε
  • Ένα CMS έτοιμο για JAMstack
  • JAMstack για πελάτες: Στα οφέλη και στατικό ιστότοπο CMS
  • Πηγαίνετε στατικός: 5 λόγοι για να δοκιμάσετε το JAMstack στο επόμενο έργο σας
  • Στατικοί ιστότοποι + JAMstack = ❤

Βρείτε περισσότερους πόρους εδώ

συμπέρασμα

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

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

Γίνετε μέλος της κοινότητας JAMstack για να μάθετε περισσότερα και να λάβετε περισσότερες ενημερώσεις.

PS: Αυτό το άρθρο δημοσιεύτηκε για πρώτη φορά στο blog μου εδώ