cziermann
/
graphql-pizza-demo
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

move benifits afterr basics

master
Christian Ziermann 2 年之前
父節點
467d9681b5
當前提交
7bbee61912
共有 6 個檔案被更改，包括 14877 行新增 和 3388 行删除
分割檢視 顯示文件統計
  1. 二進制
      presentation/assets/pv.gif
  2. +5
    -1
      presentation/css/layout.scss
  3. +1
    -1
      presentation/dist/reveal.css
  4. +87
    -116
      presentation/index.html
  5. +14783
    -3269
      presentation/package-lock.json
  6. +1
    -1
      presentation/package.json

二進制
presentation/assets/pv.gif 查看文件

Before After
Width: 478  |  Height: 270  |  Size: 4.6MB

+ 5
- 1
presentation/css/layout.scss 查看文件

@@ -58,6 +58,10 @@


.scrollable-slide {
height: 800px;
overflow-y: auto !important;
}

.fit-picture {
max-width: 100% !important;
max-height: 75vh !important;
}

+ 1
- 1
presentation/dist/reveal.css
文件差異過大導致無法顯示
查看文件


+ 87
- 116
presentation/index.html 查看文件

@@ -36,33 +36,32 @@
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>
<h1>Whats Graphql?</h1>
<p>and how it differs from REST?</p>
</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"
style="background: transparent"
class="demo-logo fit-picture"
/>
</section>
<section class="scrollable-slide">
<img
src="/assets/graphql-architecture.png"
alt="graphql-architecture"
style="background: transparent;"
class="demo-logo"
style="background: transparent"
class="demo-logo fit-picture"
/>
</section>
<section>
@@ -70,8 +69,8 @@
<img
src="/assets/pizza-rest.png"
alt="rest graph"
style="background: transparent;"
class="demo-logo"
style="background: transparent"
class="demo-logo fit-picture"
/>
</section>
<section>
@@ -79,103 +78,26 @@
<img
src="/assets/pizza-graphql.png"
alt="Graphql graph"
style="background: transparent;"
class="demo-logo"
style="background: transparent"
class="demo-logo fit-picture"
/>
</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>
<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!
@@ -192,9 +114,7 @@
</section>
<section>
<h2>Querys</h2>
</section>
<section>
<h3>Define Querys</h3>
<h4>Define Querys</h4>
<pre>
<code data-trim data-noescape>
type Query {
@@ -209,7 +129,7 @@
</pre>
</section>
<section>
<h3>Simple Query</h3>
<h2>Querys</h2>
<pre><code data-trim data-noescape>
{
listPizza {
@@ -221,7 +141,7 @@
</pre>
</section>
<section>
<h3>More Complex Query</h3>
<h2>Querys</h2>
<pre>
<code data-trim data-noescape>
{
@@ -237,12 +157,9 @@
</code>
</pre>
</section>

<section>
<h2>Mutations</h2>
</section>
<section>
<h3>Define Mutations</h3>
<h4>Define Mutations</h4>
<pre><code data-trim data-noescape>
type Mutation {
createPizza(createPizzaDto: ChangePizzaDto): Pizza!
@@ -254,7 +171,7 @@
</pre>
</section>
<section>
<h3>Mutation</h3>
<h2>Mutations</h2>
<pre>
<code data-trim data-noescape>
mutation {
@@ -273,12 +190,9 @@
</code>
</pre>
</section>

<section>
<h2>Subscriptions</h2>
</section>
<section>
<h3>Define Subscription</h3>
<h4>Define Subscription</h4>
<pre>
<code data-trim data-noescape>
type Subscription {
@@ -289,7 +203,7 @@
</pre>
</section>
<section>
<h3>Subscription</h3>
<h2>Subscriptions</h2>
<pre>
<code data-trim data-noescape>
subscription PizzaChanged {
@@ -302,24 +216,82 @@
</pre>
</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 fit-picture"
/>
</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 fit-picture"
/>
</a>
</section>
</section>
<section>
<section>
<h1>Live Demo</h1>
<img
src="/assets/pv.gif"
alt="look at this graphh meme"
style="background: transparent"
class="demo-logo"
/>
</section>
<section>
<img
src="/assets/apollo-logo.png"
alt="apollo logo"
style="background: transparent;"
style="background: transparent"
class="demo-logo"
/>
<p>graphql-codegen</p>
<p>apollo-angular</p>
</section>
<section>
<h2>
Requirements
</h2>
<h2>Requirements</h2>
<ul>
<li>npm</li>
<li>nodejs</li>
@@ -426,7 +398,6 @@
move the graphql.module.ts in src/
</pre>
</section>

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

+ 14783
- 3269
presentation/package-lock.json
文件差異過大導致無法顯示
查看文件


+ 1
- 1
presentation/package.json 查看文件

@@ -46,7 +46,7 @@
"gulp-connect": "^5.7.0",
"gulp-eslint": "^6.0.0",
"gulp-header": "^2.0.9",
"gulp-sass": "^4.0.2",
"gulp-sass": "^4.1.1",
"gulp-tap": "^2.0.0",
"gulp-zip": "^5.0.1",
"highlight.js": "^10.0.3",

Write Preview
Loading…
取消
儲存