Building a Simple Web Application

Taking your startup idea from inception to a consumable product can be challenging, and choosing the right technologies for the application you have in mind can be even more so, especially if you don’t have a technical background. Successful startups focus on delivering the best possible user experience while being able to scale to meet market demands or pivot within short timeframes. As AWS Startups Solution Architects, we have the opportunity to chat with hundreds of startup founders and discuss how to bring their ideas to life. We are frequently asked to provide thoughts on how to bridge the gap between their ideas and the technical mapping and execution. While this is a vast topic with numerous different branching paths and parameters of which we won’t cover all, providing some context and a common language for non-technical founders and their technical counterparts is a good place to start.

In this article, we address the main requirements startups have when building web applications, explore how you can leverage AWS services to speed up the build process, and leave you with a number of resources to help guide you along your journey.

Getting Started

This is what a typical modern web application diagram looks like:

You can think about the application in two parts: the frontend, i.e. the part of the application that your users use to interact with application resources and the backend, which is where all your created resources exist.

You can have different frontends for your application to provide users with the best experience as well as take advantage of unique features that every platform offers. For example, you could create different layouts that take advantage of desktop web browsers’ larger screen real estate or mobile applications that take advantage of the cameras and GPS capabilities of mobile phones.

The backend of the application hosts the business logic and data storage layers of the application and is where you define the rules that govern your application based on your business use cases. For example, you could allow only authorized users to make a purchase for a book and deny access to unauthorized users.

To explore the main aspects of a typical web application, we use the example of a fictitious online comic book store as a reference. The goal of this web application is to allow users to buy and sell their favorite comic books, get notified when new comics books are released, and build communities with other users with similar interests. We don’t go over building all these features, but we do create the link between the business need/use case and the technology that we can use to bring it to life. To help us along the way, we leverage AWS Amplify, a set of tools and services that enable mobile and web app developers to build secure, scalable cloud-powered applications quickly and easily.

Every modern website primarily consists of HTML, Javascript, and CSS files. These are the fundamental building blocks that allow you to communicate with APIs and provide rich experiences to your users through text, images, and videos.

In our example, typical assets include pictures of comic book covers, user avatars, and user reviews, as well as the overall styling and design of the web application itself. More often than not, the HTML, Javascript, CSS, images and videos are referred to as static assets. They are served by a web server and in some cases, a Content Distribution Network (CDN). The dynamic elements of each page, such as comic book reviews and user profiles, are stored in a database and accessed through an API, which we discuss later.

Development and Deployment

An important factor when developing an application is the speed at which you iterate and release versions of the application to your users. Having a consistent and seamless workflow from development to deployment allows for much faster iterations and shorter time between releases, ensuring that users will have the best possible experience when using your application. Continuous Integration and Continuous Deployment, or CI/CD, is a set of principles, tools, and best practices that allows teams to deliver code changes more efficiently and effectively through CI/CD pipelines.

The following diagram shows a typical development workflow going from development to testing and finally to production using Amplify to easily manage different environments and development steps while maintaining progress through source control.

To effectively deliver the application to a worldwide audience and build on the right foundation and principles for the future, we take advantage of Amplify’s web hosting service, which is accessible through the AWS console or through the Amplify CLI. It integrates seamlessly with source control (such as GitHub or AWS CodeCommit), allowing for faster and smoother deployments as our application code changes with each release.

User Authentication

User authentication is the mechanism by which we allow legitimate users of our system access to the resources and functionality of the web application. Our comic store application requires users to login via username and password, and we allow users to set multi-factor authentication. This increases the security measures we take against preventing unauthorized access to their accounts. Amplify provides us with an authenticator component that, just by using it in our project, allows us to handle all these use cases.

This is what the Amplify authenticator component looks like out of the box.

By using this pre-built component, we can interact with Amazon Cognito, a fully managed user directory service that is configured through the Amplify CLI. Through Cognito, you can also use other social identity providers such as Twitter, Facebook, or Google accounts to allow your users to log in and safely access their account, making the user onboarding process simple and friction-free.

API

Now let’s look at the next area of functionality: how we get the data from our database to the user and vice-versa.

Application Programming Interfaces, or APIs, are the way that a web application communicates with resources (such as databases) in the backend environment. Web APIs typically come in two flavors: REST and GraphQL. REST, which stands for Representational State Transfer, is a mature and robust way of building APIs. Resources are broken down by multiple API endpoints that, for the most part, resemble the way you have modelled your application. In the case of our comic books store, we have a users/ and a comics/ endpoint that correspond to our users and comic book information.

GraphQL is a newer type of API that allows you to combine data from multiple sources that can be accessed through one API call. Unlike REST, it exposes a single API endpoint and allows the web application to pick any relevant pieces of information to get, resulting in optimized request sizes and a host of other benefits. Amplify allows you to configure both types of APIs. You can configure a REST API using API Gateway, a fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs. Or you can configure a GraphQL API using AppSync, a fully managed GraphQL service that allows developers to combine data from different sources and expose them through a single endpoint.

For our comic book store, we use Amplify to configure a GraphQL API.

Monitoring and Web Analytics

The last area of functionality we cover is monitoring and web analytics. As the saying goes, you cannot change what you cannot measure, and it holds true in our case as well. We need a way to understand how our users interact with our store and how we can improve their experiences. We also want to have a complete view of who our users are and what products they are interested in. For these pieces of functionality, we use Amplify to configure Amazon Pinpoint, a fully managed service that allows us to aggregate, visualize, and customize data related to our customers and our engagements. We can use this data to deepen our understanding of our customers, including how they use our web application and how our engagement efforts are performing. We can also measure the impact our engagement efforts have on our business outcomes.

Conclusion

We believe that startups should build rapidly without compromising on the standards by which they build. Through the use of the AWS services we discuss in this article, you can remove the need for undifferentiated heavy lifting and allow your team to focus on providing your customers with the best possible solution, all while delivering an excellent user experience. It is good to note that while we focused on using Amplify to interface with AWS services, it is only one of many ways that you can safely and securely build web applications.

Have fun, and build on!