Create an Application Backend in Clicks with the Amplify Admin UI

Hey, today I'm going to be talking about the AWS Amplify Admin UI, which allows you to do backend web development in clicks. So, I'm Alyse Fiddle, I am a Senior Developer Advocate who leads and manages the AWS Amplify Developer Advocacy Team, and I get to work on this admin UI as a part of my job, which I find really, really exciting. I feel really lucky to be able to do so.

So, our goals for today's talk is to build a fun application, and talk about some underlying AWS services that go into this admin UI, and then also learn a little bit about Amplify. So first we're going to go ahead and create some data, we're going to model a backend schema, then we're going to test it out locally, so you can do this step without having an AWS account or anything like that, and then we're going to deploy it to the Cloud so that anybody could use our application, and then we're going to manage our data using the admin UI.

So AWS Amplify is a set of AWS tools that is targeted specifically towards front-end and mobile developers. So I know AWS traditionally has keynote towards mostly back-end stuff, but this is going to make it so that developers like me or you who focus mostly on the front-end could focus on it. And so we started out with the AWS Amplify command-line interface, which allows you to provision these cloud resources using your command-line. More recently, we've also rolled out this admin UI, which is a little bit more friendly to somebody who wants to work in the browser or who wants to use a visual tool to create their back-end first instead of starting in the command-line.

So, full-stack web development is evolving. So at the beginning of my career, the web was going through this transition where we started using more and more frameworks like Ruby on Rails and Django in order to quickly create back-ends for our application. And before that, it went through this transition where it was no longer static and people started using PHP and cold fusion to plug variables into their HTML templates and make things a little bit more dynamic using database data. And then, even more recently, there has been this serverless revolution which has made it so that you no longer need to manage as much as your infrastructure as you used to have to. And AWS Amplify combines a lot of the developments from frameworks and serverless and brings the best of them together to make web development a little bit easier. And I have a lot of fun working with these types of things because it makes it so that I can build faster.

And a new revolution within web development that I'm really excited about is low code. And I think it's a lot of new for developers and feel a little bit of a scary term because it's like, is their job going to go away? Is it going to look radically different? I don't think so. I think we've always been developing tools to make our lives easier as developers and I see this as the next set of that, that we do code generation using these frameworks already. Like if you run NPX create next app, it creates a bunch of files for you, or if you create a new rails app, it does the same. And it starts to generate your basic template for your app so that you don't need to write the boring stuff over and over again. I think code generation goes a step further than that, where you can provision resources and create schemas based off of this code generation and make it so that you get to work on the fun business logic instead of the boilerplate that goes into app after app after app. And it's kind of a solved problem. Like it's fun to work on new things, it's less fun to work on things that have been solved a bunch of times. So that's where I get really excited about low code where maybe we can have code that writes other code and we have to do less of that ourselves as developers. So when I think of low code, I think of the tools that are going to allow us to develop in a more efficient way that we're going to meet developers where they're at, where code is truly being generated. There's not a black box or anything like that, and we make developers lives easier. So I'm really excited about that. The idea that we can write one line of code instead of hundreds of lines of code or use a command line to generate some code or even a user interface. So the less code, the better in a lot of ways as well, because code is really expensive. It leads to maintenance and bugs and I talk to a lot of startup founders and the most expensive thing early on is software engineers.

And so I think that code is obviously very, very powerful and incredibly important, and I know I've faced my career around it. But having solutions that make it so that you have to write less custom code will make it so that more people can create startups and more people can be developers as well and maybe evolve who can be a developer.

So empowering those developers with less code and then also thinking about the developers first still within that. And again, this admin UI that I'm going to show you is not this flimsy toy. That's not extensible or anything like that. It has the power of AWS behind it. It's got the same services provision that you would use without this tool. And so definitely not a toy, it scales as you do.

So if you want to follow along with me, I'm going to go to sandbox.amplifyapp.com. And I did everything with pre-recorded videos so that the demo gremlins don't come out and get me. But if you want to follow along, again, sandbox.amplifyapp.com, and you can access this afterwards in order to start your app.

