Rapid Development on AWS: React, Node.js & GraphQL AWS Mobile Hub, Amplify, and AppSync Overview

Transcript from the "AWS Mobile Hub, Amplify, and AppSync Overview" Lesson

[00:00:02]
>> Steve Kinney: So we're going to talk a little bit about some terminology. As you saw when I did the drop down before, Amazon has no shortage of services. There was a whole bunch I could put in alphabetical order. It didn't make you feel any better about the number of them.

[00:00:15] It's increasingly growing, and it's already overwhelming. We're only gonna talk about a few, which is kind of a cheat because the few that we're gonna talk about are actually wrappers over many more. But they kinda fall in a few different buckets. But when you have that many things in a given service, you tend to have ones with very similar names and the boundaries between them are a little fuzzy.

[00:00:39] So what we'll do is first come just talk about them each almost like definitions of what each one is. And you'll see there is some overlap and sometimes you're using two of them in conjunction to get a job done, totally cool. And if at one point you're kind of confused on the different boundaries between them, that's probably normal.

[00:00:59] But let's actually just take a little bit a time to kind of look at each one of them. So the three that we're gonna spent most of our time with today, and again, I told you that's a lie because they wrap other ones, is AWS Mobile Hub, which is targeted as letting mobile application developers get up and running really quickly with industry standard best practices.

[00:01:20] Now I would argue that front-end web developers fall into that same bucket. I think that there's no difference between a single page react app and an iOS application, right? They are effectively applications that are installed on the client that talk to a back end API. So, what is good for mobile developers, even my bread and butter today, we don't a mobile Singrid app.

[00:01:40] I'm a desktop JavaScript developer, but everything that applies for mobile developers works for me just as well. So it doesn't really matter either way. Amazon, AWS Mobile Hub is an abstraction over a number of different services. We're also gonna talk about AWS Amplify and AWS AppSync. We'll look at each one of these individually.

[00:02:00] So the first is AWS Mobile Hub. This is an abstraction for managing a database service on AWSA, identity/auth indications/authorization service on AWS. It's one for managing S3 buckets. It's basically a way to kind of spin up all of these services with good configurations, configurations that will get you from user one to user ten million with a scalable architecture out of the box.

[00:02:27] And what's really cool about some of this AWS Mobile Hub stuff is that, while some services might be like a black box of how they actually work, you're getting a real DynamoDB, you're getting a real S3 bucket, you're getting like weapons grade CloudFront distributions. You're getting everything that we use at Singrid for building all of our applications.

[00:02:48] You're getting it with a command line tool to initialize, push it up to the web, everything is kind of configured and set up for you, which is very, very cool. And basically what Mobile Hub is, it's an abstraction over that. It's got a dashboard that you can look at.

[00:03:02] It's got a command line tool to spin things up. It's pretty cool. The command line tool, for us we're gonna be focusing mostly on the JavaScript aspect of this. Mobile Hub kinda targets four-ish platforms. It targets Swift/iOS development, Android development, React Native, which can kind of be Android and iOS, and React web development.

[00:03:27] All right, so kind of the four major platforms. We're gonna be looking at it from the perspective of just React web developers, but those are kind of four platforms that it targets. And it's basically for, again, spinning up these back-end services easily. And so the awsmobile-cli is an npm module that you install globally.

[00:03:44] And it basically gives you an awsmobile command line tool. And from there, you can initialize projects, publish them to the web, all sorts of stuff. You can install either. If you feel like npm, it's npm install -g awsmobile-cli. If you're into yarn, yarn add global awsmobile-ci it's the same code, it's just how you wanna get it installed on your system.

[00:04:06] AWS Amplify, again, is a JavaScript library, and it's basically JavaScript code that you can use to interact and control AWS services. And it lets you talk to an S3 storage layer, it will let you talk to an API, will let you handle authentication. It's basically JavaScript bindings for working with AWS in general and Mobile Hub in particular.

[00:04:34] There's also AWS Amplify React, which is a bunch of React components that are also integrated with Amplify. And there's also, if you're into React Native, aws-amplify-react-native which is react native components for building native mobile applications. There's a lot of overlap. When you initialize a project with the AWS mobile CLI, it will automatically install AWS Amplify, which is the JavaScript library.

[00:05:06] And if it senses that it is a React application, it will also install AWS Amplify React. So setting something up as an AWS mobile project will also get you the Amplify library, Amplify helps you talk to AWS mobile hub. You can already see how some of these boundaries are beginning to blur a little bit.

