State of Frontend Development with AWS

The border between backend and frontend development slowly fades out. Being a frontend developer you should often understand and implement solutions on the level of API and client-side communication. Otherwise AWS gives frontend developers enormous ready-to-use solutions making it possible to build completely backendless modules. So it’s worth it to be aware and updated how you as a frontend or mobile developer can benefit from it.

Amplify

Amplify is a huge set of tools and libraries basically for everything that you would need from Cloud for your web application. Recently it’s also a service and platform for backendless development. With Amplify you can write code for:

• React
• Angular
• Vue.js
• iOS (Swift)
• Android (Kotlin/Java)
• Flutter

All of the platforms supports following modules:

• Authentication — Cognito integration
• Storage — S3 integration
• GraphQL API — AppSync integration
• Geo Maps — Amazon Location Service integration
• REST API — API Gateway integration
• Analytics — Kinesis Firehose integration
• Push Notifications — SNS + platform specific integration
• PubSub —SNS integration
• AI / ML Predictions — Polly, Translate, Rekognition integrations

All these services exist already for a long time at AWS, but now the integration with the most modern and actual client libraries are made so easily as possible.

So if an integration with existing services is more or less a platform specific API for existing services, then should we work with data in the backendless way. Following the traditional way we should provision a database, configure, make it available for the frontend etc. But hey, we have now serverless databases such as Dynamo DB or Aurora. Basically everything that we need is just to define a schema for our database. And that’s exactly what you can do in Amplify Admin UI

Since GraphQL, which is used under the hood, describes schema of the API as well, you basically communicate with your serverless database without a backend!

AppSync

AppSync is the service introduced and launched in 2018 and became pretty much the first early GraphQL adopter after Facebook services. GraphQL is an API approach with its own type system and aimed first of all at frontend and not at backend development. GraphQL and AppSync is what made it possible to make such a powerful service as Amplify Admin. And the reason for that is that GraphQL makes it very simple to convert schemas from basically any types of databases to API schema, solving the ancient problem with writing standard dummy REST GET/POST/PUT/DELETE endpoints.

Moving existing API from REST to GraphQL

So this is how AppSync with GraphQL schema looks like

On the right side you can see GraphQL fields (basically JSON fields of your request of response). Those fields can be connected with an appropriate DynamoDB table. Since DynamoDB is a schemaless database, you can shape your API only once — in the GraphQL/AppSync schema.

So Amplify just did a nice UI for GraphQL Schema definition.

API Gateway

API Gateway (which btw is also supported by Amplify, see above) is just a REST API managed server for you.

For the last couple of years API Gateway has been also sufficiently upgraded and now you can use:

• Mapping templates
• Request / response validation
• Wide range of authorization strategies (IAM, Cognito, OpenID Connect / OAuth 2.0, API keys)
• API caching
• WebSockets
• Private integrations with other services

So it perfectly fits, if you still need to write some code and that would be Lambda Function. And since Lambda is the core of the serverless web development at AWS, let’s have a look at which capabilities and tools we have there in 2021.

AWS SAM

SAM is a IaC (infrastructure as code) framework for building and deploying serverless applications on AWS. It’s not a part of Amplify, but is a very useful way to build serverless applications, providing many best practices and out-of-the-box solutions especially for Lambda.

SAM is an extension of Cloudformation but doesn’t share its complexity and provides by default many best practices and shortcuts and what is extremely useful — environment for local testing and debugging. So e.g a Lambda Function would look so:

Serverless Framework

It’s worth to mention also about the most popular non-AWS serverless framework which work in a similar way as SAM — giving a quick start with Infrastructure as Code for serverless components like Lambda, API Gateway etc, usually for building APIs. The most sufficient difference between SAM and Serverless is that the last one provides support of multiple cloud providers and not only AWS. So our Lambda with Serverless would like something like this:

Both of them also support convenient CLI and local run.

So AWS has made a really big progress building simple low-entry services for developers, who are not deep in DevOps/Backend and AWS itself. So you can really focus on your business logic, build it fast, scalable and cheap.

We at Thinkport have big expertise in production serverless solutions. Check out our workshops including AWS for Frontend developers with a deeper approach and hands-on experience.