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.

This talk has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

The speaker of the talk is Nader Dhabit, a web and mobile developer who has worked at AWS and recently started working at Edge and Node.

The primary focus of the talk is on using GraphQL to create a cloud programming interface, turning the cloud inside out.

Some benefits of using GraphQL mentioned in the talk include type validation, real-time capabilities, query efficiency, self-documenting APIs, and consistency across different APIs.

GraphQL offers a consistent API endpoint, hiding the complexity of multiple microservices behind a single GraphQL server. It provides benefits like type checking, real-time capabilities, query efficiency, and self-documenting APIs.

In the blockchain and decentralized finance space, GraphQL is used to query blockchain data efficiently. The Graph is an indexing protocol that allows developers to build and publish open APIs called subgraphs, making blockchain data easily accessible.

Common use cases for GraphQL as an API gateway include integrating multiple systems behind a single API, working with third-party APIs, and querying blockchain data. It simplifies the client-side developer experience by providing a unified API.

The two main ways to build APIs in the cloud using AWS are through the API Gateway service, which is a REST API service, and AWS AppSync, which is a managed GraphQL service.

Benefits of using AWS AppSync for building serverless GraphQL APIs include built-in security, authentication and authorization, built-in subscriptions, scalability, resiliency, and a serverless payment model.

Recommended tools for deploying GraphQL APIs in AWS include AWS CDK, AWS SAM, AWS Amplify, and serverless framework. These tools simplify the deployment and management of cloud resources.

You can find more information about the topics discussed in the talk by checking out Nader Dhabit’s YouTube channel (youtube.com/you/natterdabit), his GitHub (github.com/dabit3), the AWS mobile blog, and the Amplify docs.

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.

Read also

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 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
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
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
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
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Watch video: The Epic Stack
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 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 2021React Advanced 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 Kuznetsov
Mikhail Kuznetsov
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.