Πώς να αποφασίσετε για την καλύτερη τεχνολογία για τον ιστότοπό σας

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

Αλλά από πού ξεκινάμε;

Πρέπει να εγκαταστήσουμε εργαλεία; Είναι καλή ιδέα να χρησιμοποιήσετε JavaScript ή να διατηρήσετε την απόδοση από διακομιστή χρησιμοποιώντας MVC ή ένα all-in-one CMS; Θα εξηγήσω πώς να φέρω τη ζωή στους ιστότοπούς σας και να τις προετοιμάσω για το μέλλον.

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

Μια λύση all-in-one διακομιστή

Η χρήση μιας λύσης all-in-one, όπως ένα σύστημα διαχείρισης περιεχομένου (CMS), θα διασφαλίσει ότι ο ιστότοπός σας θα λειτουργεί και λειτουργεί γρήγορα. Τουλάχιστον η πρώτη του έκδοση. Η εγκατάσταση και η πρόσβαση στη διεπαφή διαχείρισης για πρώτη φορά μπορεί να σας πάρει μόλις λίγα λεπτά εάν έχετε ήδη έτοιμο το περιβάλλον ανάπτυξης (διαφορετικά προσθέστε μερικές ώρες για την εγκατάσταση).

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

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

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

Όταν χρησιμοποιούσα συστήματα CMS στο παρελθόν, αργά ή γρήγορα καταλήγω πάντα να δημιουργώ προσαρμοσμένα στοιχεία ελέγχου (δηλαδή, προσαρμοσμένο κώδικα), καθώς η έξοδος HTML των τυπικών στοιχείων ελέγχου δεν ήταν επαρκής ή αντιβαίνει άμεσα σε νέα βιομηχανικά πρότυπα, όπως οι Accelerated Mobile Pages. Θεωρώ ότι αυτή είναι η μεγαλύτερη προειδοποίηση των συστημάτων CMS, σε περιορίζουν με διάφορους τρόπους καθώς τοποθετούνται ως κύρια μηχανή του ιστότοπού σου. Πάντα βρισκόμουν να επιλύω μικρές εργασίες 80% του χρόνου.

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

Ακέφαλη προσέγγιση

Εξήγησα τα πλεονεκτήματα της αρχιτεκτονικής microservice σε ένα άλλο άρθρο. Σήμερα, όλοι ονομάζουν αυτήν την προσέγγιση χωρίς κεφαλή, επειδή το βασικό μέρος της αρχιτεκτονικής της μικροεξυπηρέτησης είναι το headless CMS (για παράδειγμα το Kentico Cloud). Λειτουργεί ως μέρος όπου αποθηκεύετε όλο το περιεχόμενο και διασφαλίζει την παράδοση. Το κύριο πλεονέκτημα είναι ότι είναι απλώς μια άλλη υπηρεσία. Είστε ο νέος επικεφαλής του ιστότοπού σας. Λέτε πώς λειτουργούν οι υπηρεσίες μεταξύ τους και ποιες από αυτές θα αξιοποιήσετε. Το Headless CMS είναι απλώς μια άλλη υπηρεσία σε ολόκληρη τη στοίβα. Αλλά πώς το κάνεις αυτό;

Επιτρέψτε μου να σας το δείξω στον προσωπικό μου ιστότοπο. Όταν έρχεται ένας επισκέπτης, περιμένουν να δουν κάτι τέτοιο:

Η αρχική σελίδα του ιστότοπού μου είναι απλώς ένας απλός κώδικας HTML με περιεχόμενο. Τώρα, υπάρχουν δύο τρόποι δημιουργίας αυτού του κώδικα HTML. Είτε εμμένουμε στην τυπική προσέγγιση της δημιουργίας όλων στον διακομιστή:

Ή κόβουμε λίγο τον διακομιστή ιστού και συνθέτουμε τον κώδικα HTML στον πελάτη:

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

Σύγχρονη JavaScript

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

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

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

