What’s new for web & mobile app developers with AWS Amplify

hey everybody, welcome. i'm ali. i'm gonna be the one talking to you today. i work all day, every day on aws amplify, i lead developer advocacy, growth, developer, education, and the docs. so if you have feedback on any of those areas, please let me know or the product in general, i have been on this team for about 3.5 years. so i've gotten to see a lot of growth in amplify over the years and fun fact, this is my first talk in person back from maternity leave. so i uh a little bit rusty. ok? but i want to get to know all of you.

so first if you can go to this link and enter in this code, i'll give you about 45 to 60 seconds to talk about what role you are in. oh, there we go. here's some answers. a lot of you are full stack developers. that's what i did as a career before becoming a developer advocate as well. i was a full stack software engineerer using mostly python and javascript. so i definitely relate to you all there and a lot of front end developers as well. and some mobile folks and some cloud folks too and other. that's fair.

ok. i have another question for you while we're doing a pop quiz here. what is your experience level with aws amplify? have you used it before or are you newer to it? oh, cool. here we go. that, that was faster than 10 seconds. i love it. uh, a lot of folks are brand new or learning it and then some folks are using it in production. so that's really exciting to see. we'll start at the beginning then and talk a little bit about what amplify is.

then we'll go into a bunch of the brand new features that we've launched over the second half of this year, mostly in the last week or so.

ok. so our agenda amplify follows this life cycle of develop ship and then extend. so we'll talk about all of those parts of the life cycle today.

so development, we're gonna talk about the second generation of amplify which we just announced. we're going to talk a little bit about how you can use generative a i to build amplify apps faster. we'll talk about the javascript v six library, which i'm really excited about as well.

then once we're done developing we're going to ship. so we're going to talk about our front end hosting and some launches that we've had there around server side rendering.

then we're going to talk about how you go beyond amplify and use some of these additional features. so aws cd k, how that works with amplify and also we're gonna talk a little bit about some database choices that you can make now with amplify as well.

so again, three parts of the life cycle that amplify helps out with first off develop.

so this is a big one. amplify, helps to build full stack apps. it's a modular collection of capabilities. so you can add in things like data authentication, authorization storage to build what you need for your end customers. and it helps to make this quicker and easier than using uh all these services alone, then you can also ship with it. so you can redeploy your app on every get push and then scale service with the full power of aws. everything under the hood is a full complete aws service deployed in your aws account. so it's not like you're gonna have to migrate off of it once you get to a million users or something along those lines and all these building blocks you can use either all together, they work really great there, but you can also use them independently.

so if you just want to connect to your s3 bucket and build out a u i for it, you can do that with amplify. if you just wanna host your front end app, you can do that with amplify or you can build out your full stack application with it as well.

so a little bit of a diagram of what this might look like. first, you have your front end hosting and amplify it can help with that. then you have your app's front end. so you might build that with view or next js or react. or if you are a mobile developer, you might use android or flutter or i os. so you build that out like normal, then you can use amplify to be that middle layer between your front end and your back end.

so you can use our prebuilt u i components for things like building authentication flows. you can use the libraries to for example, make graph ql calls to your cloud backend. you can also use fig a to code. so if you want to go from a design to code really quickly with react, you can use amplify for that as well and then there's the backend layer.

so off data storage are the biggest categories. there are other ones too like geo and predictions. um but i think every app has off data and storage. so i'll spend a lot of time talking about those ones. uh and behind the scenes again, those use services like amazon, s3, dynamo db and amazon cognito.

there are two ways to build app back ends with amplify. the first is visually through our console called studio. so you can build out data in a, using that in storage as well. and then there's also a command line interface that you can use if you're more comfortable with that.

and in one application, it might look something like this where you have a login form built with the u i components. then the authentication on the back end is enabled ver via the amplify studio. then behind the scenes, you don't have to interact with this part directly, but it will build out an amazon cognito user pool for you.

then you might have data displayed to your users and you can use the amplify libraries to do that. you can enable it via the cli and then behind the scenes, your data will be using amazon uh dynamo tv.

then for images, you can also use the libraries to display those and store them and then that's a s3 bucket behind the scenes and then front end deployment, fully managed. so you just uh ship your front end.