[00:05:27] The last one, which we'll talk about at the end, is AWS AppSync, which was officially announced in November along with Amplify and effectively allows you to create GraphQL as a service. So GraphQL is very cool. Scott Moss has a really great workshop on setting up a server. This allows you to actually spin one up very quickly.

[00:05:47] If you want to do more complicated stuff, then you definitely need to watch Scott's workshop. But it allows you to basically say, hey, I'm gonna have this data, it's gonna look like this. It'll actually go ahead behind the scenes. It will create the DynamoDB databases for you and set everything up.

[00:06:00] It will actually, out of the box, support real-time push. If something on the database changes you can actually subscribe like, I wanted to know when this model changes. Hey it changed, and you can handle it in your code. And you get that all out of the box for free.

[00:06:13] If you kind of use some of the more, like heavy weight GraphQL client libraries, like Apollo, you can actually get offline first, and caching, and stuff along those lines as well. We're just gonna look at some of the basics. You can kinda define the schema and say hey, create me all the DynamoDB databases that I need in order to use this GraphQL schema.

[00:06:34] Or if you already have Elastic Search in place and you wanna use that, or Lambda functions are basically little snippets of code that you can execute when stuff happens. So if you have a custom back-end and you just want GraphQL, and you want to have the subscriptions and the notifications and stuff along those lines, you can actually write your own lamda functions to hook on to your existing back-end, right?

[00:06:54] So we're gonna use the DynamoDB, out of the box cuz we don't have a legacy back-end and that's not my real idea of fun today. We'll actually just spin up the database as we need as fresh as we go.
>> Steve Kinney: AppSync can be used with Amplify a Mobile Hub, it doesn't necessarily need to.

[00:07:12] It actually has its own JavaScript library if you just wanna use it by itself. So you can kinda mix and match and integrate any of these. Amplify is aware of AppSync, so is Mobile Hub, so they all kind of blend and can work together. But the really cool thing is, unlike some other services, let's say for some reason you want to go really custom, you can just peel away the abstraction layer and you have, again, DynamoDB databases, everything along those lines and do stuff yourself.

[00:07:39] And you're gonna customize and tweak stuff, it's not like a black box where you can't really see what's going on. Cool. So again, let's just kinda review that real quickly. What does Mobile Hub offer? Again, it's an abstraction of a bunch of different services. It's an abstraction over AWS Cognito, which is their authentication service, which handles all sorts of crazy authorization.

[00:07:59] You can put different users in different groups, and they can say these users have the right to do this, these users have the right to do this. And it can actually work with federated identities, like Facebook Login or Google Login. Really cool, really like, really easy to set up with Mobile Hub, but if you need to get a very granular, it's incredibly powerful as well.

[00:08:19] Storage is just a wrapper over the infamous AWS S3, which is one of the oldest services that AWS offers as a way to put files on the internet, as well. Serverless functions, which we're also gonna call it cloud API. Again, Frontend Masters has a whole course on serverless.

[00:08:38] But we can actually spin up API's really quickly using a combination of AWS Lambda and API Gateway. Databases out of the box will usually be DynamoDB, which I've mentioned a few times. It'll also support hosting out of the box, not just hosting in one location, but actually globally distributing your application.

[00:08:55] So everywhere people around the world can access it quickly, and not just have to travel all the way around the world, depending on where they are. Finally, and we're not going to play too much with this one today, supports analytics and notifications. A lot of native mobile platforms support push notifications.

[00:09:09] The web does, but it's kind of a little more tricky. But Pinpoint will actually let you track users' actual moves and different things that they're doing in the application, which is fine for regular analytics. But you can say, I saw you looked at this product, or this restaurant.

[00:09:23] And then you can send them a text message or something along those lines. You can actually figure out really interesting and unique ways to engage with your users. That one is only available in us-east-1, which is one of the reasons that we're not going to be using it too much today.

[00:09:36] Amazon has many, many data centers, and so a lot of times, not all the time, some things are global. But in a few cases, you can host your code at this one data center, and that data center may have all of the Amazon services or a subset of those.

[00:09:52] We'll actually define that as we set everything up. And so finally, just to kind of review, we talked a little about AWS Mobile CLI, just a command line interface for working with Mobile Hub. Amplify is at JavaScript library for using it in your code, and we're ready to get started.