1. Γωνιακό JS

Το Angular έχει τη μεγαλύτερη ιστορία από αυτά τα τρία. Ιδρύθηκε πριν από σχεδόν 10 χρόνια το 2009! Αναπτύσσεται και συντηρείται από την Google. Σε σύγκριση με άλλα πλαίσια, έχει πιο σύνθετη σύνταξη που βασίζεται στο TypeScript και θα σας ζητήσει να ρυθμίσετε μια διαδικασία κατασκευής. Ωστόσο, υποστηρίζει modularity και ένα μοντέλο MVVM που επιτρέπει στις εφαρμογές που είναι κατασκευασμένες πάνω από το Angular να είναι πολύ στιβαρές.

Θυμάμαι ότι το χρησιμοποίησα για πρώτη φορά το 2013 για ένα ημικρατικό έργο όπου μας επέτρεψε να δημιουργήσουμε ένα γρήγορο front-end για τη διαχείριση όλων των ειδών οντοτήτων. Ήταν τόσο εύκολο να δημιουργήσετε πλούσιες λίστες με λειτουργίες σελιδοποίησης, φιλτραρίσματος και ταξινόμησης.

2. ReactJS

Το React ιδρύθηκε αρχικά και προήλθε από το Facebook το 2013. Είναι βασισμένο σε στοιχεία που το καθιστούν εύκολο να μάθει. Τα στοιχεία του υλοποιούνται χρησιμοποιώντας σύνταξη JSX, η οποία βρίσκεται μεταξύ JavaScript και HTML. Είναι επίσης εύκολο να καταλάβουμε την αρχική αρχιτεκτονική, καθώς κάθε στοιχείο είναι σαν μια ενότητα που συμβάλλει στην έξοδο HTML. Αν σας αρέσει το Legos, θα σας αρέσει το React!

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

3. VueJS

Το Vue κυκλοφόρησε το 2014 και αναπτύσσεται γρήγορα - επί του παρόντος, έχει τη μεγαλύτερη αύξηση έλξης στην κοινότητα. Είναι πολύ παρόμοιο με το React, αλλά ελαφρώς ευκολότερο για αρχάριους. Λάμπει με τη λεπτομερή τεκμηρίωση και την πολύ εύκολη ενσωμάτωση. Τα στοιχεία βασίζονται σε απλό HTML που το καθιστά πολύ εύκολο για αρχάριους JavaScript. Είναι επίσης το ελαφρύτερο από αυτά τα τρία.

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

Εάν θέλετε να δείτε τη σύγκριση σε βάθος, ανατρέξτε στο εξαιρετικό άρθρο της TechMagic ή στη σύγκριση του Jens Nauhaus στο Medium.

Επιλέγοντας το σωστό πλαίσιο

Όταν πρόκειται για την επιλογή του σωστού πλαισίου, οι προγραμματιστές συνήθως επιλέγουν αυτό με το οποίο είχαν προηγούμενη εμπειρία (αν ήταν καλή εμπειρία). Αλλά αν είστε νέοι στην ανάπτυξη front-end, πρέπει να εξετάσετε τους στόχους που έχετε ορίσει για τον ιστότοπό σας. Η σωστή επιλογή εξαρτάται σε μεγάλο βαθμό από το έργο που χτίζετε. Επιτρέψτε μου λοιπόν να συνοψίσω τις προσδοκίες μου:

  • Καμπύλη γρήγορης μάθησης - Πρέπει να δημιουργήσω τον ιστότοπο όσο το δυνατόν γρηγορότερα
  • Ελαφριά εφαρμογή - ο ιστότοπος θα είναι αρκετά μικρός, επομένως θέλω να ελαχιστοποιήσω τον χρόνο φόρτωσης
  • Εύκολη ενσωμάτωση - Δεν θέλω να ρυθμίσω διαδικασίες κατασκευής, αλλά αρχίστε αμέσως να εργάζεστε στον ιστότοπο
  • Καλή τεκμηρίωση - όποτε είμαι νέος σε κάτι, βρίσκομαι στην περιήγηση στην τεκμηρίωση όλη την ώρα για συγκεκριμένες περιπτώσεις χρήσης
  • Εύκολη δρομολόγηση - υπάρχουν πολλές σελίδες στον ιστότοπό μου, οπότε χρειάζομαι έναν δρομολογητή για να χειριστώ διάφορες διευθύνσεις URL
  • Απλή παράδοση περιεχομένου - Θα χρησιμοποιήσω ένα σύστημα Content-as-a-Service, οπότε χρειάζομαι έναν εύκολο τρόπο για να λάβω περιεχόμενο σε JavaScript