ok? so with all these launches again, i'm gonna frame them in this development life cycle. so let's talk about some new features for developing first. also, i have like 13 demos. so you'll see a lot of code in this one.

the first announcement that i want to make is the biggest one. so we just announced the second generation of our backend building capabilities and this is available in preview. a lot of the other launches are going to be framed in this light. so i wanted to start with the big one instead of building up to it.

um and there's a lot of capabilities with this that are going to make the developer experience a lot better and i've been working with it and i do really think that the developer experience is awesome with gen two.

so this developer freeview allows you to build code first. so instead of using a cli or a user interface, you write code and then automatically it will uh provision those backend resources for you. and i'll show you a lot of what that looks like. you can see a little bit of the backend code and front end code on here already. but we'll do a lot of videos as well.

and this was all completely inspired by feedback from users like you all. so it really will help to address a lot of the uh feedback that we got with the previous versions of amplify.

so some of the features, it's first a typescript first file-based approach. and with typescript, you get type safety and also a really great developer experience with intellisense in your text editor. so you can import things really easily.

um and it's also file-based. so in your codebase, you will have a backend resources folder that has all of your amplify code in it in files. so a really nice thing for developing is that there are these per developer cloud sandboxes.

so as you're building, it'll automatically deploy all your changes on every single save in the cloud, you can iterate a lot faster in this way. and we've also unified deployment. so your back end and your front end can be deployed at once with any get push that you make.

uh it also has a brand new, very beautiful console. uh i've been really enjoying just looking at it. it's purple now and all of gen two is built with aws cd k. so extensibility is built in, you don't need to run anything extra in order to use the cd k to use any of the ews services that aren't default supported by amplify.

ok. so i showed you that diagram before of how amplify works. well, front end hosting stays the same, the u i libraries u i components fig meta code, all that stays the same. the part that changes is that the back end can now be done with code in this gen two preview rather than via a cli or studio.

ok. let me show you a little bit of how this works. so i'm going to build out a next js app. i've been using next j apps to build everything recently. i've been using the flags instead of the like uh different options that you can have. so building out an xjs app and once i'm there, i'm going to run the brand new amplify, create script. what this is going to do is generate a new amplify project for you. i'm saying in my current directory and that's how you build an amplify app.

once i run that i can open up my text editor and you'll see that uh amplify directory was created just like before with two directories within there, a resources dot ts file for data and one for a, these are the files that you'll be building. all of your amplify back end in. there's a lot of comments kind of teaching you uh how to build with it, which i really appreciate as a educator myself.

ok. so first to build a backend schema, i want to build out a trivia app. so i'm going to make a question and a model will make a typescript model for you.

um and as soon as this is deployed, it will be backed by a dynamo db instance. so each one of my questions will have text and in this case, the text is gonna be string.

uh the answers are also string and required and um an array field so i can have multiple answers for each trivia question. then the correct answer will also be a string.

then i can add authorization just chained on to here. so this a dot allow owner is going to make it so that whoever created a question can update and delete it. i also will allow public for reading so anybody can do the trivia, but only those who are signed in can create new questions. and just like that i have my back end data.

uh defined for this application. so i have this question and you can see the typescript and as i was typing, you could see the uh typescript suggestions coming up as well. so intellisense was suggesting uh a dot string comes next or um these are the different options that you can have for a field. then the authorization modes down at the bottom, this was automatically generated by amplify as well. and it has all the information about what i'm going to use for authorization. so in this case, the default is gonna be api key, i could change this to user pool instead if i wanted.

ok, let's do a so you can set up external providers with amplify. i for example, am going to do a verification email subject, verify your email. so this will be a custom email subject line and i can do this just with one line of code. so whenever a new user signs up, they're going to get a email and it's going to have this as the subject line.

um you can do different providers like i said, multi factor authentication, all those things in this format, which uh it is pretty nice. i think.

so the next part is per developer, cloud cloud sandboxes. so if you've ever worked with cloud resources before in development, if you make too many changes, you might clobber over another developer on your team, this prevents that issue.

so every single person on my team as we're developing an app together is going to have their own cloud sandbox and as you iterate, this sandbox is going to deploy resources for you.

