Let's Make a GraphQL Presentation

Juho Vepsäläinen

1/50
2/50
3/50
4/50

Table of Contents

  • Background
  • What is GraphQL?
  • Design and Architecture
  • Layouts
  • Features
  • Left to Do
  • Lessons Learned
5/50

Background

6/50

React Finland

7/50

GraphQL Finland

8/50

React Finland API

9/50

Asset Generator

10/50

Speaker Presentation

11/50

What is GraphQL?

12/50

GraphQL

13/50

Why GraphQL?

  1. You have multiple consumers
  2. You have multiple legacy APIs and want to unite them
  3. You want to make a GraphQL presentation
14/50

GraphQL Schema Definition Language (SDL)

  • A definition language is used to define an API
  • Separate language to describe types and their relations
  • In addition code implementing Queries and Mutations is needed
15/50

Design and Architecture

16/50

Schema Driven Design

Define the API first, the rest will follow

17/50

Design Constraints

  1. Content should be separate from layouts
  2. Content should live on the server behind an API
  3. It should be possible to replace the frontend
18/50

What's a Presentation?

type Presentation {
  id: ID!
  title: String
  slides: [Slide]!
}

type Query {
  presentations: [Presentation]!
  presentation(id: ID!): Presentation
  ...
}
19/50

What's a Slide?

type Slide {
  # The first slide contains theme
  theme: Theme
  layout: Layout!
  content: ContentType!
  background: Image
  skip: Boolean
}
enum Layout {
  TITLE
  SECTION
  EMBED
  MARKDOWN
  GRID
}

type Image {
  asset: String!
  source: String
}
20/50

What's a Theme?

type Theme {
  id: ID!
  primaryColor: String!
  secondaryColor: String!
  background: String!
}

type Query {
  themes: [Theme]!
  theme(id: ID!): Theme
  ...
}
21/50

What's Content?

union ContentType =
    Image
  | TitleContent
  | SectionContent
  | EmbedContent
  | MarkdownContent
  | GridContent

interface Content {
  title: String
}
type TitleContent implements Content {
  title: String
  author: String
}
22/50

What Do Presentations Look Like?

- theme: graphql-finland
  layout: title
  content:
    title: Let's Make a GraphQL Presentation
    author: Juho Vepsäläinen
- layout: toc
  content:
    title: Table of Contents
...
23/50

Demo time

24/50

Layouts

25/50

title

Usually the first slide of a presentation

theme: graphql-finland
layout: title
content:
  title: Let's Make a GraphQL Presentation
  author: Juho Vepsäläinen
26/50

section

Section slides between slides

layout: section
content:
  title: Layout Types
27/50

toc

Table of Contents generated from sections

layout: toc
content:
  title: Table of Contents
28/50

image

Image

layout: image
content:
  asset: client/assets/images/theme.jpg
29/50

markdown

Slides with Markdown content

layout: markdown
content:
  title: `markdown`
  markup: |
    > Slides with Markdown content

    ```yaml
    ...
    ```
30/50

grid

Slides with Grid content

(only two columns for now)

layout: grid
content:
  title: Column demo
  columns:
    - |
      First column
    - |
      Second column
31/50

embed

<iframe> embeds

layout: embed
content:
  title: GraphQL
  link: https://graphql.org/
32/50

Features

33/50

Progressive enhancement due to SSR (works without JS)

34/50

Prints to PDF as a side effect of the frontend design

35/50

Allows editing through the frontend thanks to GraphQL mutations connected to the file system (WIP)

36/50

Supports monorepo style slide authoring

37/50

Extensible through layouts and theming

38/50

Left to Do

39/50

Refresh browser when backend data changes

40/50

Add includes to compose slides

41/50

Implement virtualization

42/50

Experiment with different frontends

Generating to mdx-deck might be nice

43/50

Explore editing and make it more versatile

44/50

Begin building websites like this

45/50

Lessons Learned

46/50

Schema Driven Design is a powerful approach

47/50

Separating concerns fosters creativity in design

48/50

Frontend doesn't need to contain much logic

49/50
50/50