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>Demo</h1>
          </section>
          <section>
            <h2>Basics</h2>
          </section>
          <section>
            <ul>
              <li>
                Types
              </li>
              <li>
                Querys
              </li>
              <li>
                Mutations
              </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>
        <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>
      </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>