As frontend developers, we are constantly looking for possibilities to improve scalability, performance and development speed. Managing files, providing quick access to them, testing functionalities on different devices or dealing with data can be challenging, especially in growing projects.
These and many other problems can be solved by cloud services, led by AWS, which is one of the most popular solutions of this type. But is AWS able to support the frontend development?
The answer is: yes, absolutely. Below, I am briefly going through the services that can help us with key frontend development tasks. Finally, we will focus on AWS Amplify, which seems to be the most comprehensive from a frontend developer perspective.
1. Amazon S3 for comprehensive storage
Amazon Simple Storage Service (S3) is an object storage service in the cloud. It has a lot of advantages, including:
- scalability: unlimited storage capacity
- availability: 99.99% uptime by default
- security: encryption on rest and in transit by default
For frontend development, S3 serves as both a hosting solution for static websites and a storage platform for various files, such as PDFs or photos, offering a convenient platform for storing all critical resources in one place.
Perfect examples include websites featuring photo albums, or repositories for contracts or legal documents. With S3, we can securely store all these files, version them (e.g. we can rollback anytime we want) and even manage permissions by setting access to all or specific files for any user.
Also in the context of frontend development, a great advantage of S3 is easy connection to Amazon CloudFront - I explain why below.
2. Amazon CloudFront for faster file loading
If you want to enhance your application performance or improve SEO metrics by loading graphics faster, Amazon CloudFront is what you are looking for. Amazon CloudFront is a content delivery network (CDN), which is a solution that speeds up website and file loading by serving them from the location that is closest to the user. This service is thus great for building global applications.
How does Amazon CloudFront work?
- User makes a request, e.g. opening a website
- Amazon CloudFront checks whether a given resource is in the cache of the user's closest edge location.
- If so, the server returns the files immediately. If not, the files are downloaded from the source and saved in the cache for future use.
Also it can be integrated with AWS Shield and AWS WAF important security services. By default, this integration provides the following benefits:
- early rejection of unwanted requests which reduce traffic in your application
- protection before DDoS attacks
- blocking suspicious IP addresses
- protection before bots attacks and web scraping
When combined with S3, Amazon CloudFront can be an excellent solution if you are developing an application with a huge amount of static files such as PDFs or photos, as it significantly reduces loading times.
3. AWS AppSync for connecting application with data and events
Do you use RestAPI and experience over-fetching and/or under-fetching? AWS AppSync, a fully managed service that supports work with GraphQL technology, can help you ensure you download exactly the data you need.
In addition, if you have data sources in Amazon DynamoDB (NoSQL database) or Amazon RDS (SQL database), AppSync will be able to connect to them easily. Of course there is always the possibility to create your own connection but still the benefit of this service is a standardized way to get data by your teams. E.g. If your company has multiple development teams, all of them can fetch data in the same way. This standardization simplifies onboarding when developers switch teams or projects, lowering the technical entry barrier and reducing costs.
AppSync also supports web sockets and MQTT, which allows us to receive information in real time. This is especially useful when we create functionalities such as chats, notifications or dynamic charts, e.g. stock prices or currencies rates.
4. AWS Device Farm for easier testing on multiple devices
AWS Device Farm is a service that allows us to test web and mobile applications on real devices. Unlike using emulators, it allows us to better test products in real conditions. It means that businesses won’t need to buy a lot of different smartphones or tablets to conduct those tests, ultimately saving money.
AWS Device Farm works pretty easily:
- Choose specific device from various options with browser you need.
- Run tests.
- You can test it automatically with frameworks like Selenium, Playwright etc.
- You can test it manually on a device in the cloud.
- AWS will provide you with logs, screenshots and other reports.
The Device Farm service is especially useful for React Native mobile applications. For regular web applications, it can be helpful when you want to test their responsiveness.
5. AWS Amplify for easier application management
AWS Amplify is probably the most comprehensive AWS service for the frontend application layer for those who look for an all-in-one management solution. Simply put, it is a set of tools and services to create, host and maintain web applications.
Amplify provides frontend apps with access e.g. to:
- hosting (AWS Amplify Hosting)
- create users (Amplify Auth built on AWS Cognito)
- file storage (Amplify Storage which is a simplified interface for S3)
- real time data and notifications (AWS AppSync, Amazon SNS)
Let’s take a closer look at how AWS Amplify supports frontend development in those areas:
Hosting
It is a service which allows you to do more things than just to host your website. Amplify is actually a robust and versatile service that goes way beyond hosting. It grants developers access to:
- CI/CD pipelines: you can use your repository on Github, Gitlab or AWS CodeCommit and release code automatically based on configuration in .yml file.
- CDN: you can use Amazon CloudFront to allow users to download your app faster.
- Staging versions of your application, created from branches in your repository.
User creation
Managing users can be difficult. In standard applications, developers must handle databases for storing users data, JWT tokens, multi-factor authentication, password security policies etc. All of these increase development time and costs.
With Amplify Auth, these features come by default. AWS Cognito simplifies authentication and user management. You can choose between standard email-password authentication or social logins (Google, Facebook, etc.). By default, Amplify provides password resets, multi-factor authentication, and even CAPTCHA protection.
Storage
Typically, a frontend application depends on a backend to manage files. With the API provided by Amplify Storage you can store files in a cloud and get access to them directly from the frontend. This solution is using S3 to do it and AWS Cognito to provide access to them. Also it is possible to store different versions of files, allowing you to revert to the previous version if something changes, whenever you need to do that.
Notifications
AWS Amplify can use several services for asynchronous communication, including:
- AWS SNS for email or push notifications
- Amazon Pinpoint push notifications to targeting specific user segments
- AWS AppSync for WebSockets which are of course also supported
Whole AWS Amplify offers similar functionalities to solutions like Vercel and Netlify. It is a more natural choice if you are using AWS in other parts of your project.
Boosting frontend development with AWS services
AWS offers a wide range of services that significantly support the development of frontend applications, providing scalability, performance, and convenience of infrastructure management.
1. Amazon S3 allows hosting static pages and storing multimedia files.
2. Amazon CloudFront speeds up the delivery of content to users around the world.
3. AWS AppSync provides efficient real-time data management with GraphQL.
4. AWS Device Farm allows testing applications on various devices, which helps ensure their reliability.
5. AWS Amplify simplifies the process of deploying and integrating applications with the backend.
With these services, front-end developers can focus on building great user experiences instead of worrying about the infrastructure and performance of the application.
The AWS services listed in this article are just a part of an enormous ecosystem. In reality, AWS has a huge number of solutions, many of which can support the frontend development to a greater or lesser extent. Even these mentioned in this article have more options.
If you are using other AWS services to boost frontend development or have any questions, I’d love to hear about them! Feel free to reach out to me at lukasz.stefanski@rst.com.pl.
Disclaimer
The tools mentioned in this article will work best for those, who already use AWS. They may not be ideal if you’re using GCP, Azure, or other cloud services.