uh we did the math and it's about eight times faster than it was to deploy resources through the previous version of amplify. so it's pretty fast to develop with this and it's also isolated. so you're not going to step on any other developers toes as you build.

ok. so what this looks like is i am going to run the command npx, amplify sandbox. as i develop, this will be running in the background, you can see it kind of going and then whenever i change anything in my code.

so for example, i change my uh content format or add a done field to my to do list our hello world in our uh docs right now is the uh to do so done. it's going to redeploy in my cloud sandbox and this one took about 10 seconds, i believe to redeploy my model in the cloud, the dynamo db table is updated and now i'll have two fields that i can store content and done.

so this is the development experience that uh you'll have when using amplify gen two preview. and once you're ready to stop developing, you can shut down your sandbox. and it'll ask you if you want to tear down all the aws resources that were created in that sandbox, which is really handy if you're like me and hit your s3 bucket limit like every day,

um it'll tear down all those resources for you when you shut down that sandbox.

ok. so then the front end, the front end code looks something like this. i can build out the generate client function. and that will give me a type client instance to interact with my data. so my questions, i can do await client dot models dot question dot list and that will give me a list of all of my questions back.

and that's the what the api looks like for interacting with my data on the client side for my authentication. i'm gonna use our with authenticator component and it's a higher order react component

So I'll just wrap my creek questions component in that. And whenever I want to, um it's gonna have a full user flow for me, I'll show you that in a second. Ok? So that one line of code with authenticator gave me this authentication component with sign in and create account. This is fully theme. So it's like teal by default, not pink. I made it pink because uh you know, uh I'm going to add in uh my email password and then I'll need to confirm my password and then in my email, you'll see the verify your email for trivia. I'll have a password code here and then my form will be here.

I again want users to be signed in before they create trivia questions and I want to announce a couple other new things first off anybody else just like hate making forms because like I really do. Um one of my favorite new things that we've launched is this change password component. So very similarly to that with authenticator component, where you can add a full sign in sign up flow and just like one line of code, you can do the same thing for changing passwords now. And that's the the component that's generated by that. And there's also a delete user component. So if you want to have a delete user flow within your app, you can add that with just delete user in your app. Ok?

Speaking of not liking writing forms, I'm gonna talk about form generation in this amplified gen two. So what I'm going to do is whenever I want to build a form for any of my amplified built data, I can do npx generate forms. That's gonna create a directory for me that has a delete form, a create form and an update form. All I need to do is add that question, create form to my react code and then it's going to build and then once I'm in my app, it'll have this form for me with the text, the create answers and then it will do um the array field as well. So I can add multiple uh answers right here as well. So for anybody else that hates writing forms and styling forms. This will do all of that for you, which is a big help and a big time saver.

So any amplified data amplify generate forms and it will create that create form, update form and delete form for you. Ok?

So all together my trivia app looks something like this. Anybody know amplifies age 2017 and then um my score looks like this so I can build up that full stack trivia app with amplify pretty quickly. Ok?

I wanna talk about javascript v six and this is now generally available. You've seen some of this. I've been writing it in the client side of my code, but uh this is another recent launch and I want to talk a little bit more about it. So first off, we've reduced all the bundle sizes for the javascript library, which was a big customer request of ours. There's also improved typescript support since I know so many front end developers are using typescript now. And next j si feel like every new react app is using next js now. So we've really doubled down on making that experience really great. And also there is custom o i dc. uh So if you wanted to connect to like octa, for example, for authentication, you can do that now with amplify as well. uh and you can see a little bit that the api has changed as well with this type script support. So uh you can see like the intel o sense is really working in this gift here. Ok?

So smaller bundle sizes, just how much have they reduced. So this is something that is really important for your end users as well, having a small bundle size so that your application is lightweight and fast. So we compared jsv five versus jsv six and this was the results. So uh data, for example, is 58% smaller, went from 91 kilobytes to 38 kilobytes. uh they improved the tree shaking on this. So um if you only want data, you can just load the data part of amplify or if you just want off, you can just have a um then for some other pieces, uh o had a 42% reduction in bundle size and um analytics was 42% notifications was 41%. So a big reduction in bundle sizes for amplify with jsv six.

