English versionEN

Blurring the Lines Between the Web Developer Roles

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?

This talk has been presented at React Advanced Conference 2022, check out the latest edition of this React Conference.

FAQ

AWS Amplify is a development platform that simplifies building web and mobile applications. It can integrate with Figma by converting Figma designs directly into React components within seconds, streamlining the development process from design to code.

Yes, AWS Amplify can handle backend processes. It allows developers to easily set up authentication with Amazon Cognito, manage storage with S3, and deploy applications using AWS AppSync and DynamoDB, all from one dashboard.

AWS Amplify simplifies setting up authentication and authorization by integrating seamlessly with Amazon Cognito. Developers can enable authentication in their projects with minimal configuration, streamlining the process of securing applications.

Developing a full-stack application with AWS Amplify can be incredibly fast. For example, a workshop at React Advanced demonstrated that a complete application with authentication and authorization can be built in just one hour and 30 minutes.

AWS Amplify provides front-end developers with a range of tools that enable them to maintain their focus on crafting user interfaces while also efficiently managing backend functionalities. This includes easy deployment, backend integration, and automated component generation from Figma designs.

Yes, AWS Amplify offers flexibility to developers. While it automates many tasks, it also provides access to the underlying React code, allowing developers to manually adjust and render components as needed, ensuring they maintain control over their projects.

react web development

Christian Nwamba

7 min

21 Oct, 2022

Comments

Video Summary and Transcription

This Talk provides an introduction to the framework and tools used in full-stack development, with a focus on AWS Amplify. It showcases the ability to quickly design, code, and test full-stack applications with authentication and authorization using Amplify. The deployment process is simplified with Amplify, allowing developers to easily deploy their applications to AWS. Overall, this Talk highlights the convenience and efficiency of using Amplify for full-stack development with AWS services.

Available in Español: Difuminando las Líneas Entre los Roles de Desarrollador Web

1. Introduction to the Framework

Short description:

I'm going to give you a little taste of the framework that we're using right now. Here are some examples of the types of courses we've created in the past. So you can set your own course, and make it your own.

I'm going to briefly introduce the framework, and then we'll go ahead and get started. So this is where the first part of the talk is going to begin. So we're going to start with the tutorial, and then I'm going to introduce the developer first. So, if you're new to this, please, please, please, please welcome the beautiful Heather from the React Team. Heather is a really smart artist, and she will show you how to make a web application. So, she's a really smart artificial intelligence author. So, please welcome Heather.

2. Introduction to Full Stack Development

Short description:

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.

Hey, friends. How you all doing? Thank you. So, quick show of hands if you consider yourself a front end developer? All right. 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, and the reason for this is, we've spent a lot of our experiences as front end doing one thing right, which is crafting amazing user interfaces for customers. But then, you want to also, like, 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 Obinna 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.

3. Building Full-Stack Apps with AWS Amplify

Short description:

In just one hour, 30 minutes, we were able to design, code, shape, and test a full-stack application with authentication and authorization using AWS Amplify. We took a design from Figma, and Amplify turned all the components into React components within seconds. We set up a database and bound data to the components. The best part is, you still have control over the React code and can use services like Amazon Cognito and S3 with just a flip of a switch.

And speaking of which, I just taught a workshop for React Advanced a few days ago. And in just one hour, 30 minutes, literally just one hour, 30 minutes, I know some of you are at the workshop here, we were able to design, code, shape, and test a full-stack application with authentication and authorization. So, and that's just one hour, 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 like way ahead from just like the first thing. We took a design. Now, this is the part that's going to blow your mind, so just put on your seat belts. 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 turn 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, storybook to get it right. In just literally like 5 to 10 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 pool 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 inasmuch as this is a very good thing, it feels like we are robbing control from 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, you 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's 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.

4. Deploying with Amplify

Short description:

And all of these are, it's easy to deploy everything by just running one command to AWS AppSync. Amplify is just what helps you aggregate all of these services. 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. Thank you so much for listening.

And all of these are, 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.