The evolution of full-stack development with AWS Amplify

To cater to the delivery of increasingly fast and personalised experiences, the way web applications are built and rendered has evolved significantly over the years. Along the way, the role of the developers who build them has also changed to reflect this evolution. In this post, you will learn about the progression of full-stack web development and how AWS Amplify enables developers to adapt to the rapidly changing web application ecosystem and the needs of their users.

Server-side rendering in the early days

In the 1990s and early days of the Internet, web applications were primarily server-side rendered applications. This started with static content where HTML files were stored in the server and were then downloaded by the browser client. To serve dynamic content, developers started to use server programming languages (such as ASP, Java, PHP and Ruby) to render the HTML. This introduced the idea that applications can be dynamic based on the user. The application can retrieve data from a database, and serve that data tailored to the end-user. As the number of application users grew, performance became a challenge. With every interaction, users were required to conduct a full page reload resulting in a slow user experience. In addition, developers needed to manage the operations, security, and scalability associated with the server.

Client-side rendering and the rise of Single Page Applications (SPAs)

In the 2000s, a foundational client-side rendering approach, known as Asynchronous JavaScript and XML (AJAX) emerged. This enabled applications to fetch data asynchronously, without the need for page reloads. In the mid 2010s, the search for faster and more personalised web experiences continued. This led to JavaScript-based frameworks such as React and Vue. These frameworks introduced the transformative approach of building Single Page Applications (SPAs). Unlike traditional multi-page applications where each user interaction required the server to send a full new page, SPAs load the necessary user interface components up front and then dynamically display content as users interact with the application. This made user interactions more efficient and seamless.

This approach also demonstrated a more efficient way of managing applications. Here, the frontend is decoupled from the backend. In addition, it can leverage advancements in edge computing and can be deployed to Content Delivery Networks (CDNs) to better serve global traffic, while being highly scalable without the need to manage infrastructure.

The re-emergence of server-side rendering

While client-side rendering improved user experiences, it introduced certain challenges. Firstly, the initial render of dynamic content can take longer to fetch and then render client-side. Further, the application may not be optimized for search engines as the initial render is typically an empty shell without content.

As a result, new server-side approaches emerged, but with enhancements. First, Static Site Generation (SSG), which generates static content at build time. As static files can be served via CDNs, this can also improve the ability for your application to handle global traffic. Then, Server Side Rendering (SSR) started to re-emerge in applications, generating content upon a user request. This enables you to serve fast, up-to-date and personalised content. These approaches also benefit from the advent of serverless computing, where you are able to run code without worrying about managing the underlying infrastructure.

The rise of full-stack frameworks

As covered, there are pros and cons to both client-side and server-side rendering. It can therefore be challenging to decide how to build the best experience for customers. As a result, developers increasingly look for frameworks that help them to take advantage of these rendering approaches. Today, popular full-stack frameworks, such as Next.js (for applications that use React) and Nuxt (for applications that use Vue.js) provide an opinionated approach to data fetching, rendering and caching. These can be done with the convenience of a single codebase, reducing the heavy lifting associated with having multiple stacks and deployments. For example:

• Next.js API Routes allow you to intuitively create a public API simply by creating a file for a function in the /api/ folder.
• Next.js App Router and React Server Components (RSC), allow you to use the directives use client and use server to indicate where components should be rendered.

Iteration velocity and adapting to changing customer needs is vital to success. With the rise of full-stack frameworks, developers can continually shift focus from writing code to creating great products.

AWS Amplify: everything you need to build full-stack web, mobile and AI apps

In addition to a framework, developers need a platform that makes it easy to iterate and deploy to the appropriate cloud infrastructure for their needs. AWS Amplify provides easy-to-use libraries and hosting platform to connect to a cloud backend on AWS. This includes APIs, storage and authentication. As the application grows, Amplify provides extensibility with infrastructure defined with AWS Cloud Development Kit (CDK). With Amplify, developers can scale their applications to millions of users without the need for deep cloud expertise. Amplify supports zero-config deployment for popular frameworks like Next.js and Nuxt, and takes care of deployment across Amazon S3, Amazon CloudFront and AWS Lambda.

At re:Invent 2023, AWS Amplify launched a public preview of its Gen 2 developer experience, which is now generally available. Taking onboard feedback from the developer community, the changes enable faster iteration and releases with greater confidence. This includes a code-first developer experience which avoids the friction of CLI tools, and enabling AI assistance from services like Amazon Q Developer. It also includes capabilities such as personal cloud sandboxes for rapid iteration through local testing, and file-based convention to help you manage both your frontend and backend in one place.

Evolving to the generative AI era

With recent advancements in generative AI, developers are once again presented with new challenges in delivering fast user experiences. Firstly, generative AI foundation models can take a long time to respond, so you need to consider asynchronous and streaming patterns. Further, you may need to additionally orchestrate connections such as memory of a user’s conversation history. These challenges highlight the importance of using a modern framework and platform. They help integrate and adapt to the capabilities that you need to provide a compelling experience for your customers. Here, Amplify uses AWS AppSync, a managed GraphQL service, which provides asynchronous communication and queries to databases and APIs, and Amazon Bedrock, to provide API access to leading foundation models. To learn more, see this example full-stack application.

Conclusion

In this post, you learned about the evolution of application development on the web. You began by delving into the origins of server-side applications, client-side applications, and the subsequent but adapted return to server-side approaches. You explored how full-stack frameworks can help you build and scale applications in the cloud, taking advantage of emerging technologies from serverless, edge computing and generative AI. Ultimately, this evolution enables you to build fast, personalised and AI-driven user-experiences.

To get started, build your own full-stack web application with AWS Amplify’s new code-first developer experience.