Then with next js, there is now support for the app router pages, router and middleware. So no matter how you're building your next js app, you can use amplifies libraries with that. uh I know i have been playing a lot with the app router recently and it makes that experience really nice as well. Ok?

You can also use amazon code whisper to generate amplify code. So you probably saw that as I was typing, but I'll show you again. So as I was building out my schema you can see that it suggested a dot model in code whisper. So code whisper has been trained with amplified data and it can help out with suggesting uh here as well. So i've been using that when i've been building new amplify apps as well. It's been really speeding up the process.

You can also use amazon q to answer amplify questions as you're building as well. And I've also been trying this out for a while here. So uh one thing that i do is that explain functionality. So this is the uh text editor vs code extension and i will do the explain hot key and it will explain exactly what my lines of amplify code are doing. So in this case, my data model and it'll explain all the authorization rules and all that. So that saves a lot of google time in my development process. Been pretty cool to see that as well.

And one that's near and dear to my heart, we completely redid the amplify doc site. So if you go to docs dot amplify dot aws, first off, it's re themed. So it looks totally different and it's been reorganized by use case instead of the different tool and categories. So build a back end or uh how amplify works, how to add authentication to your app. These different guides have been built out so that you can build end to end applications with amplify using the examples on there. And um the how amplify works guides have been added as well. I had that as a project myself this year and those are pretty cool. They show you kind of an explanation of what amplify is and what all the different pieces are. So I would definitely check that out if you are new to amplify and that exists both on the new dock site for amplify g gen two and the old dock site for the gen one of amplify as well. So both have been redesigned and re architected. Ok.

We've talked a lot about what you can develop and how with amplify. Now, I want to move on to shipping. So full stack gba deploys this is how amplify gen two works. So you'll have your git repository with different branches as you build and each one of your git branches will correspond with uh deployment environment if you want. So your git repo will be your source of truth for your full application uh very similar to how front end hosting has worked historically with amplify and now that's full stack hosting. So for example, if i have four people on my team, um the they could all we could all be contributing to the same git repository have different branches and then different deployments that correspond to those branches fuck. uh and full stack c i cd with that as well. And this is the default, but if you want to build your own deployment pipeline or use one that you've already built, you can do that now with the amplified gen two as well.

So let's look at what this experiment experience looks like. So I've got a full stack amplify app in a github repo. I'm gonna create a new deployment instance linked to a github repo, authorize the amplifier to do that. Choose the branch that i want to deploy in this case mean, but it could be any branch. um it'll automatically detect that i was using xjs. And then after the deployment time runs, i'm going to have this interface and my trivia app will be live.

So again, i love the purple. I think it's really fun. Once i'm in there, there's this unified management console so i can see my deployed resources. So like any of the cognito user pools, uh dynamo db, all that will be listed there and then you can manage uh the data that's coming soon, the u i library and all those things are directly within the console there. So it's all in one place, your front end and your back end deployment.

In addition, we've added a unified flow for secrets management. So in your front end code base or your back end code, your amplified code base, uh you can use the secret function to connect to any of your secrets. So for example, this is using facebook authentication, you would need a client id and a client secret for that. And you can store those within the new secrets flow and you can add those directly within the console and behind the scenes, they will add it to um secret storage and then on your front uh in your app code, you can just use that secrets function so that speeds up that process. For sure.

Again, you can add custom pipelines, there's mono repo support, but you could use github actions or uh aws code pipelines or amazon codecatalyst to deploy your full stack apps across regions or across aws accounts. And this allows you to set up trunk based employees. That's something that customers have been asking for. So you can use amplify default setup really quickly and easily or you can set up your own custom pipeline if you want instead.

Um and again, this works for mono repos as well. If that's how you have your app set up, what you can do is just uh disconnect the branch and then add your own custom pipeline there. I can um then another announcement that i am so excited about. This is a huge one that folks have been asking for is that you can now host any server side rendered app with aws amplify, not just next js apps.

