Front-End Web and Mobile Development on AWS

by Mike Sweetman
13 October 2020

AWS offers a wide range of tools and services to support development workflows for iOS, Android, React Native, and web front-end developers. There is a set of services that make it easy to build, test, and deploy an application, even with minimal knowledge of AWS. With the speed and reliability of the AWS infrastructure, mobile and web applications can scale from prototype to millions of users to provide a better user experience and better solutions for the whole integrated system.

Amazon services are primarily aimed at developing web and mobile applications:

  • Ease of use and minimal energy to start. Amazon services allow you to develop an application using existing iOS/Android IDEs and web frameworks. This makes it easy to add UI components for a user-friendly interface and use the CLI toolchain to easily customize the backend.
  • Provide access to the features you need. You can use Auth, Analytics, API, Storage, Predictions, XR, and others to create rich server infrastructures. GraphQL can be used to access and integrate data in flexible ways. Amazon services offer the ability to test mobile applications on hundreds of real devices.

A scalable approach allows you to grow your business quickly with built-in AWS best practices for security, availability, and reliability; your application can easily scale from one request per second with microsecond latency around the world.

Let's look at which of the Amazon services will help in the development and operation of web and mobile solutions, as well as speed up the whole process and make it more stable.

AWS Amplify

AWS Amplify is a collection of tools and services that enable developers of mobile applications and web interfaces to build secure and scalable end-to-end systems on AWS. With Amplify, you can easily create custom workflows, develop voice interfaces, connect artificial intelligence to real-time data streams, run targeted advertising campaigns, and so on. AWS Amplify will help you develop and deliver quality applications.

AWS Amplify includes an open-source platform with separate libraries for specific use cases and a wide range of tools for building cloud functionality and incorporating them into applications, as well as a web hosting service for deploying static web applications.

Within minutes of configuring the appropriate service, a developer can automatically configure a best-in-class backend service for mobile and web applications, such as an authentication service, data warehouse, or API based on Amazon S3, Amazon Cognito, and other AWS services.

Amplify CLI seamlessly integrates with iOS and Android IDEs, as well as many popular web development frameworks, providing a guided workflow to customize the optimal backend for your applications with a few simple commands.

AWS Amplify Console

The AWS Amplify Console is a static web hosting service that accelerates the application release cycle with an uncomplicated CI/CD process for building and deploying static web applications. You only need to provide a link to the repository with your application code in the console, and all adjustments in the frontend and backend will be deployed in a single workflow every time you commit the code.

A complex application includes a frontend hosted on a single-page application framework (such as React, Angular, Vue, Gatsby, or Flutter, which is now in developer preview) and an optional cloud-based backend (such as GraphQL, REST API, file and data stores). 

These main features allow you to integrate web and mobile applications with Amazon:

  • Authentication (User Registration and Authentication)
  • Data storage (offline sync and conflict resolution)
  • API (GraphQL and REST - Accessing Data from Multiple Data Sources)
  • Storage (User Content Management)
  • Analytics (Collecting analytic data for your application)
  • Forecasting (Artificial Intelligence/Machine Learning, including text broadcasts)
  • Interactions (Conversational Chatbots)
  • Push notifications (Sending targeted messages)
  • PubSub (Post and Subscription Management)

Image source

AWS AppSync

AWS AppSync simplifies application development by letting you create a universal API to securely access, modify, and combine data from multiple sources. AppSync is a managed service that uses GraphQL so that applications can easily retrieve only the data they need.

With AppSync, you can build scalable applications, including those requiring real-time updates, using a range of data sources such as NoSQL data stores, relational databases, HTTP APIs, and native data sources with AWS Lambda.

For mobile and web applications, AppSync also provides access to local data when devices go offline and sync data when they reconnect to the Internet. In this case, the client can customize the order of conflict resolution. AWS AppSync is available in different regions.

You can develop your application in a familiar IDE (for example, Xcode, Android Studio, VS Code), and use the intuitive AWS AppSync or AWS Amplify CLI management console to automatically generate APIs and client code.

AWS AppSync integrates with Amazon DynamoDB, Amazon Aurora, Amazon Elasticsearch, AWS Lambda, and other AWS services, allowing you to build complex applications with nearly unlimited performance and storage that can change based on your business needs.

AWS AppSync provides real-time subscriptions to millions of devices and offline access to application data. Once the device is reconnected, AWS AppSync syncs only the updates at the time the device was disconnected, not the entire database. AWS AppSync offers configurable server-side conflict detection and resolution.

It is also possible to perform complex queries and generalizations across multiple data sources with a single network call using GraphQL. AWS AppSync makes it easy to protect your application data by using multiple authentication modes at the same time and also allows you to determine the severity of the threat and perform granular access control at the data definition level directly from your GraphQL schema.

Image source

Amazon API Gateway

Amazon API Gateway is a fully managed developer service for building, publishing, maintaining, monitoring, and securing APIs at scale. Applications access the data, business logic, or functionality of your backend services through the API. API Gateway allows you to create RESTful and WebSocket APIs, which are the main component of real-time two-way communication applications. API Gateway supports containerized and serverless workloads and Internet applications.

API Gateway takes care of all the tasks associated with accepting and processing hundreds of thousands of concurrent API calls, including traffic management, CORS support, authorization, and access control, request throttling, and API monitoring and versioning. Working with API Gateway does not require minimum fees or start-up investments. This only pays for the received API calls and the amount of data transferred, and you can use API Gateway's tiered pricing model to reduce application costs as you scale your API usage.

