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
   

   View Slide

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
   

   View Slide

3. Βασικές έννοιες:
   01 Headless CMS?
   JAMstack?
   Static site generators?
   02
   03
   Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
   

   View Slide

4. Ονομάζεται ένα σύστημα διαχείρισης περιεχομένου ( CMS ), όταν το μόνο που
   χρησιμοποιούμε από αυτό είναι η περιοχή δημιουργίας περιεχομένου.
   ( CRUD: create, read, update, and delete )
   Ένα βασικό πλεονέκτημα των headless CMS, είναι ότι έχουμε τη
   δυνατότητα να χρησιμοποιήσουμε οποιαδήποτε εργαλεία θέλουμε για τη
   δημιουργία του Front end. Ταυτόχρονα μπορούμε να διαχειριζόμαστε το
   περιεχόμενο μέσω του αγαπημένου μας CMS.
   01 Headless CMS?
   Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
   

   View Slide

5. Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
   

   View Slide

6. Javascript γλώσσα προγραμματισμού για τον ιστό.
   : ουσιαστικό \’τζάμ-στακ’\
   Μοντέρνα αρχιτεκτονική ανάπτυξης ιστοσελίδων βασισμένη
   σε Javascript, APIs και Markup.
   APIs διεπαφές προγραμματισμού εφαρμογών.
   ( Application Programming Interface )
   Markup γλώσσα σήμανσης. ( Markdown )
   stack : ουσιαστικό \’στάκ’\ Σωρός.
   JAMstack?
   02
   Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
   

   View Slide

7. ● Jekyll
   Εργαλεία / frameworks που χρησιμεύουν στην ανάπτυξη “στατικών”
   ιστοσελίδων ( και όχι μόνο ) κάνοντας χρήση της αρχιτεκτονικής JAMstack.
   Static site generators?
   03
   ● Gatsby JS
   ● Hugo
   ● Next
   ● GitBook
   Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
   

   View Slide

8. ● Webpack
   Ένας από τους καλύτερους static site generators αυτη τη στιγμή
   Gatsby JS
   03
   ● React JS
   ● GraphQL
   ● Plugins / Node ecosystem
   ● Serverless
   Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
   

   View Slide

9. ➔ Εμπειρία προγραμματισμού ( developer experience )
   ➔ Επεκτασιμότητα
   ➔ Ελευθερία
   Γιατί Headless?
   ➔ Ταχύτητα
   ➔ Ασφάλεια
   ➔ Χρήση πολλών διαφορετικών συστημάτων / πηγών δεδομένων ταυτόχρονα
   ➔ Οικοσύστημα ( εργαλεία, plugins, components κλπ )
   ➔ Χρήση τεχνολογιών πέρα των δυνατοτήτων του CMS
   ➔ SEO ( last but not least )
   Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
   

   View Slide

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
    

    View Slide

11. Δημιουργία νέου site.
    ( create a new site )
    $ gatsby new my-site
    ή
    $ git clone starter
    Αφού εγκαταστήσουμε το GatsbyJS και ότι
    άλλο χρειαζόμαστε για να ξεκινήσουμε το
    project μας, εκτελούμε gatsby new my-site
    αν θέλουμε να ξεκινήσουμε από την αρχή,
    διαφορετικά “τραβάμε” κάποιο starter.
    

    View Slide

12. Έναρξη τοπικού διακομιστή.
    ( start development server )
    $ gatsby develop
    ή
    $ gatsby build & gatsby serve
    Το επόμενο βήμα μας θα είναι να “μπούμε” μέσα
    στο νέο φάκελο και να εκτελέσουμε την εντολή
    gatsby develop αν ξεκινάμε από την αρχή ή npm
    install / yarn αν έχουμε κάποιο starter.
    Αμέσως μετά από ένα “πρόχειρο” build του site
    μας από το gatsby θα έχουμε ένα τοπικό server
    στο port 8000 ο οποίος θα επαναφορτωνει
    αυτόματα τον ιστότοπο σε κάθε αλλαγή που
    κάνουμε ( hot-reloading ).
    

    View Slide

13. Δομή.
    ( file structure )
    Ο κάθε φάκελος έχει τη δική
    του χρήση και σημασία.
    Η δομή του project μας θα είναι όπως
    φαίνεται παρακάτω.
    

    View Slide

14. Ανάπτυξη ιστοσελίδας στο Netlify ( ζωντανά )
    Ας δούμε τώρα πως
    γίνεται στη πράξη,
    ζωντανά.
    

    View Slide

15. View Slide

16. Παραδείγματα
    Case studies
    Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
    

    View Slide

17. Headless CMS + Gatsby = PWA
    Progressive
    Web
    App
    PWA βασισμένο στο WordPress &
    το GatsbyJS.
    Σκοπός της εφαρμογής ήταν η
    συλλογή στοιχείων καθώς και η
    διαφήμιση των υπηρεσιών μας στη
    Hampshire Business Expo 2019.
    Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
    

    View Slide

18. Μπάρες ( mpares.com )
    Ελληνική εταιρεία που ήθελε ένα απλό website αλλα με
    δυνατότητα διαχείρισης περιεχομένου.
    ➔ Netlify forms
    ➔ Headless CMS
    ➔ Gatsby build
    Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
    

    View Slide

19. Gatsboy dashboard.
    Εφαρμογή για desktop βασισμένη στο
    GatsbyJS, το WordPress και το
    Electron.
    Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019
    

    View Slide

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

    View Slide

21. Ελπίζω να αποκομίσατε κάτι από την παρουσίαση που μόλις
    παρακολουθήσατε. Εγώ κι ο Chris θα είμαστε στη διάθεση σας καθ’
    όλη τη διάρκεια της ημέρας, αν θέλετε να γνωριστούμε και να τα
    πούμε από κοντά.
    vagelis@nuttifox.com twitter.com/vagpapdev
    Σας ευχαριστώ πολύ !
    https://vagelis.dev facebook.com/nuttifox
    

    View Slide