Skip to content

Commit

Permalink
I think slides are done now
Browse files Browse the repository at this point in the history
  • Loading branch information
@danieldanielecki
danieldanielecki committed Jun 30, 2024
1 parent 3554c3a commit 9ea6f41
Show file tree
Hide file tree
Showing 9 changed files with 11,166 additions and 913 deletions.
10,099 changes: 10,099 additions & 0 deletions _code/apollo-client/package-lock.json
View file

Large diffs are not rendered by default.

1,860 changes: 966 additions & 894 deletions _code/apollo-client/yarn.lock
View file

Large diffs are not rendered by default.

Binary file added assets/dataloader.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/graphql-newsletter.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/graphql-voyager-fails.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/graphql-voyager-outdated.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/maintainers-apollo-graphql.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/maintainers-theguild.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
120 changes: 101 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,10 @@
<div class="slides">
<section>
<h2>Is GraphQL really helpful in contrast to REST API's?</h2>
<p>Daniel Danielecki</p>
</section>
<section>
<h1>GraphQL?</h1>
</section>
<section>
<h1>What is a GraphQL?</h1>
<h2>What is a GraphQL?</h2>
<p>Query language for API's, <strong>alternative</strong> (not replacement) for REST.</p>
</section>
<section>
Expand Down Expand Up @@ -87,27 +85,42 @@ <h2>GraphQL vs REST</h2>
<section>
<h1>Why GraphQL?</h1>
</section>
<section>
<h1>Frontend?</h1>
</section>
<section>
<h2>Why GraphQL?</h2>
<p>Query only what you need.</p>
</section>
<section>
<h1>Why GraphQL?</h1>
<h1>Backend?</h1>
</section>
<section>
<h2>Why GraphQL?</h2>
<ul>
<li>Performance*</li>
<li>Security</li>
<li>No Over/Under-Fetching</li>
<li>Non-null</li>
<li>Performance</li>
<li>Single Endpoint</li>
<li>Strong Typing</li>
<li>Subscriptions</li>
<li>Versioning</li>
<li>...</li>
</ul>
</section>
<section>
<h1>GraphQL?</h1>
</section>
<section>
<span>(optional)</span>
<h1>GraphQL Basics</h1>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Basics: Schema</h2>
</section>
<section>
<span>(optional)</span>
<pre><code>
type Query { ... }
type Mutation { ... }
Expand All @@ -116,9 +129,11 @@ <h2>GraphQL Basics: Schema</h2>
</code></pre>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Basics: Object Types</h2>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Basics: Object Types</h2>
<pre><code>
type User {
Expand All @@ -137,9 +152,11 @@ <h2>GraphQL Basics: Object Types</h2>
</code></pre>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Basics: Query</h2>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Basics: Query</h2>
<pre><code>
type Query {
Expand All @@ -151,6 +168,7 @@ <h2>GraphQL Basics: Query</h2>
</code></pre>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Basics: Query</h2>
<pre><code>
query {
Expand All @@ -161,12 +179,15 @@ <h2>GraphQL Basics: Query</h2>
</code></pre>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Query == REST "GET"</h2>
</section>
<section>
<h2>GraphQL Mutations and Subscriptions</h2>
<span>(optional)</span>
<h2>GraphQL Mutations</h2>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Mutations</h2>
<pre><code>
type Mutation {
Expand All @@ -183,6 +204,7 @@ <h2>GraphQL Mutations</h2>
</code></pre>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Mutations</h2>
<pre><code>
mutation {
Expand All @@ -195,9 +217,15 @@ <h2>GraphQL Mutations</h2>
</code></pre>
</section>
<section>
<h2>GraphQL Mutation == REST "POST", "PUT", "PATCH", "DELETE" (C<s>R</s>UD)</h2>
<span>(optional)</span>
<h3>GraphQL Mutation<br>==<br>REST "POST", "PUT", "PATCH", "DELETE" (C<s>R</s>UD)</h3>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Subscriptions</h2>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Subscriptions</h2>
<pre><code>
type Subscription {
Expand All @@ -206,6 +234,7 @@ <h2>GraphQL Subscriptions</h2>
</code></pre>
</section>
<section>
<span>(optional)</span>
<h2>GraphQL Subscriptions</h2>
<pre><code>
subscription {
Expand All @@ -214,9 +243,11 @@ <h2>GraphQL Subscriptions</h2>
</code></pre>
</section>
<section>
<h2>GraphQL Subscription == REST WebSockets</h2>
<span>(optional)</span>
<h2>GraphQL Subscription<br>==<br>REST WebSockets</h2>
</section>
<section>
<span>(optional)</span>
<h1>Demo?</h1>
<p>Simplest example of GraphQL query.</p>
</section>
Expand All @@ -225,11 +256,17 @@ <h1>Beyond the Basics</h1>
</section>
<section>
<h1>Learning Curve</h1>
</section>
<section>
<h2>Learning Curve</h2>
<p>GraphQL takes <strong>more time</strong> to learn.</p>
</section>
<section>
<h1>Caching</h1>
<p>Allegedly, GraphQL's caching <strong>is more complex</strong>.</p>
</section>
<section>
<h2>Caching</h2>
<p>GraphQL's caching <strong>is more complex</strong>.</p>
</section>
<section>
<h2>Caching: REST (Express.js)</h2>
Expand Down Expand Up @@ -353,6 +390,9 @@ <h2>Caching: GraphQL (Apollo Client)</h2>
</section>
<section>
<h1>Error Handling</h1>
</section>
<section>
<h2>Error Handling</h2>
<p>Beyond 200 when an error occured.</p>
</section>
<section>
Expand Down Expand Up @@ -406,20 +446,34 @@ <h2>Error Handling: GraphQL</h2>
}
</code></pre>
</section>
<section>
<h2>Demo</h2>
<p>Let's see an error.</p>
</section>
<section>
<h2>Some errors<br>!==<br>200</h2>
<ul>
<li>Bad Request: 400</li>
<li>Unauthorized: 401</li>
<li>Forbidden: 403</li>
<li>Internal Server Error: 500</li>
</ul>
</section>
<section>
<h1>Global Object Identification</h1>
</section>
<section>
<h2>Global Object Identification</h2>
<p>Let my frontend fetch single ID.</p>
</section>
<section>
<h2>Global Object Identification: GraphQL</h2>
<pre><code>
query {
node(id: "UmVzb3VyY2U6MQ==") {
user(id: "1") {
id
... on Resource {
name
value
}
name
email
}
}
</pre></code>
Expand All @@ -432,6 +486,9 @@ <h2>Global Object Identification: REST</h2>
</section>
<section>
<h1>Pagination</h1>
</section>
<section>
<h2>Pagination</h2>
<p>Let my frontend fetch a page.</p>
</section>
<section>
Expand All @@ -458,6 +515,9 @@ <h2>Pagination: REST</h2>
</section>
<section>
<h1>Sorting</h1>
</section>
<section>
<h2>Sorting</h2>
<p>Let my frontend sort the results.</p>
</section>
<section>
Expand All @@ -479,6 +539,9 @@ <h2>Sorting: REST</h2>
</section>
<section>
<h1>StackOverflow</h1>
</section>
<section>
<h2>StackOverflow</h2>
<p>What are Developers asking for?</p>
</section>
<section>
Expand All @@ -490,6 +553,9 @@ <h1>StackOverflow</h1>
<section>
<img data-src="assets/graphql-stackoverflow3.png">
</section>
<section>
<h1>Introspection</h1>
</section>
<section>
<img data-src="assets/introspection.png">
</section>
Expand Down Expand Up @@ -520,6 +586,25 @@ <h2>Standardization: REST</h2>
<h2>Fragmentation: GraphQL</h2>
<p>Apollo Server, GraphQL Yoga, Envelop, Express-GraphQL (deprecated), Apollo Client, Relay, urql.</p>
</section>
<section>
<h1>Projects</h1>
</section>
<section>
<img data-src="assets/dataloader.png">
</section>
<section>
<img data-src="assets/graphql-voyager-outdated.png">
</section>
<section>
<img data-src="assets/graphql-voyager-fails.png">
</section>
<section>
<img data-src="assets/graphql-newsletter.png">
</section>
<section>
<img data-src="assets/maintainers-apollo-graphql.png">
<img data-src="assets/maintainers-theguild.png">
</section>
<section>
<h1>Unit Testing</h1>
</section>
Expand Down Expand Up @@ -668,9 +753,6 @@ <h1>Trends</h1>
<section>
<img data-src="assets/interest-satisfaction.png">
</section>
<section>
<img data-src="assets/graphql-newsletter.png">
</section>
<section>
<h1>Conclusion</h1>
</section>
Expand Down

0 comments on commit 9ea6f41

Please sign in to comment.