Turning the Cloud Inside Out

Rate this content
Bookmark

GraphQL is being used in some really interesting ways in parts of the developer ecosystem that you may be surprised to hear about, including Ethereum as well as for building comprehensive graphs from various third party APIs. In this talk, I'll show how to use a similar approach to build a cloud programming interface into AWS with GraphQL and why using this approach makes sense coming from a front end developer looking to leverage their existing skillset.

Nader Dabit
Nader Dabit
36 min
14 May, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk discusses turning the cloud inside out using GraphQL, highlighting its benefits such as type validation, real-time capabilities, and query efficiency. It explores the use of GraphQL as an API gateway, particularly in the context of microservices, third-party APIs, and blockchain. The talk also covers the efficient indexing and cloud integration offered by GraphQL, as well as building cloud APIs with AWS using API Gateway and AWS AppSync. It concludes with insights on deploying GraphQL APIs with tools like Amplify and CDK, and creating GraphQL APIs backed by Lambda and DynamoDB.

Available in Español: Volteando la Nube al Revés

1. Introduction to GraphQL and Cloud Programming

Short description:

Today, I'm going to be talking about turning the cloud inside out, creating a cloud programming interface with GraphQL. We're going to be kind of first talking about why GraphQL, like why people are using GraphQL and maybe the current state of the GraphQL ecosystem. We're going to look at some way to kind of implement what I'm talking about into the cloud and kind of turn the cloud inside out with a GraphQL schema representation. And then we're going to look at a little bit of code. GraphQL is an open source data query and manipulation language for APIs and a runtime for fulfilling queries with existing data. It provides benefits such as type validation and checking, real-time capabilities, and query efficiency through a single endpoint.

Today, I'm going to be talking about turning the cloud inside out, creating a cloud programming interface with GraphQL. This is kind of my approach as a front-end developer coming into building cloud apps using GraphQL with AWS and kind of the stuff I've learned over the past few years when I was working at AWS.

So who am I? My name is Nader Dhabit. I currently and just started working at a new company called Edge and Node. Edge and Node kind of creates and supports protocols and apps and dApps in the Web 3 and DeFi ecosystem. If you're interested in learning more about what I'm doing now, hit me up on Twitter, dhabit3. I'm also a web and mobile developer by trade. I do a lot of teaching. I do a lot of writing, and I do a fair amount of open source.

So what is this talk going to be kind of broken up? We're going to be kind of first talking about why GraphQL, like why people are using GraphQL and maybe the current state of the GraphQL ecosystem. We're going to talk about the philosophy around some of the stuff I'm going to be presenting today. We're going to look at some way to kind of implement what I'm talking about into the cloud and kind of turn the cloud inside out with a GraphQL schema representation. And then we're going to look at a little bit of code.

So let's first talk about GraphQL. I'm not going to kind of talk about what GraphQL is, in the sense of like the technology and how it works together. Instead, I'm going to be talking about more of like the benefits of why people might use GraphQL, as well as where GraphQL currently is in the ecosystem. So GraphQL, what is it? It's an open source data query and manipulation language for APIs and a runtime for fulfilling queries with existing data. By now you've probably heard a lot about GraphQL, so I don't want to bore you with a ton of the details here. Just think of GraphQL as kind of like a replacement or another option besides Rust. We're going to talk about some of the benefits. And these are kind of known benefits, but also a little bit of spin on like why I like GraphQL and why I've seen a lot of people picking it up, especially when I was working Type checking. You get type validation and checking out of the box. This works really well with a lot of the applications that I'm building these days with things like TypeScript and Dart with Flutter. Real time is part of the actual specification. Instead of figuring out whether you want to implement WebSockets, polling, servers and events, GraphQL typically has a specification on how you can actually do this. The implementation details are up to you, but a lot of people are typically using WebSockets to implement subscriptions, but when I go into a GraphQL schema, I can look at the subscriptions and understand how to actually take advantage of those. As a front end developer, I don't really need to understand anyone's own implementation details under the hood. It makes it easy to go between APIs and understand how the real time part of it works. Query efficiency, you end up with a single GraphQL endpoint, first of all, but with that GraphQL endpoint you can send as many requests as you would like into a single request. So there's a couple of things that come out of this.

2. Benefits of GraphQL and Learning Once

Short description:

GraphQL allows you to send multiple operations in a single request, preventing overfetching and underfetching. It also auto-generates API documentation through introspection. Learning GraphQL enables developers to jump into any API and be immediately productive. GraphQL provides consistency and efficiency, similar to React's ability to build various applications. It allows developers to be efficient in different layers without having to learn new technologies.

First of all, if I want to maybe do an own load event when my app loads, I can send multiple operations in a single GraphQL operation. So I can say query for the user's data, maybe query for the data for the products for like an e-commerce store that I won't render on the page. Maybe even get like a shopping cart data that I need. All of this can be sent in a single request as opposed to multiple requests. But also it prevents overfetching and underfetching in the sense that once you've built out your GraphQL queries and mutations, I guess in this case it would be queries, you can ask for exactly the data that you would like without having to write any additional code on the back end. So for a app that has multiple views, so maybe something that has a web interface as well as a mobile interface, instead of having to write different API endpoints, you can have a single API endpoint, fetch the lighter data on the mobile app and then the heavier data on the web app, and it all just kind of works without you having to write any more code.

A really cool thing about GraphQL is that it's self-documenting. It auto-generates your API documentation. This is done using GraphQL introspection. Introspection is essentially the ability to query which resources are available in the current API schema, and once you're kind of given the API via introspection, you can see the queries, types, fields, and directives that it supports. One of the big things that I'm going to be kind of driving in this talk today is consistency. So for me, a big thing about building software and learning how to be a developer, an efficient and good developer, for me, and my career has been finding things that allow me to learn once and use in multiple places and be efficient. So for one of those things is React. As a React developer, I learn React, I can now build web apps, but I can also build mobile apps, desktop apps, all kinds of stuff people are doing with React. Someone, you know, is presenting how to actually build, you know, not only slides, but in a video editing software, stuff like that. You learn React, you do a lot of stuff. GraphQL, I kind of bucket in a similar way in the sense that once you learn GraphQL, you can actually jump into anyone's API, not only within your own company, but within any company. So you leave, you join another company, you know how to use GraphQL, you can immediately become productive. You look at the graph, you know what's going on. But what's even more interesting is some of the things that I'm gonna look at and show you in just a moment where people are implementing these larger and more interesting implementations of graphs and different ecosystems, and me as a GraphQL developer, I can actually go ahead and be very, very efficient in those different layers without having to learn anything. And this is something I tweeted out not too long ago, GraphQL, learn once, create, read, update, delete and subscribe anywhere. That's kind of a play on the React, learn once, you know write anywhere or whatever. I'm sorry, that was React Native. Generally, it's the same idea.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.