So our first step is going to be to create a database schema. And we're going to use a visual interface to do that. So here I went to sandbox.amplifyapp.com and then clicked get started. And then I'm going to select data, you can also start with authentication or storage, but I think data makes a lot of sense. And then start with a blank schema. I'm first going to create a course and then add a title and a description. And both of these will be strings. I'll also create a video. So we're going to create a video course platform of sorts here where there's courses that have videos that belong to them. So the video will also have a title, a description and then an order. And this time it will be an integer. You can see all the different fields that popped up like date, time and all that. And you can also make fields required by clicking on them and then clicking is required. You can also make fields into array fields as well as if you want to store multiple things. Then you can add relationships between your data. So one course to many videos. So a course will have many videos within it, but you can also make many to many relationships or one to one relationships. Then you can click test locally in your app and you get to pick between different types of applications. So I'm a JavaScript developer, I like React, so I'm going to create a React app.

But if you were a mobile developer, you could use Android or iOS instead. You could also use Svelte or Vue or just vanilla JavaScript if that's what you're working with as well.

So then you're going to install the Amplify CLI and then pull down the sandbox ID. So this is going to link to this test application. And I don't have an AWS account for this step. You don't need to have it or anything like that. This is all just local. It's going to generate code for you.

So there's going to be this Amplify directory. And within there, there will be some other files as well. You can see this AWS exports JS. This is eventually going to have all the configuration information in it, but not yet has not been generated at this point. You can also see the models that were generated. These are in the index type script files. So it's nice for developer experience where you can import the model and it will enforce the types on that model. There's also a GraphQL schema that is generated as well, and you can update that locally or within the user interface. It follows a git-like schema where you amplify push in order to push changes to the cloud, amplify pull to pull down changes that you made in the cloud that you want to have in your local application. So again, everything at this point is just local. No chance of racking up cloud charges or anything like this, it's just on your local computer.

So this is using a couple of different things. So first, Datastore. So Amplify Datastore is a really cool tool which allows you to leverage shared data that's also available offline. So it's going to automatically sync across users for you if you have a database set up, but you can also just use it to store local data if you want to have offline-only data. It's going to by default for WebStore in IndexedDB, which is in your browser. The API for that can be a little bit clunky working with it. And so Datastore has this nice wrapper on it where you can automatically sync data between IndexedDB and your eventual database without having to do any additional logic yourself. That's backed by AppSync which is a GraphQL engine on AWS. And so if you like using GraphQL, that's another piece of this as well. Then the data layer is DynamoDB, which is a serverless key value-pair document database, which is a lot of words, but it's really, really powerful and very scalable as well. You don't need to know about any of these.

You don't need to be an expert at any of these technologies that are all being used behind the scenes. I just wanted to mention them because it's not magic. This is what it's being backed by. So the next part is to actually link your back end into your code. So let's go ahead and do that. So I call this copy and paste driven development because you can go in and see these code snippets that are generated by Datastore or by the Admin UI.

One thing about this, Alie, this is surprising or this is, yeah, what you were expecting? There you go. I feel like that's a lot, that's more than I expected. But it's really cool that so many front end developers are getting into the cloud. Yeah, it's exciting. We hope more front end developers go into the cloud because it can be super interesting. Yeah, for sure.

So we have, why are you excited about low code? I'm excited about low code because I think it's just this progression in my career of us moving to these frameworks that have better and better developer experience and allow developers to develop their own code. And allow developers to do more and more. Whether that means the opinionated frameworks like Ruby on Rails or Serverless or any of these things. And as somebody who used to teach code as my full-time job, I was a boot camp instructor for three years. It's hard to learn how to code. It takes a huge on-ramp and there's so many different things for you to learn. And so if we make that easier and easier and make it so that there's more of a visual component of that, so more people can be builders. That's what excites me, this idea that we can expand what it means to be a developer. And we still need to meet developers where they're at. And there's this idea of code generation where you have code that writes other code and that's a huge part of what Amplify does. And so if we can use a visual interface that allows people to behind the scenes write real code, I think that that's really cool and a really big progression in the world of development. Yeah. And it also makes things more accessible for people and it's more fun in the low code.

