cziermann
/
graphql-pizza-demo


			
				
					
						
						
							
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <title>Graphql</title>

    <link rel="stylesheet" href="dist/reset.css" />
    <link rel="stylesheet" href="dist/reveal.css" />
    <link rel="stylesheet" href="dist/theme/black.css" id="theme" />

    <!-- Theme used for syntax highlighted code -->
    <link
      rel="stylesheet"
      href="plugin/highlight/monokai.css"
      id="highlight-theme"
    />
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <section>
            <img
              src="/assets/graphql.png"
              alt="graphql logo"
              style="
                height: 180px;
                margin: 0 auto 4rem auto;
                background: transparent;
              "
              class="demo-logo"
            />
            <h1>Graphql</h1>
          </section>
          <section>
            <p>Open-Source</p>
            <p>Released 2015 from Facebook</p>
          </section>
        </section>
        <section>
          <h1>Rest vs. Graphql</h1>
        </section>
        <section>
          <section>
            <h2>Pizza service</h2>
          </section>
          <section class="scrollable-slide">
            <img
              src="/assets/restful-architecture.png"
              alt="rest-architecture"
              style="background: transparent;"
              class="demo-logo"
            />
          </section>
          <section class="scrollable-slide">
            <img
              src="/assets/graphql-architecture.png"
              alt="graphql-architecture"
              style="background: transparent;"
              class="demo-logo"
            />
          </section>
          <section>
            <h3>Rest Service</h3>
            <img
              src="/assets/pizza-rest.png"
              alt="rest graph"
              style="background: transparent;"
              class="demo-logo"
            />
          </section>
          <section>
            <h3>Graphql Service</h3>
            <img
              src="/assets/pizza-graphql.png"
              alt="Graphql graph"
              style="background: transparent;"
              class="demo-logo"
            />
          </section>
        </section>
        <section>
          <section>
            <h1>benefits</h1>
          </section>
          <section>
            <h2>No more Over- and Underfetching</h2>
            fixed data structures provide to much or not enough data
          </section>
          <section>
            <h2>Type/Schema System</h2>
            <ul>
              <li>Graphql uses an strict Type and Schema</li>
              <li>The Client can be sure about what it get</li>
              <li>aswell as the server</li>
            </ul>
          </section>
          <section>
            <h2>Growing Community and Integrations</h2>
            <ul>
              <li>
                Good Client side Integrations Angular/React/VueJs and more.
              </li>
              <li>Server side Integrations in Typescript/Java and more.</li>
              <li>Well working code-generator for client and server</li>
              <li>Alot of well writen Documentation</li>
            </ul>
          </section>
          <section>
            <h2>Self Documenting</h2>
            <img
              src="/assets/self-doku.png"
              alt="self-doku example"
              style="background: transparent;"
              class="demo-logo"
            />
          </section>
          <section>
            <h2>Faster API Development</h2>
          </section>
          <section class="scrollable-slide">
            <h2>pros/cons</h2>
            <a
              style="font-size: 14px;"
              href="https://www.altexsoft.com/blog/engineering/graphql-core-features-architecture-pros-and-cons/"
            >
              <img
                src="/assets/pros-cons.png"
                alt="pros-cons"
                style="background: transparent;"
                class="demo-logo"
              />
            </a>
          </section>
        </section>
        <section>
          <section>
            <h1>disadvantages</h1>
          </section>
          <section>
            <h3>more complex</h3>
          </section>
          <section>
            <h3>no file uploading</h3>
          </section>
        </section>
        <section>
          <section>
            <h1>Basics</h1>
          </section>
          <section>
            <ul>
              <li>
                Types
              </li>
              <li>
                Querys
              </li>
              <li>
                Mutations
              </li>
              <li>
                Subscriptions
              </li>
              <li>
                Variables
              </li>
            </ul>
          </section>
          <section>
            <h2>Types</h2>
          </section>
          <section>
            <pre><code data-trim data-noescape>
              type Pizza {
                id: ID!
                name: String!
                toppings: [Topping!]!
              }

              type Topping {
                id: ID!
                name: String!
              }
            </code>
          </pre>
          </section>
          <section>
            <h2>Querys</h2>
          </section>
          <section>
            <h3>Define Querys</h3>
            <pre>
              <code data-trim data-noescape> 
            type Query {
              getPizzaById(pizzaId: ID!): Pizza!
              getToppingById(toppingId: ID!): Topping!
              getPizzaByName(pizzaName: ID!): Pizza!
              getToppingByName(toppingName: ID!): Topping!
              listPizza: [Pizza]!
              listTopping: [Topping]!
            }
            </code>
          </pre>
          </section>
          <section>
            <h3>Simple Query</h3>
            <pre><code data-trim data-noescape>
              {
                listPizza {
                  id
                  name
                }
              }
            </code>
          </pre>
          </section>
          <section>
            <h3>More Complex Query</h3>
            <pre>
              <code data-trim data-noescape>
              {
                getPizzaById(pizzaId: "0") {
                  id
                  name
                  toppings {
                    name
                  }
                }
              }
              
            </code>
          </pre>
          </section>

          <section>
            <h2>Mutations</h2>
          </section>
          <section>
            <h3>Define Mutations</h3>
            <pre><code data-trim data-noescape>
              type Mutation {
                createPizza(createPizzaDto: ChangePizzaDto): Pizza!
                updatePizza(pizzaId: ID!, updatedPizzaDto: ChangePizzaDto!): Pizza!
                createTopping(createToppingDto: ChangeToppingDto): Topping!
                updateTopping(toppingId: ID!, updatedToppingDto: ChangeToppingDto!): Topping!
              }
            </code>
          </pre>
          </section>
          <section>
            <h3>Mutation</h3>
            <pre>
              <code data-trim data-noescape>
              mutation {
                createPizza (createPizzaDto: {
                  name: "My Awesome Pizza"
                  toppingIds: "1"
                }) {
                  id
                  name
                  toppings {
                    id
                    name
                  }
                }
              }
            </code>
            </pre>
          </section>

          <section>
            <h2>Subscriptions</h2>
          </section>
          <section>
            <h3>Define Subscription</h3>
            <pre>
              <code data-trim data-noescape>
            type Subscription {
              pizzasChanged: [Pizza]!
              toppingsChanged: [Topping]!
            }
          </code>
          </pre>
          </section>
          <section>
            <h3>Subscription</h3>
            <pre>
            <code data-trim data-noescape>
          subscription PizzaChanged {
            pizzasChanged {
              id
              name
            }
          }
            </code>
          </pre>
          </section>
        </section>
        <section>
          <section>
            <h1>Live Demo</h1>
          </section>
          <section>
            <img
              src="/assets/apollo-logo.png"
              alt="apollo logo"
              style="background: transparent;"
              class="demo-logo"
            />
            <p>graphql-codegen</p>
            <p>apollo-angular</p>
          </section>
          <section>
            <h2>
              Requirements
            </h2>
            <ul>
              <li>npm</li>
              <li>nodejs</li>
              <li>tsc</li>
              <li>npx</li>
              <li>git</li>
            </ul>
          </section>
          <section>
            <h2>Setup Server</h2>
          </section>
          <section>
            <h3>Init nodejs</h3>
            <pre>
            <code data-trim data-noescape>
              $ mkdir server && cd server
              $ npm init
              # entry point: build/index.js
              $ npx tsc --init --rootDir src --outDir build \
              --esModuleInterop --resolveJsonModule --lib es6 \
              --module commonjs --allowJs true --noImplicitAny true
              $ npm i --save-dev uuid @types/uuid nodemon ts-node typescript
            </code>
          </pre>
          </section>
          <section>
            <h3>Create nodemon</h3>
            <pre>
            <code data-trim data-noescape>
              $ touch nodemon.json
            </code>
            <code data-trim data-noescape> 
              {
                "watch": ["src"],
                "ext": ".ts,.js",
                "ignore": [],
                "exec": "ts-node ./src/index.ts"
              }
            </code>
          </pre>
          </section>
          <section>
            <h3>add script commands to package.json</h3>
            <pre>
              <code data-trim data-noescape>
                "scripts": {
                  "prebuild": "npm run generate",
                  "prestart": "npm run generate",
                  "generate": "graphql-codegen --config codegen.yml",
                  "start": "nodemon",
                  "build": "rimraf ./build && tsc"
                }
              </code>
            </pre>
          </section>
          <section>
            <h3>Init graphql</h3>
            <pre>
            <code data-trim data-noescape>
              $ npm add --save-dev graphql
              $ npm add --save-dev @graphql-codegen/cli
              $ npm add --save-dev @graphql-codegen/typescript
              $ npm add apollo-server  
              $ npm i --save-dev apollo-link-ws
              $ npx graphql-codegen init
              # (x) Backend
              # schema: ./src/schema/*.ts
              # plugins:  
                ◉ TypeScript (required by other typescript plugins)
                ◉ TypeScript Resolvers (strongly typed resolve functions)
              # output: skip
              # introspection: n
              # config: skip
              # script: generate
              $ npm i
              $ mkdir src && touch src/index.ts
            </code>
          </pre>
          </section>
          <section>
            <h2>Setup Frontend</h2>
          </section>
          <section>
            <h3>Init Project</h3>
            <pre>
            <code data-trim data-noescape>
              $ git clone git@ziermach.de:cziermann/angular-demo-template.git
              
              $ git checkout graphql-template
              or
              $ cd angular-demo-template
              $ npm add apollo-angular
              $ ng add apollo-angular
              $ npm add graphql
              $ npm add --save-dev @graphql-codegen/cli
              $ npm i
              $ npx graphql-codegen init
              # with Angular
              # skip all
              # script: generate
              $ npm i
              
            </code>
            move the graphql.module.ts in src/
          </pre>
          </section>

        </section>
      </div>
    </div>

    <script src="dist/reveal.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>
    <script>
      // More info about initialization & config:
      // - https://revealjs.com/initialization/
      // - https://revealjs.com/config/
      Reveal.initialize({
        hash: true,

        // Learn about plugins: https://revealjs.com/plugins/
        plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
      });
    </script>
  </body>
</html>