Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JAMming with GraphCMS, GatsbyJS and GraphQL

JAMming with GraphCMS, GatsbyJS and GraphQL

Rafael Cordones

February 05, 2018
Tweet

More Decks by Rafael Cordones

Other Decks in Technology

Transcript

  1. JAMming with GraphCMS,
    GatsbyJS and GraphQL
    GraphQL Vienna February Meetup
    February 5th, 2018
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 1

    View Slide

  2. Agenda
    1. Content management and presenta*on/distribu*on on the web
    2. The Shape of Things to Come... many are already here
    3. Why am I here?
    1. We need a "website"
    2. JAMstack, GraphCMS and GatsbyJS
    3. GatsbyJS GraphCMS Plugin
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 2

    View Slide

  3. WARNING
    Meetup in progress...
    We can talk face to face about
    ideas!!!
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 3

    View Slide

  4. About this talk
    Construc)ve and deconstruc)ve
    cri)cism welcome!
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 4

    View Slide

  5. Credits
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 5

    View Slide

  6. Fasten your seatbelts...
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 6

    View Slide

  7. Who are you?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 7

    View Slide

  8. Website Meta Language
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 8

    View Slide

  9. Hosted CMSs
    Spectrum of choices:
    1. Blogs, websites, communi3es, ...
    2. Full-stack = back-end + front-end
    3. Many offer REST APIs
    4. ...
    5. They are actually development
    pla,orms
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 9

    View Slide

  10. The Anatomy of a CMS
    1. Content modeling, versioning, ...
    2. Content edi3ng, versioning, ...
    3. Querying / search
    4. ACLs: who can do what
    5. Audit: who did what when
    6. Content rendering (frameworks,
    libraries, ...)
    7. Content analy3cs, personaliza3on,
    SEO, ...
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 10

    View Slide

  11. We need a "website"
    "So$ware is never finished, just
    abandoned"
    — Leonardo Dev Vinci
    The website ini+al
    successful website turns
    into ...
    ... a web app.
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 11

    View Slide

  12. The Neutron Dance
    And it's hard to say
    Just how some [content] never changes
    And it's hard to find
    Any strength to draw the line
    Oh I'm just burning doin' the neutron
    dance
    I'm just burning doin' the neutron dance
    — "Neutron Dance" The Pointer Sisters
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 12

    View Slide

  13. The Neutron Dance
    1. The half-life of content is considerable
    higher than that of its presenta6on.
    2. Content edi$ng and content
    presenta$on are different concerns
    3. Developers need to learn each CMS
    APIs and framework
    4. Editors need to learn the specific CMS
    administra6on interface
    5. Customers need to find developers for
    the implementa6on... every 2 years
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 13

    View Slide

  14. CMS -> Back-end + Front-end
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 14

    View Slide

  15. Back-end?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 15

    View Slide

  16. Back-end?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 16

    View Slide

  17. Back-end?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 17

    View Slide

  18. The CMS (Content
    Management
    System) is dead!
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 18

    View Slide

  19. Long Live the CMS
    (Content Micro-
    Service)!
    a.k.a. Headless
    CMS
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 19

    View Slide

  20. Headless CMS
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 20

    View Slide

  21. JAMstack
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 21

    View Slide

  22. The Shape of Things to
    Come
    API-driven CMSs:
    1. conten(ul
    2. prismic
    3. GraphCMS
    4. GENTICS Mesh (Made in Vienna!)
    5. ...
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 22

    View Slide

  23. O Content, where art thou?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 23

    View Slide

  24. O Content, where art thou?
    "I Am A [Dev] of Constant Sorrow" --- Soggy Bo9om [Devs]
    1. Prolifera+on of content repository APIs adds overhead for
    developers to learn about the seman&cs of the API
    2. One API to rule them all?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 24

    View Slide

  25. GraphCMS
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 25

    View Slide

  26. GatsbyJS
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 26

    View Slide

  27. "It’s like déjà vu all over again"
    — Yogi Berra
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 27

    View Slide

  28. My background?
    Back-end Java/Scala development (type and func7on signatures)
    Server-side "front-end" generated with dashes of JavaScript
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 28

    View Slide

  29. Why GatsbyJS? JavaScript?! NodeJS?!
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 29

    View Slide

  30. Why headless CMS?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 30

    View Slide

  31. Computers
    "I think there is a world market for maybe five computers."
    — Thomas J. Watson, president of IBM, 1943
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 31

    View Slide

  32. Computers?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 32

    View Slide

  33. Computers?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 33

    View Slide

  34. Computers?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 34

    View Slide

  35. Computers?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 35

    View Slide

  36. Computers?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 36

    View Slide

  37. Computers?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 37

    View Slide

  38. 5 Computers!
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 38

    View Slide

  39. GatsbyJS GraphCMS Plugin
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 39

    View Slide

  40. GatsbyJS GraphCMS Plugin
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 40

    View Slide

  41. GatsbyJS GraphCMS Plugin
    Tour de code
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 41

    View Slide

  42. GatsbyJS GraphCMS Plugin Credits
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 42

    View Slide

  43. rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 43

    View Slide

  44. rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 44

    View Slide

  45. GatsbyJS GraphCMS Plugin
    Lessons learned?
    1. GatsbyJS codebase: O Brother! Where art thou TYPES?!
    2. NPM: at the end of the day, relase/ship the f* thing
    3. GraphQL: introspecLng (metadata/types) GraphQL query results
    4. GraphCMS: content hierarchy a must have when scaling
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 45

    View Slide

  46. A CMS just does CRUD, or?
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 46

    View Slide

  47. If all you have is a hammer...
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 47

    View Slide

  48. Yeah, well, that's just like, your opinion, man
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 48

    View Slide

  49. What's yours?!
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 49

    View Slide

  50. rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 50

    View Slide

  51. Credits
    • Slide 5: Star Wars Opening Crawl generator
    • Slide 6: Forkli9 Safety Signs - Stop Fasten Your Seat Belts With
    Seat Belt Symbol
    • Slide 7: WALL-E
    • Slide 8: Website Meta Language
    • Slide 9: The Usual Suspects
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 51

    View Slide

  52. Credits
    • Slide 10: The Anatomy Lesson of Dr. Nicolaes Tulp
    • Slide 11: Leonardo Da Vinci
    • Slide 12: "The Neutron Dance" (video) by The Pointer Sisters
    • Slide 13: "The Neutron Dance" (video) by The Pointer Sisters
    • Slide 14: Kernspaltung
    • Slide 15: Kernspaltung
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 52

    View Slide

  53. Credits
    • Slide 16: Electron cloud
    • Slide 17: Own picture
    • Slide 18: Execu8on of Louis XVI
    • Slide 19: Execu8on of Louis XVI
    • Slide 20: Headless CMS
    • Slide 21: JAMStack
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 53

    View Slide

  54. Credits
    • Slide 22: The Shape of Things to Come
    • Slide 23: Man of constant sorrow
    • Slide 25: GraphCMS
    • Slide 26: GatsbyJS
    • Slide 29: "Keep your friends close, but your enemies closer"
    • Slide 31: Thomas J. Watson
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 54

    View Slide

  55. Credits
    • Slide 32: ENIAC
    • Slide 33: Mainframe computer
    • Slide 34: ZX Spectrum
    • Slide 35: IBM Personal Computer
    • Slide 36: Smartphones picture
    • Slide 37: Top 5 Cloud Infrastructure Service Providers
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 55

    View Slide

  56. Credits
    • Slide 38: Thomas J. Watson
    • Slide 39: GatsbyJS GraphCMS Plugin PresentaAon
    • Slide 40: GatsbyJS GraphCMS Plugin
    • Slide 42: GatsbyJS GraphCMS Plugin Credits
    • Slide 43: carmen-marcos.art
    • Slide 44: carmen-marcos.art GitHub
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 56

    View Slide

  57. Credits
    • Slide 47: 2001: A Space Odyssey
    • Slide 48: The Big Lebowski
    • Slide 49: Spies Like Us
    • Slide 50: Jamming (video)
    rafael cordones | @rafacm | JAMming with GraphCMS, GatsbyJS and GraphQL | GraphQL Vienna Meetup 57

    View Slide