And another question we have for you is, can you talk a little bit about the Amplify SSR launch? Yeah. So last week, two weeks ago, time is so hard to measure. We launched a server side rendering support for Amplify. So now you can both host server side rendering apps. And behind the scenes, a Lambda at edge function is created that runs the server side and acts as your server. Though it's serverless. So I find that kind of funny, like you have the serverless server. Anyways, well, behind the scenes, serverless has servers. You don't have to worry about them. But we also have a bunch of the user interface components that can also work on the server side. So authentication and some of our data components as well, which allows you to build a super performant web apps using something like or using Next JS. And it makes it so that the end user gets to use, gets to essentially use HTML. But you get the great developer experience of JavaScript and React and all those things. So I'm excited about that.

Yeah, sounds very exciting. The next question is from Iechi. Great talk and well explained. It looked quite similar to Firebase. Why is the main benefit of using Amplify over Firebase? Yeah, I would say that behind the scenes, everything is AWS. And so you have a DynamoDB database that is provisioned in the AWS console. And so if you want to do something custom with DynamoDB, you can go straight to that and customize it from there. The same thing with Lambda functions. The same thing with S3 and all these things. They are the full AWS services under the hood. There's no additional layer of abstraction or anything like that. You can go directly within the AWS console and use these resources, which leads to a great extensibility story that heals with you. You don't never have to move off of the Amplify if your project gets big enough. So I think that's one of the huge benefits. I would also say that our GraphQL service is really great as well. It allows you to interact with your data using that format. And so I'm excited about that as well. Yeah, nice. So people should try Amplify.

The next question is from Johanna Watt. How does it work with branching and source control? Yeah, so there's great environmental management built into it. So you can have multiple branches and have different environments within those branches. So if you want to have like a production environment and a test environment and a development environment, you can have those different environments and then you can merge them. So you have different resources provisioned within those. And you can still use your get branches, you can work with multiple developers, all of that is built in. There are bunches of articles about this within the documentation if you're interested in learning more. Also there's the front end hosting component, which I didn't talk about too much in this talk. But with that, there is the ability to redeploy every time you push to GitHub. So that's a really nice feature as well. And you can have multiple branch deployments as well.

Thank you. Another question is, is there a component when setting up TOTP that generates the QR code image? That's a great question. That sounds like something that's a little bit more mobile specific, which is a little bit outside of what I do as a mostly JavaScript person. That being said, there is the ability to get in there and write your own custom authentication code within a lambda function. And so I'm sure you could implement something like that within there.

Thank you. I think we don't have any more questions. Oh, no, I have one more question. Can you please talk about more functions in general? Which step is the process of using the application? Would a user be able to add functions? Would all of these be performant? Yeah, so they would just work the same as a normal AWS lambda function. So the performance would convert over from that. You can add them at multiple stages so it's event-driven. So you can make it so that the function triggers whenever somebody hits a URL, for example. It would use API gateway in order to be able to do that. You can also have lambda triggers based on a different event. So for example, a user is created or an item is created in the database and you can configure all of that as well. You can also build a full REST API within a lambda function within Amplify, if you want. So what you can do is amplify add function in the command line, and then you can write your custom code within there. You can use a couple of different languages. So Node.js, Python.

There are a couple others supported as well. Those are the two that I've used though, Node.js and Python. So that is how you would use those. You could also do Amplify update auth, for example, in order to add a Cognito trigger to your authentication flow.

Okay. And the next question, I think the last question as well, how is offline sync done with Indexed.db and DynamoDB using service workers? That's a great question. So I'm not sure exactly how that's working, but the middle layer is AWS AppSync. So it's the GraphQL engine that is doing the syncing between the two. So IndexedDB again is in browser storage, and it allows you to store more than something like local storage. And then a layer back from that is AppSync. AppSync is the GraphQL layer. It is going to automatically sync the data online, offline, and then behind the scenes from that is the DynamoDB layer. So hopefully that helps a little bit.

Well, thank you, Ali, so much for this great talk and for these great answers. I hope a lot of people learned a lot from you. And so go ahead and join Ali in his speaker zone on his special chat. The link to join is in the timeline.