JAMming with GraphCMS, GatsbyJS and GraphQL

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

We need a "website" "So$ware is never ﬁnished, 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

Slide 12

Slide 12 text

The Neutron Dance And it's hard to say Just how some [content] never changes And it's hard to ﬁnd 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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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