Έτσι μπορείτε να δείτε ότι στην περίπτωσή μου το Vue.js ταιριάζει καλύτερα. Είναι εύκολο στη χρήση και ενσωμάτωση για αρχάριους και έχει εκπληκτική τεκμηρίωση με εύκολα μαθήματα. Γράψτε τις προσδοκίες σας και δείτε αν το Vue.js ταιριάζει επίσης.

Το τελευταίο σημείο σχετικά με την παράδοση περιεχομένου είναι πολύ σημαντικό. Όλα αυτά τα πλαίσια JavaScript σάς επιτρέπουν να λαμβάνετε περιεχόμενο μέσω του REST API, αλλά η υλοποίηση πρώτων κλήσεων API θα είναι πολύ χρονοβόρα και δεν είναι καθόλου διασκεδαστική. Ορισμένα ακουστικά συστήματα CMS, όπως το Kentico Cloud, παρέχουν ένα SDK για JavaScript, το οποίο αποτελεί ανακεφαλαίωση γύρω από την επικοινωνία REST με πολλές επιπλέον δυνατότητες. Αυτό θα κάνει τη συλλογή περιεχομένου πολύ πιο εύκολη.

Η τελική αρχιτεκτονική του νέου ιστότοπου μπορεί να έχει την εξής μορφή:

Το πρώτο αίτημα για τον ιστότοπο επιλύεται επιστρέφοντας ένα κύριο πρότυπο HTML με αρχεία JavaScript. Όταν το πρόγραμμα περιήγησης αρχίσει να επεξεργάζεται τη λογική του JavaScript, το Vue.js θα αρχικοποιηθεί και θα ζωντανέψει τα στοιχεία μας. Καθένα από αυτά τα στοιχεία ενεργεί στη συνέχεια ανεξάρτητα - εμφανίζει HTML, ανακτά δεδομένα από χωρίς κεφαλή CMS ή δημοσιεύει δεδομένα υποβολών φόρμας σε μια υπηρεσία web φόρμας.

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

Άλλα άρθρα στη σειρά:

  1. Πώς να ξεκινήσετε να δημιουργείτε έναν εντυπωσιακό ιστότοπο για πρώτη φορά
  2. Πώς να αποφασίσετε για την καλύτερη τεχνολογία για τον ιστότοπό σας (αυτό το άρθρο);
  3. Πώς να ενισχύσετε τον ιστότοπό σας με Vue.js και ελάχιστη προσπάθεια
  4. Πώς να αναμίξετε το Headless CMS με έναν ιστότοπο Vue.js και να πληρώσετε μηδέν
  5. Πώς να κάνετε τις υποβολές φόρμας ασφαλείς σε έναν ιστότοπο API
  6. Η δημιουργία ενός εξαιρετικά γρήγορου και ασφαλούς ιστότοπου με CMS δεν είναι μεγάλη υπόθεση. Ή μήπως είναι?
  7. Πώς να δημιουργήσετε έναν στατικό ιστότοπο με το Vue.js σε χρόνο μηδέν
  8. Πώς να ρυθμίσετε γρήγορα μια διαδικασία κατασκευής για έναν στατικό ιστότοπο