So what we've done is we've built out a deployment spec that a hosting provider or you or sorry, a framework or you individually as customers can build out that spec according to that spec and then deploy any app using it. So there's a spec for static assets, uh compute image optimization and routing rules. So again, not just limited to next js for hosting ssr apps anymore.

And next has already watched amplify support. So if you use the latest version of next today, you will be able to deploy to amplify really quickly and easily they have this amplify adapter built in. So here's what it looks like to deploy a next app with amplify hosting.

So uh this is just the amplify hosting, landing page. This is information about the build spec and the configuring build settings for next apps. And this is the next documentation that tells you about this process as well. So you can go to either resource to learn about these things.

Then we're gonna build out just a hello world next app with an event handler here with ssr. Then this is the aws console. We'll go in and add post a new app. We'll choose github, we'll push our uh project to github, choose your branch, your build settings. This is the old console.

Um you could also do it with a new console experience as well. It's up to you, but then you can save and deploy and your next app will ship as soon as the deployment process finishes. So i know that that was an issue with a ton of up votes that we had in our uh github. And so really, really excited to be able to provide next support for the view developers out there.

Another feature that i'm really excited about is wildcard subdomains and this helps with building out sas apps um and custom domains for your amplifier app. So here's a demo of this.

Um so you have an app uh deployed with amplify hosting, then you can go to domain management, manage subdomains and you can have the star here and that will allow you to have any subdomain within a domain. So for example, if you have like a profile app, one of my coworkers uh did this, which is why it's his twitter account. But uh this app has a and middleware set up with next js. So you can see that um he's written some next or next js code here and the parameter will be the user string. So whatever the user's user name is.

So whenever you go to user code based, you'll see this like user profile page and it's going to, he wrote the code so that it will redirect to a subdomain instead. So now you can see that it goes to the subdomain uh code beast dot a i app.com or whatever.

So again, within the console, when you build apps out and host them, you can add in that wild card subdomain and then build out these sas type apps where different subdomains lead to different pages. So you don't need to specify those subdomains upfront. I've done this a lot for customers in my software engineering career. So i know that this is probably something that will appeal to a lot of folks.

Also, i talked about this for gen two, but gen one also supports mono repos now for hosting. So as you host your uh web apps using um yarn workspaces pm pm, turbo repo and nx, you can now use amplify hosting to deploy those as well. Ok.

The last part scaling. So now you've got your app developed and shipped. What else can you do with it if you find that you need more aws than just amplify provides? So a big thing is that amplify, gen two is now completely built on top of aws cd k or cloud development kit. So in fact, the data and off capabilities wrap cd kl three constructs. So you can use those l three constructs directly. And in fact, we recommend if you're building a brand new amplify app today before gen two goes into g a that you use those data in a constructs.

And so extending to use any service using cd k requires no extra code. So this example here is for uh amazon location service, this is what that would look like um to use amazon location service with cd k and one i have been using a lot in my code is amazon bedrock. I'm sure a lot of you have been as well, but i wanted to build out a chat app that would recommend conferences for my developer advocates to speak at. And what you can see is that i uh have a resolver here which is a lambda function under the hood. And i will be able to say like we, i want recommendations for this conference. It has some more information on that request. And then on the other side is the cd k code that i need to connect to bedrock right there. And then i can call that directly within my graph ql code or my typescript code that defines my back end. So i have been finding this really, really handy um when you're building out gen a i apps, you need more than the gen a i. You usually need a front-end layer too. I've been finding amplify, does a really good job of making it so that you can build out these sandboxes um like building out the chat prompt with the u i components. And all of those things has been a really nice experience with amplify.

Also the new l three data construct uh supports post graphs. And my sql i know post graph is one of the databases that is nearest and dearest to my heart. And i'm very excited to see that amplify uh l three constructs with cd k. You can now use post graph or mysql databases.

Uh you take an existing one and then you store the uh credentials in systems manager and then you can build out a graph qlep i to interact with them and that's look something like this. So you can see the sql query within there, like for listing meals, select star for meals where name is like something and then add your a rules or authorization rules right there as well. So that's another launch that i'm really excited about and i'm really excited about the future of amplify with sql databases as well.

Thank you all so much for coming and again, i'll hang out and answer any more questions that you have one on one after.