There's a lot that goes into building a modern application: the frontend for users, data persistence, user authentication and authorization, business logic, cloud deployment, and much more. The AWS Amplify Admin UI allows users to create and deploy an offline-ready application backend in clicks and then extend it with code, lowering the complexity of fullstack development for frontend and mobile developers. We'll build a fullstack application backed multiple AWS services including Cognito, Appsync, and S3 in minutes.
Create an Application Backend in Clicks with the Amplify Admin UI
AI Generated Video Summary
Today's talk introduces the AWS Amplify Admin UI and low code development, which aims to simplify backend web development. The AWS Amplify Admin UI is a powerful tool backed by AWS services, allowing users to create a database schema visually and test locally. The Amplify CLI and Datastore enable developers to link the backend to their code easily. Low code development in Amplify makes coding more accessible and fun. Amplify offers benefits such as direct use of AWS services, extensibility, and excellent GraphQL service. Other interesting topics include server-side rendering support, environmental management, and support for Node.js and Python in AWS Amplify.
1. Introduction to AWS Amplify Admin UI and Low Code
Today's talk is about the AWS Amplify Admin UI, which allows for backend web development with ease. AWS Amplify is a set of tools targeted at front-end and mobile developers. It combines frameworks and serverless to make web development easier. Another exciting development is low code, which aims to generate code and reduce the need for repetitive tasks. This revolution in web development will make developers' lives easier and more efficient.
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.
2. Creating a Database Schema and Testing Locally
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 be developers. The AWS Amplify Admin UI is not a flimsy toy, but a powerful tool backed by AWS services. To follow along, go to sandbox.amplifyapp.com. Our first step is to create a database schema using a visual interface. You can add fields, make them required, and create relationships between your data. Finally, you can test locally and choose the type of application you want to create.
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.
3. Installing Amplify CLI and Exploring Datastore
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.
4. Linking Backend to Code
You don't need to be an expert at any of these technologies. The next part is to link your back end into your code. It's called copy and paste driven development because you can see the code snippets generated by Datastore or the Admin UI. It's cool that many front end developers are getting into the cloud.
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.
5. Excitement about Low Code
I'm excited about low code because it's a progression in my career, making it easier for developers to code and be builders. Code generation is a huge part of Amplify, allowing people to write real code using a visual interface. This makes development more accessible and fun.
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.
6. Amplify SSR Launch
7. Benefits of Amplify over Firebase
Amplify offers the main benefit of using AWS services directly without any additional layer of abstraction. You can customize DynamoDB, Lambda functions, and S3 directly from the AWS console. This leads to great extensibility and you don't have to move off Amplify as your project grows. The GraphQL service is also excellent for interacting with data.
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.
Branching, TOTP, and Functions
There is great environmental management built into branching and source control in AWS Amplify Admin UI. You can have multiple branches with different environments and merge them. There are articles in the documentation for more information. The front end hosting component allows for redeployment on GitHub push. Regarding TOTP setup, you can write your own custom authentication code within a lambda function. Functions in general work the same as AWS lambda functions, and you can add them at multiple stages. They can be triggered by events like hitting a URL or database changes. A full REST API can be built within a lambda function using 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. 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.
Using Node.js and Python in AWS Amplify
Node.js and Python are supported in AWS Amplify. You can use Amplify update auth to add a Cognito trigger to your authentication flow. Offline sync with IndexedDB and DynamoDB is facilitated by AWS AppSync, which acts as the middle layer for syncing data. IndexedDB provides browser storage, while AppSync handles the GraphQL layer. Thank you, Ali, for the insightful talk and answers. Join Ali in his speaker zone on the special chat.
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.