$30 off During Our Annual Pro Sale. View Details »

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

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.

More Decks by WordPress Greek Community

Other Decks in Technology

Transcript

  1. Headless WordPress
    Ανάπτυξη ιστοσελίδων κάνοντας χρήση του
    GatsbyJS και του WordPress ως Headless CMS.
    Vagelis Papaioannou - Headless WordPress - WordCamp Athens 2019

    View Slide

  2. Lead developer στη Nuttifox &
    Co-founder της Gatsboy.
    [email protected] 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 θα είμαστε στη διάθεση σας καθ’
    όλη τη διάρκεια της ημέρας, αν θέλετε να γνωριστούμε και να τα
    πούμε από κοντά.
    [email protected] twitter.com/vagpapdev
    Σας ευχαριστώ πολύ !
    https://vagelis.dev facebook.com/nuttifox

    View Slide