Headless WordPress- Βαγγέλης Παπαϊωάννου

WordCamp Athens 2019

Ανάπτυξη ιστοσελίδων με τη χρήση του GatsbyJS (static site generator) και του WordPress ως data source, git + deployment στο Netlify.Ασφαλή, πραγματικά γρήγορα και SEO optimized websites / PWA.
– Τι είναι και ποια τα οφέλη του JAMstack
– Τι είναι τα Static generators, εισαγωγή/παρουσίαση στο/του – GatsbyJS
– Netlify CDN
– GraphQL / Rest API
– Headless WordPress
– GatsbyJS + React + WordPress
– Οφέλη και case studiesΘα υπάρχει repository με το κώδικα καθώς και demo website.

Transcript

1. Headless WordPress Ανάπτυξη ιστοσελίδων κάνοντας χρήση του GatsbyJS και του WordPress ως Headless CMS. Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
2. Lead developer στη Nuttifox & Co-founder της Gatsboy. vagelis@nuttifox.com twitter.com/vagpapdev Βαγγέλης Παπαϊωάννου https://vagelis.dev facebook.com/nuttifox Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
3. Βασικές έννοιες: 01 Headless CMS? JAMstack? Static site generators? 02 03 Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
4. Ονομάζεται ένα σύστημα διαχείρισης περιεχομένου ( CMS ), όταν το μόνο που χρησιμοποιούμε από αυτό είναι η περιοχή δημιουργίας περιεχομένου. ( CRUD: create, read, update, and delete ) Ένα βασικό πλεονέκτημα των headless CMS, είναι ότι έχουμε τη δυνατότητα να χρησιμοποιήσουμε οποιαδήποτε εργαλεία θέλουμε για τη δημιουργία του Front end. Ταυτόχρονα μπορούμε να διαχειριζόμαστε το περιεχόμενο μέσω του αγαπημένου μας CMS. 01 Headless CMS? Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
5. Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
6. Javascript γλώσσα προγραμματισμού για τον ιστό. : ουσιαστικό \’τζάμ-στακ’\ Μοντέρνα αρχιτεκτονική ανάπτυξης ιστοσελίδων βασισμένη σε Javascript, APIs και Markup. APIs διεπαφές προγραμματισμού εφαρμογών. ( Application Programming Interface ) Markup γλώσσα σήμανσης. ( Markdown ) stack : ουσιαστικό \’στάκ’\ Σωρός. JAMstack? 02 Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
7. • Jekyll Εργαλεία / frameworks που χρησιμεύουν στην ανάπτυξη “στατικών” ιστοσελίδων ( και όχι μόνο ) κάνοντας χρήση της αρχιτεκτονικής JAMstack. Static site generators? 03 • Gatsby JS • Hugo • Next • GitBook Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
8. • Webpack Ένας από τους καλύτερους static site generators αυτη τη στιγμή Gatsby JS 03 • React JS • GraphQL • Plugins / Node ecosystem • Serverless Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
9. ➔ Εμπειρία προγραμματισμού ( developer experience ) ➔ Επεκτασιμότητα ➔ Ελευθερία Γιατί Headless? ➔ Ταχύτητα ➔ Ασφάλεια ➔ Χρήση πολλών διαφορετικών συστημάτων / πηγών δεδομένων ταυτόχρονα ➔ Οικοσύστημα ( εργαλεία, plugins, components κλπ ) ➔ Χρήση τεχνολογιών πέρα των δυνατοτήτων του CMS ➔ SEO ( last but not least ) Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
10. ➔ Πρόσβαση σε “hosting” για το front end σου ( Netlify ) ➔ Πρόσβαση στο Github / Bitbucket ➔ Static site generator ( Gatsby JS + node JS, npm / yarn ) Τι θα χρειαστώ για να ξεκινήσω ; ➔ CMS ( WordPress ) ➔ Υπομονή & αυτοπεποίθηση. “Αν μπορώ εγώ, μπορείς κι εσύ! ” ( θυμήσου πως έχω δυσλεξία ) ➔ Πρόσβαση σε hosting για το CMS ( κάτι απλό ) Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
11. Δημιουργία νέου site. ( create a new site ) $ gatsby new my-site ή $ git clone starter Αφού εγκαταστήσουμε το GatsbyJS και ότι άλλο χρειαζόμαστε για να ξεκινήσουμε το project μας, εκτελούμε gatsby new my-site αν θέλουμε να ξεκινήσουμε από την αρχή, διαφορετικά “τραβάμε” κάποιο starter.
12. Έναρξη τοπικού διακομιστή. ( start development server ) $ gatsby develop ή $ gatsby build & gatsby serve Το επόμενο βήμα μας θα είναι να “μπούμε” μέσα στο νέο φάκελο και να εκτελέσουμε την εντολή gatsby develop αν ξεκινάμε από την αρχή ή npm install / yarn αν έχουμε κάποιο starter. Αμέσως μετά από ένα “πρόχειρο” build του site μας από το gatsby θα έχουμε ένα τοπικό server στο port 8000 ο οποίος θα επαναφορτωνει αυτόματα τον ιστότοπο σε κάθε αλλαγή που κάνουμε ( hot-reloading ).
13. Δομή. ( file structure ) Ο κάθε φάκελος έχει τη δική του χρήση και σημασία. Η δομή του project μας θα είναι όπως φαίνεται παρακάτω.
14. Ανάπτυξη ιστοσελίδας στο Netlify ( ζωντανά ) Ας δούμε τώρα πως γίνεται στη πράξη, ζωντανά.
16. Παραδείγματα Case studies Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
17. Headless CMS + Gatsby = PWA Progressive Web App PWA βασισμένο στο WordPress & το GatsbyJS. Σκοπός της εφαρμογής ήταν η συλλογή στοιχείων καθώς και η διαφήμιση των υπηρεσιών μας στη Hampshire Business Expo 2019. Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
18. Μπάρες ( mpares.com ) Ελληνική εταιρεία που ήθελε ένα απλό website αλλα με δυνατότητα διαχείρισης περιεχομένου. ➔ Netlify forms ➔ Headless CMS ➔ Gatsby build Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
19. Gatsboy dashboard. Εφαρμογή για desktop βασισμένη στο GatsbyJS, το WordPress και το Electron. Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
20. Performance Επιδόσεις. Εξαιρετικά αποτελέσματα στις μετρήσεις ( χωρίς εκπτώσεις στο σχεδιασμό ) με πολύ χαμηλό κόστος φιλοξενίας ( εώς και μηδενικό ). Πραγματικά γρήγορες και ασφαλείς ιστοσελίδες που δεν έχουν να ζηλέψουν τίποτα σε σχεδιασμό και λειτουργικότητα.
21. Ελπίζω να αποκομίσατε κάτι από την παρουσίαση που μόλις παρακολουθήσατε. Εγώ κι ο Chris θα είμαστε στη διάθεση σας καθ’ όλη τη διάρκεια της ημέρας, αν θέλετε να γνωριστούμε και να τα πούμε από κοντά. vagelis@nuttifox.com twitter.com/vagpapdev Σας ευχαριστώ πολύ ! https://vagelis.dev facebook.com/nuttifox