React Advanced

React Advanced Conference 2022

Learn how to build web apps from design in Figma to deploying to AWS while moving very fast. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build a Fullstack App Fast with Modern Tools

Christian Nwamba

Web developers are forced to fit in a box. At some point you have to focus on either being a frontend engineer, backend engineer, etc. On the other hand, we are creatives and we want to explore. How can Amplify help you break out of that box and work on whatever you want, from design to deployment without losing momentum? by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Blurring the Lines Between the Web Developer Roles

Hey friends, how are you all doing? Quick show of hands if you consider yourself a front-end developer. I think that's actually a very dumb question to ask because I'm literally at a conference called React Advanced. By the way, my name is Christian Nwamba, like she already said, and I'm a Senior Developer Advocate at AWS, focusing on AWS Amplify. But the reason why I asked you that question was because I had a follow-up one, and that is, how many of us consider ourselves as full-stack developers? All right. So, the thing with this term is that, for me, is I strongly think I'm a full-stack developer, but the problem is I end up having this image living rent-free in my head. And the reason for this is we've spent a lot of our experiences as front-end developers doing one thing right, which is crafting amazing user interfaces for customers. But then you want to also do all of this other thing on the side that helps you become a better quote-unquote developer. So, we want to be considered full-stack developers, and just like Ubina said, blurring the line between back-end and front-end. And on the other hand, it's unfair to discount all your efforts because you feel like you are not good enough to be considered both a front-end and a back-end developer. And that's why today, just in a few minutes, I'm going to give you a lot of tools that are still going to make you look amazing before your peers while sticking to what you know how to do best and then having the best tools to help you do a better job at being a back-end developer. And speaking of which, I just taught a workshop for React Advanced a few days ago. And in just one hour and 30 minutes, literally just one hour and 30 minutes, I know some of you were at the workshop here, we were able to design, code, ship, and test a full-stack application with authentication and authorization. And that's just one hour and 30 minutes. And we were able to do all of this free of charge. Yeah. And this was all possible because of this cool thing called AWS Amplify. Now, Amplify can meet you at any of these stages. It can come right before you start working on your app, at the middle or towards the end where you just want to deploy stuff. But for the workshop, we started way ahead from just the first thing. We took a design. Now, this is the part that's going to blow your mind, so just put on your seatbelt. We took a design from Figma, popped the link from that design into Amplify. And what Amplify did was grab all the components in that Figma project and turned them into React components. Like, if you've ever done this in your life, it takes a lot of time. It takes a lot of fiddling with Figma, fiddling with styles, fiddling with storybook to get it right.
But in just literally like five to ten seconds, every single component in your Figma project was converted to React components.

And then the next thing we were able to do was to set up a database, model our database, and then bind data from that database to those components.

So at the end of the day, all we just did was run an Amplify pull command, which pulled all those components and the data model to a React project.

And then what happens is all you have to do is just render a component, and that's all.

And this, inasmuch as this is a very good thing, it feels like we are robbing control from the developers. Like, we want to be in charge, right?

And the cool thing is that every single thing is flexible.

There are no black boxes.

The actual React code are available for you to render them manually.

And not just this, we are also able to use things like Amazon Cognito to back up the authentication.

So basically all you have to do is go to AWS Amplify and flip a switch, and then you have authentication available in your project. There is no setup required. There is no configuration required from Cognito.

And then you all know the infamous S3. Same thing. Just flip a switch, and you have storage configured for you. You just need to run a pull command, and then you are good to go.

And all of this, it's easy to deploy everything by just running one command to AWS. AppSync, actually, not Amplify, Amplify is just what helps you aggregate all of these services. But at the end of the day, you are deploying to AWS.

You are deploying to AWS AppSync. You are deploying to DynamoDB. You are deploying to S3. You are deploying to Cognito.

So Amplify is just one dashboard that helps you do all of these things without having to be both a front-end developer, at the same time deal with the stress of being a back-end developer.

And that's it.
Thank you so much for listening.
Thank you.
Thank you.
Thank you.
Thank you.
Thank you.