REST API and WebSocket are very important features for web and mobile application development:

  • REST API. Allows you to create RESTful APIs optimized for serverless workloads and HTTP servers using HTTP APIs. HTTP APIs are the best way to create APIs that only require an API proxy. If your API requires API proxy functionality and API management capabilities in a single solution, API Gateway also provides REST APIs.
  • WebSocket API. Allows you to create real-time two-way communication applications such as chat apps and streaming panels using the WebSocket API. API Gateway maintains a persistent communication to handle messages passed between your backend service and your clients.

API Gateway provides a tiered pricing model for API requests. At just $0.90 per one million API requests at the highest level, a developer can reduce their costs by increasing the number of API requests per region across all of your AWS accounts.

By the way, it is possible to monitor performance metrics and information about API calls, data latency, and error rates in the API Gateway control panel. This will allow you to visually control calls to your services using Amazon.

It is easy to set up API access using AWS Identity and Access Management (IAM) and Amazon Cognito. By using OAuth tokens, you leverage the built-in support for OIDC and OAuth2 API Gateway. To support custom authorization requirements, you can run the Lambda Authorization Tool from AWS Lambda.

Image source

AWS Device Farm

AWS Device Farm is an application testing service that improves the performance of mobile and web applications. It uses a variety of desktop browsers and real mobile devices, so the developer doesn't need to create his own test framework. The service allows you to run tests simultaneously in multiple browsers for desktop computers or use real mobile devices. This speeds up the testing process, which also generates videos and logs to quickly identify bugs in your application.

  • Automated testing. Test applications in parallel on multiple physical devices in the AWS Cloud. With the built-in Amazon infrastructures, the user is able to test their applications without any scripting.
  • Testing on devices that potential users work with. It is possible to run tests on a wide variety of physical devices. Unlike emulators, physical devices allow you to more accurately determine how users interact with your application while taking into account factors such as memory size, processor usage, location, and firmware or software changes made by the manufacturer or operator. The base of devices in Amazon is constantly growing.
  • Playback and quick troubleshooting. The service allows you to manually reproduce problems and run automatic testing in parallel. The service collects videos, logs, and performance data, which will provide detailed information about the problem and help you quickly solve it. In automated testing, problems are identified and grouped.

In doing so, you can set the location, language settings, network connection settings, application data, and install the required applications.

It is possible to use open source testing frameworks such as Appium, Calabash, or Espresso. Testing can also be performed manually using remote access. For automated tests and to retrieve results from IDEs, it is possible to use continuous integration environments such as Android Studio or Jenkins.

For web applications, testing is available in multiple desktop browsers and in different browser versions. This allows tests to run across multiple desktop browsers, including Chrome, Firefox, and Internet Explorer, to ensure that applications work properly across multiple browsers.

Amazon Pinpoint

Amazon Pinpoint is a flexible and scalable service for inbound and outbound marketing communications. It allows you to interact with your customers through channels such as email, SMS, push notifications, or voice. Amazon Pinpoint is easy to set up, easy to use, and flexible to fit any marketing interaction scenario.

This allows you to segment your campaign audience by customer type and customize your messages by filling them with relevant content. Amazon Pinpoint delivery and campaign metrics measure the success of your engagement. Amazon Pinpoint can grow with your business and scale to billions of messages per day across all communication channels.

Image source

Case study

Luneba has recently started working with an exciting new customer, creating for them a new product as a fully-functional, prototype website. They plan to use this product not only to get feedback from potential users and customers but also to quickly gather large amounts of data to improve their ability to train Machine Learning models central to the future of the product.  We chose AWS Amplify to greatly accelerate the development of the site while minimizing the possibility of creating “throwaway code” or incurring technical debt.  The site will immediately use the very same cloud infrastructure components which would have been chosen for a highly-scalable, production deployment. These include AWS Cognito for authentication, authorization, and user identity and management, AWS AppMesh for GraphQL API delivery providing data access needs, AWS Dynamo DB for NoSQL (JSON) data storage (via the GraphQL APIs), AWS API Gateway, and AWS Lambda for custom API development of additional business logic.  The UI portion of the code is being developed using the React JavaScript framework, for which AWS Amplify provides fully-tested, self-configuring components that tie in directly with the necessary cloud components, greatly simplifying the UI development as well. One example of this is the integration of very sophisticated website Authentication UI flows through less than ten lines of code.

All of the automation and pre-defined components provided by AWS Amplify helped us eliminate several weeks of up-front effort typically spent preparing basic infrastructure components, creating environments and CI/CD pipelines, and writing lots of UI code. This provides a huge value to the customer by reducing the overall cost, as well as reducing the time to market. 

Conclusion

Today, the development of mobile and web applications is closely related to cloud services in the form of a backend. The bulk of functionality in mobile and web applications is designed to communicate with the backend and to make calls to the corresponding API.

Amazon’s system to develop mobile applications is constantly being updated with interesting functions. It also offers an authentication system, the ability to quickly build flexible APIs via GraphQL, and the ability to test in the cloud using real devices, which is essential for testers.

Our experts here at Luneba can help you develop web applications in the Amazon Cloud and set up existing web and mobile applications on the AWS side.

Luneba’s experienced team of test engineers can help you develop and perform effective testing of web and mobile applications with Amazon infrastructure.

Contact us for all your needs to develop solutions from scratch or to transfer existing solutions to the Amazon Cloud.

Related articles.