Yiannis Christodoulou

15+ years experience in web development, mostly with Joomla! & WordPress

Back to blog

Joomla! or WordPress ως HeadLess CMS στο Backend και React με NextJS για Frontend

Καλώς ή κακώς τα τελευταία 15 περίπου χρόνια δούλευα αποκλειστικά με PHP, και κυρίως με Joomla! και WordPress plugin development. Με JavaScript δούλευα ελάχιστα, και πιο συχνά χρησιμοποιούσα jQuery για λόγους ταχύτητας.

Το φετινό καλοκαίρι μιας και είχα ξεμπερδέψει από νωρίς με το migration των Web357 Joomla! extensions διανύοντας τη νέα εποχή του Joomla! 4, βρήκα την ευκαιρία να ασχοληθώ με NodeJS, ReactJS, TypeScript και NextJS.

Αγόρασα, λοιπόν, κάποια courses στο Udemy από τον εξαιρετικό Brad Traversy, παρακολούθησα αρκετά playlists από το κανάλι του The Net Ninja στο Youtube, και φυσικά τους φίλους Social Nerds (ελληνόφωνο κανάλι στο Youtube). Αυτά τα τρια κανάλια ήταν αρκετά για να πάρω μια γεύση και να δω τι γίνεται με την ReactJS που τόσο πολύ ακούγεται και τόσο πίσω είχα μείνει λόγω έλλειψης χρόνου και υποχρεώσεων.

Λένε, ότι, ο καλύτερος τρόπος για να παρακολουθήσεις ένα course είναι να φτιάξεις ένα side project παράλληλα γιατί μαθαίνεις καλύτερα από το να βλέπεις μόνο. Οπότε τι καλύτερο από το να ξεκινήσω με την αναβάθμιση του προσωπικού μου website yiannistaos.com.

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

Home Page

Στην Αρχική σελίδα χρησιμοποιώ το UIkit framework

Εδώ έχω σπάσει την σελίδα σε διάφορα components (Heading, Nav, Footer), τα οποία χρησιμοποιώ σε όλες τις εσωτερικές σελίδες.

Portfolio

Στο Portfolio θα δείτε ότι υπάρχουν τρεις κατηγορίες. Τα Websites, τα Extensions for Joomla! CMS, και τα Plugins for WordPress.

Τα websites τα παίρνω από ένα custom post type ενός WordPress, με τίτλο “Projects”. Το endpoint είναι αυτό.

Τα extensions & plugins τα παίρνω απευθείας από το rest api του WooCommerce από εξωτερικό website, το web357.com. Το endpoint είναι αυτό (δεν δουλεύει το link στον browser γιατί χρειάζεται consumer key και consumer secret το οποία στέλνω με fetch εσωτερικά).

Blog

Στο Blog παίρνω όλα τα posts από το WordPress (webmastros.com) που το χρησιμοποιώ ως headless CMS, χρησιμοποιώντας αυτό το endpoint.

Όπως θα διαπιστώσετε και από την ταχύτητα φόρτωσης, δεν χτυπάω κάθε φορά τον server για να πάρω δεδομένα, ούτε για την αναζήτηση. Το loading (spinner) που βλέπετε είναι ψεύτικο με setTimeout στο 1,5 δευτερόλεπτο. Αποθηκεύω όλα τα δεδομένα τοπικά στον browser του χρήστη και του τα σερβίρω ανάλογα με τα φίλτρα αναζήτησης που θα βάλει (π.χ. string ή sort by date), καλό;

Contact

Τέλος, η Contact page είναι μια απλή σελίδα που χρησιμοποιεί κοινό component με την front page για να παρουσιάσει τα social media icons με τα links τους.

Αποτέλεσμα από GTmetrix.

Αποτέλεσμα από Google PageSpeed Insights.

Deployment

Για deployment χρησιμοποίησα το Vercel, το οποίο είναι εξαιρετικότατο για τέτοιες δουλειές. Εκεί έχω φτιάξει δυο branches, το “main” για το production, και το “dev” για το testing website. Το Vercel, κάθε φορά που κάνω push στο X branch μου κάνει αυτόματα build το website και μου το σερβίρει σε ένα dev domain για να μπορεί να βλέπει ο πελάτης τις αλλαγές πριν ανέβει στο site. Ούτε FTP, ούτε cPanel, ούτε Plesk, κτλ., ούτε χάσιμο χρόνου. Ένα push και έφυγε!

Συμπέρασμα

Τα CMS (Joomla! και WordPress) είναι εξαιρετικά, οι πελάτες τα έχουν λατρέψει, και προβλέπω να μένουν στην αγορά για πολλά χρόνια ακόμα. Ωστόσο στο frontend κομμάτι υστερούν αρκετά και έχουμε μπλέξει λίγο τα μπούτια μας με τα πολλά extensions/plugins/themes.

Σε θέματα deployment και παραγωγικότητας, κυρίως για τον web developer, δεν μπορώ να σκεφτώ κάποιον καλύτερο συνδυασμό αυτή τη στιγμή. Οπότε ναι, WordPress/Joomla! ως HeadLess CMS και React/NextJS για frontend, είναι εξαιρετική επιλογή για ένα σύγχρονο website/app που σέβεται το brand του.

Leave a comment